CSSでのキーカラーの指定

[amimotojun]

はじめまして。
CSSで「キーカラーの指定に応じた色を使用する」ような設定は可能でしょうか。

[DRILL LANCER]

下記のようにget_optionを使用してカスタマイザーのオプションを取得し、
それをもとにPHPの関数を使ってCSSを作るという方法があります。

function my_lightning_keycolor_css(){
    $options     = get_option( 'lightning_theme_options' );
    if ( isset( $options['color_key'] ) && isset( $options['color_key_dark'] ) ) {
        $color_key      = ( ! empty( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7';
        $color_key_dark = ( ! empty( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4';
    }
    ?>
    <style type="text/css">
        .bg-main{background-color: <?php echo esc_html($color_key); ?>}
        .bg-dark{background-color: <?php echo esc_html($color_key_dark); ?>}
    </style>
    <?php
}
add_action( 'wp_head', 'my_lightning_keycolor_css', 3 );

参考になりそうな資料（？）としては
wp-content\themes\lightning-pro\inc\customize\customize-design.php
の278行目あたりにあるfunction lightning_print_css_commonが挙げられます。
274行目あたりに

/*-------------------------------------------*/
/*	Print head
/*-------------------------------------------*/

というコメントも付いているので探す際は参考にしてみてください。

• この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。

[amimotojun]

素早い返答ありがとうございます。
まずは上のコードをそのまま試してましたが、思うように動いてくれませんでした。
いろいろ確認したところ、キーカラーがデフォルトの場合、lightning_theme_options に ‘color_key’ が設定されないようです。
そこで、「! empty」の判定を「isset」に変えたところ、デフォルトのままでも通るようになりました。
（追記：外側の存在チェックのifは外しました。）

実際の利用は CSSカスタムプロパティ (変数) を使うようにしてみました。
これは今まで使ったことがなかったのですが、とりえず動いてくれているようです。

設定
--keycolor-main: <?php echo esc_html($color_key); ?>;

参照
background-color: var(--keycolor-main);

現状では、デフォルトの場合にマジックナンバーを使わざるを得ないので、キーカラーがデフォルトの場合も、’color_key’ が設定さればいいなあと思いました。

何はともあれ、ゼロから自力でやるよりも速やかに解決しました。ありがとうございました。

• この返信は5年、 7ヶ月前にamimotojunが編集しました。

[投稿者]

投稿