テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ

テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ

WordPressで、特別なプラグインを使わずに何かのカスタマイズを行うときは、主に

  • 機能の追加や制限はテーマのfunctions.phpへ記述する
  • デザインの変更はテーマのstyle.cssへ追記や変更をする

という方法で行いますね。

自分用のサイトで、常に細かく管理しているサイトであれば、この方法でも問題はないのですが、しばらくそれらを触っていないサイトでは「あれ?この機能はどうやってたんだっけ?」と困惑することがあります。

これを解消するために、あらかじめその機能をON/OFFするスイッチや、デザインを適用させるかどうかの判断ができたら便利ですよね?

そこで使えるのがWordPressに標準で備わっているテーマカスタマイザーという機能。恐らくテーマを導入して最初に設定した経験はどなたでもあるでしょう。

そしてこの機能は、プログラムの仕組みと書き方さえ分かっていれば、項目を追加したり、メニューを追加したり、それをテーマで実際に反映させたりすることが、自由にできるようになっています。

本記事では、テーマカスタマイザーを使って独自の項目を追加・管理する方法、テーマへ適用させる方法、その他テーマカスタマイザー用のプログラムに関することをできるだけ分かりやすく、詳細に解説していきます。

また、テーマカスタマイザーの編集に限らず、WordPressで何かのカスタマイズをする上で必要な作法?についても諸所で紹介していますので、きっとカスタマイズビギナーの方のお役に立てるのではないかと思います。

テーマカスタマイザーへ独自設定を追加するための基本形

ユーザー定義関数の作り方

テーマカスタマイザーへ独自項目を作るには、ユーザー定義関数を作って、テーマのfunctions.phpへ追記する必要があります。コピペで...という形で紹介したいところですが、ユーザー定義関数を知っておくことで、今回のカスタマイズ以外でも理解度が段違いに深まりますから、まずはこれを押さえておきましょう。

ユーザー定義関数とフックの役割

ユーザー定義関数とは、テーマやプラグインに記述してWordPressで標準に備わっていない機能や制限などを追加する命令です。

一方フックというのは、ユーザー定義関数の命令をどのように処理するのかを決める記述になります。フックでよく使われるのが、何かの命令を単純に実行させる「action」と、既存の機能に制限や拡張をさせる「filter」があります。テーマやプラグインのプログラム中には頻繁に「add_action(アクションフック)」「add_filter(フィルターフック)」と書かれたものが出てきますからこれを見つけたら何かの指示をしてるんだなと理解できます。

このように基本的には「ユーザー定義関数」と「フック」は一体にして使います。基本形は以下のような形になります。

function ユーザー定義関数名($〇〇){
命令の内容
$〇〇
};
add_action('どのように処理するか','ユーザー定義関数名');

中には、この作法ではなく「add_action(アクションフック)」「add_filter(フィルターフック)」 の記述なしで動作するものがあり、テーマのfunctions.phpへそのように書かれている場合があって混乱しがちですが、基本形は上の形が正しい作法になります。

また、本記事の後半で紹介するように、何かを判定させるためにユーザー定義関数を作っておき、テーマ内でそれを判断材料にするという使い方をする場合もありますから、いろいろなコードを見て慣れていくといいでしょう。

上のコード中の「ユーザー定義関数名」には半角英数字とアンダーバー(_)を使って、いくらでも独自の名前を付けることができます。当然ながら命令(ユーザー定義関数)に対して何をするか?(フック)があるわけですから、2か所同じ名前を入力する必要があります。

ユーザー定義関数名が重複するとどちらの処理をすればいいかわからずエラーになりますから、名前を付ける場合にはテーマ名やプラグイン名を含めるなど、競合しないようにする工夫が必要です。

また、$〇〇という箇所がありますが、こちらは特定のものにのみ適用するというオプションで、特に指定がなければ不要です。

以上、余談というかおさらいから入りましたが大丈夫でしょうか?それではここからテーマカスタマイザーに独自メニューを追加する方法以下進めていきましょう。

独自メニューを追加する

「外観」→「カスタマイズ」を開いた際に表示されるメニューを追加します。

