WordPressのカスタム設定画面にカラーピッカーを設置する方法。使い回せるように関数化。

先月、カスタム設定画面にアップローダーを追加する方法を紹介しました。

先日、Wordpress開発をしているとき、カスタム設定画面にアップロード機能を実装する必要が出てきました。 なのでいろいろと...

今回は似たような方法で、カラーピッカーを設置する方法を紹介します。

カスタム設定画面に、カラーピッカーを設置する方法を調べたところ、以下の方法がとても分かりやすく紹介されていました。

WordPress管理画面にカラーピッカーを設置する方法です。環境はWordPress4.8.2で確認しました。/テーマ/js/colorPicker.js.myColorPickerクラスにカラーピッカーjsを適用させます。functio

上記の方法だと、カラーピッカー1つだけを実装するのであれば、非常に簡単に実装できると思います。

動作イメージはこんな感じ。

カラーピッカーの動作画面

ただリンク先の方法だと、カスタム設定画面に「複数カラーピッカー」を実装する場合は、複数のJavaScriptファイルを作成する必要があるので、ちょっと手間がかかります。

なので、「手軽に複数のカラーピッカーを設置」できるように、使いまわしが出来るカラーピッカーの生成関数を作成してみました。

以下で、詳しいコードと設置手順を紹介します。

スポンサーリンク
レクタングル(大)広告

主な手順

カスタム投稿画面に、カラーピッカーを設置するには、主に以下の手順が必要です。

  1. WordPressのカスタム設定画面を作成する
  2. functions.phpにカラーピッカー生成関数を書く
  3. カスタム設定画面でカラーピッカー生成関数を実行する
  4. カラーピッカー用のスタイルを 読み込む

今回の方法は、関数を用いてカラーピッカーを生成する方法です。ですので、カスタム設定画面さえ作ってあれば、特に難しいカスタマイズではないと思います。

WordPressのカスタム設定画面を作成する

今回紹介する画像アップローダーの実装方法は、「Wordpressのカスタム設定画面」に設置するのを前提とした方法です。

なので実装を行うには以下に書かれている方法を用いて、カスタム設定画面を作成しておく必要があります。

こっちの方が分かりやすいかも。

WordPress 一般ユーザ向けの「サイト設定」のカスタムメニューを作成する | hijiriworld Web

ただ、当記事の主目的は「カスタム設定画面にカラーピッカーの設置」です。なので、今回は「カスタム設定画面の実装方法」については詳しく書かず、割愛させていただこうと思います(長くなりすぎるので)。

ですので、今回紹介するコードは、上記リンクにあるような「カスタム設定画面」がしっかりと実装されているのを前提として説明したいと思います。

カスタム設定画面が正常動作していない場合は、設定値の保存などはされません。ですのでカスタム設定画面等の設置は必須です。もしカスタム設定を実装していない場合、うまく動作しなかったとしても「カスタム設定画面の実装方法」や「動作しない」といった質問にお答えするのは非常に困難です。もし、コメントで質問があったとしてもお答えできないと思うのでご了承ください。

functions.phpにカラーピッカー生成関数を書く

次に、functions.phpあたりに以下のコードを追記します。

この関数は、複数カラーピッカーを何度でも設置できるように、カラーピッカー利用に必要なスクリプトを埋め込み形式で読み込みます。

引数には、以下のものを入力します。

  • $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を利用した場合、同じハンドル名を指定している場合は、重複してスクリプトが呼び出されないように制御してくれるので問題ないかと思います。

ただし、あまり綺麗な方法ではないのかもしれません。あまり好みでない場合は、JavaScriptファイルを用いた方法をおすすめします。

参考 WordPress4.8管理画面にカラーピッカーを設置する方法 | NormalBlog.net

カスタム設定画面でカラーピッカー生成関数を実行する

functions.phpにカラーピッカー生成関数を書き込んだら、あとはカスタム設定画面で関数を利用するだけです。

利用方法としては、以下のように利用します。

カラーピッカー用のスタイルを 読み込む

最後に、カラーピッカー用のスタイルを読み込む必要があります。

スタイルを読み込むには、functions.phpに以下のコードを貼り付けます。

これでカスタマイズは完了です。

動作確認

上記で紹介したコードを実装した場合は、以下のようなカラーピッカーが設置されます。

カラーピッカーの動作画面[4]

例えば以下のように、複数のカラーピッカーを設置するときでも、

複数のカラーピッカーを設置した状態

以下のような関数の使いまわしで実装することが可能となります。

まとめ

このように、カラーピッカーの生成を関数化することにより、カスタム画面に好きなだけ手軽にカラーピッカーを設置できるようになりました。

上記の方法だと、毎回「カラーピッカー実行用コード」が埋め込まれるのが気になる方もおられるかもしれません。ただ、カラーピッカーを実装するのは管理画面なので、個人的には、書き方のエレガントさよりも「楽な方法で正常動作すればよい」という感じで利用しています。

『WordPressのカスタム設定画面にカラーピッカーを設置する方法。使い回せるように関数化。』へのコメント

  1. 名前:さや 投稿日:2018/03/28(水) 19:39:24 ID:ddf50ab27

    それぞれにデフォルトカラーを設定するにはどうしたら良いのでしょうか?

  2. わいひら 名前:わいひら 投稿日:2018/03/29(木) 12:09:16 ID:cb97eb8a2

    デフォルト色を設定する場合は、$valueに色の値を設定すればよいかと思います。

    利用例としてはこんな感じ。

  3. 名前:МA氏 投稿日:2018/06/17(日) 18:18:02 ID:3060f02df

    そのget_option($name)の使い方がわからないのですが。
    単純にスタイルにインラインでechoするものでしょうか?
    素人すぎて質問内容が分かりずらいかもしれませんが、ごめんなさい。

  4. わいひら 名前:わいひら 投稿日:2018/06/18(月) 11:10:30 ID:9089f13a3

    get optionに関しては、関数リファレンスを見た方が詳しく説明されているかと思います。
    関数リファレンス/get option

    また、値を保存するときはポストした時にupdate_optionを利用する必要があると思います。
    update_option ? WordPress私的マニュアル

    オプション用のデータベーステーブルにではなく、テーマ設定に値を保存するにはset_theme_mod、テーマ設定から値を取り出すにはget_theme_modとかでも良いかもしれません。

  5. 名前:МA氏 投稿日:2018/06/19(火) 09:03:43 ID:c3b8fa6a7

    非常に丁寧な対応ありがとうございます。
    オプションに保存して取得するぐらいは分かるのですが、恥ずかしながら超素人なもので
    オプションで取得したスタイルをこういったやり方でしか思いつかないんです。

    何かプチアドバイスしていただけると幸いです。
    あ、あと全然関係ないんですが、コメント欄のタグ挿入ボタンが、かわいくて気になるんですけど
    隠し機能か何かですか?

  6. わいひら 名前:わいひら 投稿日:2018/06/21(木) 12:44:41 ID:a8c8f66b8

    その方法で、うまくいきませんか?
    うまくいくのであれば、その方法でも問題ないかと思います。あとは、書式的な違いの話になってくると思います。
    僕も、設定で保存したオプション機能を利用して、スタイルに反映させるときは、ヘッダーでスタイルタグを用いてCSSを書いています(手法は違うけど)。

    あと、コメント欄のボタンは以下のプラグインを利用しています。
    Basic Comment Quicktags | WordPress.org