最近ずっと忙しくてろくに更新できなかったためだいぶ久しぶりの更新でございます。まだ暫く忙しい日が続きそうですが、それでもようやく先が見えてきたのでまたちまちまとブログも再開したいなぁ…と思う今日この頃でございます。
今回はタイトルの通り、Image Widget(画像ウィジェット)プラグインを使ってサムネイル付きのスライドショーを作る方法についてのメモです。
過去にも何度か記事にしたことがあるのですが、自分はクライアントワークでスライドショーを作るときは、ダイナミックサイドバーの画像ウィジェットを使ってユーザーに画像を登録させて、それを表示するときに JS で各スライドショープラグインの形式に書き換える方式をよく使います。
なんでこんなことするかというと、「結果的に楽だから」です。
たとえば、画像の入れ替えは、画像のパスを入力させるのはあまりウェブ関係に詳しくないお客さんには若干ハードルが高めですが、画像ウィジェットプラグインを使えばボタンひとつでメディアライブラリから選択させることができます。
また、スライドの並び替えや一時的に非表示にするといったことも、WordPressのダイナミックサイドバー(ウィジェット)を使えば、ウィジェットの並び替えや一時停止で簡単に行える、というわけです。
これらを自分で実装するとなると、結構面倒なんですよ…。特にメディアアップローダは以前と比べるとかなり楽ですがそれでもまだまだなが~いコードを書かなくてはならないですしね。
基本仕様
- 画像の読み込み、並び替え、出力には「Image Widget」プラグインを使う
- サムネイル画像は、メディアライブラリにアップロードした際に適切な縮小版を作成しそれを使用する
- dynamic_sidebar で呼び出した画像を、jQuery で使用するスライダーの仕様に合わせたHTMLに組み替える(あるいは append する)
ということで今回も Image Widget つかいますので試してみたい場合はインストールしておいてください。インストールにはここからダウンロードして設置するか、管理画面から「Image Widget」で検索すれば出てくるはずです。
下準備
まずは裏側のあれこれを準備していきます。
メディアライブラリの縮小版にカスタムサイズを追加
縮小版は以前はオリジナルのスライド画像をCSSで縮小して使っていたのですが、これだと主にIEでうまくいかないことが有り、条件がかさなるとジャギったりするようなので、あらかじめ縮小したものを使用することにしました。(ユーザーに用意してもらってもいいのですが今回は少しでも楽にすることを目的としてるので別々に用意はせず自動的に縮小するようにしています)
functions.php に以下のように追記します。
1 2 |
add_theme_support('post-thumbnails'); add_image_size( 'index-slide-thumb', 324, 9999, false ); |
これでメディアライブラリに画像をアップした際に、通常の「中サイズ」とか「サムネイル」といった縮小版とは別に「幅324px、高さ無制限」の縮小版を作成し、「index-slide-thumb」という名前で呼び出せるようになります。
今回は横幅優先なので高さは 9999 としていますが、高さももちろん指定可能です。
今回はたまたまサンプル作成時にやってた案件で使っていたサムネイルの幅が324px だったのでこのサイズですが、このへんは使う環境に合わせてうまく設定してください。
関数リファレンス/add image size – WordPress Codex 日本語版
スライドショー用のダイナミックサイドバーを登録する
てきとーに登録しときます。今回はリスト形式で吐き出させるので before_widget と after_widget もそれにあわせて設定しています。
1 2 3 4 5 6 7 8 9 10 |
register_sidebar(array( 'name' => 'トップページスライドショー', 'id' => 'index-slideshow', 'description' => '「画像ウィジェット」を使って自由に画像を配置できます', 'class' => '', 'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '<!--', 'after_title' => '-->' )); |
before_title / after_title はタイトル部分をコメントアウトするようにこんな風にしてみましたが別にやらなくてもいいかもしれません。
で、スライドショーの近くに
1 2 3 |
<ul id="slide_data"> <?php dynamic_sidebar('index-slideshow'); ?> </ul> |
とかしておきます。 あと実際にはこれは直接使わずここからあとで jQuery でコピーしたりするんでこのリストはCSSで隠しておきます。
1 2 3 |
#slide_data { display:none; } |
Image Widget のフィルターフックを作成する
これがこんかいのキモです。
通常画像ウィジェットは設定した画像1枚の情報しか吐き出してくれませんが、そこからなんとかメディアの他の情報も取り出せないかと(プラグイン改造も視野に入れつつ)プラグインのソースを眺めていたところ、「image_widget_image_attributes」というフィルターが用意されていました。
これを使って出力する IMG 要素の中に入れる各要素をカスタマイズすることができるようです。
また、フィルターに送られる変数として参照しているメディアファイルの各種データを受け取れたのでこれをつかえばメディアファイルに関する追加情報を IMG 要素に追加できそうです。
ということで、フィルター作ります。
functions.php とかにてきとーに追加してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if (function_exists('tribe_load_image_widget')) { add_filter ('image_widget_image_attributes',function($attr,$instance){ // 読み込まれたメディアのアタッチメントIDを取得 $attachment_id = $instance['attachment_id']; // アタッチメントIDから、同じ画像のスライドサムネ用縮小版の情報を取得 $thumb_src_arr = wp_get_attachment_image_src($attachment_id,'index-slide-thumb'); // 今回欲しいのはメディアファイルのURLなので [0] を指定。 // $attr 配列は、IMG要素に対し key="value" という形式で出力されるので、 // カスタムデータ属性名のキーを追加しURLを格納 $attr['data-thumb-src'] = $thumb_src_arr[0]; return $attr; },10,2); } |
1行目は、ImageWidgetが動作中だけ動くようにするための振り分けで、2行目からがフィルターフックです。
今回は無名関数でやっちゃいましたが、別々に分けても問題ありません。
あとはコメントに書いたとおりです。
これで
1 |
<img src="PATH_TO_UPLOADS/foo.png" data-thumb-src="PATH_TO_UPLOADS/foo-324x100.png" (あとは省略)> |
みたいな感じでサムネイル用画像のパスがカスタムデータとして保存された状態で出力されるようになりました。
JSでスライダープラグインの形式に書き換える
ここまでの工程で準備は全て整ったのであとはお好きなスライダーの仕様に併せてごにょごにょしてやってください。
えっ、そこは書かないのかよ?ってかんじですが、「実装する」じゃなくて「実装できるようにする」ってタイトルにしたのはここらへんも関係してるとか、してないとか…?(何
ちなみに、画像を取り出すときは src を、サムネのURLを取り出すときは、 data-thumb-src を使うようにすればOKです。というかそうしないと今回のカスタマイズの意味があまりないですよねw
カスタムデータ属性使ってますが、jQuery とかで attr(‘data-thumb-src’) で取れば多分殆どの環境で影響受けないはず。たぶん。
コメントする