テーマカスタマイザーにパネルを自作する方法【WordPress】

2023 1/21

2023.01.21

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

テーマカスタマイザーは、サイトのデザインや表示内容など、プレビュー画面を見ながら変更・修正できるようにする機能です。
「外観」▶︎「カスタマイズ」に項目を追加していきます。

テーマカスタマイザーにパネル・セクション・コントロールをまるっと作成

テーマカスタマイザーに、パネルを追加する際には、セクションからコントロールまで用意しないと追加されない仕様になっています。
まずは、下記コードを「functions.php」に、まるっとコピペして実装してみましょう。

各項目の詳細については、後述します。

///////////////////まるっと作成(パネル・セクション・コントロール)///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_panel(
        'sample_panel',//パネルID
        array(
            'title' => 'サンプルパネル',//パネルタイトル
            'priority' => 10,//表示位置
        )
    );
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション１',//セクションタイトル名
            'priority' => 10,//パネル内の表示位置
            'panel' => 'sample_panel',//紐付けるパネルID
        )
    );
    $wp_customize->add_setting('sample_control');//セッティングID
    $wp_customize->add_control(
        'sample_control',//コントロールID
         array(
            'label' => 'サンプルコントロール', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'text', //コントロールタイプ
        )
    );
}

テーマカスタマイザーに、セクションから追加したい場合は、「add_panel」部分を除けば作成することができます。

パネル部分をコメントアウトした下記コードを「functions.php」に、まるっとコピペして実装してみましょう。

///////////////////まるっと作成(セクション・コントロール)///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    // $wp_customize->add_panel(
    //     'sample_panel',//パネルID
    //     array(
    //         'title' => 'サンプルパネル',//パネルタイトル
    //         'priority' => 10,//表示位置
    //     )
    // );
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション１',//セクションタイトル名
            'priority' => 10,//パネル内の表示位置
            // 'panel' => 'sample_panel',//紐付けるパネルID
        )
    );
    $wp_customize->add_setting('sample_control');//セッティングID
    $wp_customize->add_control(
        'sample_control',//コントロールID
         array(
            'label' => 'サンプルコントロール', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'text', //コントロールタイプ
        )
    );
}

テーマカスタマイザーパネルの追加

$wp_customize->add_panel(
    'sample_panel',//パネルID
    array(
        'title' => 'サンプルパネル',//パネルタイトル
        'priority' => 10,//表示位置
    )
);

「add_panel」に下記項目を設定します。

パネルID
パネルタイトル(title)
表示位置(priority)

Priorityの表示位置

サイト基本情報	20
色	40
ヘッダー画像	60
背景画像	80
メニュー	100
ウィジェット	110
ホームページ設定	120
追加CSS	200

テーマカスタマイザーセクションの追加

$wp_customize->add_section(
    'sample_section', //セクションID
    array(
        'title' => 'サンプルセクション１',//セクションタイトル名
        'priority' => 10,//パネル内の表示位置
        'panel' => 'sample_panel',//紐付けるパネルID
    )
);

「add_section」に下記項目を設定します。

セクションID
セクションタイトル(title)
パネル内の表示位置(priority)
紐づけるパネルID(panel)

テーマカスタマイザーコントロールの追加

$wp_customize->add_setting('sample_control');//セッティングID
$wp_customize->add_control(
    'sample_control',//コントロールID
     array(
        'label' => 'サンプルコントロール', //コントロール名
        'description' => 'サンプル詳細', //コントロールの詳細
        'setting' => 'sample_control', //紐づけるセッティングID
        'section' => 'sample_section', //紐づけるセクション名
        'type' => 'text', //コントロールタイプ
    )
);

「add_setting」に下記項目を設定します。

セッティングID

「add_control」に下記項目を設定します。

紐づけるセクションID
ラベル(label)
詳細(description)
紐づけるセッティングID(setting)
紐づけるセクションID

「add_setting」と「add_control」は、基本的にセットで利用します。

テーマカスタマイザーに登録した項目をページに表示する

if (!empty(get_theme_mod('sample_control'))) {
    echo "<p>".get_theme_mod('sample_control')."</p>";
}

「get_theme_mod()」の引数に「コントロールID」を指定することで、保存している内容を取得することができます。

if文(条件分岐)で、コントロールIDの内容が空出ない場合、出力するというコードになります。

(adsbygoogle = window.adsbygoogle || []).push({});

よかったらシェアしてね！

URLをコピーしました！

テーマカスタマイザーに様々なフォームをカスタマイズする方法【Wordpress】