WordPressの投稿ページ内で、jQueryが必要ないスライドショープラグイン・Swiperを使う例を紹介します。Swiperはもちろんレスポンシブで、さらに3Dも表現できるなど、多機能なスライダーです。その多機能なデモはこちら。
スライド（今回は画像）の登録にはカスタムフィールドで、その管理には「Custom Field Suite(CFS) 」を使います。
WordPress側
CFSで任意の投稿タイプにループ（複製フィールド）と内包するファイルアップロード（画像）のカスタムフィールドを作成します。
Swiperのダウンロード
Swiperのページよりダウンロードしてください。
Swiperをダウンロードしたらテーマファイルへwp_enqueue_style()関数やwp_enqueue_script()関数などで読み込んでください。
functions.php
functions.phpの記述例です。
// SwiperのCSS
function my_styles() {
wp_enqueue_style( 'swiper', get_template_directory_uri() . '/swiper/swiper.min.css', array(), false, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles');
// SwiperのJavaScript
function my_scripts() {
wp_enqueue_script( 'swiper', get_template_directory_uri() . '/swiper/swiper.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');JavaScript
スライダーのコンテナ、ラッパーのセレクタはSwiper指定のクラスを使ってください。
SwiperはjQuery無しでも動作しますが、jQueryを使用する場合は、jQueryの後に読み込まれるようにしましょう。WordPressのjQueryを使う場合、読み込む順番などに注意してください。
最後に次のような記述でSwiperの起動させます。外部ファイルの場合はswiper.jsよりも後に読み込みましょう。
/* Swiperを起動させるの記述例 */
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 20,
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
loop: true,
});PHP（single.phpなど）
CFSで「cfs_swiper_grp」という名前のループ（複製フィールド）を作成。画像が登録されるフィールド名は「cfs_swiper_img」としています。ループにすることで、画像を複数枚登録できます。増減や並び替えも簡単です。
投稿にカスタムフィールドの設定があれば、Swiperを表示し、なければ表示しないようにしています。
/* カスタムフィールドに値があるかチェック */
$cfs_swiper_grp = CFS()->get( 'cfs_swiper_grp' );
/* カスタムフィールドに値がある場合、Swiperの処理を行う */
if( !empty( $cfs_swiper_grp ) ) {
echo '<h2>Swiper（Custom Field Suite版）</h2>';
/* ラッパーはSwiper指定のクラスを使う */
$cfs_swiper_slids = '<div class="swiper-wrapper">';
/* 取得した値をループ！ */
foreach( $cfs_swiper_grp as $cfs_swiper ) {
/* カスタムフィールドの配列からアタッチメントIDを取得し、変数へ代入
返り値をファイルURLにすると画像のフルパスを取得できます */
$cfs_swiper_img_id = $cfs_swiper['cfs_swiper_img'];
/* アタッチメントIDから画像のURLを取得 */
$cfs_swiper_img_url = wp_get_attachment_url( $cfs_swiper_img_id );
/* 同じくアタッチメントIDから代替テキストを取得 */
$cfs_swiper_img_alt = get_post_meta( $cfs_swiper_img_id, '_wp_attachment_image_alt', true );
/* URLと代替テキストを出力用の変数へ代入 */
$cfs_swiper_slids .= '<div class="swiper-slide"><img src="'.$cfs_swiper_img_url.'" alt="'.$cfs_swiper_img_alt.'"></div>';
}
/* ラッパーを閉じます */
$cfs_swiper_slids .= '</div>';
/* ページネーションの変数を作成 */
$swiper_pagination = '<div class="swiper-pagination"></div>';
/* ボタンコントロールの変数を作成 */
$swiper_button = '<div class="swiper-button-next"></div><div class="swiper-button-prev"></div>';
/* 出力用のコンテナもSwiper指定のクラスを使う */
$output_cfs_swiper = '<div class="swiper-container">';
/* コンテナに入れるものをまとめる */
$output_cfs_swiper .= $cfs_swiper_slids . $swiper_pagination . $swiper_button;
/* コンテナを閉じます */
$output_cfs_swiper .= '</div><!-- /.swiper-container -->';
/* Swiperを出力 */
echo $output_cfs_swiper;
}
コメントを残す