前述したユーザー定義関数とフックを使って、以下のようなコードをテーマのfunctions.phpへ追記して、独自メニューを作成します。

function ユーザー定義関数名( $wp_customize ) {
//メインメニュー
$wp_customize->add_panel(
'独自メニュー名',
array(
'title'=>'独自メニューの表示名',
'description'=>'','説明文',
'priority'=>メニューの優先度,
    )
  );
}
add_action( 'customize_register', 'ユーザー定義関数名' );

ご自身で変更する部分は以下の通りです

  • ユーザー定義関数名を指定する(半角英数字とアンダーバー)
  • 独自メニュー名を指定する(半角英数字とアンダーバー)
  • 独自メニューの表示名と説明文(テーマカスタマイザー上で表記される名前、日本語可)
  • メニューの優先度(1~∞の半角数字)

優先度は半角数字であればどんな桁数でも使用できます。数字が小さいほど上に表示されます。

他にもメニューを追加したい場合は

}
add_action( 'customize_register', 'ユーザー定義関数名' );

というコードの上に

$wp_customize->add_panel(
'独自メニュー名',
array(
'title'=>'独自メニューの表示名',
'description'=>'','説明文',
'priority'=>メニューの優先度,
    )
  );

の部分を追加して、再び必要な設定をすればいくらでも追加できます(独自メニュー名は重複しないようにします)。

メニューの優先度が同じ場合には、functions.phpに書かれた順に表示されます。

ちなみに2つメニューを追加した場合のコードは以下のようになります。

function ユーザー定義関数名( $wp_customize ) {
//メインメニュー
$wp_customize->add_panel(
'独自メニュー名',
array(
'title'=>'独自メニューの表示名',
'description'=>'','説明文',
'priority'=>メニューの優先度,
    )
  );

//メインメニュー2
$wp_customize->add_panel(
'独自メニュー名2',
array(
'title'=>'独自メニューの表示名2',
'description'=>'','説明文2',
'priority'=>メニューの優先度2,
    )
  );
}
add_action( 'customize_register', 'ユーザー定義関数名' );

独自サブメニューを追加する

次に独自メニューの中に別のメニュー(サブメニュー)を作る際のコードです。独自メニューと同じくテーマのfunctions.phpへ追記します。

function ユーザー定義関数名( $wp_customize ) {
//独自メニューにサブメニューを追加
$wp_customize->add_section(
'サブメニュー名',
array(
'title'=>'サブメニューの表示名,
'panel'=>'独自メニュー名',
'description'=>'','説明文',
'priority'=>独自メニューの中での優先順,
    )
  );
}
add_action( 'customize_register', 'ユーザー定義関数名' );

「サブメニュー名」「独自メニュー名」は半角英数字とアンダーバー、優先度は半角数字、「サブメニューの表示名」「説明文」は日本語でも英語でも構いません(もう慣れましたね、きっと)。

そして「独自メニュー名」には、先ほどのメニューで作成した「独自メニュー名」を指定することで、その独自メニューのサブメニューになります。

サブメニューを追加したい場合は...もう大丈夫でしょう。

ちなみに2つのサブメニューを追加した場合のコードは以下のようになります。

function ユーザー定義関数名( $wp_customize ) {
//独自メニューにサブメニューを追加
$wp_customize->add_section(
'サブメニュー名',
array(
'title'=>'サブメニューの表示名,
'panel'=>'独自メニュー名',
'description'=>'','説明文',
'priority'=>独自メニューの中での優先順,
    )
  );

//独自メニューにサブメニューを追加2
$wp_customize->add_section(
'サブメニュー名2',
array(
'title'=>'サブメニューの表示名2,
'panel'=>'独自メニュー名',
'description'=>'','説明文2',
'priority'=>独自メニューの中での優先順2,
    )
  );
}
add_action( 'customize_register', 'ユーザー定義関数名' );

「外観」→「カスタマイズ」で開いた画面にメニューを表示するには

独自サブメニューを追加するコードを以下のようにします。

function ユーザー定義関数名( $wp_customize ) {
//独自メニューにサブメニューを追加
$wp_customize->add_section(
'サブメニュー名',
array(
'title'=>'サブメニューの表示名,
'panel'=>'',
'description'=>'','説明文',
'priority'=>独自メニューの中での優先順,
    )
  );
}
add_action( 'customize_register', 'ユーザー定義関数名' );

