どもです。
WordPressの機能は日に日に更新・追加されているため、実は実装されているけど認知されていないものも結構あったりします。
こんなことできるなんて、僕は最近知りました。
WordPress3.5以上から実装されているそうです。
今回はこのやり方について紹介します。
①管理画面側に設置
①カラーピッカーを起動させる
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
function admin_scripts( $hook ) {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'colorpicker_script',
get_bloginfo('template_directory').'/js/colorPicker.js',
array( 'wp-color-picker' ), false, true );
}
まずは、カラーピッカーを起動させます。functions.phpに以下の記述をします。
また、テンプレートディレクトリの中にカラーピッカー用のjsファイルを置く必要があります。
今回は、テンプレートディレクトリに/js/というディレクトリを作り、その中にcolorPicker.jsを設置することにします。
で、colorPicker.jsの内容ですが、最もシンプルなものは以下の通りです。
(function( $ ) {
$(function() {
$('.myColorPicker').wpColorPicker();
});
})( jQuery );
これだけ。
カラーピッカーにはオプションを設定することができ、その場合はこのjsに記載します。
(function( $ ) {
var options = {
defaultColor: false, //デフォルトカラー
change: function(event, ui){}, //カラー変更時のイベント
clear: function() {}, //カラークリア時のイベント
hide: true, //画面ロード時にカラーピッカーを隠す
palettes: true //カラーパレットをユーザーインターフェイスで表示する
};
$('.color-picker').wpColorPicker(options);
})( jQuery );
②カテゴリ画面にカラーピッカーを設置
続いて、カテゴリ画面にカラーピッカーを表示させます。
基本的にはfunctions.phpからカテゴリ画面に登録項目を増やす方法と同じです。
add_action ( 'edit_category_form_fields', 'extra_category_fields');
function extra_category_fields( $tag ) {
$t_id = $tag->term_id;
$cat_meta = get_option( "cat_$t_id");
?>
<tr class="form-field">
<th><label for="cagetory_color">カテゴリーの色</label></th>
<td><input type="text" name="Cat_meta[category_color]" class="myColorPicker" id="cagetory_color" size="25" value="<?php if(isset ( $cat_meta['category_color'])) echo esc_html($cat_meta['category_color']) ?>" /></td>
</tr>
<?php
}
add_action ( 'edited_term', 'save_extra_category_fileds');
function save_extra_category_fileds( $term_id ) {
if ( isset( $_POST['Cat_meta'] ) ) {
$t_id = $term_id;
$cat_meta = get_option( "cat_$t_id");
$cat_keys = array_keys($_POST['Cat_meta']);
foreach ($cat_keys as $key){
if (isset($_POST['Cat_meta'][$key])){
$cat_meta[$key] = $_POST['Cat_meta'][$key];
}
}
update_option( "cat_$t_id", $cat_meta );
}
}
特筆すべき点はinputのクラスを、先ほどcolorPicker.jsで設定したクラス名と一致させることくらいだと思います。
②テンプレート側でデータの取り出し
データの取り出しについても、他のカテゴリに登録項目を追加したときと全く同じです。
<?php $category=get_the_category(); foreach($category as $cate){?><span class="category<?php $cat_data=get_option('cat_'.intval($cate->term_id)); $cat_color=esc_html($cat_data['category_color']); if(!$cat_color)echo' nonColor'; ?>"<?php if($cat_color)echo'style="background-color:'.$cat_color.';"'; ?>><?php echo $cate->name ?></span><?php } ?>
get_option('cat_'.intval($cate->term_id)でカテゴリに登録されたデータを取り出し、
esc_html($cat_data['category_color'])でcategory_colorのデータを取り出します。
③カスタム投稿に対応させる
カスタム投稿とpost投稿で、カラーピッカー専用の違いはありません。
add_action ( 'タクソノミ名_edit_form_fields', 'extra_taxonomy_fields');
function extra_taxonomy_fields( $tag ) {
$t_id = $tag->term_id;
$cat_meta = get_option( "cat_$t_id");
?>
<tr class="form-field">
<th><label for="cagetory_color">カテゴリーの色</label></th>
<td><input type="text" name="Cat_meta[category_color]" class="myColorPicker" id="cagetory_color" size="25" value="<?php if(isset ( $cat_meta['category_color'])) echo esc_html($cat_meta['category_color']) ?>" /></td>
</tr>
<?php
}
add_action ( 'edited_term', 'save_extra_taxonomy_fileds');
function save_extra_taxonomy_fileds( $term_id ) {
if ( isset( $_POST['Cat_meta'] ) ) {
$t_id = $term_id;
$cat_meta = get_option( "cat_$t_id");
$cat_keys = array_keys($_POST['Cat_meta']);
foreach ($cat_keys as $key){
if (isset($_POST['Cat_meta'][$key])){
$cat_meta[$key] = $_POST['Cat_meta'][$key];
}
}
update_option( "cat_$t_id", $cat_meta );
}
}
<?php $terms = get_the_terms($post->ID, 'タクソノミ名'); if (is_array($terms)){ foreach($terms as $cate){ ?><span class="category<?php $cat_data=get_option('cat_'.intval($cate->term_id)); $cat_color=esc_html($cat_data['category_color']); if(!$cat_color)echo' nonColor'; ?>"<?php if($cat_color)echo'style="background-color:'.$cat_color.';"';?>"><?php echo $cate->name; ?></span><?php }}else{ /* カテゴリなし */ }; ?>
カスタム投稿用の、タクソノミに項目を追加する処理に書き換え、同じようにカラーピッカーを設置すればおｋです。
参考サイト様
hidef.jp 管理画面にカラーピッカー(wp_color_picker)を表示する
アルパカ@ラボ WordPressでカラーピッカーを使ってみる(wp-color-picker)