WordPressのテーマカスタマイザーにオリジナル項目を追加する

最終更新日:
池本池本
WordPressのテーマカスタマイザーにオリジナル項目を追加する

サイトを運用していると「この部分の色を変えたい」「コンテンツの並び順を変えたい」など微調整が必要な場面が多々あります。
その度にコードを書き換えて対応していては手間ですよね・・・。
そんな時に便利なのが、テーマカスタマイザーという機能。
ちょっとした変更なら、知識のない人でもぱぱっと見た目を変更できちゃいます。
今回はサイトの色に関してカスタマイズできるように設定方法をご紹介します。

テーマカスタマイザーとは?

テーマカスタマイザーとは、サイトの見た目やコンテンツの位置などといったテーマの編集をWordPressの管理画面上からカスタマイズできる機能のことです。
無料配布のテーマでは必ずといっていいほど設置されており、直感的にサイトの見た目を変えることができるので、特別な知識は一切不要です。

サイトの背景色、メインカラーをカスタマイズできるようにする【完成形】

こちらが完成形のコード。サイトの背景色とメインカラーを変更できる仕様です。

解説

テーマカスタマイザーは「セクション」「セッティング」「コントロール」という各要素をfunctions.phpに記述して登録します。

まずはアクションフックと任意の関数を記載します。

セクション

次に管理画面に表示するためのセクションを登録します。

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()メソッドを使います

$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で処理する

管理画面で変更した設定値を取得し、wp_headにアクションフックし、インラインCSSとして処理しています。

ここでのポイントはget_theme_mod 関数。

デフォルトの値を指定しておくことで、プロパティの値がない場合(まだ管理画面上から設定の変更がされていないとき)はデフォルト値が反映されます。

まとめ

今回は色を変えるだけの簡単なカスタマイズ機能のご紹介でしたが、他にもテキストやコンテンツの表示非表示をカスタマイズ出来るようにしたりと色々できます。
自分だけで運用するサイトならコードをいじって変更したほうが早いですが、複数人で運用するサイトやコーディング知識のない方でも変更したいという案件には一度導入を検討してみてはいかがでしょうか。

池本
Posts by池本
/ WEBクリエイター

WEBサイト制作、WEBマーケティング、プログラミングなど気づけば何でも屋に。/制作サイト数は100以上
記事一覧
制作実績などのポートフォリオ
Twitter

ホームページの実績底上げ
成果向上を狙いませんか?

ウェブマーケティングのデータと、これまで築き上げた数々の経験から、実績を生むためのウェブサイトを作成致します。 お客様の予算や状況に合わせたパッケージをご用意しています。半端な見積もりだと不安なご担当者のため、明確な金額表示をしています。 稟議が不安な方などは、お気軽にご相談ください。

コメント/情報提供

コメントを残す

関連記事