コード中の「 ‘panel’=>’ 独自メニュー名 ‘, 」の部分を空白「”」にするだけです。要するに独自メニューに紐づかないサブメニューだから最初のメニューへ表示されるということですね(他に方法があるかも知れませんが、紹介するのはこの方法のみとさせていただきます)。

メニューやサブメニューがカスタマイザーに表示されない

ここまで設定をして、よし!テーマカスタマイザーを見てみよう!!とワクワクしながら「外観」→「カスタマイズ」を開いてみると、あれ?追加したはずの項目が表示されていないと気づくことでしょう。

これは、メニューは作ったけど実際の設定項目がないだけですので、コードに誤りがなければ、次項を参考に実際の設定項目を追加した段階でメニューが表示されるようになります。

試しに次項の独自の設定項目を追加したら、再び、テーマカスタマイザーを開いてみましょう。ホラ、きちんとメニューが表示されていますよね?

要するに、独自メニューや独自サブメニューに内容がなかったら表示しないというのが標準設定になっているんですね。テーマカスタマイザーへ独自項目を追加するときにあれ?となってしまうポイントですから覚えておきましょう。

独自の設定項目を追加する

いよいよ実際に指定する詳細項目を作っていきます。

一番単純な「YES」「NO」を指定するために基本となるコードは以下の通りです。

function ユーザー定義関数名( $wp_customize ) {
//独自の設定項目を追加
$wp_customize->add_setting( '詳細項目名', array(
'default'=>デフォルト値, 
'type'=>'タイプ',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'type'=>'選択の種類',
'priority'=>詳細項目の中での優先順,
)));	
}
add_action( 'customize_register', 'ユーザー定義関数名' );

以下のように指定します(「ユーザー定義関数名」「詳細項目名」「詳細項目の表示名」「説明文」「優先順」の規則はもう大丈夫だと思うので割愛します)

  • デフォルト値・・未設定の場合にセットされる値を入れます。YES/NOの場合は「true」「false」を、それ以外の場合は「”」で囲んで値を指定します
  • タイプ・・・「theme_mod」「option」のいずれかを入力します。詳しくは欄外を参照ください。
  • サブメニュー名・・・独自サブメニュー名を入力します
  • 選択の種類・・・詳細項目の指定方法を指示します(YES/NOの場合は「checkbox」と指定します)

独自メニュー、独自サブメニューと比べて少し複雑ですが、もう少しなので頑張りましょう。

「タイプ」の部分の補足としては、ざっくりと「theme_mod 」はYES/NOまたは入力された文字や値をそのまま使う場合に、「option」は選択肢から選ばれた情報を判断する場合に指定すると覚えておくとほぼ間違いないでしょう。

また、後ほど紹介する詳細設定を実際にテーマへ反映させる際、「タイプ」の指定を「option」にした場合は、テーマ側で「get_option」を使って呼び出すことになり、「theme_mod」にした場合は、テーマ側で「get_theme_mod」を使って呼び出すことになるということを頭の隅で覚えておいてください。

「’type’=>’タイプ’,」の行がない場合、「theme_mod 」として扱うようになっていますが、省略せずにどちらかを指定しておいた方がトラブルの心配がありません。

複数の詳細項目を追加する場合は...やり方は同じですからもう大丈夫ですよね?

以下は「YES/NO」の選択でデフォルトがNOの場合のコードサンプルです。

function ユーザー定義関数名( $wp_customize ) {
//独自の設定項目を追加
$wp_customize->add_setting( '詳細項目名', array(
'default'=>false, 
'type'=>'theme_mod',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'type'=>'checkbox',
'priority'=>詳細項目の中での優先順,
)));	
}
add_action( 'customize_register', 'ユーザー定義関数名' );

詳細項目には「YES/NO」以外にもいろいろな方法で選択や入力ができるようになっています。以下にコード例をいくつか紹介しますので、見比べながら適宜使ってください。

