スライダー系のスクリプトとWordPressの連携

スライダー系の有名なスクリプトとして、
・slick.js
・swiper.js

があります。

昨今、脱jQueryがささやかれて久しいですが、今回はあえて、slick.js を使用して、WordPressで作られた既存サイトにスライダーを実装する方法についての記事になります。

WordPressの記事ひとつひとつをカードっぽいスライダーでTopページに表示したい時などに利用できると思います。

（あえてslickを使うのは、既存のWebサイトにスライダーを追加する場合など、Webの制作現場ではまだまだjQueryを使わざるを得ないケースも多々あるという点からです。jQuery非依存の高機能スライダー、swiper.js についてはまた別記事でご紹介したいと思います）

コード

では早速コードをご紹介します。
大きく分けて下記の3段階で実装可能です。

• (1).必要なjsファイルの読み込み(この例ではfooter.phpへ記述します)
• (2).必要なcssファイルの読み込み(この例ではheader.phpへ記述します)
• (3).表示したいテンプレートに新しいWP_Queryを作成、表示用のコードを記述する

(1).必要なjsファイルの読み込み

では手順(1)から見ていきましょう。
まず、footer.php に slick.js 本体と、jqueryを読み込みます。
既存サイトで、jqueryが既に入っているWebサイトの場合は、冒頭の1行は不要です。
また、各ファイルへのパス、およびjQueryのバージョンは適宜ご自分の環境に応じて置き換えてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/js/libs/slick.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/assets/js/slick-setting.js"></script>

上記の3行目 slick-setting.js というのは、どんな感じでスライダーを表示させるか？を定義したjsファイルで、内容は以下になっています。

$(function() {
  $('.m-container-slider').slick({
      autoplay: true,
      autoplaySpeed: 10000,
      arrows: true,
      dots: true,
      centerMode: true,
      slidesToShow: 1,
    });
});

このjsは、オプション設定用のファイルですので適宜名前や、内容を変更してもOKなjsになっています。
指定できる具体的なオプション内容は公式のこのセクションを参照してください。
例として今回のデモに設定したオプションを上から解説しますと、
autoplay…自動再生の有無。
autoplaySpeed…自動再生の速度。
arrows…左右にページ送りを出すかどうか。
dots…スライダー下部にナビゲーションを出すかどうか。
centerMode…中央に一つ固定、左右に少し前後のスライドを表示させたい時なんかに使います。
slidesToShow…いくつ表示させるか。centerModeと組み合わせると、今回の デモ みたいな表示ができます。

(2).必要なcssファイルの読み込み

次に、手順(2)です。 header.phpに slick.js の表示用cssを読み込みます。
こちらも各ファイルへのパスは適宜ご自分の環境に応じて置き換えてください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/js/libs/slick.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/js/libs/slick-theme.css">

なお、slick本体のzipを解凍すると fonts というディレクトリが同梱されていますが、
これはcss内から参照されているディレクトリなので、デフォルトではサーバーの同階層に設置しておかないとエラーが出ます。※もちろん、cssの記述を変えれば回避は可能です。（同様に、同梱されているローダー用画像 ajax-loader.gif も同階層に置かないとエラーが出ます）

(3).表示したいテンプレートに新しいWP_Queryを作成、表示用のコードを記述する

手順(3)です。上記までで、slickを使用する準備ができたので、
スライダーを表示したい箇所に以下を記述します。

<?php
$slideargs = array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'orderby'  => 'rand',
  'order'  => 'ASC',
  'posts_per_page' => 5
  );
  $the_query = new WP_Query($slideargs);
?>

<div class="m-container-slider">
<?php if ($the_query->have_posts()): while ($the_query->have_posts()): $the_query->the_post(); ?>
<div class="m-slider-child">
  <div class="m-slider-desc">
    <?php if(has_post_thumbnail()): ?>
      <img src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>">
    <?php endif; ?>
    <div class="m-slider-text">
      <p><?php the_title(); ?></p>
    </div><!-- pair of m-slider-text -->
  </div><!-- pair of m-slider-desc -->
</div><!-- pair of m-slider-child -->
<?php endwhile; ?>
</div>
<?php
  wp_reset_postdata();
  endif;
?>

デモ

こちらにデモを用意しました。挙動を確認してみてください。

解説など

では、各行について細かく見ていきましょう。
まず、1~10行目までは取得したい投稿の定義です。
スライダー用に新しい WP_Query が必要になるので、「どんな条件の投稿を取得するか？」という部分をここで配列として定義して、
変数 $slideargs に格納。
それを9行目で WP_Query() 関数に渡して、
$the_query として定義しています。

12行目から25行目がスライダー本体部分になります。
12行目のdivのclass名は手順(1)で出てきた slick-setting.js 内で指定しているclass名と一致させましょう。
13行目はWordPressのループを開始する際の、おきまりの記述です。
（WP_Query に渡した条件の投稿が存在したら、その存在する投稿数分だけ while により処理を行う。というような意味です。）
14行目のdiv要素(.m-slider-child)が、1個ずつのスライドとして認識されます。
15行目~22行目までがスライドの中身です。
16~18行目までがアイキャッチ画像の取得部分。
20行目は記事タイトルを表示させています。
今回のデモではアイキャッチ画像、記事タイトルしか表示させていませんが、
実際の案件では、投稿日、更新日、あとは記事の冒頭何文字かだけ表示させるような仕組みにしても良いかと思います。

以上でスライダー表示ができますので、あとは各スライドに対してcssを適用して、
見た目を整えてあげれば完成です！

この記事のまとめ

今回は WordPress の記事を、スライダーとして表示させる方法についてご紹介しました。
まだまだ現場で根強い需要のあるWordPress。
今後も、WordPressに関する記事を追加していく予定です！