WordPressテーマカスタマイザーの色設定項目の追加方法。

精力的に拡張しているWordPressのテーマカスタマイザー。まだまだ終わりが見えませんが、コツコツと頑張ってます:D

さて、今回はテーマカスタマイザーで1番触れるであろう「色の設定」項目を追加する方法をご紹介します。

1
テーマカスタマイザーの基本的な拡張方法
2
色の設定項目を追加する手順
3
設定の反映
4
まとめ

テーマカスタマイザーの基本的な拡張方法

色の設定項目を追加すると言っても、テーマカスタマイザーの基本的な拡張方法を知っていれば何ら難しいことはありません。

そこら辺は別記事に詳しくまとめているので、これから初めてテーマカスタマイザーを拡張しようと思っている方は一度チェックしてみてください:D

WordPressの外観→カスタマイズに設定項目を追加する方法！

色の設定項目を追加する手順

では、テーマカスタマイザーに色の設定項目を追加してみましょう。

下記のように関数を定義し、この中に、

セクション追加
テーマ設定
コントール追加

といった処理をどんどん追加していきます。コードを追加するファイルは「functions.php」です。

function theme_customizer_extension($wp_customize) {
  //処理をどんどん追加
}
add_action('customize_register', 'theme_customizer_extension');

POINT

すでにテーマカスタマイザーを拡張している場合、既存の関数の中に処理を追加していけばいいので、新しく関数を定義しなくてもOKです。

セクション追加

オリジナルの設定項目を追加する上で、通常はセクションを追加する必要がありますが、色のセクションがすでにあるので、新しくセクションを追加する必要はありません。

（もちろん、新しくセクションを追加して管理することもできます）

テーマ設定

セッティング名
デフォルト値

はそれぞれ任意で変更します。

$wp_customize->add_setting( 'header_background_color', array(
 'default' => '#000',
));

今回は、ヘッダーの背景色を変更する設定項目を追加するので、

セッティング名→header_background_color
デフォルト値→#000（黒）

にしました。

コントロールの追加

「new WP_Customize_Color_Control」でカラーピッカーを追加
コントール名を追加（任意の名称ですが、セッティング名と一緒にすればわかりやすいです）
sectionに「colors」を指定（新規でセクションを追加した場合はそのセクション名を指定）
settingsに先ほどのセッティング名を指定

後は、適宜変更すればOKです。

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
 'label' => 'ヘッダー背景色',
 'section' => 'colors',
 'settings' => 'header_background_color',
 'priority' => 20,
)));

サンプルコード

ここまでまとめたサンプルコードがこちら。

function theme_customizer_extension($wp_customize) {
 $wp_customize->add_setting( 'header_background_color', array(
 'default' => '#000',
 ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
 'label' => 'ヘッダー背景色',
 'section' => 'colors',
 'settings' => 'header_background_color',
 'priority' => 20,
 )));
}
add_action('customize_register', 'theme_customizer_extension');

設定の反映

さて、設定項目を追加したら、次はその設定値を反映させるコードを、同じくfunctions.phpに追加します。

新しく関数を定義し、この中に色を変更する処理を追加しましょう。

function customizer_color() {
  //処理を追加
}
add_action( 'wp_head', 'customizer_color');

CSSを追加

「処理」と書きましたが、実は、考え方はすごく簡単です。スタイルシートにCSSを追加するような感覚です。

?>
<style type="text/css">
 /* ヘッダー */
#header {
 background-color: <?php echo get_theme_mod( 'header_background_color', '#000'); ?>;
}
</style>
<?php

一見、難しいように見えますが、重要なのは、

get_theme_mod ( 'コントール名', 'カラーのデフォルト値' );

の部分だけ。「コントール名」と「カラーのデフォルト値」はそれぞれ、先ほどの設定項目を追加する段階で決めているのと同じものです。

他は、すべてわかりますよね？テーマカスタマイザーを編集しようとしている方であれば、CSSもある程度理解しているはずなので。

サンプルコード

function customizer_color() {
?>
<style type="text/css">
 /* ヘッダー */
#header {
 background-color: <?php echo get_theme_mod( 'header_background_color', '#000'); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'customizer_color');

変数を使えばコードがスッキリ

上記のコードで終わりでもいいですが、変数を使うとコードがスッキリします。こんな感じで。

$header_background_color = get_theme_mod( 'header_background_color', '#000');

#header {
 background-color: <?php echo $header_background_color; ?>;
}

サンプルコード

function customizer_color() {

$header_background_color = get_theme_mod( 'header_background_color', '#000');

?>
<style type="text/css">
 /* ヘッダー */
#header {
 background-color: <?php echo $header_background_color; ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'customizer_color');