つながるnet

Ajaxスライドギャラリー(AD Gallery)をWPの「ギャラリー」で!

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');

直接メールしてみる

お名前 (必須)
メールアドレス (必須)
件名
ご相談内容
画像文字をご入力ください
captcha

コメントを残す