ブレイクポイントも設定できる大人気スライドショープラグイン・slickをWordPressのホームやフロントページなどで使う例を紹介します。

投稿ページ内でslickを使う場合は、こちらの記事（【WordPress】【jQuery】レスポンシブ対応のスライダー・slickを投稿で使いたい）をご覧ください。

引き続きslickを設定するオプションページや画像を登録するカスタムフィールドにはSmart Custom Fieldsを使います（変数なども以前の記事のものを使いまわしています）。カスタムフィールドをゼロから作るのは骨が折れますからね。工数削減のためにも有効活用させていただきましょう。

画像登録用のページを作成

以前は投稿ページに紐づくカスタムフィールドへ画像を登録しましたが、今回は画像登録用のオプションページを作成します。

オプションページの作成について、Codexには「WordPressにカスタムの設定画面を作ることは比較的簡単です。」と書かれていますが、それよりも簡単に、早く作れるSmart Custom Fieldsを使ってオプションページを作成します。

functions.php

functions.phpの記述例です。

SCF::add_options_page( 'ホームスライド', 'ホームスライド', 'manage_options', 'home-slide-options' );

一行でオプションページが作成され、メニューにも追加されます。便利ですね。
※引数は任意のものに変更してください。

画像登録用のオプションページを作成したら、SCFで「wp_slick_grp」というグループ名の繰り返しフィールドを作成（投稿で使ったものと同じでも可）。画像が登録されるフィールド名は「wp_slick_img」としています。繰り返しフィールドにすることで、画像を複数枚登録できます。増減や並び替えも簡単です。

表示用の関数を作成

functions.php

functions.phpの記述例です。基本的な構造は投稿と同じになりますが、画像部分のカスタムフィールドの取得方法が異なります。

// オプションページで設定したslickを出力する関数
function add_wp_slick() {

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

  /* カスタムフィールドに値があるかチェック（一番目を抽出） */
  $wp_slick_flg = $wp_slick_grp[0]['wp_slick_img'];

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

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

    /* 取得した値をループ */
    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;
  }
}

front-page.phpやhome.phpなど

slickを吐き出したい場所へ、作成した関数を記述して完了です。

<?php add_wp_slick(); /* slickを出力 */ ?>

slickを動かすファイルも忘れずに

その他、slickのJavaScriptやcssファイルも出力する場所（テンプレートファイル）で読み込めるようにしましょう。
slickをダウンロードしたらテーマファイルへwp_enqueue_style()関数やwp_enqueue_script()関数などで読み込んでください。

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

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

});