スライドショーを簡単に設置できるjQueryのプラグインになります。
WordPress上でもスライドショーが使えるプラグインは色々とありますが、今回はオリジナルテーマに組み込んで表示させる方法を記載したいと思います。
💡 Slickとは
設置するだけで簡単にスライドショーが行える、世界的にも人気のjQueryプラグインです。レスポンシブ対応・豊富なオプション・軽量な動作が特長です。
設置方法
方法は2パターンあります。
方法① ファイルをダウンロードする
ダウンロードはSlick公式サイトから、またはこちらから直接ダウンロードをお願いいたします。
ダウンロードしたファイルはヘッダーに配置しておきます。
方法② CDNで読み込む
まず、ヘッダー内に下記のコードを入れます。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">それに加え、フッターには下記のコードを入れます。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>WordPressテーマでの読み込み方法
WordPressの独自テーマでは functions.php に下記のコードを加えます。
<?php
function theme_name_scripts() {
//jqueryの読み込み(jQueryはフォルダを作成し設置しています)
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', false );
//Slickの読み込み(CDNで読み込んでいます)
wp_enqueue_style( 'slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css' );
wp_enqueue_style( 'slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css' );
wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array( 'jquery' ), '1.9.0', false );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>💡 ポイント
wp_enqueue_style と wp_enqueue_script を使うことで、WordPressの仕組みに沿った正しい読み込みができます。直接 <link> や <script> をテンプレートに書くよりも管理しやすく安全です。
基本的な使い方
使い方は非常にシンプルです。<div> タグを囲んだクラスに好きなクラス名を付けて、JavaScriptで制御すれば簡単に動かすことが出来ます。
HTMLの記述
<div class="slider">
<div><img src="images/img01.jpg"></div>
<div><img src="images/img02.jpg"></div>
<div><img src="images/img03.jpg"></div>
</div>JavaScriptの記述
別ファイルで読み込んでいるJavaScriptには下記の記載をします。
jQuery(document).ready(function () {
jQuery('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
});
});これで一通りの動作ができます。
オプションについて
Slickには様々なオプションがあります。よく使うものをピックアップして紹介します。
表示・動作系
slidesToShow— 表示するスライド数（デフォルト: 1）slidesToScroll— スクロールするスライド数（デフォルト: 1）autoplay— 自動再生（デフォルト: false）autoplaySpeed— 自動再生の間隔（デフォルト: 3000ms）speed— アニメーション速度（デフォルト: 300ms）fade— フェードエフェクト（デフォルト: false）infinite— 無限ループ（デフォルト: true）
ナビゲーション系
arrows— 前後の矢印ボタン（デフォルト: true）dots— ドットナビゲーション（デフォルト: false）centerMode— センターモード（デフォルト: false）centerPadding— センターモード時の余白（デフォルト: 50px）
操作・レスポンシブ系
draggable— ドラッグ操作（デフォルト: true）swipe— スワイプ操作（デフォルト: true）responsive— ブレークポイントごとの設定（デフォルト: none）lazyLoad— 遅延読み込み（デフォルト: ondemand）pauseOnHover— ホバーで一時停止（デフォルト: true）pauseOnFocus— フォーカスで一時停止（デフォルト: true）
📝 全オプション一覧
ここで紹介したもの以外にも多数のオプションがあります。全オプションの詳細はSlick公式サイトをご確認ください。
サンプルの紹介
弊社のTOPに使用しているスライドショーのコードは以下のようになっています。
jQuery(document).ready(function () {
jQuery('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
speed: 1000,
dots: false,
infinite: true,
lazyLoad: "ondemand",
pauseOnHover: false,
pauseOnFocus: false,
arrows: false,
fade: true,
});
});💡 この設定のポイント
fade: true でクロスフェード、autoplaySpeed: 5000 で5秒間隔、arrows: false / dots: false でUIを非表示にし、コンテンツに集中できるシンプルなスライドショーに仕上げています。
まとめ
✅ この記事で行ったこと
① Slickの設置方法（ダウンロード / CDN）
② WordPressテーマでの functions.php への組み込み
③ 基本的なHTML・JavaScriptの記述
④ 主要オプションの紹介と実装サンプル
プラグインを使うことで開発の時間を短縮できたり自身のサイトを拡張したりすることが出来ます。
ぜひとも積極的に取り入れて快適なjQueryライフをお過ごしください。
この記事を書いた人
