最近、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のどのブロックに挿入、
あるいは差し替えれば良いのでしょうか?
お時間があれば教えてください。