過去にスライドショープラグインを紹介した際、「Meteor Slidesはカスタム投稿のため、例えばスライドとは別にテンプレートで呼び出すということもできます。」と書きました。
→WordPressのいろいろなスライドショープラグイン
今回、実際に行ってみたので、やり方を紹介したいと思います。
これを活用すると、スライドはWordPressで管理し、スライドショーはjqueryの好きなプラグインを利用することができます。
テンプレートでの呼び出し方法は下記の通りです。
<?php
$args=array(
'posts_per_page'=>-1,
'post_type'=> 'slide',
'orderby'=>'post_date',
'order'=>'DESC',
);
$myposts=get_posts($args);
if($myposts):
foreach($myposts as $post):
setup_postdata($post);
$post_thumbnail_id = get_post_thumbnail_id( get_the_ID() );
$image = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
if ( $image ) {
list($src, $width, $height) = $image;
?>
<li style='background-image:url(<?php echo esc_attr( $src );?>);'></li>
<?php
}
endforeach;
wp_reset_postdata();
else:?>
<li style="background-image:url(<?php bloginfo(template_url);?>/img/noimage.jpg);"></li>
<?php endif;
?>
</ul>
「Meteor Slides」によるスライド投稿を活用するのに重要なポイントは下記の3点です。
4行目：スライドのカスタム投稿名は「slide」のため、post_typeを指定します。
13行目：スライド画像は、カスタム投稿のアイキャッチ画像に入っているため、「get_post_thumbnail_id」でアイキャッチ画像のIDを取得します。
14行目：「wp_get_attachment_image_src」でアイキャッチ画像を指定サイズの画像で取得します。
※タグ・関数名をクリックすると、サイト：WordPress Codexに移動します。
実装したのは下記サイトです。
北九州ジオパーク構想（外部サイト）
スライドの登録は「Meteor Slides」で行い、
スライドショーはjqueryプラグインの「ResponsiveSlides.js（外部サイト）」を利用しています。
Webサイト構築、Webシステム構築に関してのご依頼、ご質問等がある場合は弊社ホームページ上のお問い合わせフォームもしくは下記連絡先までお問い合わせ下さい。
お問い合わせフォーム
株式会社ヴィンテージ Webシステム事業部
TEL：093-513-7255