Wordpressでカスタマイザーにオプションを追加する一番簡単な方法

カスタマイザーを使うことでロゴやヘッダー画像のアップロード、テーマカラーの設定などWordpressテーマの様々なオプション設定ができるようになる。

カスタマイザーを作成する方法

functios.phpに以下のコードを追記する。

function mytheme_customize_register( $wp_customize ) {
  // セクション（グループ）を作成
  $wp_customize->add_section( 'theme_color' , array(
		'title'      => __( 'Theme Color', 'text_domain' ),
		'priority'   => 21,
	) );
  // データベースに新しい設定項目を登録
	$wp_customize->add_setting( 'color_base' , array(
    'default'   => '#fff',
		'transport' => 'refresh',
		'sanitize_callback' => 'sanitize_hex_color',
	) );
  // 管理画面に表示するコントローラ（フォーム）を登録
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_base', array(
		'label'      => __( 'Base Color', 'text_domain' ),
		'section'    => 'theme_color',
		'settings'   => 'color_base',
	) ) );

  // 画像のアップロードの場合
	$wp_customize->add_section( 'theme_image' , array(
		'title'      => __( 'Image', 'text_domain' ),
		'priority'   => 20,
	) );
	$wp_customize->add_setting( 'logo_upload' , array(
		'transport' => 'refresh',
		'sanitize_callback' => 'text_domain_sanitize_file',
	) );
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo', array(
		'label'      => __( 'Upload a logo', 'text_domain' ),
		'section'    => 'theme_image',
		'settings'   => 'logo_upload',
	)));
}

// カラー設定をCSSで表示するための関数、wp_headで呼び出し
function header_output() {
	$color_base = get_theme_mod('color_base', '#fff');
	$css = '
	/**
	 * custom theme
	 */
	body { color: '.$color_base.'; }
	'
  ?>
	<style type="text/css">
		<?php echo $css; ?>
	</style>
	<?php
}
// 画像用サニタイザー、ファイルタイプをチェックする
function text_domain_sanitize_file( $file, $setting ) {
  //allowed file types
  $mimes = array(
    'jpg|jpeg|jpe' => 'image/jpeg',
    'gif'          => 'image/gif',
    'png'          => 'image/png'
  );
    
  //check file type from file name
  $file_ext = wp_check_filetype( $file, $mimes );
    
  //if file has a valid mime type return it, otherwise return default
  return ( $file_ext['ext'] ? $file : $setting->default );
}

// カスタマイザーの登録
add_action( 'customize_register', 'mytheme_customize_register' );

// headに設定したCSSを表示
add_action( 'wp_head' , 'header_output' );

カスタマイザーにオプションを登録するには以下の３つの設定を行う必要がある。

• section: オプションのグループを作る
• setting: オプションの設定をデータベースに登録
• control: オプションの表示（フォームやラベルなど）を設定

コードを追記してカスタマイザーを表示すると、画像のように項目が追加される。

カスタマイザーのデータをテンプレートに表示する方法

上記のコードの場合、headで出力するものはアクションの登録で自動的に表示される。

画像はアップロードしたデータをテンプレート側で取得して表示する必要がある。

取得方法は、get_theme_mod()で登録した設定名を指定するだけ。

<?php if( get_theme_mod('logo_upload') ): ?>
  <h1><img src="<?php echo get_theme_mod('logo_upload'); ?>" alt="logo"></h1>
<?php endif; ?>