【WordPress】【jQuery】レスポンシブ対応のスライダー・slickを投稿で使いたい

ブレイクポイントも設定できる大人気スライドショープラグイン・slickをWordPressの投稿内で使う例を紹介します。

WordPress側

商品ページや製品情報など、投稿（記事）で複数の画像を登録し、表示させたい場合があると思います。本文に書いてもいいのですが、ユーザーの手間を極力減らしたい。そんな時に便利なのがカスタムフィールドです。

今回はそんなカスタムフィールドを簡単に作成・管理ができるプラグイン「Smart Custom Fields」を使います。製作者様に感謝です。

ただ、長くなるのでSmart Custom Fields（以下SCF）の使い方はこの記事では割愛します。あくまでもslickとWordPressの連携記事なので。

slickのダウンロード

slickのページよりダウンロードしてください。「get it now」でダウンロードリンクへスクロールします。

slickをダウンロードしたらテーマファイルへwp_enqueue_style()関数やwp_enqueue_script()関数などで読み込んでください。

functions.php

functions.phpの記述例です。

function my_styles() {
  wp_enqueue_style( 'slick', get_template_directory_uri() . '/slick/slick.css', array(), false, 'all');
  wp_enqueue_style( 'slick-theme', get_template_directory_uri() . '/slick/slick-theme.css', array(), false, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles');

function my_scripts() {
  wp_enqueue_script( 'slick', get_template_directory_uri() . '/slick/slick.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

JavaScript

slickの使い方についても割愛しますが、スライドのラッパーのセレクタは任意のものに変更して使ってください。

JSを別ファイルにする場合は、jQueryやslick.jsの後に読み込まれるようにしましょう。WordPressのjQueryを使う場合、読み込む順番などに注意してください。

$(document).on('ready', function() {

  /*
  .wp-slickの部分を任意のclassに変更してください
  slickの設定は適当ですので、お好みの設定に変えてくださいね
  */
  $(".wp-slick").slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    centerMode: true,
    autoplay: true,
    autoplaySpeed: 2000,
  });

});

PHP（single.phpなど）

SCFで「wp_slick_grp」というグループ名の繰り返しフィールドを作成。画像が登録されるフィールド名は「wp_slick_img」としています。繰り返しフィールドにすることで、画像を複数枚登録できます。増減や並び替えも簡単です。

投稿にカスタムフィールドの設定があれば、slickを表示し、なければ表示しないようにしています。

/* カスタムフィールドに値があるかチェック */
$wp_slick_flg = get_post_meta( $id, 'wp_slick_img', true);

/* カスタムフィールドに値がある場合、slickの処理を行う */
if($wp_slick_flg) {

  /* ラッパーのクラスはJSで指定したものを使ってください */
  $output_wp_slick = '<section class="wp-slick">';

  /* slickに使うスマートカスタムフィールドの値を取得 */
  $wp_slick_grp = SCF::get( 'wp_slick_grp' );

  /* 取得した値をループ */
  foreach($wp_slick_grp as $wp_slick) {

    /* スマートカスタムフィールドの画像タイプはアタッチメントIDが入っています。 */
    $wp_slick_img_id = $wp_slick['wp_slick_img'];

    /* アタッチメントIDから画像のURLを取得 */
    $wp_slick_img_url = wp_get_attachment_url( $wp_slick_img_id );

    /* 同じくアタッチメントIDから代替テキストを取得 */
    $wp_slick_img_alt = get_post_meta( $wp_slick_img_id, '_wp_attachment_image_alt', true );

    /* URLと代替テキストを出力用の変数へ代入 */
    $output_wp_slick .= '<div><img src="'.$wp_slick_img_url.'" alt="'.$wp_slick_img_alt.'"></div>';
  }

  /* ラッパーを閉じます */
  $output_wp_slick .= '</section><!-- /.wp-slick -->';

  /* slickを出力 */
  echo $output_wp_slick;
}

expexp.jp