【WordPress】【JavaScript】jQuery不要スライダー・Swiperを投稿で使いたい（CFS編）

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;
}

expexp.jp