WordPressカスタマイザー自作

カスタマイザーで編集可能にする事でお客さんが使いやすい様にする事も大事かなと思います。
あとは、デザインがガチガチに決まってるけどここの文字は後から編集するかもって時にもカスタマイザーで編集出来るようにしておくといいかも知れないです。

パネルの設定

functions

function my_customize($wp_my_customize) {
  $wp_my_customize->add_panel(
    'custom_panel',
    array(
      'title' => 'パネル', //メニューの名前
      'priority' => 1, //一番上に配置
    )
  );
}
add_action('customize_register','my_customize');

これでパネルにオリジナルの項目が追加されます。

セクションを追加

functions

$wp_my_customize->add_section(
  'custom_section',
    array(
      'panel' => 'custom_panel'
      'title' => 'セクション',
      'priority' => 1, //メニュー配置順
    )
);

これで先程のパネルメニューの中にセクションメニューが追加されます。

続いてテキストボックスやテキストエリア、その他入力項目を設定していきます。

コントロール追加

functions

$wp_my_customize->add_setting('my_text');
$wp_my_customize->add_control(
  new WP_Customize_Control(
    $wp_my_customize,
      'my_text',
        array(
	  'label' => 'テキスト',
	  'section' => 'custom_section',
	  'settings' => 'my_text',
	)
  )
);

上のコードを書くと下にある様なテキストボックスが追加されます。

その他のコントロール

テキストエリアやラジオボタン、チェックボックス、セレクトボックスなどは先程のコントロール追加のコードにタイプを指定すると追加が出来ます。

functions

$wp_my_customize->add_setting('my_textarea');
$wp_my_customize->add_control(
  new WP_Customize_Control(
    $wp_my_customize,
      'my_textarea',
        array(
	  'label' => 'テキストエリア',
	  'section' => 'custom_section',
	  'settings' => 'my_textarea',
          'type' => 'textarea'
	)
  )
);

ラジオボタンとセレクトボックスの場合はタイプに加えて選択項目を追加する

ラジオボタン

functions

'type'     => 'radio',
'choices'  => array(
  'radio1' => 'ラジオ1',
  'radio2' => 'ラジオ2',
  'radio3' => 'ラジオ3',
),

セレクトボックス

functions

'type'     => 'select',
'choices'  => array(
  'radio1' => 'セレクト1',
  'radio2' => 'セレクト2',
  'radio3' => 'セレクト3',
),

その他のタイプ

email
tel
search
password
url
number
date
time
range
color

画像アップローダーを追加する方法

画像アップローダー項目を追加する時は先程のコードを下記のように変更する

functions

$wp_my_customize->add_setting('my_image');
$wp_my_customize->add_control(
  new WP_CustomizeImage_Control(  //new WP_Customize_Control -> new WP_CustomizeImage_Control
    $wp_my_customize,
      'my_image',
        array(
	  'label' => '画像アップローダー',
	  'section' => 'custom_section',
	  'settings' => 'my_image',
	)
  )
);

こんな感じで各項目をカスタマイザーに追加する事が出来ます。

各項目を追加出来たら追加した項目が反映されるようにしてみましょう。

カスタマイザーの値を反映する方法

カスタマイザーの値を使うにはget_theme_mod()を使います。
例えば先程の画像を出力したい場合はこんな感じのコードになります。
カッコの中にはセッティングで指定した値を入れる事で反映されます。

php

<img src="<?php echo get_theme_mod('my_image'); ?>" alt="">

あとはテキストが無かった時や画像がない場合、チェックがない場合などの条件で表示を分ける事でカスタムの幅が広がると思います。

皆さんもカスタマイザーをカスタマイズして自由度の高いテーマを作成してみてはいかがでしょうか？