先月、カスタム設定画面にアップローダーを追加する方法を紹介しました。
今回は似たような方法で、カラーピッカーを設置する方法を紹介します。
カスタム設定画面に、カラーピッカーを設置する方法を調べたところ、以下の方法がとても分かりやすく紹介されていました。
上記の方法だと、カラーピッカー1つだけを実装するのであれば、非常に簡単に実装できると思います。
動作イメージはこんな感じ。
ただリンク先の方法だと、カスタム設定画面に「複数カラーピッカー」を実装する場合は、複数のJavaScriptファイルを作成する必要があるので、ちょっと手間がかかります。
なので、「手軽に複数のカラーピッカーを設置」できるように、使いまわしが出来るカラーピッカーの生成関数を作成してみました。
以下で、詳しいコードと設置手順を紹介します。
目次
主な手順
カスタム投稿画面に、カラーピッカーを設置するには、主に以下の手順が必要です。
- WordPressのカスタム設定画面を作成する
- functions.phpにカラーピッカー生成関数を書く
- カスタム設定画面でカラーピッカー生成関数を実行する
- カラーピッカー用のスタイルを 読み込む
今回の方法は、関数を用いてカラーピッカーを生成する方法です。ですので、カスタム設定画面さえ作ってあれば、特に難しいカスタマイズではないと思います。
WordPressのカスタム設定画面を作成する
今回紹介する画像アップローダーの実装方法は、「Wordpressのカスタム設定画面」に設置するのを前提とした方法です。
なので実装を行うには以下に書かれている方法を用いて、カスタム設定画面を作成しておく必要があります。
こっちの方が分かりやすいかも。
ただ、当記事の主目的は「カスタム設定画面にカラーピッカーの設置」です。なので、今回は「カスタム設定画面の実装方法」については詳しく書かず、割愛させていただこうと思います（長くなりすぎるので）。
ですので、今回紹介するコードは、上記リンクにあるような「カスタム設定画面」がしっかりと実装されているのを前提として説明したいと思います。
functions.phpにカラーピッカー生成関数を書く
次に、functions.phpあたりに以下のコードを追記します。
//カラーピッカーの生成関数
function genelate_color_picker_tag_demo($name, $value, $label){?>
<p><label for="<?php echo $name; ?>"><?php echo $label; ?></label></p>
<p><input type="text" name="<?php echo $name; ?>" value="<?php echo $value; ?>" ></p>
<?php wp_enqueue_script( 'wp-color-picker' );
$data = '(function( $ ) {
var options = {
defaultColor: false,
change: function(event, ui){},
clear: function() {},
hide: true,
palettes: true
};
$("input:text[name='.$name.']").wpColorPicker(options);
})( jQuery );';
wp_add_inline_script( 'wp-color-picker', $data, 'after' ) ;
}
この関数は、複数カラーピッカーを何度でも設置できるように、カラーピッカー利用に必要なスクリプトを埋め込み形式で読み込みます。
引数には、以下のものを入力します。
- $nameには、設定名を入力します。
- $valueには、色の値を入力します。
- $labelには、カラーピッカーの入力を促すキャプションを入力します。
上記の関数では、wp_enqueue_script関数を呼び出してから、wp_add_inline_script関数で、カラーピッカーも実行コードを呼び出しています。これは、wp_enqueue_scriptで’wp-color-picker’を呼び出してから、カラーピッカーの実行コードを呼び出さないと、正常動作しないからです。
必ず、「カラーピッカーのライブラリコード」を呼び出してから「カラーピッカーの実行コード」が呼び出されるように、あえてこのような書き方になっています。
このような書き方だと、カラーピッカーを複数設置する場合は、wp_enqueue_script( ‘wp-color-picker’ );がコード上で何度も呼び出されることになります。
ただ、wp_enqueue_scriptを利用した場合、同じハンドル名を指定している場合は、重複してスクリプトが呼び出されないように制御してくれるので問題ないかと思います。
参考 WordPress4.8管理画面にカラーピッカーを設置する方法 | NormalBlog.net
カスタム設定画面でカラーピッカー生成関数を実行する
functions.phpにカラーピッカー生成関数を書き込んだら、あとはカスタム設定画面で関数を利用するだけです。
利用方法としては、以下のように利用します。
<?php
genelate_color_picker_tag_demo(
'header_color',
get_option('header_color'),
'ヘッダー色を入力してください。'
);
?>
カラーピッカー用のスタイルを 読み込む
最後に、カラーピッカー用のスタイルを読み込む必要があります。
スタイルを読み込むには、functions.phpに以下のコードを貼り付けます。
add_action('admin_print_styles', 'my_admin_print_styles_demo');
function my_admin_print_styles_demo() {
wp_enqueue_style( 'wp-color-picker' );
}
これでカスタマイズは完了です。
動作確認
上記で紹介したコードを実装した場合は、以下のようなカラーピッカーが設置されます。
![カラーピッカーの動作画面[4]](https://nelog.jp/wp-content/uploads/2017/10/4.gif "カラーピッカーの動作画面[4]")
例えば以下のように、複数のカラーピッカーを設置するときでも、
以下のような関数の使いまわしで実装することが可能となります。
genelate_color_picker_tag_demo(
'header_color',
get_option('header_color'),
'ヘッダー色を入力してください。'
);
genelate_color_picker_tag_demo(
'header_text_color',
get_option('header_text_color'),
'ヘッダー文字色を入力してください。'
);
genelate_color_picker_tag_demo(
'footer_color',
get_option('footer_color'),
'フッター色を入力してください。'
);
genelate_color_picker_tag_demo(
'footer_text_color',
get_option('footer_text_color'),
'フッター文字色を入力してください。'
);
まとめ
このように、カラーピッカーの生成を関数化することにより、カスタム画面に好きなだけ手軽にカラーピッカーを設置できるようになりました。
上記の方法だと、毎回「カラーピッカー実行用コード」が埋め込まれるのが気になる方もおられるかもしれません。ただ、カラーピッカーを実装するのは管理画面なので、個人的には、書き方のエレガントさよりも「楽な方法で正常動作すればよい」という感じで利用しています。
それぞれにデフォルトカラーを設定するにはどうしたら良いのでしょうか？