WordPress 自作カスタマイザーの作り方
こんにちは、koheiです。
WordPressのカスタマイザーってご存知でしょうか？
WordPressの管理画面から、色や画像をリアルタイムに確認しながら編集できる機能です。
これを使いこなせば、汎用性のあるオリジナルテーマを作ることができます。
そこで今日は、オリジナルのカスタマイザーの作り方をご紹介します。
目次
WordPressカスタマイザーとは？
カスタマイザー画面に入るには、
WordPress管理メニューの「外観」⇒「カスタム」を選択します。
以下のような画面が表示されます。
ここで、色、画像などをリアルタイムに確認しながら編集を行える便利な機能です。
今回は、ここにオリジナルのカスタマイズメニューを追加していきましょう。
オリジナルのセクションを追加する
早速、オリジナルのセクションを追加してみましょう。
セクションとは、以下のようなカスタマイズ画面に表示されるメニューのことです。
では、実際に「オリジナル」というセクションを追加してみましょう。
追加するには、functions.phpに以下のようなコードを記載します。
【functions.php】
|
1 2 3 4 5 6 7 8 9 10 11 |
add_action( 'customize_register', 'theme_customize_register' ); function theme_customize_register($wp_customize) { /* セクション追加 */ $wp_customize->add_section( 'original_custom', array( 'title' =>'オリジナル', 'priority' => 100, )); } |
1行目は、「customize_register」をフックして、theme_customize_registerという関数を呼び出しています。
3行目から、実際のtheme_customize_register関数を定義しています。
セクションを追加するには、add_sectionという関数を呼び出します。
設定する引数は、以下のようになります。
・original_custom・・・セクション名です。（※）
・title・・・セクションメニューに表示されるタイトルです。（※）
・priority・・・カスタマイザーメニューに表示される時の順番です。
※自由に名前をつけてください。
セクション内にチェックボックスを追加する
先ほど、セクションが追加されましたので、具体的に設定を追加してみましょう。
チェックボックスの追加
例えば、ある要素の表示させたり、非表示にさせたりする時に便利なチェックボックスを追加してみましょう。
先ほどセクション追加の時に記載したコードの下（theme_customize_register関数内）に以下のコードを記載しましょう。
【functions.php】
|
1 2 3 4 5 6 7 8 9 10 |
$wp_customize->add_setting('original_checkbox', array( 'type' => 'option', )); $wp_customize->add_control( 'original_checkbox', array( 'settings' => 'original_checkbox', 'label' => 'チェックボックス', 'section' => 'original_custom', 'type' => 'checkbox', )); |
基本的にセクション内に項目を追加するときは、add_setting関数とadd_control関数を使います。
・type・・・optionを設定しています。それ以外にも設定はあるみたいですが、とりあえずoptionでいいと思います。
■add_control関数
・label・・・チェックボックスの横に表示させる文字列を指定します。
・section・・・セクションを追加したときのセクション名を指定してください。
・type・・・チェックボックスを追加するので、’checkbox’を指定してください。
※1行目、5行目、6行目で指定している’original_checkbox’という文字列に実際のチェックボックスの設定が格納されます。
チェックボックスの参照
さっそく追加したチェックボックスをテンプレートファイル（phpファイル）から参照してみましょう。
先ほど、説明したように、チェックボックスの設定は、’original_checkbox’に格納されていますので、
以下のように設定を取得します。
【テンプレートファイル(xxx.php）】
|
1 2 3 4 5 6 |
<?php if(get_option('original_checkbox')): ?> <div id="top_page_image"> <img src="<?php echo get_template_directory_uri();?>/images/top-image.png" alt="ロゴ"> <img src="<?php echo get_template_directory_uri();?>/images/top-image2.png" alt="ロゴ"> </div> <?php endif; ?> |
1行目のget_option(‘original_checkbox’)でチェックボックスの設定を取得しています。
チェックが入っている場合は、top_page_imageという要素を表示させ、チェックが入っていない場合は、要素が非表示なります。
実際にカスタマイザー画面で試してみましょう。
以上、チェックボックスの追加方法でした。
セクション内にテキストボックスを追加する
テキストボックスの追加
次は、テキストボックスを追加してみましょう。
チェックボックスと同じように、theme_customize_register関数内に以下のコードを記載しましょう。
【functions.php】
|
1 2 3 4 5 6 7 8 9 10 |
$wp_customize->add_setting('original_txt', array( 'type' => 'option', )); $wp_customize->add_control( 'original_txt', array( 'settings' => 'original_txt', 'label' => 'オリジナルテキスト', 'section' => 'original_custom', 'type' => 'text', )); |
今度は、テキストボックスなので、typeには、’text’を設定しています。
‘original_txt’という文字列に実際の設定されたテキストが格納されます。
テキストボックスの出力
カスタマイザーで入力したテキストボックスを実際に出力させるには、以下のように記載します。
【テンプレートファイル(xxx.php）】
|
1 |
<?php echo get_option('original_txt'); ?> |
実際にカスタマイザー画面で試してみましょう。
以下のように、テキストボックスで入力した文字がリアルタイムで反映されます。
以上、テキストボックスの追加方法でした。
セクション内に画像選択を追加する
画像選択の追加
最後に画像選択メニューを追加してみましょう。
チェックボックスと同じように、theme_customize_register関数内に以下のコードを記載しましょう。
【functions.php】
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_setting('original_image', array( 'type' => 'option', )); if(class_exists('WP_Customize_Image_Control')): $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'original_image', array( 'settings' => 'original_image', 'label' => 'オリジナル画像', 'section' => 'original_custom', ))); endif; |
‘original_image’に選択した画像のパスが保存されます。
画像の出力
カスタマイザーで設定した画像を出力するには、以下のように記載します。
【テンプレートファイル(xxx.php）】
|
1 |
<img src="<?php echo get_option('original_image')?>"> |
実際にカスタマイザー画面で試してみましょう。
以下のように、選択した画像がリアルタイムで反映されます。
最後に
いかがでしょう？
カスタマイザーは今回紹介した以外にも、色設定やラジオボタンなども追加できるようです。
また、追加方法が分かったら追記したいと思います。
みなさんも自作のカスタマイザーを追加してオリジナルテーマ作成にチャレンジしてみてはいかがでしょう？
ちなみに、今回紹介したカスタマイザーを使って作ったオリジナルテーマを無料で配布中ですので、参考までにどうぞ！（以下ページからダウンロードできます。）
WordPress無料テーマ-InomaExpertBasic
それでは！！
スポンサーリンク