ドロップダウン選択
$wp_customize->add_setting( '詳細項目名', array(
'default'=>'デフォルト', 
'type'=>'option',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'priority'=>詳細項目の中での優先順,
'type'=>'select',
'choices'=>array(
'large'=>'選択肢1',
'small'=>'選択肢2',
	),
)));
ラジオボタン選択
$wp_customize->add_setting( '詳細項目名', array(
'default'=>'デフォルト', 
'type'=>'option',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'priority'=>詳細項目の中での優先順,
'type'=>'radio',
'choices'=>array(
'large'=>'選択肢1',
'small'=>'選択肢2',
	),
)));
1行テキスト
$wp_customize->add_setting( '詳細項目名', array(
'default'=>デフォルト, 
'type'=>'theme_mod',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'type'=>'text',
'priority'=>詳細項目の中での優先順,
)));
複数行テキスト
$wp_customize->add_setting( '詳細項目名', array(
'default'=>デフォルト, 
'type'=>'theme_mod',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'type'=>'textarea',
'priority'=>詳細項目の中での優先順,
)));
画像のアップロード
$wp_customize->add_setting( '詳細項目名' );
$wp_customize->add_control(
  new WP_Customize_Image_Control(
    $wp_customize,
    '詳細項目名',
    array(
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'settings'=>'詳細項目名',
'priority'=>詳細項目の中での優先順,
    )));
色を指定する
 $wp_customize->add_setting( '詳細項目名', array(
 'default' => 'デフォルト',
 ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, '詳細項目名', array(
 'label' => '詳細項目の表示名',
 'description'=>'説明文',
 'section' => 'サブメニュー名',
 'settings' => '詳細項目名',
 'priority' => 詳細項目の中での優先順,
 )));

テーマカスタマイザーへメニューやサブメニューを追加し、詳細設定項目を設置する手順と方法は以上です。

カスタマイザーに表示される文字列を翻訳対応にするには

テーマの中には、多言語に対応できるようになっているものが多数あります。そうしたテーマの場合は、追加するカスタマイザーの項目も対応できるようにしておきましょう。

まずは、そのテーマの翻訳接頭辞を調べます。翻訳接頭辞は基本的にテーマのstyle.cssのtextdomain:の後ろに書かれている文字列です。

そして、これまで設定したコード中の「〇〇の表示名」「説明文」となっているところを以下のように変更します(例は説明文の部分で上が変更前、下が変更後です)

'description'=>'説明文',
'description'=>__('説明文を英語で書いたもの','接頭辞'),

テーマカスタマイザーの設定を反映させる方法いろいろ

設定項目を設けても、それが実際に反映できなかったら意味がありませんね。ここでは新しく追加した設定項目をテーマへ反映させる方法をいくつか紹介します。

「YES」なのか「NO」なのかの判断をさせる

「’type’=>’checkbox’,」を使うシーンとしては、チェックを入れた時に「YES」または「NO」と判別して何かをするという使い方をされると思います。

そのような場合には、条件を持つユーザー定義関数を作っておくと便利です。以下はコード例です。

//〇〇をするかどうか
function is_詳細項目名(){
  return get_theme_mod( '詳細項目名', チェックが入っている時の判断 );
}

「チェックが入っている時の判断」は、「true」「false」のいずれかを入力し、チェックを入れた時に「YES」ならば「true」を、「NO」ならば「false」を指定します。

これをテーマ内で使う場合には以下のように記述します(上がPHPを独立させている場合、下がすべて1つのPHPプログラムとして書かれている場合です)。

<?php if(is_詳細項目名()): ?>
処理や表示をさせる内容
<?php endif; ?>
if(is_詳細項目名()){
処理や表示をさせる内容
}

プログラムの書き方はテーマによって大きく上記の2種類ですので、コードの流れを見てどちらなのかを判断して記述してください。間違えるとエラーとなって動作しません(以降のコード例はPHPを独立して記述している場合のみを紹介します)。

また、ユーザー定義関数では、「ture」なのか「false」なのかの判断がしにくい場合がありますから、デフォルト値が「false」の場合は、きちんと以下のように「true(真)」だったらとした方がスマートかも知れません。

if('詳細項目名' == true){
処理や表示をさせる内容
}

