WordPressオリジナルテーマを自作する上で拡張しておきたいテーマカスタマイザー。
前回は、カラム（レイアウト）を変更する機能を実装する方法をご紹介しましたが、今回は入力欄（テキストボックス）を追加して、入力された値を呼び出す方法をご紹介します。
※テーマカスタマイザーの基本的な拡張方法を知りたい方は、下記記事が参考になると思います。
functions.phpにコードを追加
今回は例として、メタキーワードを設定できる項目を追加してみましょう。下記のコードを少し修正すれば、簡単に応用できます。
まず、functions.phpに下記のコードを追加します。
function theme_customizer_extension($wp_customize) {
//SEO関連
$wp_customize->add_section( 'seo', array (
'title' => 'SEO関連',
'priority' => 100,
));
//メタキーワード
$wp_customize->add_setting( 'keywords', array (
'default' => null,
));
$wp_customize->add_control( 'keywords', array(
'section' => 'seo',
'settings' => 'keywords',
'label' =>'キーワード設定',
'description' => 'サイトのキーワードをカンマ区切り（例：〇〇,〇〇,〇〇）で入力してください。SEO効果はほぼないので空欄のままでもOKです。サイトの見た目には影響しない項目です。SEOプラグインで設定している場合は入力しないでください。',
'type' => 'text',
'priority' => 70,
));
}
add_action('customize_register', 'theme_customizer_extension');
//トップページのキーワード設定
function keywords() {
return get_theme_mod( 'keywords', null );
}
重要なのは下記の2点。
- defaultの値を「null」にする
- typeの値を「text」にする
これで、空欄のテキストボックスが完成します。
※なぜこのコードになるのかは冒頭の記事をご覧ください。
テキストボックスに入力された値を呼び出す
後は、テキストボックスに入力された値を呼び出すコード「keywords();」をファイルに追加するだけです。
今回の例だと、<head></head>の中にこのようなコードを追加すればOKですね。
<meta name="keywords" content="<?php echo keywords();?>">
下記のように、echoで出力してもいいですね。
echo '<meta name="keywords" content="'.keywords().'">';テキストボックスに値が入力されていない場合に非表示にする方法
上記のコードで終了でもいいんですが、オリジナルテーマはいろんな人が使うので、条件分岐をした方が丁寧です。
例えば、「テキストボックスにキーワードを入力していない場合はコードを出力しない」という条件分岐はしておきたいところ。
（条件分岐をしないと、キーワードを入力していない場合でも、メタ情報が出力されてしまうため）
下記がサンプルコードです。
if ( keywords() ) echo '<meta name="keywords" content="'.keywords().'">';トップページだけ読み込む場合
上の条件に、さらに「トップページだけ読み込む」という条件分岐をする場合のサンプルコードがこちら。
if ( keywords() && is_home() ) echo '<meta name="keywords" content="'.keywords().'">';まとめ
今回のコードを少し修正するだけで、
- Googleアナリティクスの設定
- 各種SNSの設定
などの主要な機能をテーマカスタマイザーに追加することができます。
（※気になる方がいれば別記事にまとめるのでコメントいただければと思います）
以上、ご参考までに！(｀･ω･´)ゞ
