WordPressテーマには、テーマカスタマイザーを利用することでさまざまな機能を追加することができます。

今回は、テーマカスタマイザーで画像をアップロードする機能を追加し、その画像をWordPressテーマで呼び出す方法についてご紹介します。

テーマカスタマイザーで画像アップロード機能を追加するソース

まずは完成したソースから。

WordPressテーマのfunctions.phpに追記してください。

下記のソースではテーマカスタマイザーに画像をアップロードする機能を追加したあと、アップロードした画像をWordPressテーマで呼び出すための関数を作成しています。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//画像
	$wp_customize->add_section( 'img_section', array(
		'title' => '画像', //セクションのタイトル
		'priority' => 59, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

		$wp_customize->add_setting( 'logo_img' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_img', array(
			'label' => 'ロゴ画像', //設定項目のタイトル
			'section' => 'img_section', //追加するセクションのID
			'settings' => 'logo_img', //追加する設定項目のID
			'description' => 'ロゴ画像を設定してください。', //設定項目の説明
		)));

}

/* テーマカスタマイザーで設定された画像のURLを取得
---------------------------------------------------------- */
//ヘッダーロゴ画像
function get_the_logo_img_url(){
	return esc_url( get_theme_mod( 'logo_img' ) );
}

以下、順を追って手順をご紹介していきます。

画像アップロード機能を追加する手順

アクションフックの作成

まず、テーマカスタマイザーに機能を追加するためのアクションフックを作成します。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//ここにソースを追加していきます。

}

セクションの作成

次にテーマカスタマイザーに、画像アップロード機能のセクションを追加します。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//画像
	$wp_customize->add_section( 'img_section', array(
		'title' => '画像', //セクションのタイトル
		'priority' => 59, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

}

WordPressのテーマカスタマイザーには標準で以下のセクションが組み込まれています。

上記ソースのpriorityは、ダッシュボードの外観→カスタマイズ画面にて、今回追加するセクションをどの位置に表示するかを設定するためのものです。

標準装備のセクションのpriorityは下記のようになっていますので、挿入したい位置に合わせて値を入力してください。

設定項目の作成

セクションの追加ができたら、そのセクションに設定項目(セッティング)を追加していきます。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//画像
	$wp_customize->add_section( 'img_section', array(
		'title' => '画像', //セクションのタイトル
		'priority' => 59, //セクションの位置
		'description' => '画像をアップロードしてください。', //セクションの説明
	));

		$wp_customize->add_setting( 'logo_img' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_img', array(
			'label' => 'ロゴ画像', //設定項目のタイトル
			'section' => 'img_section', //追加するセクションのID
			'settings' => 'logo_img', //追加する設定項目のID
			'description' => 'ロゴ画像を設定してください。', //設定項目の説明
		)));

}

上記ソースでは、img_sectionというIDのセクションにlogo_imgというIDの設定項目を追加しています。

同じ要領で、画像セクション(img_section)に複数の設定項目を設置することもできます。

例えば画像セクションにロゴ画像とプロフィール画像をアップロードする機能を追加したい場合には下記のように記述します。

functions.php

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){

	//画像
	$wp_customize->add_section( 'img_section', array(
		'title' => '画像',
		'priority' => 59,
		'description' => '画像をアップロードしてください。',
	));

		$wp_customize->add_setting( 'logo_img' );
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_img', array(
			'label' => 'ロゴ画像',
			'section' => 'img_section',
			'settings' => 'logo_img',
			'description' => 'ロゴ画像を設定してください。',
		)));

		$wp_customize->add_setting( 'profile_img' ); //設定項目を追加
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'profile_img', array(
			'label' => 'プロフィール画像',
			'section' => 'img_section',
			'settings' => 'profile_img',
			'description' => 'プロフィール画像を設定してください。',
		)));

}

アップロードした画像のURLを取得する関数

仕上げとして、WordPressテーマの方からテーマカスタマイザーでアップロードした画像を呼び出すための関数を作成しておきます。

ここで関数を作っておけば、テーマの方からはこの関数を呼び出すだけで画像を表示できるので手間が省けるだけでなく、修正が必要になった場合にはここを変更すればいいだけなのでメンテナンス面でもおすすめです。

functions.php

/* テーマカスタマイザーで設定された画像のURLを取得
---------------------------------------------------------- */
//ヘッダーロゴ画像
function get_the_logo_img_url(){
	return esc_url( get_theme_mod( 'logo_img' ) );
}

テーマカスタマイザーで画像をアップロードすると、画像のURLがデータベースに格納されます。

上記のソースでは、logo_imgというセッティングIDが付加された画像のURLを呼び出すためにget_the_logo_img_urlという関数を作成しています。

WordPressテーマで画像を呼び出す方法

アップロードした画像をサイト上に表示させるには、WordPressテーマのテンプレートファイルに以下のように記述します。

<div class="logo"><img src="<?php echo get_the_logo_img_url(); ?>" alt="" /></div>

get_the_logo_img_url関数は画像のURLを取得するための関数なので、imgタグのsrc属性にて上記のように出力すれば大丈夫です。

まとめ

以上、テーマカスタマイザーで画像をアップロードできるようにする方法でした。

テーマカスタマイザーに関する情報は十分とは言えず、僕も手探り状態です。

しかしうまく活用できれば使いやすいテーマにすることができますので、是非利用してみて頂ければと思います。