この方法でも詳細項目のデフォルト値が「true」だと結構混沌とします..結論としてはどう動作するのかをチェックしながら設定するほかありません。

入力された文字列を表示させる

<?php echo get_theme_mod( '詳細項目名' ); ?>

選択肢によって処理を分ける

<?php if(get_option( '詳細項目名' ,'何も選択されていない場合の選択肢')== '選択された値'): ?>
条件に合う場合の内容
<?php endif; ?>

「何も選択されていない場合の選択肢」には、テーマカスタマイザー上で選択し直して公開していない場合にセットしておく規定値になります(これを指定していないと、テーマをインストールした直後などには誤動作します)。選択肢として指定したもののうち1つを入力します。

「選択した値」は選択肢として指定したもののうち1つを入力し、これに合致する場合には「条件に合う場合の内容」が処理されます。

選択肢によってデザインの変更をする

以下、例として、全体(body)の文字サイズを変更するコードを紹介します。

独自の詳細項目のコード

function ユーザー定義関数名() {
/***** フォントサイズの選択 *****/
/* フォーム */
$wp_customize->add_setting( '詳細項目名', array(
'default'=>'16px', 
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'文字サイズ',
'description'=>_'サイトの文字サイズを設定します',
'section'=>'サブメニュー名',
'type'=>'radio',
'choices'=>array(
'14px'=>'14px',
'15px'=>'15px',
'16px'=>'16px(標準)',
'17px'=>'17px',
'18px'=>'18px',
	),
)));
}
add_action( 'customize_register', 'ユーザー定義関数名' );

文字サイズを反映させるコード

/*** フォントサイズ(フロントエンド) ***/
function ユーザー定義関数名 {
$font_size = get_theme_mod( '詳細項目名', '16px');
?>
<style type="text/css">
 /* フォントサイズ */
body , .editor-styles-wrapper {
 font-size:<?php echo $詳細項目名; ?>;
}

</style>
<?php
}
add_action( 'wp_head', 'ユーザー定義関数名');

上記のコードを使うと以下のような機能が追加できます。

  • bodyタグに対するフォントサイズの設定を14px~18pxの間で変更できる
  • カスタマイザーで何も設定していない場合はデフォルトの16pxがセットされる

テーマ内のいろいろなタグの文字の大きさが相対値(em)で設定されていれば、これに応じて自動的にその他の部分も拡大縮小されます。

選択した色を反映させる

以下、ヘッダーの背景色を変える場合のサンプルコードです。

独自の詳細項目のコード

function ユーザー定義関数名(){
//ヘッダー背景色
 $wp_customize->add_setting( '詳細項目名', array(
 'default' => '#ffffff',
 ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, '詳細項目名', array(
 'label' => 'ヘッダー背景色',
 'description'=>'ヘッダー部分の背景色を設定します',
 'section' => 'サブメニュー名',
 'settings' => '詳細項目名',
 'priority' => 10,
 )));
}
add_action( 'customize_register', 'ユーザー定義関数名' );

色を反映させるコード

function habone_customizer_color() {
$詳細項目名 = get_theme_mod( '詳細項目名', '#ffffff');

<style type="text/css">
	
 /* ヘッダーの背景色 */
#page-head {
 background-color: <?php echo $詳細項目名; ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'habone_customizer_color');

上記のコードを使うと以下のような機能が追加できます

  • ヘッダー部分のdiv id「#page-head」に対して設定した色を反映する
  • カスタマイザーで何も設定していない場合はデフォルトの#ffffff(白色)がセットされる

選択した画像を表示させる

<?php echo get_theme_mod( '詳細項目名' ); ?>

で、画像URLが取得できますので、

<img src="<?php echo get_theme_mod( '詳細項目名' ); ?>" width="" height=""  alt="テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ|HABONE">

で任意の場所へ画像を表示させることができます。

その他記述方法やテーマ内での格納方法などのヒント

コードを1つのユーザー定義関数にまとめる

ここまでは、説明した形で内容の変更を行えば基本的にエラーなく動作するよう、メニュー、サブメニュー、詳細項目を別々の独立したユーザー定義関数で記述したものを紹介しましたが、これらをまとめて1つのユーザー定義関数とすることも可能です。以下サンプルコードです。

