WordPressでは、標準で「wp-color-picker」というカラーピッカーが用意されています。

 

これを使うことにより、従来よりも簡単にカラーピッカーを使った値の設定ができるようになります。

 

実際にカラーピッカー「wp-color-picker」を使う手順は以下のとおりです。

【手順1】カラーピッカー定義用jsファイルを用意する

カラーピッカーの定義では、javascriptの「wpColorPicker()」関数を使います。

 

外部jsファイルを作成し、カラーピッカーを定義しましょう。

このjsファイルはあとで呼び出されるので、階層は「テーマオプションディレクトリ/js/●●.js」が好ましいでしょう。

 

wpColorPickerの基本の使い方

 

wpColorPickerのオプション

 

【サンプルプログラム】colorPicker.js

 

【手順2】function.phpでカラーピッカー構成ファイルを呼び出す

jsファイルをサーバーにアップロードしたら、function.phpで実際に読み込んでいきます。

 

この時、jsファイルだけではなく、カラーピッカー用のスタイルシートも読み込む必要があります。
これを忘れると、「WEBインスペクタで見るとカラーピッカーは存在しているのに適用スタイルが存在せず、画面上真っ白に見える」ということになります。
忘れずに読み込みましょう。

 

カラーピッカー用のスタイルを呼び出し

 

カラーピッカー用のjs定義ファイルを呼び出し

 

【手順3】実際に使う場所にHTMLで記述する

実際に使う場合は、HTMLで要素を指定します。

 

記述ルール

 

【サンプルプログラム】inputpage.php

 

【手順4】設定を保存して動作確認をする

編集したファイルをすべて保存して、カラーピッカーを配置したページを開きます。
問題なくカラーピッカーが表示され、色を選択できることが確認できれば、カラーピッカーの設置完了です。

 

カラーピッカーで選択した色をサイトに反映するには、オプション情報として色情報を保存する必要があります。
オプション情報の定義・保存・活用の方法は以下のページを参考にしてください。

 

 

 

おすすめの記事