WordPressのテーマカスタマイザーに画像のアップロード機能を設置する方法

最近、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テーマをカスタマイズしたい場合でも、画像を頻繁に変更する場合は、このようにテーマカスタマイザーから手軽に変更できるようにしておくと、後から楽ができます。

あと、もちろん画像を変更するようなテーマのカスタマイズを、仕事として依頼された場合には、このようにして納品すると、クライアントに喜ばれるかもしれません。(場合によりけりだとは思いますけど。)

プロフィール画像、ヘッダー背景画像、ファビコン、アップルタッチアイコン、とかの設定にもいいかもしれません。

『WordPressのテーマカスタマイザーに画像のアップロード機能を設置する方法』へのコメント

  1. 名前:宮崎 投稿日:2015/06/24(水) 11:43:24 ID:80aa6abdb

    とても有用な記事ありがとうございます。
    最後の「テーマテンプレート内のロゴを表示させたい部分に、以下のようなコードを記入」で
    つまづいてしまいました。
    参考にやってみて、ロゴデータのアップロードまでは無事完了したのですが
    いざ、ヘッダーに反映しようとしたらタイトル部分だけでなく

    全体に(横幅いっぱい)表示されてしまいました。
    具体的にはheader.phpのどのブロックに挿入、
    あるいは差し替えれば良いのでしょうか?
    お時間があれば教えてください。

  2. 名前:宮崎 投稿日:2015/06/24(水) 11:45:52 ID:80aa6abdb

    あれ?一部表示されませんでしたので
    再度全角で補足です。

    <HGROUP>
    から
    </HGROUP>

  3. アバター画像 名前:わいひら 投稿日:2015/06/24(水) 17:46:18 ID:742957fc9

    全体に(横幅いっぱい)表示されてしまいました。
    具体的にはheader.phpのどのブロックに挿入、
    あるいは差し替えれば良いのでしょうか?

    これは、テーマにもよるので、これまでの情報では何ともいえないかもしれません。
    ただ、どのテーマを使っていようと、スタイルシートで幅などは調節できるので、好みに合わせて調節するのが最も良いかもしれません。

    スタイルシートリファレンス(目的別)

  4. 名前:宮崎 投稿日:2015/06/25(木) 16:24:26 ID:a11f32239

    なるほど、それもそうですね。
    回答頂きありがとうございました。
    ちなみにテーマはTwentyelevenです。