ワードプレス>テーマカスタマイザでカラーコントロールを使って色を指定する

テーマカスタマイザでカラーコントロールを使って色を指定する

2018年7月27日

ワードプレスの自作テーマを作ってたんですが、テーマカスタマイザというのを最近知りました。
テーマカスタマイザとはヘッダー画像とか設定する「外観」→「カスタマイズ」の部分です。プレビュー見ながらテーマの設定を変更する画面のことです。

これは視覚的にテーマをカスタマイズできるので、初心者でもテーマカスタマイズをしやすくなるというメリットがあります。

テーマカスタマイザにオリジナルの項目を追加する

カラーコントロールとはクリックすると色がわんさか出てきて色選択できるやつです

テーマカスタマイザにオリジナルの項目を追加するときは
customize_registerというアクションフックを使います。

フックする関数の引数に$wp_customizeを指定しましょう。テーマカスタマイザのことですね。こいつにadd_settingと、add_sectionとadd_controlを使っていきます。

値の設定とセクションの設定とコントロールの作成が流れになります

functions.phpに記載していきます

ひな形はこんな感じです。この引数の$wp_customizeの関数を使って項目を増やしていきます。

ちょっと駆け足でやっていきますがコメントのとおりです。

これで項目が追加されていますが、もう一つ同じセクションで同じようにセッティングキーを扱えるようにします

これを関数内に追記します.
セクションは既に定義済なので定義する必要はないですね
新しいセッティングキーを設定して、新しいコントロールを作成するだけです

カラーコントロールもしっかり表示されています。
このカラーコントロールはクリックすると、ペイントとかでよくある例のあれが出てきます。

指定した色をCSSで使う方法

次にセッティングキーの取得をやってみます。
今回は文字色を変えるということでやっていきます

カラーコントロールで指定した値をcssファイルから読み取れないので、functions.phpに以下のような関数を作ってアクションフックを使います

 

こうすることで.study要素の文字色をmy_kyo_study_colorの設定色に変更できます。