function ユーザー定義関数名( $wp_customize ) {
//メインメニュー
$wp_customize->add_panel(
'独自メニュー名',
array(
'title'=>'独自メニューの表示名',
'description'=>'','説明文',
'priority'=>メニューの優先度,
    )
  );



//独自メニューにサブメニューを追加
$wp_customize->add_section(
'サブメニュー名',
array(
'title'=>'サブメニューの表示名,
'panel'=>'',
'description'=>'','説明文',
'priority'=>独自メニューの中での優先順,
    )
  );

//独自の設定項目を追加
$wp_customize->add_setting( '詳細項目名', array(
'default'=>デフォルト値, 
'type'=>'タイプ',
));
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'詳細項目名', 
array(
'settings'=>'詳細項目名',
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'type'=>'選択の種類',
'priority'=>詳細項目の中での優先順,
)));


}
add_action( 'customize_register', 'ユーザー定義関数名' );

わざわざすべて分けるよりも、すっきりすると思われる方はこちらの記述方法でもいいでしょう。

テーマカスタマイザー用のプログラムファイルを用意して読み込ませる

上記のように「メニュー」「サブメニュー」「詳細項目」を1つずつ追加するだけでも、結構な行数になります。通常ではすごい数になるでしょうから、これをテーマのfunctions.phpへそのまま追記するととても管理しにくくなります。

そこでおすすめなのが、テーマカスタマイザー関係のユーザー定義関数用の別のファイルを作り、それを通常のfunctions.phpへ読み込ませる方法です。

まずはパソコン上で新しくテキストファイルを作り、中身には「<?php」(PHPプログラムの開始タグ)だけ記述して、「theme-customizer.php」というPHPファイルとして保存します。

それを親テーマ内のstile.cssと同一階層へアップロードします。

「外観」→「テーマエディター」から「theme-customizer.php」を選択して、テーマカスタマイザー用のコードを書いていきます(冒頭の「<?php」は削除しないようにしてください)。

続いてテーマのfunctions.phpを開き、以下のコードを追記してください

/***** テーマカスタマイザーを呼び出す *****/

include (get_template_directory() .'/theme-customizer.php');

これでfunctions.phpからtheme-customizer.phpの内容が呼び出され、機能するようになります。

これでコードがごちゃごちゃにならずに済みます(他のプログラムでもこの手法が使えますから覚えておいて損はありません)。

ただ1つ注意点があります。それは、テーマカスタマイザー用プログラムが呼び出される前に、そこに記述した条件が呼び出されてはならないということです。

例えば、「YES/NO」の判断をする独自判別関数(先ほどis_〇〇を作るところで解説したもの)がtheme-customizer.phpの中にある場合、それが読み込まれるよりも前にこのis_〇〇を使ったコードを呼び出してはいけないといった具合です。

順序がおかしい場合には「未定義の関数が使用されています(英語で表記されますが、失念しました)」と表示され、保存することができませんので確認して修正を行ってください。

既存のカスタマイザー設定を別のメニュー内へ移動する方法

テーマの自作中、テーマカスタマイザーを開くと、いくつかのメニュー項目と詳細項目があることに気付きますね。それをそのままにしておいて独自のメニューを追加するのもいいのですが、できればジャンルごとに統一したメニュー内に詳細項目を出したいものです。

そこで最後に、既存の詳細項目を独自のメニュー内へ移動する方法を紹介します。

(コード中の「サブメニュー名」はこれまで紹介した部分を指します)

既存の詳細項目の調べ方

テーマカスタマイザーを開き、移動させたい詳細項目で右クリックして「検証」をクリックします(開発者用ツールが起動します)。

以下は「サイト基本情報」の「ロゴ」を開発者用ツールで開いた時の参考画面です

テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ|HABONE

カスタマイザーの左画面がリストタグで構成されているのがお分かりになるかと思います。

その中で赤枠部分にあるid(例ではcustomize-control-custom_logo)の「customize-control」が詳細項目であることの印、「custom_logo」が詳細項目名という風に出力されています。

この詳細項目名をコピーして以下のコードに貼り付けます

