2022年04月17日

カスタマイズ画面に「ユーザ作成メニュ」を追加する方法

外観→カスタマイズの中で表示されるメニュの追加/削除は下記を参照してください。

  カスタマイズメニュの追加と削除

 

ここでは外観→カスタマイズの中に下図の様な「ユーザ作成メニュ」を追加する方法を解説します。

親メニュ 子メニュ

 

1.ユーザ作成メニュの作成方法とデータ取得

ユーザ作成メニュはアクションフック：customize_register を利用します。

function add_custom_item($wp_customize){
  $wp_customize->add_section($name, $args);        // 親メニュの作成
  $wp_customize->add_setting($child_name,$args); // 子メニュの作成①
  $wp_customize->add_control($child_name,$args); // 子メニュの作成②
}
add_action( 'customize_register', 'add_custom_item' ,10,1);

■アクションフック：customize_registerは、参照変数として$wp_customizeを提供します。

よって6行目の参照変数の数は１になります。

以下にタイプ別にメニュの作成方法を解説していきます。

親メニュは下記関数で作成します。

add_section($name, $args);

$name　(文字列)

セクション名(任意名称)を指定します。

$args　(配列)

連想配列で下記キーに値を設定します。(＝＞で値を指定)

'title'：タイトルを記述します。

'priority'：メニュを表示する位置を数値で指定します。

下記の基本メニュのPriorityを参考に表示位置を数字で指定します。

メニュ Priority (Order)
サイト基本情報 20
カラー 40
ヘッダーメディア 60
背景画像 80
メニュ 100
ウィジェット 110
ホームページ設定 120
追加CSS 200

'description'：子メニュの先頭に表示されるコメントを指定します。

事例

$wp_customize->add_section( 'section', array( 
  'title' => 'カスタマイズ・テスト', 
  'priority' => 83,
   'description' => 'タイプ別の入力項目を表示しています。',
 ));
上記で下図の親メニュと子メニュの説明文が作成されます。
　

子メニュは下記の関数で作成します。

1.add_setting( $child_name , $args );

2.add_control( $child_name , $args );

テキスト入力場合

1.add_setting( $child_name , $args );

$child_name (文字列)：子メニュの変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'default'：add_control()のデフォルト値を指定します。

'sanitize_callback':下記のテキストの無害化処理を指定します。

'sanitize_text_field'

2.add_control( $child_name , $args );

$child_name (文字列)：add_setting()と同じ変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'section'：親メニュのセクション名を指定します

'type'：’text’を指定します。

'label'：タイトルを設定します

'description'：説明文を入力します

事例

$wp_customize->add_setting( 'text_setting', array(
		'default' => '',
		'sanitize_callback'  => 'sanitize_text_field',
));
$wp_customize->add_control( 'text_setting', array(
		'section'     => 'section',
		'type'        => 'text',
		'label'       => 'テキスト入力',
		'description' => '下記にテキストを入力してください。',
));
上記で下記の子メニュが作成されます。
　

子メニュは下記の関数で作成します。

1.add_setting( $child_name , $args );

2.add_control( $child_name , $args );

数値入力場合

1.add_setting( $child_name , $args );

$child_name (文字列)：子メニュの変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'default'：add_control()のデフォルト値を指定します。

'sanitize_callback':下記の数値の無害化処理を指定します。

'absint'

2.add_control( $child_name , $args );

$child_name (文字列)：add_setting()と同じ変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'section'：親メニュのセクション名を指定します

'type'：'number'を指定します。

'label'：タイトルを設定します

'description'：説明文を入力します

事例

$wp_customize->add_setting( 'number_setting', array(
		'default' => 8,
		'sanitize_callback' => 'absint'
));
$wp_customize->add_control('number_setting', array(
		'section'     => 'section',
		'type' => 'number',
		'label'       => '数値入力',
		'description' => '数値を入力するか選択してください。',
));
上記で下記の子メニュが作成されます。
　

子メニュは下記の関数で作成します。

1.add_setting( $child_name , $args );

2.add_control( $child_name , $args );

ラジオBOXの場合

1.add_setting( $child_name , $args );

$child_name (文字列)：子メニュの変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'default'：add_control()のデフォルト値を指定します。

