カスタムヘッダーの画像をすべて取得してスライダーにしたい

テーマでカスタムヘッダーをサポートしている場合、好きな画像をアップロードすることでヘッダー画像として表示することができる。オプションでアップロードしておいた何枚かの画像からどれかひとつを固定で選択するか?、表示するたびにランダムにするか?という設定がある。

このほどTwitter Bootstrap を利用したテーマを作成する際に、ヘッダーにスライダーを設置することにした。そこで、ヘッダー画像としてアップロードされた画像をスライダーに利用できないかとやってみた。スライダーはTwitter Bootstrapに Carousel という機能が付いているので簡単に実装できた。いざヘッダー画像を取得しようとしたところで、意外に手間取った。


bootstrapテーマでカスタムヘッダーを表示する場合は、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]

[/PHP]

Carouselの仕様で、最初の一枚にだけ’active’というクラスを付与している。

1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください