WordPressでは、標準で「wp-color-picker」というカラーピッカーが用意されています。
これを使うことにより、従来よりも簡単にカラーピッカーを使った値の設定ができるようになります。
実際にカラーピッカー「wp-color-picker」を使う手順は以下のとおりです。
目次
【手順１】カラーピッカー定義用jsファイルを用意する
カラーピッカーの定義では、javascriptの「wpColorPicker()」関数を使います。
外部jsファイルを作成し、カラーピッカーを定義しましょう。
このjsファイルはあとで呼び出されるので、階層は「テーマオプションディレクトリ/js/●●.js」が好ましいでしょう。
wpColorPickerの基本の使い方
wpColorPickerのオプション
【サンプルプログラム】colorPicker.js
【手順２】function.phpでカラーピッカー構成ファイルを呼び出す
jsファイルをサーバーにアップロードしたら、function.phpで実際に読み込んでいきます。
この時、jsファイルだけではなく、カラーピッカー用のスタイルシートも読み込む必要があります。
これを忘れると、「WEBインスペクタで見るとカラーピッカーは存在しているのに適用スタイルが存在せず、画面上真っ白に見える」ということになります。
忘れずに読み込みましょう。
カラーピッカー用のスタイルを呼び出し
カラーピッカー用のjs定義ファイルを呼び出し
【手順３】実際に使う場所にHTMLで記述する
実際に使う場合は、HTMLで要素を指定します。
記述ルール
【サンプルプログラム】inputpage.php
【手順４】設定を保存して動作確認をする
編集したファイルをすべて保存して、カラーピッカーを配置したページを開きます。
問題なくカラーピッカーが表示され、色を選択できることが確認できれば、カラーピッカーの設置完了です。
カラーピッカーで選択した色をサイトに反映するには、オプション情報として色情報を保存する必要があります。
オプション情報の定義・保存・活用の方法は以下のページを参考にしてください。
