サイトを運用していると「この部分の色を変えたい」「コンテンツの並び順を変えたい」など微調整が必要な場面が多々あります。
その度にコードを書き換えて対応していては手間ですよね･･･。
そんな時に便利なのが、テーマカスタマイザーという機能。
ちょっとした変更なら、知識のない人でもぱぱっと見た目を変更できちゃいます。
今回はサイトの色に関してカスタマイズできるように設定方法をご紹介します。
テーマカスタマイザーとは？
テーマカスタマイザーとは、サイトの見た目やコンテンツの位置などといったテーマの編集をWordPressの管理画面上からカスタマイズできる機能のことです。
無料配布のテーマでは必ずといっていいほど設置されており、直感的にサイトの見た目を変えることができるので、特別な知識は一切不要です。
サイトの背景色、メインカラーをカスタマイズできるようにする【完成形】
function theme_customize($wp_customize) {
$wp_customize->add_section( 'theme_color_customize', array(
'title' => __( 'テーマカラー', 'color' ),
'priority' => 105,
) );
$wp_customize->add_setting( 'body_color', array( 'default' => '#F9F9F9', ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'body_color', array(
'label' => __( '背景色', 'color' ),
'section' => 'theme_color_customize',
'settings' => 'body_color',
) ) );
$wp_customize->add_setting( 'main_color', array( 'default' => '#B08838', ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'main_color', array(
'label' => __( 'メインカラー', 'color' ),
'section' => 'theme_color_customize',
'settings' => 'main_color',
) ) );
}
add_action('customize_register', 'theme_customize');
//変更項目をインラインCSSで反映
function theme_customize_css()
{
$body_color = get_theme_mod( 'body_color', '#F9F9F9');
$main_color = get_theme_mod( 'main_color', '#B08838');
?>
こちらが完成形のコード。サイトの背景色とメインカラーを変更できる仕様です。
解説
テーマカスタマイザーは「セクション」「セッティング」「コントロール」という各要素をfunctions.phpに記述して登録します。
まずはアクションフックと任意の関数を記載します。
function theme_customize( $wp_customize ) {
// この中にセクション、セッティング、コントロールを追加していく
}
add_action( 'customize_register', 'theme_customize' );
セクション
次に管理画面に表示するためのセクションを登録します。
$wp_customize->add_section( 'theme_color_customize', array(
'title' => __( 'テーマカラー', 'color' ),
'priority' => 105,
) );
titleは管理画面に表示される項目名です。
priorityは設定項目の分類番号を指定します。
WordPressには既存でセクションが設定されており、新規セクションを作成するために下記の既存セクション以外の番号を設定しましょう。
（項目の並び順はセクション番号順になります）
| priority | section | セクション名 |
|---|---|---|
| 20 | Site Title & Tagline | サイトタイトルとキャッチフレーズ |
| 40 | colors | 色 |
| 60 | header_image | ヘッダー画像 |
| 80 | background_image | 背景画像 |
| 100 | nav | ナビゲーション |
| 120 | static_front_page | 固定フロントページ |
セッティングとコントロール
$wp_customize->add_setting( 'body_color', array( 'default' => '#F9F9F9', ) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'body_color', array(
'label' => __( '背景色', 'color' ),
'section' => 'theme_color_customize',
'settings' => 'body_color',
) ) );
テーマ設定を追加するには、$wp_customize->add_setting()メソッドを使います
- $wp_customize->add_setting()メソッド
- $wp_customize->add_setting($id, $args);
$id → テーマ設定のユニークなスラッグID。
$args → 設定の引数を含む連想配列。今回はデフォルトのカラーを指定しています
次にWP_Customize_Color_Control関数で設定項目を登録していきます。
- WP_Customize_Color_Control関数
-
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'任意のセッティングID',
array(
'label' => ( '管理画面に表示させるラベル名', 'セクションで指定したスラッグ' ),
'section' => 'add_sectionで記述したスラッグ',
'settings' => '任意のセッティングID',
) )
);
ここまで登録できたらWordPress管理画面の「外観」「カスタマイズ」で、設定した項目が表示されているか確認してください。
色が選択できるようになっていますが、このまま色を変更しても何も変わりません。
次に、変更後の色を反映させるための処理を書いていきます。
変更項目をインラインCSSで処理する
function theme_customize_css()
{
$body_color = get_theme_mod( 'body_color', '#F9F9F9');
$main_color = get_theme_mod( 'main_color', '#B08838');
?>
管理画面で変更した設定値を取得し、wp_headにアクションフックし、インラインCSSとして処理しています。
ここでのポイントはget_theme_mod 関数。
get_theme_mod( 'プロパティ名','デフォルト値' );
デフォルトの値を指定しておくことで、プロパティの値がない場合（まだ管理画面上から設定の変更がされていないとき）はデフォルト値が反映されます。
まとめ
今回は色を変えるだけの簡単なカスタマイズ機能のご紹介でしたが、他にもテキストやコンテンツの表示非表示をカスタマイズ出来るようにしたりと色々できます。
自分だけで運用するサイトならコードをいじって変更したほうが早いですが、複数人で運用するサイトやコーディング知識のない方でも変更したいという案件には一度導入を検討してみてはいかがでしょうか。
