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

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

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

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

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

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

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

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

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

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

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

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

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

セクション追加

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

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

テーマ設定

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

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

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

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

  1. セッティング名→header_background_color
  2. デフォルト値→#000(黒)

にしました。

コントロールの追加

  1. 「new WP_Customize_Color_Control」でカラーピッカーを追加
  2. コントール名を追加(任意の名称ですが、セッティング名と一緒にすればわかりやすいです)
  3. sectionに「colors」を指定(新規でセクションを追加した場合はそのセクション名を指定)
  4. 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');

まとめ

この手順を理解できれば、

  1. 見出しの色
  2. フッターの背景色
  3. リンクの色

など、どんな色でも変更することができます。

皆が皆、スタイルシートを編集できるわけではないので、主要な部分の色を変更できるように、設定項目を追加してはいかがでしょうか?

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!