Поле Color Picker

Используем на сайте функционал поля выбора цвета (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' );

Поле для категории

function colorpicker_field_add_new_category($taxonomy) {
?><div class="form-field term-colorpicker-wrap">
	<label for="term-colorpicker">Color swatch</label>
	<input name="_category_color" value="#ffffff" class="colorpicker" id="term-colorpicker" />
</div><?php
}

add_action('category_add_form_fields', 'colorpicker_field_add_new_category',10,2);

function colorpicker_field_edit_category($term) {
	$color= get_option('taxonomy_category_color_'.$term->term_id, true);
	if(empty($color)){ $color='#ffffff'; }

?>
<tr class="form-field term-colorpicker-wrap">
	<th scope="row">
		<label for="term-colorpicker">Color swatch</label>
	</th>
	<td>
		<input name="_category_color" value="<?php echo $color; ?>" class="colorpicker" id="term-colorpicker" />
	</td>
</tr> <?php
}

add_action('category_edit_form_fields', 'colorpicker_field_edit_category',10,2);

function save_termmeta($term_id) {
	if (isset($_POST['_category_color'])) {
		update_option("taxonomy_category_color_".$term_id, $_POST['_category_color'] );
	}
}
add_action( 'edited_category', 'save_termmeta', 10, 2 );

add_action('created_category', 'save_termmeta', 10, 2);

function category_colorpicker_enqueue($taxonomy) {
	wp_enqueue_script('wp-color-picker');
	wp_enqueue_style('wp-color-picker');
}

add_action('admin_enqueue_scripts', 'category_colorpicker_enqueue',10,2);

function colorpicker_init_inline() {
	if (null !== ( $screen = get_current_screen() ) && 'edit-category' !== $screen->id) {
		return;
	}
	?><script>jQuery(document).ready(function ($) {
	$('.colorpicker').wpColorPicker();
	});</script><?php
}

add_action('admin_print_scripts', 'colorpicker_init_inline', 999);

Это решение сохраняет значения в таблице wp_options. Выводится значение поля так:

get_option('taxonomy_category_color_'.$term->term_id, true);

Чтобы поле работало для любой другой таксономии, нужно заменить category на слаг нужной таксономии.

Чтобы значения сохранялись в таблице term_meta, нужно немного изменить функции. Пример по добавлению поля «colorpicker» для меток товаров

function colorpicker_field_add_new_product_tag($taxonomy) {
?><div class="form-field term-colorpicker-wrap">
	<label for="term-colorpicker">Фон метки</label>
	<input name="_product_tag_bgcolor" value="" class="colorpicker" id="term-colorpicker" />
</div><?php
}

add_action('product_tag_add_form_fields', 'colorpicker_field_add_new_product_tag',10,2);

function colorpicker_field_edit_product_tag($term) {
	$color = get_term_meta($term->term_id, 'product_tag_bgcolor', true);
?>
<tr class="form-field term-colorpicker-wrap">
	<th scope="row">
		<label for="term-colorpicker">Фон метки</label>
	</th>
	<td>
		<input name="_product_tag_bgcolor" value="<?php echo $color; ?>" class="colorpicker" id="term-colorpicker" />
	</td>
</tr> <?php
}

add_action('product_tag_edit_form_fields', 'colorpicker_field_edit_product_tag',10,2);


function save_termmeta($term_id) {
	if (!empty($_POST['_product_tag_bgcolor'])) {
		update_term_meta( $term_id, 'product_tag_bgcolor', $_POST['_product_tag_bgcolor'] );
	} else {
		delete_term_meta( $term_id, 'product_tag_bgcolor' );
	}
}
add_action( 'edited_product_tag', 'save_termmeta', 10, 2 );
add_action( 'created_product_tag', 'save_termmeta', 10, 2 );


// Вывод интерфейса Color Picker
function product_tag_colorpicker_enqueue($taxonomy) {
	wp_enqueue_script('wp-color-picker');
	wp_enqueue_style('wp-color-picker');
}

add_action('admin_enqueue_scripts', 'product_tag_colorpicker_enqueue',10,2);

function colorpicker_init_inline() {
	if (null !== ( $screen = get_current_screen() ) && 'edit-product_tag' !== $screen->id) {
		return;
	}
	?><script>jQuery(document).ready(function ($) {
	$('.colorpicker').wpColorPicker();
	});</script><?php
}

add_action('admin_print_scripts', 'colorpicker_init_inline', 999);

Выводится поле так:

get_term_meta($term->term_id, 'product_tag_bgcolor', true);

Поделиться в соц. сетях: