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

最近、Wordpressのテーマカスタマイザーの設定方法などを見直したりしています。

すると海外のサイトなどには、日本のサイトではあまり紹介されていない、テーマカスタマイザー機能などがまだ、いろいろあったりします。

今回紹介する「テーマカスタマイザーでメディアをアップロードする機能」もその1つです。

スポンサーリンク
レクタングル(大)広告

メディアアップロード機能とは

テーマカスタマイザーで、メディアをアップロードする機能の完成形は以下のようなものになります。(以下は、サイトロゴのアップロード機能例)

ロゴのアップロード機能

テーマカスタマイザーとは、「外観→カスタマイズ」で表示されるカスタマイズ画面のことです。

こんな感じで、Wordpressのメディア機能にアップロードして、そこから画像を選択できるので、手軽にテーマ内画像の変更を手軽に行えるようになります。

もちろん、今回の方法を子テーマに適用すれば、子テーマ内からでも、この機能を実装することができます。

カスタマイズの主な手順

このカスタマイズは、コピペで編集するとしたら以下の2つだけになります。

  • functions.phpでカスタマイザー部分の設定
  • ロゴを表示する部分で設定値(今回はロゴのURL)の呼び出し

今回は、ロゴの画像ですが、コピペして好みの設定に変更すれば、いろいろな場面に利用できます。

テーマカスタマイザー用の設定

メディアのアップロード機能をテーマカスタマイザーで呼び出すには、以下のように呼び出します。

以下をコピペして親テーマでも子テーマでも良いので、functions.phpに追記します。

結構過剰気味にコメントを入れたので、特に悩むことはないかもしませんが、それぞれについて説明します。

テーマカスタマイザー設定をフックする

まずは「customize_register」をフックしてテーマカスタマイザー項目設定用の関数を記入します。

セクションの設定を追加

その関数内に、セクションの設定を書きます。セクションはIDは複数回使うので定数化してあります。

セクションの設定をすると、この部分に反映されます。

セクションの設定

設定(セッティング)項目の追加

次に、設定項目を追加します。セッティングIDは複数回利用するので、定数化してあります。

設定項目は、このように反映されます。

セッティング項目の設定

設定値を呼び出す関数

画像のアップロード設定機能を実装したら、Wordpressには、画像のURLが格納されます。

それを呼び出す関数も作っておきます。

こういったのを作っておくと、テンプレートなどで呼び出すときに手軽になります。

後に、変更があった時にも、ここだけを変更すれば良くなりますし、何かと手間が省けます。

テンプレートに実装

あとは、テーマテンプレート内のロゴを表示させたい部分に、以下のようなコードを記入します。

すると、テーマカスタマイザーで画像が設定されている場合は、ロゴが表示されます。

ロゴを設定していた場合

画像が設定されていない場合は、通常のタイトルが表示されます。

ロゴを設定していなかった場合

今回のコードは、以下のページのものを参考にさせていただきました。

参考 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です。