MENU
WordPressテーマを見つけよう！！
テーマ掲載数0件 テーマ利用サイト事例数0件 (2024/04/26更新)
条件指定でワードプレステーマ検索
ワードプレステーマ検索
×
選択中項目
キーワード
価格
カテゴリー
提供元
評価
※ 入力したキーワードが、テンプレート名に含むものを絞り込みます。
〜
件 のテーマ
  1. ホーム
  2. ワードプレス開発
  3. テーマカスタマイザーに様々なフォームをカスタマイズする方法【WordPress】

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

ワードプレス開発
目次

テキストボックスをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $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', //コントロールタイプ
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーのテキストボックス情報が空でない場合表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (!empty(get_theme_mod('sample_control'))) {
    echo "<p>".get_theme_mod('sample_control')."</p>";
}

テキストエリアをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $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' => 'textarea', //コントロールタイプ
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーのテキストエリア情報が空でない場合表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (!empty(get_theme_mod('sample_control'))) {
    echo "<p>".get_theme_mod('sample_control')."</p>";
}

チェックボックスをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション',//セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $wp_customize->add_setting(
        'sample_control', //セッティングID
        array(
            'default' => false //真偽値(true/false)
        )
    );
    $wp_customize->add_control(
        'sample_control', //コントロールID
         array(
            'label' => 'サンプルチェックボックス', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'checkbox', //コントロールタイプ
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーのチェックボックス情報が選択されている(真偽値：true)の場合表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (get_theme_mod('sample_control')) {
    echo "<p>チェックされています。</p>";
}

ラジオボタンをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $wp_customize->add_setting(
        'sample_control', //セッティングID
        array(
            'default' => 'radio1'
        )
    );
    $wp_customize->add_control(
        'sample_control', //コントロールID
         array(
            'label' => 'サンプルラジオボタン', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'radio', //コントロールタイプ
            'choices'  => array(
                'radio1' => 'ラジオボタン1',
                'radio2' => 'ラジオボタン2',
                'radio3' => 'ラジオボタン3',
            ),
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーのラジオボタン情報の選択されている内容を表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (get_theme_mod('sample_control') === 'radio1') {
    echo "<p>ラジオボタン１が選択されています。</p>";
} elseif (get_theme_mod('sample_control') === 'radio2') {
    echo "<p>ラジオボタン２が選択されています。</p>";
} else {
    echo "<p>ラジオボタン３が選択されています。</p>";
}

セレクトボタンをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $wp_customize->add_setting(
        'sample_control', //セッティングID
        array(
            'default' => 'select3'
        )
    );
    $wp_customize->add_control(
        'sample_control', //コントロールID
         array(
            'label' => 'サンプルラジオボタン', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'select', //コントロールタイプ
            'choices'  => array(
                'select1' => 'セレクトボタン1',
                'select2' => 'セレクトボタン2',
                'select3' => 'セレクトボタン3',
            ),
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーのセレクトボタン情報の選択されている内容を表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (get_theme_mod('sample_control') === 'select1') {
    echo "<p>セレクトボタン１が選択されています。</p>";
} elseif (get_theme_mod('sample_control') === 'select2') {
    echo "<p>セレクトボタン２が選択されています。</p>";
} else {
    echo "<p>セレクトボタン３が選択されています。</p>";
}

数値入力フォームをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $wp_customize->add_setting(
        'sample_control', //セッティングID
        array(
            'default' => 10,
        )
    );
    $wp_customize->add_control(
        'sample_control', //コントロールID
         array(
            'label' => 'サンプル数値入力フォーム', //コントロール名
            'description' => 'サンプル詳細', //コントロールの詳細
            'setting' => 'sample_control', //紐づけるセッティングID
            'section' => 'sample_section', //紐づけるセクション名
            'type' => 'number', //コントロールタイプ
            'input_attrs' => array(
                'min' => 0, //最小値
                'max' => 20, //最大値
                'step' => 2 //数値を何個ずつ増減させるか
            ),
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。
if文で作成したカスタマイザーの数値入力フォーム情報が空でない場合表示するよう記述しています。

///////////////////まるっとコピペOK///////////////////
if (!empty(get_theme_mod('sample_control'))) {
    echo "<p>".get_theme_mod('sample_control')."</p>";
}

カラーピッカーをテーマカスタマイザーに作成

///////////////////まるっとコピペOK///////////////////
add_action('customize_register', 'sample_panel');
function sample_panel($wp_customize)
{
    $wp_customize->add_section(
        'sample_section', //セクションID
        array(
            'title' => 'サンプルセクション', //セクションタイトル名
            'priority' => 10, //パネル内の表示位置
        )
    );
    $wp_customize->add_setting(
        'sample_control', //セッティングID
        array(
            'default' => '#ffffff', //デフォルトカラー
        )
    );
    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'sample_control', //コントロールID
            array(
                'label' => 'サンプルカラーピッカー', //コントロール名
                'description' => 'サンプル詳細', //コントロールの詳細
                'setting' => 'sample_control', //紐づけるセッティングID
                'section' => 'sample_section', //紐づけるセクション名
            )
        )
    );
}

作成したカスタマイザーの情報をindex.phpで表示するコードは下記のとおりです。

///////////////////まるっとコピペOK///////////////////
echo '<p style="color:'. get_theme_mod('sample_control') .';">カラーピッカーで文字色を変更できます。</p>';
(adsbygoogle = window.adsbygoogle || []).push({});
ワードプレス開発
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次