WordPressのカスタマイズ画面にオリジナルの項目を追加する方法【テーマ開発者向け】

カスタマイズ画面にオリジナル項目を追加する

こんにちは、Soyです。

WordPressのテーマ制作においてかかせない「カスタマイザー」にオリジナルの設定項目を追加する方法を解説します。

まずは全体のコードを見てポイントをおさえよう!

function mytheme_customize_register($wp_customize)
{
    // 1:セクション(カスタマイズ画面のリスト)
    $wp_customize->add_section('about', array(
        'title' => '会社情報',
        'priority' => 30
    ));

    // 2:セッティング(オリジナル設定項目)
    $wp_customize->add_setting('logo_img');

    $wp_customize->add_setting('name', array(
        'default' => '',
    ));
    

    // 3:コントロール(設定項目の設定)
    $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'logo_img', array(
        'section' => 'about',
        'settings' => 'logo_img',
        'label' => 'ロゴ・社名バナー',
        'description' => ''
    )));
    $wp_customize->add_control('name', array(
        'section' => 'about',
        'settings' => 'name',
        'label' => '社名',
        'description' => '',
        'type' => 'text'
    ));
    
}
add_action('customize_register', 'mytheme_customize_register');

まず、mytheme_customize_registerという名前の関数の中に、3つの設定を登録します。そして、最後にadd_actionでmytheme_customize_register関数を有効にします。

その1:add_sectionで設定項目の大枠を作る

管理画面の「外観」→「カスタマイズ」をクリックすると、カスタマイザーの管理画面が表示されます。

add_sectionで、この中の設定項目の大枠(セクション)を作ることができます。

WordPressカスタマイザーエリアのセクション
$wp_customize->add_section('about', array(
        'title' => '会社情報',
        'priority' => 30
    ));

第1引数の「about」は、このセクションのIDです。あとで使用します。

「title」は、セクションの名前です。デフォルトで表示されている「サイト基本情報」や、「ヘッダー画像」というタイトルがこれに当たります。

「priority」は、表示の順番です。項目ごとに数字が割り当てられていて、その順番に並んでいます。あらかじめ用意されているセクションの順番は下記の通りです。

TitleIDPriority (Order)
サイト基本情報title_tagline20
colors40
ヘッダー画像header_image60
背景画像background_image80
メニューnav_menus100
ウィジェットwidgets110
ホームページ設定static_front_page120
デフォルト160
追加CSScustom_css200

今回、「会社情報」セクションは30にしているので、「サイト基本情報」の次に表示されることになります。

(多分、設定しなかったらデフォルトの160になるのかな?)

その2:add_settingでセクションの中の設定項目を作る

WordPressカスタマイザーの設定詳細

会社情報の中には「社名」や「ロゴ画像」、あるいは「住所・電話番号」なんかも登録したいですよね。

今回は、文字と画像を例題にするために「name」と「logo_img」の2つを追加してみました。

$wp_customize->add_setting('logo_img');

$wp_customize->add_setting('name', array(
        'default' => '',
));

nameのdefaultオプションは、項目に登録がないときに表示される内容です。

その3:add_controlで設定項目の詳細を決める

WordPressカスタマイザーの設定項目

この画像で一目瞭然ですね。

add_controlで設定する項目がそれぞれどれに該当するのかお分りいただけると思います。

$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'logo_img', array(
        'section' => 'about',
        'settings' => 'logo_img',
        'label' => 'ロゴ・社名バナー',
        'description' => ''
)));

$wp_customize->add_control('name', array(
        'section' => 'about',
        'settings' => 'name',
        'label' => '社名',
        'description' => '',
        'type' => 'text'
));

「section」は、その1で作った大枠のことです。「about」というセクションの中にこの設定項目を追加しています。

「settings」は、その2で作った設定項目ですね。これでどのsectionにどのsettingを入れるのかがわかります。

「label」は設定項目の名前、「description」は設定項目の説明、そして「type」はinputタグのtype属性です。

textにすれば文字列が入り、checkboxにすればtrue・falseを返すチェックボックスができます。

また、inputにはplaceholderやstyleをつけることも可能です。

$wp_customize->add_control('name', array(
        'section' => 'about',
        'settings' => 'name',
        'label' => '社名',
        'description' => '',
        'type' => 'text',
        'input_attrs' => array(
           'class' => 'my-custom-class-for-js',
           'style' => 'border: 1px solid #333',
           'placeholder' => '〇〇株式会社',
          )
));

さいごに、登録した項目を表示する

これまで3ステップで作った項目をfunctionの中に入れ、最後にadd_actionで有効にしましょう。

そして、いよいよ最後にget_theme_modで画面上に表示します。

<?php echo get_theme_mod('name', '') ?>

第一引数にはsettingの名前(キー)、第二引数には登録情報がないときの値です。ラジオボタンやチェックボックスのときはtrue・false、テキストのときは文字列を入れましょう。

もちろん、上記のように空文字でも大丈夫です。

参照した公式サイト:

Customizer Objects | Theme Developer Handbook | WordPress Developer Resources

テーマカスタマイズAPI WordPress Codex 日本語版

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)