以前にも紹介したブレイクポイントも設定できる大人気スライドショープラグイン・slickをWordPressの投稿内で使う例ですが、今回は「Smart Custom Fields」ではなく、同じくカスタムフィールドを視覚的に管理できるプラグイン「Custom Field Suite(CFS) 」を使います。

WordPress側

今回もやっぱり長くなるのでCustom Field Suite（以下CFS）の使い方はこの記事では割愛します。あくまでもslickとWordPressの連携記事なので。

slickのダウンロード

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

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

functions.php

functions.phpの記述例です。

// slickのCSS
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');

// slickのJavaScript
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

前回同様、スライドのラッパーのセレクタは任意のものに変更して使ってください。

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など）

CFSで「cfs_slick_grp」という名前のループ（複製フィールド）を作成。画像が登録されるフィールド名は「cfs_slick_img」としています。SCF同様に、ループにすることで、画像を複数枚登録できます。増減や並び替えも簡単です。

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

/* カスタムフィールドに値があるかチェック */
$cfs_slick_grp = CFS()->get( 'cfs_slick_grp' );

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

  echo '<h2>slick（Custom Field Suite版）</h2>';

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

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

    /* カスタムフィールドの配列からアタッチメントIDを取得し、変数へ代入
       返り値をファイルURLにすると画像のフルパスを取得できます */
    $cfs_slick_img_id = $cfs_slick['cfs_slick_img'];

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

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

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

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

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

関連記事

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