WordPressのテーマカスタマイザーでラジオボタンを使う方法
WordPressのテーマカスタマイザーを使うと、WordPressテーマに様々な機能を追加することができます。
WordPressサイトを編集する場合、たとえば背景色を変更したいときなどは、通常なら「テーマの編集」からスタイルシートを変更する必要があります。
しかしテーマカスタマイザーを利用すれば、WordPressの管理画面上から背景色を変更したり、レイアウトを変更したり、コンテンツの表示・非表示を切り替えたりということができるようになります。
WordPressテーマのカスタマイズが可能になりますので、HTMLやCSSなど知らなくても簡単に変更ができるようになるわけです。
テーマカスタマイザーには、あらかじめ以下のような機能が使えるようになっています。
- title_tagline – サイトタイトルとキャッチフレーズ
- colors – 色
- header_image – ヘッダー画像
- background_image – 背景画像
- nav_menus – ナビゲーション
- static_front_page – 固定フロントページ
しかしこの他にも、独自の項目を追加することができます。
それぞれの項目にはテキスト、チェックボックスなどのinput要素や、テキストエリアなどを使うことができます。
ここでは、テーマカスタマイザーでラジオボックスを使う方法についてご紹介します。
WordPressテーマでテーマカスタマイザーを使えるようにする
今回は例として、テーマカスタマイザーからレイアウト(1カラム・2カラム・3カラム)を設定できるようにする手順をご説明します。
まずは、テーマカスタマイザーを使用できるようしなければなりませんので、お使いのWordPressテーマのfunctions.phpに下記を追加します。
- functions.php
-
/* テーマカスタマイザー ---------------------------------------------------------- */ add_action( 'customize_register', 'theme_customize' ); function theme_customize($wp_customize){ }これで、テーマカスタマイザーを使う準備ができました。
次に、テーマカスタマイザーに独自の項目(セクション)を追加していきます。
上記のソースに以下のように追記してください。
- functions.php
-
/* テーマカスタマイザー ---------------------------------------------------------- */ add_action( 'customize_register', 'theme_customize' ); function theme_customize($wp_customize){ //レイアウト $wp_customize->add_section( 'layout_section', array( 'title' => 'レイアウト', 'priority' => 10, 'description' => 'お好みのレイアウトを選択してください。', )); }
これで、テーマカスタマイザーに「レイアウト」という項目を追加することができました。
「priority」のところの数値を変更すれば、追加した項目の表示位置(上下)を変更することができます。
以下の表を参考にして、表示したい位置に合わせて数値を変更してください。
サイトタイトルとキャッチフレーズ 20 色 40 ヘッダー画像 60 背景画像 80 ナビゲーション 100 固定フロントページ 120 今の状態で「外観」→「カスタマイズ」を開いて頂くと、「レイアウト」という項目が追加されているのが分かると思います。
「レイアウト」という項目を選んでも、今は中身はない状態です。
それでは、これからその中身を追加していきたいと思います。
サニタイズ関数を設定する
「レイアウト」項目に中身を作っていく下準備として、まずはラジオボタンを使うためのサニタイズ関数を設定します。
サニタイズとは？
サニタイズとは入力された値を無害化することで、たとえばテーマカスタマイザーのテキスト入力欄にhtmlやPHPのソースを入力された場合に、それらの文字列をそのままWordPressテーマに反映してしまうと表示が崩れたり、予期せぬ事故が起きてしまいます。
テーマカスタマイザーを使用する人が悪意を持ってそういったソースを入力することはないとは思いますが、それでもミスなどによってウェブサイトに悪影響を及ぼす内容を入力してしまうケースも考えられなくはありません。
そういうときに備えて、入力された文字列を無害なものに変換することをサニタイズといいます。
ラジオボタン用のサニタイズ関数の設定
ここでは、そのサニタイズを行うための関数を設定するため、functions.phpに下記のように追記します。
先ほど記入したソースの下に、下記のように追加しておけばよいでしょう。
- functions.php
-
/* テーマカスタマイザー ---------------------------------------------------------- */ add_action( 'customize_register', 'theme_customize' ); function theme_customize($wp_customize){ //レイアウト $wp_customize->add_section( 'layout_section', array( 'title' => 'レイアウト', 'priority' => 10, 'description' => 'お好みのレイアウトを選択してください。', )); } /* テーマカスタマイザー用のサニタイズ関数 ---------------------------------------------------------- */ //ラジオボタン function sanitize_choices( $input, $setting ) { global $wp_customize; $control = $wp_customize->get_control( $setting->id ); if ( array_key_exists( $input, $control->choices ) ) { return $input; } else { return $setting->default; } }
これで、テーマカスタマイザーでラジオボタンを使う準備が整いました。
テーマカスタマイザーでラジオボタンを使えるようにする
それでは最後に、「レイアウト」項目で1カラム・2カラム・3カラムを選択できるようにしていきます。
これまでに作成したソースに下記のように追記します。
- functions.php
-
/* テーマカスタマイザー ---------------------------------------------------------- */ add_action( 'customize_register', 'theme_customize' ); function theme_customize($wp_customize){ //レイアウト $wp_customize->add_section( 'layout_section', array( 'title' => 'レイアウト', 'priority' => 10, 'description' => 'お好みのレイアウトを選択してください。', )); // $wp_customize->add_setting('layout_column', array( 'type' => 'option', 'sanitize_callback' => 'sanitize_choices', )); $wp_customize->add_control( 'layout_column', array( 'section' => 'layout_section', 'settings' => 'layout_column', 'label' => 'カラム設定', 'description' => 'カラムを選択してください。', 'type' => 'radio', 'choices' => array( 'column-1' => '1カラム', 'column-2' => '2カラム', 'column-3' => '3カラム', ), )); } /* テーマカスタマイザー用のサニタイズ関数 ---------------------------------------------------------- */ //ラジオボタン function sanitize_choices( $input, $setting ) { global $wp_customize; $control = $wp_customize->get_control( $setting->id ); if ( array_key_exists( $input, $control->choices ) ) { return $input; } else { return $setting->default; } }
これで、テーマカスタマイザーにて1～3カラムを選択することができるようになりました。
テーマカスタマイザーの「レイアウト」の項目で「1カラム」を選択すると「column-1」、「2カラム」を選択すると「column-2」… という感じで値が入ります。
あとは下記のような感じで、その値をget_option()を使ってget_template_part()に入れてあげれば、選択したカラムによって読み込むテンプレートファイルを切り替えることができます。
<?php get_template_part( 'layout', get_option('layout_column') ); ?>まとめ
以上がテーマカスタマイザーでラジオボタンを使う方法です。
サニタイズ関数は用意しなくてもラジオボタンを使うことができます。
しかし、htmlやPHPの知識がないクライアントなどが使用する場合などは、制作者が予期しないような使い方をする場合があります。
そういうときにこそ事故は起きるものですので、事前の対処は大切かと思います。
テーマカスタマイザーのラジオボタンで選択した値をget_option()を使ってget_template_part()に入れて…… という辺りは、また別の機会にもう少し詳しくご紹介できればと思います。
それでは！
関連記事
