/ Сайтостроение / Wordpress / Поле Color Picker

Поле Color Picker

19.09.2019

104

Используем на сайте функционал поля выбора цвета (Color Picker).

Поле у страницы или записи

// Add field Color Picker for page

add_action( 'add_meta_boxes', 'mytheme_add_meta_box' );
if ( ! function_exists( 'mytheme_add_meta_box' ) ) {
	function mytheme_add_meta_box(){
		add_meta_box( 'header-page-metabox-options', esc_html__('Header Color', 'mytheme' ), 'mytheme_header_meta_box', 'page', 'side', 'low');
	}
}


add_action( 'admin_enqueue_scripts', 'mytheme_backend_scripts');
if ( ! function_exists( 'mytheme_backend_scripts' ) ){
	function mytheme_backend_scripts( $hook ) {
		wp_enqueue_style( 'wp-color-picker');
		wp_enqueue_script( 'wp-color-picker');
	}
}


if ( ! function_exists( 'mytheme_header_meta_box' ) ) {
	function mytheme_header_meta_box( $post ) {
		$custom = get_post_custom( $post->ID );
		$header_color = ( isset( $custom['header_color'][0] ) ) ? $custom['header_color'][0] : '';
		wp_nonce_field( 'mytheme_header_meta_box', 'mytheme_header_meta_box_nonce' );
		?>
		<script>
		jQuery(document).ready(function($){
		    $('.color_field').each(function(){
        		$(this).wpColorPicker();
    		});
		});
		</script>
		<div class="pagebox">
		    <p><?php esc_attr_e('Choose a color for your post header.', 'mytheme' ); ?></p>
		    <input class="color_field" type="hidden" name="header_color" value="<?php esc_attr_e( $header_color ); ?>"/>
		</div>
		<?php
	}
}


if ( ! function_exists( 'mytheme_save_header_meta_box' ) ) {
	function mytheme_save_header_meta_box( $post_id ) {
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
			return;
		}
		if( !current_user_can( 'edit_pages' ) ) {
			return;
		}
		if ( !isset( $_POST['header_color'] ) || !wp_verify_nonce( $_POST['mytheme_header_meta_box_nonce'], 'mytheme_header_meta_box' ) ) {
			return;
		}
		$header_color = (isset($_POST['header_color']) && $_POST['header_color']!='') ? $_POST['header_color'] : '';
		update_post_meta($post_id, 'header_color', $header_color);
	}
}

add_action( 'save_post', 'mytheme_save_header_meta_box' );

Вывод данного поля:

<div style="background: <?php echo get_post_meta($post->ID, 'header_color', true); ?>;">

Color Picker в настройках темы

function color_customizer($wp_customize){
  $wp_customize->add_section( 'theme_colors_settings', array(
      'title' => __( 'Theme Colors Settings', 'themeslug' ),
      'priority' => 5,
    ) );

    $theme_colors = array();

    // Navigation Background Color
    $theme_colors[] = array(
      'slug'=>'color_section_name',
      'default' => '#000000',
      'label' => __('Color Section Title', 'themeslug')
    );

    foreach( $theme_colors as $color ) {

      $wp_customize->add_setting(
        $color['slug'], array(
          'default' => $color['default'],
          'sanitize_callback' => 'sanitize_hex_color',
          'type' => 'option',
          'capability' => 'edit_theme_options'
        )
      );

      $wp_customize->add_control(
        new WP_Customize_Color_Control(
          $wp_customize,
          $color['slug'],
          array('label' => $color['label'],
          'section' => 'theme_colors_settings',
          'settings' => $color['slug'])
        )
      );
    }
  }

  add_action( 'customize_register', 'color_customizer' );

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Поле Color Picker
Сертификат SSL
Рекомендации для васСертификат SSLOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.