質問: wordpressテーマにおけるcss変数とカスタマイザーの連携
回答: 作り込まれたwordpressテーマではテーマ・カスタマイザーによるカスタマイズが提供されます。たとえば、以下のような項目です。 * ロゴ画像・ヘッダー画像の設定 * レイアウトの変更(1カラム・2カラム) * カラースキーマの変更 テーマ・カスタマイザーはユーザーに自由をもたらす機能として、wordpressの開発マイルストーンでも重要視されています。 カスタマイズの実態 さて、たとえばテーマのメインカラーを「紫」から「黄色」に変更した場合、コード上はどのようになるのでしょうか? テーマカスタマイザーapiでは `get_theme_mod( 'primary_color' )` のような形でユーザーが設定した色情報を取得することができます。 ここではwoocommerce専用のデフォルトテーマstorefrontを例にとって見ましょう。 まず、カスタマイザーではボタンの色を変更することができます。ブランドのテイストとサイトの外観を統一する重要な機能です。 !カスタマイザーで選んだボタンの色が反映されます。 では、ここで設定された色はどのようにテーマに反映されるのでしょうか。 !黄色でハイライトされた部分がカスタマイザーで選択した色情報です。 上記はソースコードのスクリーンショットですが、headタグ内にstyleタグで書き出されています。 これはwordpressのテーマカスタマイザーで伝統的に取られている手法ですが、テーマ開発者としての視点からは次のような問題点があります。 1. スタイルとデータがphpを経由してしかやりとりできない。 2. cssの修正を施した際、その記述をphpにも書く必要がある。 こうした問題を解決するため、css変数の活用に取り組んでみてはいかがでしょうか。 css変数の活用 css変数はモダンブラウザでサポートされている機能で、次のように書くことができます。 ``` /* 変数の定義 */ :root { --primary: #00aa66; --secondary: #444444; } header { /* 変数の利用 */ background-color: var(--primary); } ``` たとえばここではテーマのメインカラー、サブカラーの2色がカスタマイズ可能だと仮定しましょう。そこで「ユーザーが色を指定した場合はヘッダーにcssを書き出す」という機能をつけておきます。 ``` // カスタムの色情報を取得。 // 優先順位を下げ、css読み込みより後になるようにします。 add_action( 'wp_head', function() { // ユーザーが設定した色情報を取得 $colors = []; foreach ( [ 'primary', 'secondary', ] as $key ) { $color = get_theme_mod( $key ); if ( $color ) { $colors[ $key ] = $color } } // 色情報がなければ何もしない if ( empty( $colors ) { return; } // cssを書き出し ?>