テーマでカスタムヘッダーをサポートしている場合、好きな画像をアップロードすることでヘッダー画像として表示することができる。オプションでアップロードしておいた何枚かの画像からどれかひとつを固定で選択するか?、表示するたびにランダムにするか?という設定がある。
このほどTwitter Bootstrap を利用したテーマを作成する際に、ヘッダーにスライダーを設置することにした。そこで、ヘッダー画像としてアップロードされた画像をスライダーに利用できないかとやってみた。スライダーはTwitter Bootstrapに Carousel という機能が付いているので簡単に実装できた。いざヘッダー画像を取得しようとしたところで、意外に手間取った。
テーマでカスタムヘッダーを表示する場合は、header_image()
でヘッダ画像のURLを取得する。
具体的にはheader.phpで
<img src="<?php header_image(); ?>" alt="" >
とするだけでヘッダー画像が表示される。
ダッシュボードの[外観]-[ヘッダー]メニューのオプションにある、
・ヘッダー画像を選ぶか?
・ランダムに表示するか?
についても、header_image()
を呼ぶだけで自動的に表示すべき画像が1枚選ばれる。
問題は1枚しか選ばれないことだ。
header.phpにスライダーを設置するには、すべてのヘッダー画像が欲しい。これらの画像のURLがMySQLのどこに入っているかは予想がつくので、$wpdbを操作して直接持ってくればよいのか?いやもうちょっとよい方法があるだろう、とコアファイルを参照してheader_image()が何をやっているのか調べた。ランダムに表示する場合は、いったんすべてのヘッダー画像を取得して1枚を選んでいるはずだから、そこを見つけて真似すればよいでのではないか?
そうこうしているうちに、get_uploaded_header_images()
でヘッダー画像の配列を取得できることがわかった!
Twitter Bootstrap の Carousel にカスタムヘッダーの画像をすべて設定するには、以下のようになる。
[PHP]
[…] カスタムヘッダーの画像をすべて取得してスライダーにしたい | データベースに接続できません […]