'sanitize_callback':下記のラジオBOXの無害化処理を指定します。

function ($input, $setting){
  $input = sanitize_key( $input );
  $choices = $setting->manager->get_control($setting->id)->choices;
  return (array_key_exists( $input, $choices ) ? $input : $setting->default );
 }

2.add_control( $child_name , $args );

$child_name (文字列)：add_setting()と同じ変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'section'：親メニュのセクション名を指定します

'type'：'radio'を指定します。

'label'：タイトルを設定します

'description'：説明文を入力します

'choices'：選択肢を連想配列で指定します。

事例

$wp_customize->add_setting( 'radio_setting', array(
		'default' => '1',
		'sanitize_callback'  => function ($input, $setting){
    		$input = sanitize_key( $input );
    		$choices = $setting->manager->get_control($setting->id)->choices;
    		return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
			}
));
$wp_customize->add_control( 'radio_setting', array(
		'section'     => 'section',
		'type'        => 'radio',
		'label'       => 'ラジオBOX選択',
		'description' => '下記から選択してください',
		'choices' => array(
			'1'  => '項目１',
			'2' => '項目２')
));
上記で下記の子メニュが作成されます。
　

子メニュは下記の関数で作成します。

1.add_setting( $child_name , $args );

2.add_control( $child_name , $args );

チェックBOXの場合

1.add_setting( $child_name , $args );

$child_name (文字列)：子メニュの変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'default'：add_control()のデフォルト値を指定します。

'sanitize_callback':下記のチェックBOXの無害化処理を指定します。

function($input){
　return (isset( $input ) ? true : false );
}

2.add_control( $child_name , $args );

$child_name (文字列)：add_setting()と同じ変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'section'：親メニュのセクション名を指定します

'type'：'checkbox'を指定します。

'label'：チェックボックスのテキスト。

'description'：選択の説明

事例

$wp_customize->add_setting( 'check_setting', array(
		'default'  => false,
		'sanitize_callback'  => function($input){
				return (isset( $input ) ? true : false );
         },
));
$wp_customize->add_control( 'check_setting', array(
		'section'     => 'section',
		'type'        => 'checkbox',
		'label'       => '選択',
		'description' => 'テーマ詳細を非表示にする時はチェックして下さい',
));
上記で下記の子メニュが作成されます。
　

子メニュは下記の関数で作成します。

1.add_setting( $child_name , $args );

2.add_control(new WP_Customize_Color_Control($wp_customize,$child_name, $args))

カラーパレットの場合

1.add_setting( $child_name , $args );

$child_name (文字列)：子メニュの変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'default'：add_control()のデフォルト値を指定します。

'sanitize_callback':下記のチェックBOXの無害化処理を指定します。

'sanitize_text_field'

2.add_control(new WP_Customize_Color_Control($wp_customize,$child_name, $args))

$child_name (文字列)：add_setting()と同じ変数名を指定します。

$args          (配列)   ：連想配列で下記キーに値を設定します。(＝＞で値を指定)

'section'：親メニュのセクション名を指定します

'label'：タイトルを設定します

'description'：説明文を入力します

事例

$wp_customize->add_setting('color_setting', array(
		'default' => '#199ece',
		'sanitize_callback' => 'sanitize_text_field',
)); 
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color_setting', array(
		'section'	 => 'section',
		'label'		 => '色',
		'description'    => 'カラーコードを指定して下さい,'
)));

上記で下記の子メニュが作成されます。

 

上記で作成したメニュからデータを取得するのは get_theme_mod() 関数を利用します。

上記サンプル事例の場合は下記になります。

<?php echo 'テキスト='.get_theme_mod('text_setting','').'<br/>'; ?>
<?php echo '数値='.get_theme_mod('number_setting',8).'<br/>'; ?>
<?php echo 'ラジオBOX='.get_theme_mod('radio_setting','1').'<br/>'; ?>
<?php echo 'チェックBOX='.get_theme_mod('check_setting',false).'<br/>'; ?>
<?php echo 'チェックBOX='.get_theme_mod('color_setting','#199ece').'<br/>'; ?>

 

2.このサイトで使っている具体的な事例

このサイトでは下記の様なユーザ作成メニュを作成しています。

