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

2017.03.21 2017.11.13WordPress
テーマカスタマイザーで画像をアップロードできるようにする方法

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

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

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

まずは、サンプルソースから。WordPressテーマのfunctions.phpに追記してください。

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

/* テーマカスタマイザー
---------------------------------------------------------- */
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' ) );
}

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

アクションフックの作成

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

/* テーマカスタマイザー
---------------------------------------------------------- */
add_action( 'customize_register', 'theme_customize' );
function theme_customize($wp_customize){
//ここにソースを追加していきます。
}

セクションの作成

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

/* テーマカスタマイザー
---------------------------------------------------------- */
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は下記のようになっていますので、挿入したい位置に合わせて値を入力してください。

サイトタイトルとキャッチフレーズ 20
40
ヘッダー画像 60
背景画像 80
ナビゲーション 100
固定フロントページ 120

設定項目の作成

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

/* テーマカスタマイザー
---------------------------------------------------------- */
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)に複数の設定項目を設置することもできます。例えば画像セクションにロゴ画像とプロフィール画像をアップロードする機能を追加したい場合には下記のように記述します。

/* テーマカスタマイザー
---------------------------------------------------------- */
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テーマの方からテーマカスタマイザーでアップロードした画像を呼び出すための関数を作成しておきます。

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

/* テーマカスタマイザーで設定された画像の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属性にて上記のように出力すれば大丈夫です。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら