slickとは？
スライダーを作るためのjQueryライブラリです。
プラグインとは異なり、
ライブラリファイルをWordPress環境に配置し、
WordPressのファイルをいくつか変更することで実装することができます。
slickをダウンロードしよう
slickの公式サイトからファイルがダウンロードできます。
リンク先のだいぶ下の方にある「Download Now」ボタンを押すと、
ファイルがダウンロードされます。
2021年4月現在では、バージョン1.8.1のため、
「slick-1.8.1.zip」という名前のzipファイルがダウンロードされます。
これを解凍します。
必要なファイルを移動しよう
zipファイルには様々なファイルが入っていますが、
必要なファイルは解凍したフォルダ直下にある「slick」フォルダ内にあります。
必要ファイル
- fontsフォルダ
- ajax-loader.gif
- slick.css
- slick-theme.css
- slick.js
フォルダ／ファイルを1つ1つ移動させるでもいいのですが、
フォルダ構成が変わってしまうと動かなくなるため、
slickフォルダごと移動します。
（気になるようでしたら、要らないファイルは移動後に消してくださいね。）
移動先は、WordPressのテーマディレクトリです。
サーバ上で作業する必要があるため、
SCP等を使って、サーバにアクセスします。
※以前作ったローカル環境の場合、XAMPPのフォルダに直接配置すればOKです。
以下、SCPを使ったファイルの移動方法です。
移動手順
①SCPにログインする。
②以下フォルダを開く
③slickフォルダをドラッグ＆ドロップする。
slickが使えるように設定しよう
ファイルを配置しただけではもちろん使うことはできません。
HTMLをご存知の方は、CSSを思い浮かべてみてください。
外部ファイルとしてCSSを準備した場合、
<head>タグの中に、CSSの参照場所を書きました。
slickも同様に、<head>タグ内で、slickのJavaScriptファイルとCSSファイルの参照場所を記載する必要があります。
WordPressでは、<head>タグは、header.phpの中に記載があるので、
header.phpを編集する必要があります。
編集手順
①SCPにログインする。
②以下フォルダを開く
③header.phpのバックアップを取る（コピーする）。
④header.phpをダウンロードする。
⑤Atomなどのテキストエディタで、header.phpを開く。
⑥以下コードをheader.phpの最後に追記し、保存する。
＜!-- jQuery --＞ ＜script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"＞＜/script＞ ＜!-- slick --＞ ＜link rel="stylesheet" type="text/css" href="＜?php echo get_template_directory_uri(); ?＞/slick/slick.css" media="screen" /＞ ＜link rel="stylesheet" type="text/css" href="＜?php echo get_template_directory_uri(); ?＞/slick/slick-theme.css" media="screen" /＞ ＜script src="＜?php echo get_template_directory_uri(); ?＞/slick/slick.min.js"＞＜/script＞
※slickはjQueryを利用しているため、jQueryのライブラリの読み込みも必要です。（1～2行目）
⑦保存したheader.phpを、SCPでアップロードする。
slickを使うためのコードを書こう
下準備ができたので、
後は、スライダーを入れたい場所にコードを書いていきます。
共通部品として何度も使う可能性もあるため、
共通設定部分はfunction.phpに書きます。
header.phpよりも重要性が高いファイルであるため、
ここは「Simple Custom CSS and JS」というプラグインを使って編集をします。
編集手順
①Simple Custom CSS and JSプラグイン（メニュー表示は「カスタムCSS&JS」）の「カスタムHTMLの追加」をクリックする
②任意のタイトルをつけ、以下コードを記入する。
＜script＞
$(function() {
$('.slider').slick();
});
＜/script＞
※「.slider」は、スライダー作成時に、classを使っているためです。
idを利用した場合は、「#slider」となります。
③表示位置は「フッター」を選択し、保存する。
続いて、スライダーを入れたい固定ページ、もしくは、投稿ページ内にコードを書いていきます。
記入するコードは以下の通りです。
＜div class="slider"＞ ＜div＞＜a href="リンク1"＞＜img src="ファイルパス1"＞＜/a＞＜/div＞ ＜div＞＜a href="リンク2"＞＜img src="ファイルパス2"＞＜/a＞＜/div＞ ＜div＞＜a href="リンク3"＞＜img src="ファイルパス3"＞＜/a＞＜/div＞ ＜div＞＜a href="リンク4"＞＜img src="ファイルパス4"＞＜/a＞＜/div＞ ＜/div＞
この<div class=”slider”>が、先ほどのJavaScriptで「.slider」とした理由です。
プレビューして動作確認をしてみてください。
スライダーをカスタマイズしよう
自動で切り替わるといいな、
でも、自分でもボタンを押すなどして選びながら見れるといいな、など
スライダーをどのように表示させたいかは人それぞれです。
そこで先ほど追加したHTMLを編集していきます。
例①自動切換え設定手順
①Simple Custom CSS and JSプラグインの「コードの一覧」をクリックする
②作成したコードをクリックして開く。
③以下コードに変更し、保存する。
＜script＞
$(function() {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800
});
});
＜/script＞
| 項目 | 設定内容 |
|---|---|
| autoplay | 自動的にスライドを変えるか（true/false） |
| autoplaySpeed | 自動的にスライドを変えるタイミング（ミリ秒指定） |
| speed | スライドをスライドイン／フェードさせる時間（ミリ秒指定） |
この設定ですと、一見ただ写真が貼ってあるだけのように見え、
突然画面が切り替わる形です。
上記ですと、スライドであることがわかりにくいので、
下にドットを付けたいと思います。
例①ドット設定手順
①Simple Custom CSS and JSプラグインの「コードの一覧」をクリックする
②作成したコードをクリックして開く。
③以下コードに変更し、保存する。
＜script＞
$(function() {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
dots: true,
arrows: true,
centerMode: true,
centerPadding: '6%'
});
});
＜/script＞
| 項目 | 設定内容 |
|---|---|
| dots | ドットを表示するか（true/false） |
| arrows | ナビゲーション用矢印を表示するか（true/false） |
arrowsは、背景色が白の場合、表示されていてもわからないので、
cssで色変更の設定が必要です。
Simple Custom CSS and JSプラグインで、「カスタムCSSの追加」をクリックし、
表示位置をフッターにして、保存してください。
.slick-prev:before,
.slick-next:before {
color: #000;
}
まとめ
いかがでしたか？
スライダーの表示方法は他にもたくさんあります。
いろいろ試してみてくださいね。
