WordPressにslickでスライドショーを実装する方法

2023.09.08
Tips

slickを使って、WordPressサイトにスライドショーを実装する手順の備忘録です。

slick（スリック）は、自動で画像を切り替えて表示するスライドショーを、簡単に実装することのできるjQueryベースのプラグインです。レスポンシブにも対応しており、オプションも豊富なのでレイアウトに合わせたカスタマイズも可能です。

slickをダウンロードする

まずは、下記の公式サイトからslickのzipファイルをダウンロードします。メニューの「get it now」をクリックして、表示された「Download Now」をクリックするとzipファイルがダウンロードされます。

slick（公式サイト）

slickファイルを用意する

ダウンロードしたzipファイルを解凍して、slickの実装に必要なファイルをWordPressで使用しているテーマのディレクトリにアップします。

「slick」ディレクトリ内の下記の３つのファイルがあれば、スライドを作成することができます。

slick.css
slick-theme.css
slick.min.js

続いて、slickのファイルを読み込むためのコードを記述します。

function.phpに記述する

「function.php」にコードを記入して、用意したslickのファイルを読み込みます。

function add_slick_files() {
  //CSSの読み込み
  wp_enqueue_style('slick-style', get_template_directory_uri() . '/assets/slick/slick.css', array(), '1.0.0');
  wp_enqueue_style('slick-theme-style', get_template_directory_uri() . '/assets/slick/slick-theme.css', array('slick-style'), '1.0.0');

  //jsの読み込み
  wp_enqueue_script('slick-script', get_template_directory_uri() . '/assets/slick/slick.min.js', array('jquery'), '1.0.0', true);
}
add_action( 'wp_enqueue_scripts', 'add_slick_files' );

「slick-theme.css」を読み込むコードでは、先に読み込むファイルとしてarray()に「slick-style」を設定しています。

「slick.min.js」も同様に、WordPressにデフォルトで組み込まれているjQueryを利用するためにarray()に「jquery」を設定しています。ファイルをfooterで読み込むために、一番最後の値には「true」を設定しています。

HTMLで記述する場合

HTMLのコードでテンプレートファイルに直接記述する場合は、「header.php」の<head>内に、cssを読み込むコードを記入します。

<head>
<link rel="stylesheet" href="asset/slick/slick.css">
<link rel="stylesheet" href="asset/slick/slick-theme.css">
</head>

jsを読み込むスクリプトは、「footer.php」の</body>の直前に記入します。

<script src="asset/slick/slick.min.js"></script>
</body>

スライドショーを実装する

slickのファイルを読み込めたら、スライドショーを実装します。

HTMLを記述する

スライドショーで表示する画像をHTMLコードで記述します。

<div class="slider">
  <div><img src="sample01.png"></div>
  <div><img src="sample02.png"></div>
  <div><img src="sample03.png"></div>
  <div><img src="sample04.png"></div>
</div>

スライド部分を囲う<div>のクラスを「slider」と指定しておきます。

scriptを記述する

「footer.php」の</body>の直前に、スライドショーを実装するコードを記述します。

<script type="text/javascript">
  jQuery(function(){
  　　jQuery('.slider').slick({
    　　autoplay: true,
    　　autoplaySpeed: 3000,
    　　infinite: true,
    　　dots: true
  　　});
  });
</script>

セレクタには、先程指定した「slider」クラスを設定します。

今回は自作テーマでの使用を想定して、slickを表示するためのスクリプトを「footer.php」に直接記載しています。Wordpressのデフォルトのテーマを使用している場合は、テーマを更新すると記述が削除される可能性があるので外部にjsファイルを用意して使用します。

例えば、コードを書くファイル「slider.js」を新規に作成し、他のslickファイルと同様にfunction.phpで読み込みます。

wp_enqueue_script( 'slick-script', get_template_directory_uri() . '/assets/slick/slick.min.js', array('jquery'), '1.0.0', true);
wp_enqueue_script( 'slider-script', get_template_directory_uri() . '/js/slider.js', array('slick-script'), '1.0.0', true);

以上でslickの設定は完了です。ブラウザで確認すると、スライドショーが表示されます。