WordPressテーマカスタマイザーでCSSを追加・変更する方法。

プログラミング知識一切なしでWordPressサイトをカスタマイズできる機能、それがテーマカスタマイザー。

今回は、そのテーマカスタマイザーにCSSを追加・変更する機能を実装する方法をご紹介します。

カスタマイズの流れ

カスタマイズの流れはこんな感じ。

1. テーマカスタマイザーに設定項目を追加（functions.php）
2. CSSを追加（functions.php）

テーマカスタマイザーにオリジナルの設定項目を追加した経験があれば何なく終わりますよ。

テーマカスタマイザーの拡張方法については、下記記事にて詳しくまとめています。

では、早速始めましょう。

設定項目の追加

通常の設定項目を追加するように 、

1. セクション追加
2. テーマ設定
3. コントロール追加

という順番で進めていきます。

コントロールの追加

セクション追加とテーマ設定に関しては、特に問題ないと思うので割愛しますが、コントロールの追加は少し工夫が必要なので、ご説明します。

まずは、サンプルコードを見てみましょう。

//コントロール追加
$wp_customize->add_control( 'cta_image_style', array(
 'section' => 'cta',
 'settings' => 'cta_image_style',
 'label' => '画像の位置',
 'desctiption' => '画像の位置を変更できます。',
 'type' => 'radio',
 'choices' => array(
 null => '中央',
 'left' => '左寄せ',
 'right' => '右寄せ',
 ), 
));

ここで重要なのは、「type」と「choices」の値です。

typeの値

入力ではなく、「選択」してもらうので、typeの値は「radio」か「select」にします。

どちらも同じ結果になりますが、選択肢が少なければradio、選択肢が多ければselectが良いでしょう。

choicesの値

choicesの値には、CSSコードの変更する部分だけセットしておきます。

例えば、テーマカスタマイザーにfloatの値を選択できる項目を追加する場合。

「float:」 の部分は変わらないので、

1. left
2. right
3. center

のようにセットします。

ちなみに、今回の例では、「デフォルトではfloatしない」ので、centerではなく「null」をセットし、デフォルト値にもnullを指定しています。

（ここら辺は後述するコードを見れば理解できると思います）

サンプルコード

function theme_customizer_extension($wp_customize) {
 //セクション追加
 $wp_customize->add_section( 'cta', array (
  'title' => 'CTA設定',
 ));
 //テーマ設定
 $wp_customize->add_setting( 'cta_image_style', array (
 'default' => null,
 ));
 //コントロール追加
 $wp_customize->add_control( 'cta_image_style', array(
 'section' => 'cta',
 'settings' => 'cta_image_style',
 'label' => '画像の位置',
 'desctiption' => '画像の位置を変更できます。',
 'type' => 'radio',
 'choices' => array(
 null => '中央',
 'left' => '左寄せ',
 'right' => '右寄せ',
 ), 
 ));
}//終わり
add_action('customize_register', 'theme_customizer_extension');

CSSの追加

後は、スタイルシート（style.css）に書くように、CSSを追加するだけです。雛形はこちら。

function customizer_style_change() {
echo '<style type="text/css">';

 //CSSを追加

echo '</style>';
}
add_action( 'wp_head', 'customizer_style_change');

サンプルコード

function customizer_style_change() {

$cta_image_style = get_theme_mod( 'cta_image_style', null );

echo '<style type="text/css">';
if ( $cta_image_style != null ) { //CTAスタイル ?>
.cta img {
 float: <?php echo $cta_image_style; ?>;
}
<?php }

echo '</style>';

}
add_action( 'wp_head', 'customizer_style_change');

解説

管理しやすいように、変数cta_image_styleを定義し、その中にデフォルト値を入れます。

そして、値がnull以外なら（値がleftかrightの場合）、CSSを読み込むという条件分岐にしています。

もちろん、デフォルト値にcenterの値を指定すれば条件分岐をする必要はありません。（その場合、floatしない場合でもCSSが読み込まれます）

ちなみに、コントロールの追加で、変更する部分だけchoicesの値をセットすればいい理由は、下記のように「float:」の後に設定値を呼び出すからです。

.cta img {
 float: <?php echo $cta_image_style; ?>;
}

CSSが読み込まれる場所

テーマカスタマイザーで追加したCSSは、外部スタイルシートではなく、head内に追加されます。

ですので、あまりにもCSSが多い場合、

1. 外部スタイルシートに異なるクラス名でCSSを追加する
2. テーマカスタマイザーでクラス名を変更できる仕様にする

という方法が良いでしょう。テーマカスタマイザーにカラム設定項目を追加した時は、その方法を採用しました。

一方で、

1. ファーストビューで読み込まれる部分のCSSをテーマカスタマイザーで管理
2. 外部スタイルシートをbodyの閉じタグ前に設置

みたいに使うことで、ページの読み込み速度アップに効果がありそうです。

まとめ

今回の例は「floatの値の変更」でしたが、何にでも応用できます。

「この場合はどうすればいいの？」と気になった方がいれば、コメントにて質問受け付けますので、お気軽にどうぞ:D

以上、ご参考までに！(｀･ω･´)ゞ