テーマカスタマイズでのヘッダー画像のように、リサイズ（クロップともいう）が可能な画像のセクションを設置したかった。

 

リサイズなしのプレーンなやつなら、WP_Customize_Image_Controlを使えばいけるものの、これだと画像を選択した後の切り抜き画面が出てこない。

 

で、昼餉の後の睡魔に若干ウトウトしながらも、WP_Customize_Image_Controlに類似したソースコードを調べてたら、WP_Customize_Cropped_Image_Controlなるものを発見した。

 

$wp_customizeでの書式に則って以下のように記述すると、記事の表題通りの画像のセクションが設置できる。

/* テーマカスタマイズのファイルへ追加（テーマカスタマイズのセクション用） */
function theme_customize_register( $wp_customize ) {

	$wp_customize->add_section( 'footer_image_settings', array(
		'title'   => __( 'Footer image', 'theme-language' ),
		'priority'=> 60,
		'description' => __( '', 'materialike' ),
	) );

	$wp_customize->add_setting( 'footer_image', array(
		'default'   => '',
		'transport' => 'refresh',
	) );
	$wp_customize->add_control(
		new WP_Customize_Cropped_Image_Control( $wp_customize, 'footer_image_control', array_merge( array(
			'label'   => __( 'Footer image', 'theme-language' ),
			'section' => 'footer_image_settings',
			'settings'=> 'footer_image',
			'priority'=> '10',
			'button_labels' => array(
				'select'       => __( 'Select image', 'theme-language' ),
				'change'       => __( 'Change image', 'theme-language' ),
				'remove'       => __( 'Remove', 'theme-language' ),
				'default'      => __( 'Default', 'theme-language' ),
				'placeholder'  => __( 'No image selected', 'theme-language' ),
				'frame_title'  => __( 'Select image', 'theme-language' ),
			),
		), theme_footer_setting() ) )
	);

}
add_action( 'customize_register', 'theme_customize_register' );

/* functions.phpへ追加（画像のリサイズ設定用） */
function theme_footer_setting() {

	return array(
		'width'  => 128,
		'height' => 64,
		'flex_width' => false,
		'flex_height'=> false,
	);

}

/* functions.phpへ追加（テンプレート等での画像の表示用） */
function theme_footer_image() {

	// wp_get_attachment_image_src()の第二引数を空にすることでテーマカスタマイズ側のリサイズ状態のまま表示可能
	$image = wp_get_attachment_image_src( get_theme_mod( 'footer_image', '' ), '' );

	if ( isset( $image[0] ) ) {
		echo '<img src="' . $image[0] . '" />';
	}

}

 

項目の表示やテーマオプションの項目は適宜書き換えればいいと思う。

 

冒頭で「ヘッダー画像のように」と書いたが、例えばヘッダー画像をロゴに割り当てて、フッターに別のロゴ画像を設定させたいとき等に便利かもしれない。

 

以上、やりたかったことの覚書き。