親メニュ 子メニュ

投稿画面のサイドバーの位置を選択するメニュです、

PC、タブレット、スマホの左右のマージンをカスタマイズできるメニュです。

1.上記を作成するプログラムは下記になります。

function add_custom_item($wp_customize){
	// 外観→カスタマイズにサイドバーの位置（左右）を設定するメニューを新設する
	$wp_customize->add_section( 'sidebar_section', array(
		'title'    => 'サイドバー設定',
		'priority' => 81, 
		'description' => 'サイドバーレイアウトを選択してください。',
	));
	$wp_customize->add_setting( 'sidebar_setting', array(
		'default' => 'right',
		'sanitize_callback'  => function ($input, $setting){
			$input = sanitize_key( $input );
			$choices = $setting->manager->get_control($setting->id)->choices;
			return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
		}
	));
	$wp_customize->add_control( 'sidebar_setting', array(
		'section'     => 'sidebar_section',
		'label'       => 'サイドバー設定',
		'description' => 'サイドバー位置を下記から選択して下さい',
		'type'        => 'radio',
		'choices' => array(
			'left'  => '左',
			'right' => '右')
	));
	// 外観→カスタマイズに画面の左右マージン量を設定するメニューを追加する
	$wp_customize->add_section( 'margin_section', array(
		'title'    => '画面の左右余白設定',
		'description' => '基本マージンは下記になります<br/>修正する場合は値を入れてください。',
		'priority' => 82, 
	));
	$wp_customize->add_setting( 'margin_pc', array(
		'default' => 8,
		'sanitize_callback' => 'absint'
	));
	$wp_customize->add_control('margin_pc', array(
		'section'     => 'margin_section',
		'label'       => 'PCマージン',
		'description' => '修正値は<font color="red">%</font>です',
		'type' => 'number',
	));
	$wp_customize->add_setting('margin_sm', array(
		'default' => 2,
		'sanitize_callback' => 'absint'
	));
	$wp_customize->add_control( 'margin_sm', array(
		'section'     => 'margin_section',
		'label'       => 'タブレットマージン',
		'description' => '修正値は<font color="red">%</font>です',
		'type' => 'number',
	));
	$wp_customize->add_setting('margin_xs', array(
		'default' => '0',
		'sanitize_callback' => 'absint'
	));
	$wp_customize->add_control( 'margin_xs', array(
		'section'     => 'margin_section',
		'label'       => 'スマホマージン',
		'description' => '修正値は<font color="red">px</font>です',
		'type' => 'number',
	));   
}
add_action( 'customize_register', 'add_custom_item',10,1);

 

2.上記設定を画面に反映させるプログラム。

上記は表示画面をどの様にするか？の設定になるので画面への反映はアクションフック:wp_headを利用します。

function customizer_settings(){
?>
	<!-- サイドバーが右か左かの処理 -->
	<?php if(get_theme_mod('sidebar_setting') == 'left'):?>
	 <style>
	 	#post_contener{
	 		align-items:stretch;
	 		flex-direction:row;}
	 </style>
	<?php endif;?>
		 
	<!-- PCの左右マージンの処理 -->
	<?php if(get_theme_mod('margin_pc') | get_theme_mod('margin_sm') | get_theme_mod('margin_xs')):?>
		<style>
			#header_contener,#menu_contener,#slide_contener,#post_contener,#page_contener,#footer_contener
				{margin:0 <?php echo get_theme_mod('margin_pc',8);?>%;}
			@media screen and (min-width:768px) and (max-width:991px){
				#header_contener,#menu_contener,#slide_contener,#post_contener,#page_contener,#footer_contener
					{margin:0 <?php echo get_theme_mod('margin_sm',2);?>%;}
			}
			@media screen and (max-width:767px){
				#header_contener,#menu_contener,#slide_contener,#post_contener,#page_contener,#footer_contener,#post_sidebar_xs
					{margin:0 <?php echo get_theme_mod('margin_xs',0);?>px;}
			}
		</style>
	<?php endif;?>
<?php	
}; 
add_action( 'wp_head', 'customizer_settings');

■上記でCSSを変更していますが、これはテーマがどの様なCSSになっているかで異なります。