function ユーザー定義関数名($wp_customize){
//セクションの移動
$wp_customize -> get_control('移動させたい詳細項目名') -> section = '移動先のサブメニュー名';//移動
$wp_customize -> get_control('移動させたい詳細項目名') -> priority = 100;//優先度
}
add_action('customize_register','ユーザー定義関数名');

ユーザー定義関数名は適当なものを指定してください。「移動させたい詳細項目名」に先ほどコピーした詳細項目名を貼り付け、「移動先のサブメニュー名」にサブメニュー名を入力します。

テーマのfunctions.phpへ貼り付けて保存します。

問題がなければ一度テーマカスタマイザーを開きなおすと、思ったサブメニューへ詳細項目が移動しているのを確認できます。

あとは詳細項目同士の優先度を調整すれば、独自項目の中に標準の項目を混ぜて表示させることができます。

また、標準のメニュー自体は冒頭で説明した通り、詳細項目が完全になくなれば自動的に表示されなくなります(隠し項目や補助項目が残っているうちはメニューが表示され続けますから確認して移動させます)


以上、独自のテーマカスタマイザー項目の作り方、テーマへの反映のさせ方、その他お役立ち事項でした。長文でコードだらけで、なかなか大変そうに思えたかもしれませんが、一度作って慣れてしまえば何のことはないカスタマイズかとと思いますので、頑張ってチャレンジしてみてください。

最後におまけ情報をご覧ください。

おまけ テーマカスタマイザーで設定したデータはどうなっているのか?

設定した内容が保存されている場所

テーマカスタマイザーから設定した内容はすべてそのサイトがやり取りしているデータベースの中にあります。

サーバーのphpMyAdminというデータベースの中身を見たり操作したりする機能を使って開いてみると、

「wp_options」→「theme_mods_テーマのスラグ(テーマフォルダの名前)」という行にすべてが格納されています(下図赤色部分)。

テーマに独自の設定項目を追加して、テーマに反映する方法いろいろ|HABONE

ビギナーの方から「以前に使っていて一旦削除したテーマを再インストールして有効化したら、昔の設定内容が残っていた」という話をよく聞きますが、「theme_mods_テーマのスラグ(テーマフォルダの名前)」 で別々に管理されていることから、このデータを削除しない限り、別のテーマにしてから元のテーマに戻しても、カスタマイザーで設定した内容は保存されているためにそうなるのです(一部のテーマではテーマ削除時にすべての保存データを削除するものもありますのですべてというわけではありません)。

また、このデータは通常、テーマを有効化した時にデータの有無が検証され、無い場合には新しく作られるようになっています。

子テーマと親テーマは別のデータとして格納される

ここまでの説明で多分理解されていると思いますが、原則テーマのスラグ別でデータが作られますので、子テーマを作成してインストール&有効化した状況で、カスタマイザーを設定した場合は、子テーマ用のデータとして保存されるようになっていますから、子テーマを使う場合にはその点に留意し、テーマのコードを改修してカスタマイズする予定があるのでしたら、初めから子テーマを作って有効化した方が後から苦労することがありません。

カスタマイザーの設定を元に戻したい(デフォルトに戻したい)ときは

テーマ開発などでいろいろとテストしたものを一旦元の状態に戻したい(新規にインストールした状態に戻したい)、過去に使っていたテーマの設定を一旦何もしていない状態にしてから改めて設定したいといったケースが結構あるのではないかと思います。

テーマカスタマイザーで設定した情報を元に戻すには、テーマを別のものに一旦変えた上で、データベース上の該当行(上図の赤色部分)を削除し、もう一度有効化すれば、新たに何も設定がない状態の行が追加され、テーマカスタマイザーに何も設定変更をしていない状態に戻すことができます。

データベースの内容を直接変更することは、サイトに不具合が起きたり、サイト自体が動作しなくなる等のリスクがありますので、戻せる状態・スキルを持った上でバックアップを取った後に行うことをおすすめします。

前述した通り、テーマ設定を保存するデータベースのデータはテーマ有効化時に生成されるようになっていますから、不具合の発生を防ぐという意味でも有効化していないテーマのデータを操作(削除)するようにしてください。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球