カスタマイザー

【WP テーマカスタマイザーvol.1】オリジナルのメニューと項目を追加する(基本のコード)

この記事は最終更新から2年以上経過しており、内容が古い可能性があります

こちらのページでは
「表示分岐用のチェックボックス」とか「テキストなどを登録する」など
テーマカスタマイザーに 「メニューと項目を自作して追加する」 基本のカスタマイズ方法をご紹介。

とても便利なワードプレスのテーマカスタマイズ。
オリジナル項目を追加したり、カスタマイズすればもっと便利に使い倒せます!!

  • 変更があるかも (タイトルやdescription)
  • サイトで共通利用する (アナリティクスコードなど)
  • 使用不使用、表示非表示は自分で決めてね (snsボタンなど)

といった部分をテーマカスタマイズに入れておけば
クライアント様自身で安全に変更してもらえるし、
自分で変更する場合も、簡単、便利、凡ミス駆除、早い!!

自作テーマや子テーマのfunctions.phpにカスタマイザー用のコード(コピペOK)を追加するだけ^^
自己責任でご利用下さいませm(__)m

同じテーマの記事
このページの目次
  1. オリジナルの新しいカスタマイザー項目を作る
    1. カスタマイズの基本コード(コピペはこちら)
    2. 基本コードの説明(サラ~~ッと)
      1.  関数名・ID(name)
      2. section
      3. setting
      4. control

オリジナルの新しいカスタマイザー項目を作る

オリジナルメニューとその内容を作る場合は、コードに3種類の要素を記述します。

  1. section : 内容を入れる外箱 = カスタマイザーのメニューになる項目など
  2. setting : 個別の内容を入れる内箱 = 個別のtypeやdefaultなど
  3. control : 個別の内容設定 = foam部品や内容名、sectionやsettingの指定など

[setting] と[control] で 1セット。
1つの [section] の中に、このセットを何個でも入れられます。

大枠の項目(section)に、セットをまとめて入れると分かりやすいし
「すっきりカスタマイズしたぜっ!!」って気分になれます (笑

カスタマイズの基本コード(コピペはこちら)

以下をfunctions.phpにコピペして、必要な部分を書き換えればオリジナル項目がカスタマイザーに表示されます^^

function mytheme_customizer( $wp_customize ) { // この中に、section、setting、controlを登録
	$wp_customize->add_section( 'sectionID' , array(
		'title' => 'カスタマイザーに表示される項目タイトル',
		'description' => '項目全体の注意書き、不要ならこの行ごと削除',
		'priority' => 30, ));

	$wp_customize->add_setting('settingID', array(
		'default' => 'デフォルトにしたい内容、不要ならこの行ごと削除',
		'transport' => 'refresh',
		'type' => 'option', ));
 
	$wp_customize->add_control( 'controlID', array(
		'settings' => 'settingID',
		'label' => '内容ごとのタイトル',
		'description' => 'この内容に関する注意書き、不要ならこの行ごと削除',
		'section' => 'sectionID',
		'type' => 'text', )); 
}
add_action( 'customize_register', 'mytheme_customizer' );

基本コードの説明(サラ~~ッと)

上のコードについて簡単なご説明。
(変なところがあったらご指摘お願い致します m(__)m )

 関数名・ID(name)

分かりやすい一意の名前を付けます。(同色部分は同じ名前)

  • 1行目・19行目関数名
  • 2行目・16行目section ID (2行目 ID設定、16行目 IDを指定)
  • 7行目・13行目setting ID (7行目 ID設定、13行目 IDを指定)
  • 12行目control ID (7行目の setting ID と同じでOK)

テーマに反映(出力)する際は、7行目の setting ID を使用します。

section

  • 5行目(priority) → 表示位置。数字が小さいほど上に表示されます(実際の位置はお試しを)

setting

  • 9行目(transport) → プレビューウインドウの表示方法。
    [refresh] [postMessage] の2種類 (未指定時はrefresh)

    • [refresh=再読込(規定値)] ← 通常はこれでok
    • [postMessage=即時反映(JSを要作成)] ← プレビュー不要な部分は、jsを作らずにこちらを指定すると無駄な読込がなく快適かも^^;
  • 10行目(type) → 保存(呼び出し)形式。
    [option] [theme_mod] のどちらかを指定。(必須)

    • option = サイトに関する広範囲な値として保存され、テーマを変えても引き継がれる
    • theme_mod = [option]の一部でスタイルなど、そのテーマ専用に使われるもの。テーマを変えると引き継がれない

    どちらでも動きます。(呼び出し方は違いますが、、)
    「どちらを使うかはあなた次第(えっw」

control

  • 16行目(type) → foam部品の指定。
    text、textarea、checkboxなどのフォームタグを指定します。
    checkboxの場合、8行目を ‘checked’ にすると初期値をチェックにできます。
    ※ 12行目でカラーピッカーやメディアコントロールを指定した場合、typeは指定しません
同じテーマの記事