WordPress 2024.02.06

【Slick / 初心者向け】WordPressにスライダーを導入する方法

みんなの簡素を教えてね！

すごい！ (0)
やってみようと思う！ (0)

Slick（スリック）とは、ウェブサイト上で使われる便利なツールのひとつです。
スライドできる写真のリストや、複数の広告を1つずつ表示するバナー広告を見たことがあると思います。
Slickを使うこと簡単にその機能を実装できて、ユーザーにとってわかりやすいウェブサイトを作成することができます。
Slickには豊富なカスタマイズオプションとレスポンシブ対応性があり、使いやすく拡張性が高いスライダーを追加できます。
今回は、WordPressサイトにSlickスライダーを導入する手順をご紹介します。

1 Slickって何？
2 WordPressにSlickを導入するステップ（ダウンロード編）
3 WordPressにSlickを導入するステップ（CDN編）
4 デモ
5 まとめ

Slickって何？

Slickは世界的に広く使われている、スライダーを簡単に実装するためのプラグインです。
Slickを使うと、ウェブサイトで簡単にスライダーやカルーセルを作ったり、自分好みにカスタマイズしたりできます。
さまざまなデザインや機能があるためどんなウェブサイトにも合わせやすく、スマートフォンなどでもきれいに表示されるます。Slickにはたくさんの情報やサポートがあるため、初心者でも安心して使えます。
ウェブデザインや開発を始めたばかりでも、Slickを導入すればスタイリッシュで使いやすいスライダーを簡単に作ることができます。

WordPressにSlickを導入するステップ（ダウンロード編）

HTMLを追加

まずは動かしたいスライダーのHTMLを任意のページに作成しておきます。

<div class="slick-slider">
 <div class="slick-item">1枚目</div>
 <div class="slick-item">2枚目</div>
 <div class="slick-item">3枚目</div>
 <div class="slick-item">4枚目</div>
 <div class="slick-item">5枚目</div>
</div>

slick公式サイトから必要なファイルをダウンロード

slickで必要なファイルは、公式サイトからダウンロードできます。
slick（英語）
メニューの「get it now」をクリック→「Download Now」ボタンをクリックすることでダウンロードが可能です。
フォルダ内には様々なファイルが入っていますが、必要なのは以下のファイルです。

slick-theme.css
slick.css
slick.min.js
fontsフォルダ
ajax-loader.gif

上記をファイルを「slick」というフォルダにまとめて、FTPからテーマ関連のファイルが入っている階層にアップロードします。

テーマファイルエディターからheader.phpファイルを開く

テーマファイルは、WordPressのデザインを管理する重要な場所です。
ダッシュボードの外観から「テーマファイルエディター」を選択し、header.phpファイルを見つけて開きます。このファイルは名前の通り、ウェブサイトのヘッダー部分に関するファイルです。
※注意！テーマファイルを編集する際は、必ずバックアップをとっておきましょう。

Slickファイルのリンクを挿入

header.phpファイル内で、以下のコードを<head>内に追加して、SlickのCDNリンクを挿入します。
Slickを動かすためには先にjQueryの読み込みが終わっている必要があるので、slick.min.jsはjQuery読み込みの記述よりも下に貼り付けてください。

間に入っているphpはテーマディレクトリのURLを表示するためのものなので、必要に応じて変更してください。

スライダーを有効化するJavaScriptを追加

次に、Slickスライダーを有効化するJavaScriptコードを追加します。
これはテーマファイル（header.php）や自前のJavaScriptファイル、どちらに追加しても大丈夫です。以下のコードを追加してください。

$('.slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

確認！

ここまでできたら、最初にHTMLを書いたページに戻ってきちんとスライダーが動くか確認してみましょう！
slidesToShowというオプションよりもスライドの枚数が少ないと正常にSlickが動かない場合がありますので、注意してください。

WordPressにSlickを導入するステップ（CDN編）

HTMLを追加

まずはダウンロード編と同様、動かしたいスライダーのHTMLを任意のページに作成しておきます。

<div class="slick-slider">
 <div class="slick-item">1枚目</div>
 <div class="slick-item">2枚目</div>
 <div class="slick-item">3枚目</div>
 <div class="slick-item">4枚目</div>
 <div class="slick-item">5枚目</div>
</div>

テーマファイルエディターからheader.phpファイルを開く

SlickのCDNリンクを挿入

header.phpファイル内で、以下のコードを<head>内に追加して、SlickのCDNリンクを挿入します。
Slickを動かすためには先にjQueryの読み込みが終わっている必要があるので、jQuery読み込みの記述よりも下に貼り付けてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">

これにより、SlickライブラリがWordPressに読み込まれます。

スライダーを有効化するJavaScriptを追加

Slickスライダーを有効化するJavaScriptコードを追加します。
これはテーマファイル（header.php）や自前のJavaScriptファイル、どちらに追加しても大丈夫です。以下のコードを追加してください。

$('.slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

確認！

デモ

CDNを使ってslickファイルを読み込んだ場合のデモです。きちんと動いているのが確認できます。

See the Pen
Untitled by GROWORKS (@groworks)
on CodePen.

「ここまで完全に同じことをしたのになぜか動かない」という場合は、上記デモのJS部分でコメントアウトしてある「jQuery(function ($) {」「});」のコメントアウトを外してみてください。動く場合があります。

まとめ

この記事では、WordPressにCDNリンクを使ってSlickスライダーを導入する方法を詳しく説明しました。
Slickをウェブサイトに組み込むことで動きのあるスライダーを作成し、ユーザーエクスペリエンスを向上させることができます。
Slickの設定やカスタマイズ方法を身につけて、ウェブサイトの魅力を引き立てましょう。
WordPressでSlickを活用して、集客力の高いウェブサイトを作成しましょう！