AD Galleryという秀逸なJqueryのプラグインがありますが、Wordpressのギャラリーに登録された画像を利用して表示するスニペットです。
今回はAD Galleryというプラグインを使用していますが、他の画像ギャラリー(画像スライド)系のJqueryプラグインでも活用できる方法です。
AD Galleryのデモページはこちら
次の前提が必要です:
- AD Galleryが動作するようにファイル構造やheaderの記述を整える(AD Galleryのサンプルが動作することを確認した上で実装)
- WPの「メディアの設定」でAD Galleryに対応した適切な画像サイズを設定(下記の例では「サムネイルのサイズ」と「大サイズ」を使用)
- 特定の投稿記事のアタッチメントである必要があります。(投稿記事の「メディアを追加」で画像登録すればOK)
<div id="gallery" class="ad-gallery"> <div class="ad-image-wrapper"></div> <div class="ad-controls"></div> <div class="ad-nav"> <div class="ad-thumbs"> <ul class="ad-thumb-list"> <?php $postid = $post -> ID; $args = array( 'numberposts' => -1,//取得件数(初期値は5件、-1で全添付を取得) 'order' => 'ASC',//並び順 'orderby' => 'menu_order',//並び順の規準 'post_type' => 'attachment',//取得種類(この指定で添付を取得できる) 'post_mime_type' => 'image',//取得種類(この指定で添付の種類ギャラリーを取得できる) 'post_parent' => $postid//帰属する投稿ID ); $attachments = get_posts( $args ); if ( $attachments ): foreach ( $attachments as $attachment ): $imgAlt = $attachment->post_content;//「説明」→imgタグのalt属性に利用する $imgAlt = nl2br($imgAlt);//改行を付加 $imgTtl = $attachment->post_title;//「タイトル」初期値はファイル名→imgタグのtitle属性に利用する //サムネイル用の画像を取得 $imgThmArr = wp_get_attachment_image_src( $attachment->ID, 'thumbnail' );//配列[0]→画像URL、[1]→画像幅、[2]→画像高さ $imgThm = $imgThmArr[0];//取得したイメージのURL //拡大画像を取得 $imgTgtArr = wp_get_attachment_image_src( $attachment->ID, 'large' );//同上 $imgTgt = $imgTgtArr[0];//取得したイメージのURL ?> <li><a href="<?php echo $imgTgt ?>"><img title="<?php echo $imgTtl ?>" src="<?php echo $imgThm ?>" alt="<?php echo $imgAlt ?>" /></a></li> <?php endforeach; endif; ?> </ul> </div> </div> </div>
投稿記事の編集画面、[メディアを追加/ギャラリータブ]で登録した画像の順番を簡単に入れ替えられるので便利ですね。
修正(2013/07/13)
上記コード、投稿画面への貼り付けの若干の不具合があったようです。ご迷惑をおかけし申し訳ありませんでした。(めだまやきさん、お問い合わせくださりありがとうござました。)
追記(2013/07/13)
WordPressに同梱されているJqueryのバージョンでは、最新版のAD Galleryは動かないようです。
他のJqueryプラグインとのバランスもありますが、functions.phpに次のように記述することにより、AD Galleryに対応したJqueryのバージョンに置き換えることができます。
wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '1.7.2');