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

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'=>メニューの優先度,
    )
  );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下はすべての基本となるコードです。

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', 'ユーザー定義関数名' );

ここまでは、基本形と、有効（True）／無効（False）の指定をするチェックボックスの説明をしました。

ここから先で、いろいろな形でテーマカスタマイザー項目を追加するためのコード例をいくつか紹介しますので、見比べながら適宜追加していってください。

ドロップダウン選択

ドロップダウン選択とは、あらかじめ設定した選択肢の中から、1つだけを選択できるようにするためのコードです。

$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'=>'選択肢１',
'small'=>'選択肢２',
	),
)));

ラジオボタン選択

選択できる項目をすべて表示させ、その中から1つを選択できるようにするためのコードです。

$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'=>'選択肢１',
'small'=>'選択肢２',
	),
)));

1行テキスト

比較的短い文章や、IDなどを入力してもらうための窓を作るコードです。

$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'=>詳細項目の中での優先順,
)));

画像のアップロード（画像のURLを格納する）

画像をアップロードしてもらうためのコードです。

設定した画像はテーマカスタマイザー上にプレビューで表示され、画像のURLがデータベース内へ保存されます。

$wp_customize->add_setting( '詳細項目名' );
$wp_customize->add_control(
  new WP_Customize_Image_Control(
    $wp_customize,
    '詳細項目名',
    array(
'label'=>'詳細項目の表示名',
'description'=>'説明文',
'section'=>'サブメニュー名',
'settings'=>'詳細項目名',
'priority'=>詳細項目の中での優先順,
    )));

画像のアップロード（画像IDを格納する）

前項と同じく画像をアップロードするためのコードです。

前項のコードが画像URLを保存するものなのに対し、以下は画像IDを保存するものになります。

テーマ内で画像IDを使って何かをする場合にはこちらを使用しましょう。

両者のコードの違いは、画像URLを保存するものは「WP_Customize_Image_Control」を使用、IDを保存するものは「WP_Customize_Media_Control」を使用する点です

$wp_customize->add_setting( '詳細項目名' );
$wp_customize->add_control(
  new WP_Customize_Media_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'=>__('説明文を英語で書いたもの','接頭辞'),

設定項目のサニタイズ処理の仕方

サニタイズ（sanitize）、直訳すると消毒という意味です。テーマカスタマイザーのサニタイズとは、文字通り入力された内容に対して、別のコードなどが使えないように限定することをいいます。

サニタイズ処理は、カスタマイザーのオプションの指定方法（選択方法）によって異なります。

サニタイズ処理の記述は、以下のように、add_settingの部分へ行います（詳細項目設定コードの冒頭部分です）。

 $wp_customize->add_setting( '詳細項目名', array(
 'default' => 'デフォルト',
 'sanitize_callback' => 'サニタイズ処理関数',
 ) );

テーマのテンプレート部分とは違い、悪意を持って何かを仕込むということをする場合には、管理者権限でログインしてテーマカスタマイザーを開いて．．ということになるので、誰にでも使えるテーマとして配布する予定がなければ特に必要ないのかもしれません。

以下がオプションの指定方法に対するサニタイズ処理用コードです。

「YES/NO」

先にサニタイズ関数を作成する必要があります。テーマのfunctions.phpへ以下のコードを追加します。

/***** テーマカスタマイザーのサニタイズ *****/
/* チェックボックス */
function ha_sanitize_checkbox( $input ) {
	if ( $input == true ) {
		return true;
	} else {
		return false;
	}
}

テーマカスタマイザーの詳細設定へ以下を追加します

必ずサニタイズ関数を登録（functions.phpへの追加と保存）を行った後で追記してください

'sanitize_callback' => 'ha_sanitize_checkbox',

ドロップダウン選択　ラジオボタン選択

先にサニタイズ関数を作成する必要があります。テーマのfunctions.phpへ以下のコードを追加します。

/* ラジオボタンとセレクトボックス（汎用） */
function ha_sanitize_select($input, $setting) {
$input = sanitize_key($input);
$choices = $setting->manager->get_control($setting->id)->choices;
return (array_key_exists($input, $choices) ? $input : $setting->default);
}

テーマカスタマイザーの詳細設定へ以下を追加します

必ずサニタイズ関数を登録（functions.phpへの追加と保存）を行った後で追記してください

'sanitize_callback' => 'ha_sanitize_select',

1行テキスト　複数行テキスト　色を指定する

WordPressに備わっているサニタイズ関数を利用しますので、以下を追加するだけです。

'sanitize_callback' => 'sanitize_text_field',

画像のアップロード（画像のURLを格納する）

WordPressに備わっているサニタイズ関数を利用しますので、以下を追加するだけです。

'sanitize_callback' => 'esc_url_raw',

画像のアップロード（画像IDを格納する）

'sanitize_callback' => 'absint',

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

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

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

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

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

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

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

これをテーマ内で使う場合には以下のように記述します（上がPHPを独立させている場合、下がすべて１つの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; ?>

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

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

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

以下、例として、全体（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="テーマに独自の設定項目を追加して反映する方法いろいろ|Personal WP Customization Notes (PWCN)">

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

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

コードを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_〇〇を使ったコードを呼び出してはいけないといった具合です。

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

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

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

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

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

既存の詳細項目の調べ方

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

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

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

その中で赤枠部分にある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_テーマのスラグ（テーマフォルダの名前）」という行にすべてが格納されています（下図赤色部分）。

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

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

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

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

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

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

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

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

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

おまけ　設定データのない項目を追加するには

ここまで、基本的なテーマカスタマイザー項目の設定方法、テーマ内での適用方法、データの扱われ方などを紹介してきました。

最後に、おまけ情報として、設定データを持たない項目（そのセクションの説明やメモなど）を追加する方法を紹介して終わりにします。

詳細は以下のページで詳しく解説しています。

テーマカスタマイザーで説明事項のみを追加したいときなどに便利ですからぜひ活用くださいね。

テーマカスタマイザー内に設定のない項目（説明など）を追加する方法