VWSとは フォーラム Lightning [ 解決済 ] CSSでのキーカラーの指定

[ 解決済 ] CSSでのキーカラーの指定

このトピックには2件の返信が含まれ、2人の参加者がいます。6 ヶ月、 2 週間前 amimotojun さんが最後の更新を行いました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #15760

    amimotojun
    参加者

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

    #15762

    RICK
    参加者

    下記のように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
    /*-------------------------------------------*/

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

    • この返信は6 ヶ月、 2 週間前に  RICK さんが編集しました。
    #15772

    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’ が設定さればいいなあと思いました。

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

    • この返信は6 ヶ月、 2 週間前に  amimotojun さんが編集しました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)

このトピックに返信するにはログインが必要です。