軽量な【slick.js】を用いたスライダーを設置できるプラグイン「Responsive Slick Slider WordPress」
何だか流行ってるようですね【slick.js】。自動翻訳に頼って内容を見る限りではいろいろなことが簡単にできそうなスライダーだとは分かります。
でもこれはhtmlで作られたサイトベースで設定方法が紹介されていて、WordPress用は有料ですよ！ってなってるんです。
うーーん有料かぁ・・・で何とかしてWordPressに導入できないかと調べたところ、いくつかのページで本当に簡単に設置できる方法が紹介されていました。
なーーんだ、すっごい簡単、骨格ができればあとは公式ページにある条件設定でいろいろな表現ができるスライダーのようです。
早速テストページへ導入してみたところ・・・きちんと動作しました！！解説ページ提供していただいた方に感謝！です。
いい気になってこのサイトにも導入をば！ということで同じようにやってみたら・・・動かない、いろいろ調べて何をどうしても・・・動かないんです。
しばらく格闘した挙句私の能力の限界という結論にしてダメ元でプラグインを漁ってみたら・・・あったんです！！
今回はこんないきさつでたどり着いた【slick.js】を用いて画像などのスライダーを簡単に設置できるプラグイン「Responsive Slick Slider WordPress」を紹介します
【slick.js】を用いたスライダーを自前で設置してみたけど動かない・・という方はぜひ試してみてください。
【Responsive Slick Slider WordPress】プラグインの基本的な機能・できること
- 【slick.js】を用いた軽量スライダーを設置できる
- 設定をしたらショートコードでどこへでも設置できる
- 設定画面で【slick.js】の動作条件（表現）をある程度網羅している
設定してみたところ、【slick.js】スライダーの特徴であるスライダー下のサムネイル表示はできませんでしたが、疑似3D表示（表画像の左右に前後画像が表示される）は可能ですし、サイト幅いっぱい（全幅）表示も問題なくできました。
手動設置との違い
手動でSlider.jsのスライダーを設置するのと、このプラグインを使うのとの違いをまとめました
テーマ内にコードを挿入する必要がない
あまりテーマの編集になれていない方にとって、テーマの〇〇に××を挿入して・・・というのは敷居が高いと思います。プラグインを使うことでこの不安は解消されます
画像は自動で拡縮してくれる
手動でもできないことはないのですが、このプラグインでは画像の幅・高さが指定できるので多少画像に大小があってもきれいに表示してくれます
すべて専用のGUIで管理できる
スライダー設置後に画像を入れ替えたい、動作速度の調整をしたいなどいろいろな設定変更をWordPressの管理画面上で行うことができます
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
※また、ページによってはテスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Responsive Slick Slider WordPress】プラグインの設定画面や表示の日本語化と翻訳
当サイトで私が翻訳した【Responsive Slick Slider WordPress】プラグインの日本語化ファイルを配布しています。
翻訳ファイルは
からダウンロードできます（ダウンロードの方法や日本語の適用方法なども解説しています）
フロントエンド部分で表示される文字列はありませんので慣れてしまえば日本語化は不要かもしれませんが、英語が苦手・・・という方は翻訳してからの作業をおすすめします。。
【Responsive Slick Slider WordPress】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、ページ先頭の画像をクリックして表示されるWordPressのプラグイン公式配布ページがダウンロード後、管理画面からアップロードインストールしてください。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Responsive Slick Slider WordPress】プラグインの基本的な使い方
インストールして有効化したら管理画面の「Responsive Slick Slider」でスライダーを作成していきます（以下は公式ページの設定サンプル画像です）。
作成が完了したら一覧にあるショートコードを挿入したい場所へ設置すれば完了です。
おまけ ヘッダーなど本文以外へスライダーを設置するには
大抵スライダーを挿入したい場所はヘッダーのタイトル下などだと思います。挿入場所はテーマのコードによりますが、一般的にはテーマ編集からheader.phpを開き、ソースを見ながらいい場所へ以下のコードを設置することでスライダー設置が可能です
<?php echo do_shortcode("ここにショートコード");?>※「ここにショートコード」という場所には実際のショートコードをコピペしてください
トップページだけスライダー表示するには
もう１つ進んで最近の企業サイトなどでは「トップページだけイメージとしてスライダーが表示する」というのがいろいろなサイトを見ていて主流だと思われます。
それを参考に当サイトでは2018年11月19日現在トップページにのみスライダーを表示するようにしています（当サイトでは手動でslick.jsスライダーを設置してますのでプラグイン用に置き換えて紹介します）。
上のコードではすべてのコンテンツでスライダーが表示されてしまいますので、以下のコードで「トップページ（ホームページ）だけ」という条件を追加します
<?php
if ( is_home() ) {
echo do_shortcode("ここにショートコード");
} else {
}
?>※「ここにショートコード」という場所には実際のショートコードをコピペしてください
このis_〇〇という条件式はトップページ／カテゴリー／カスタム投稿タイプなどいろいろな条件を設定してシーンに合わせて動作させたりさせなかったり、表示したりしなかったりという制御ができる便利な関数と条件式で、いろいろなケースで役立つものですからこの際メモなどして覚えておくといいと思います（これを条件式といいます）。
最初に画像が縦並びになってしまうのを軽減する方法
スライダーが表示される前にすべての画像が一瞬（環境によっては長い間）表示されてしまうことがあります。これはおそらくSlickの泣き所なのかもしれません。
簡単なCSSでスライドできるまでの間は非表示に・・・という設定ができますので、お使いのテーマに追記してみてください
【完成まで非表示にする】
.rss-innerpage-slider-wapp{
display: none;
}
.rss-innerpage-slider-wapp.slick-initialized{
display: block; /*slick-initializedが付与されたら表示*/
}【完成まで透明にする】
.rss-innerpage-slider-wapp{
opacity: 0;
transition: opacity .3s linear;
}
.rss-innerpage-slider-wapp.slick-initialized{
opacity: 1;
}プラグインのテスト環境＆個人的評価
最後に【Responsive Slick Slider WordPress】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。
テストした環境
- WordPressのバージョン：5.0.3
- PHPのバージョン：7.1
- テーマ：Simplicity2 バージョン2.6.0.9
- プラグインのバージョン：1.2.3
このプラグインの最新バージョンは1.4です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。
個人的な評価・感想ほか
- 設定のしやすさ：★★★★★
- 使いやすさ：★★★★★
- おすすめ度：★★★★★
前述したように【slick.js】を用いたスライダーで設定できる項目のほとんどはこのプラグインの設定でできますし、何かの競合などで手動での設置ができない場合には最適のプラグインだと思います。また、複数のスライダーを作成・管理できるのもいいところだと思います。
WordPressのカスタマイズ・不具合対応などご相談ください
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラ
のダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
