
最近、Wordpressのテーマカスタマイザーの設定方法などを見直したりしています。
すると海外のサイトなどには、日本のサイトではあまり紹介されていない、テーマカスタマイザー機能などがまだ、いろいろあったりします。
今回紹介する「テーマカスタマイザーでメディアをアップロードする機能」もその1つです。
目次
メディアアップロード機能とは
テーマカスタマイザーで、メディアをアップロードする機能の完成形は以下のようなものになります。(以下は、サイトロゴのアップロード機能例)

テーマカスタマイザーとは、「外観→カスタマイズ」で表示されるカスタマイズ画面のことです。
こんな感じで、Wordpressのメディア機能にアップロードして、そこから画像を選択できるので、テーマ内画像の変更を手軽に行えるようになります。
もちろん、今回の方法を子テーマに適用すれば、子テーマ内からでも、この機能を実装することができます。
カスタマイズの主な手順

このカスタマイズは、コピペで編集するとしたら以下の2つだけになります。
- functions.phpでカスタマイザー部分の設定
- ロゴを表示する部分で設定値(今回はロゴのURL)の呼び出し
今回は、ロゴの画像ですが、コピペして好みの設定に変更すれば、いろいろな場面に利用できます。
テーマカスタマイザー用の設定
メディアのアップロード機能をテーマカスタマイザーで呼び出すには、以下のように呼び出します。
以下をコピペして親テーマでも子テーマでも良いので、functions.phpに追記します。
///////////////////////////////////////
// テーマカスタマイザーにロゴアップロード設定機能追加
///////////////////////////////////////
define('LOGO_SECTION', 'logo_section'); //セクションIDの定数化
define('LOGO_IMAGE_URL', 'logo_image_url'); //セッティングIDの定数化
function themename_theme_customizer( $wp_customize ) {
$wp_customize->add_section( LOGO_SECTION , array(
'title' => 'ロゴ画像', //セクション名
'priority' => 30, //カスタマイザー項目の表示順
'description' => 'サイトのロゴ設定。', //セクションの説明
) );
$wp_customize->add_setting( LOGO_IMAGE_URL );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, LOGO_IMAGE_URL, array(
'label' => 'ロゴ', //設定ラベル
'section' => LOGO_SECTION, //セクションID
'settings' => LOGO_IMAGE_URL, //セッティングID
'description' => '画像をアップロードするとヘッダーにあるデフォルトのサイト名と入れ替わります。',
) ) );
}
add_action( 'customize_register', 'themename_theme_customizer' );//カスタマイザーに登録
//ロゴイメージURLの取得
function get_the_logo_image_url(){
return esc_url( get_theme_mod( LOGO_IMAGE_URL ) );
}
結構過剰気味にコメントを入れたので、特に悩むことはないかもしれませんが、それぞれについて説明します。
テーマカスタマイザー設定をフックする
まずは「customize_register」をフックしてテーマカスタマイザー項目設定用の関数を記入します。
function themename_theme_customizer( $wp_customize ) {
//テーマカスタマイザー項目の設定
}
add_action( 'customize_register', 'themename_theme_customizer' );//カスタマイザーに登録
セクションの設定を追加
その関数内に、セクションの設定を書きます。セクションIDは複数回使うので定数化してあります。
define('LOGO_SECTION', 'logo_section'); //セクションIDの定数化
//...
$wp_customize->add_section( LOGO_SECTION , array(
'title' => 'ロゴ画像', //セクション名
'priority' => 30, //カスタマイザー項目の表示優先度
'description' => 'サイトのロゴ設定。', //セクションの説明
) );
セクションの設定をすると、この部分に反映されます。

設定(セッティング)項目の追加
次に、設定項目を追加します。セッティングIDは複数回利用するので、定数化してあります。
define('LOGO_IMAGE_URL', 'logo_image_url'); //セッティングIDの定数化
//...
$wp_customize->add_setting( LOGO_IMAGE_URL );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, LOGO_IMAGE_URL, array(
'label' => 'ロゴ', //設定ラベル
'section' => LOGO_SECTION, //セクションID
'settings' => LOGO_IMAGE_URL, //セッティングID
'description' => '画像をアップロードするとヘッダーにあるデフォルトのサイト名と入れ替わります。',
) ) );
設定項目は、このように反映されます。

設定値を呼び出す関数
画像のアップロード設定機能を実装したら、Wordpressには、画像のURLが格納されます。
それを呼び出す関数も作っておきます。
//ロゴイメージURLの取得
function get_the_logo_image_url(){
return esc_url( get_theme_mod( LOGO_IMAGE_URL ) );
}
こういったのを作っておくと、テンプレートなどで呼び出すときに手軽になります。
後に、変更があった時にも、ここだけを変更すれば良くなりますし、何かと手間が省けます。
テンプレートに実装
あとは、テーマテンプレート内のロゴを表示させたい部分に、以下のようなコードを記入します。
<?php
///////////////////////////////////////
// ロゴ表示部分
///////////////////////////////////////
if ( get_the_logo_image_url() ) : ?>
<div class='site-logo'>
<a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo get_the_logo_image_url(); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
</div>
<?php else : ?>
<hgroup>
<h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
<h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php endif; ?>
すると、テーマカスタマイザーで画像が設定されている場合は、ロゴが表示されます。
画像が設定されていない場合は、通常のタイトルが表示されます。
今回のコードは、以下のページのものを参考にさせていただきました。
参考 Adding a logo uploader to your WordPress theme with the Theme Customizer | kwight.ca
まとめ
ただ単にWordpressテーマをカスタマイズしたい場合でも、画像を頻繁に変更する場合は、このようにテーマカスタマイザーから手軽に変更できるようにしておくと、後から楽ができます。
あと、もちろん画像を変更するようなテーマのカスタマイズを、仕事として依頼された場合には、このようにして納品すると、クライアントに喜ばれるかもしれません。(場合によりけりだとは思いますけど。)
プロフィール画像、ヘッダー背景画像、ファビコン、アップルタッチアイコン、とかの設定にもいいかもしれません。
とても有用な記事ありがとうございます。
最後の「テーマテンプレート内のロゴを表示させたい部分に、以下のようなコードを記入」で
つまづいてしまいました。
参考にやってみて、ロゴデータのアップロードまでは無事完了したのですが
いざ、ヘッダーに反映しようとしたらタイトル部分だけでなく
〜
全体に(横幅いっぱい)表示されてしまいました。
具体的にはheader.phpのどのブロックに挿入、
あるいは差し替えれば良いのでしょうか?
お時間があれば教えてください。