やっと動いた!!WordPressへ動作の軽いSlick.jsを使ったスライダーを設置する方法【Simplicity2編】

役に立つ情報でしたら是非拡散(シェア)をお願いします

スライダーというと、1つの画像が表示されてそれが次々に変わっていくのを想像されると思いますが、よく見ていただくと、このslick.jsを使ったスライダーは左右の空いたスペースに前後の画像がちらっと表示される疑似3Dのようなスライダー。かっこいい!!で設置したいと思っている方も多いと思います(私もその一人です)。

当サイトのトップページにも設置しています→見てみる

またSlick.jsでは縦方向の回転や逆方向の回転も設定することができます。ちょうどこの→にある広告は同じSlickを使って縦回転にしてます。

このSlick.jsをサイトに使用する方法は沢山紹介されていて、中にはWordpressに設置する方法もありますから、最初はそれ通りに設定すれば簡単に設置できると思ってました。

が・・・手順通りに設置しても問題発生!!

  1. スクリプトのエラーが発生する
  2. スライダーが動かない・・・でデベロッパーツールで確認すると×マークが出てて、「Uncaught TypeError: $(…).slick is not a function」なる.slickは関数ではないですよ!というエラー。これを回避する方法がいろいろ紹介されてますけど解決に至らず・・

  3. 動いたと思ったら本文内の画像が表示されない
  4. スクリプトの挿入位置などを調整して何とか動き出した・・・と思ったら、今度は本文の中にある画像が一切表示されない現象発生!!これも解決策が見つからず・・

Javaの知識なんかありませんからエラーが出たところでどうにもできない、スライダー設置あきらめる??やっぱりプラグインに頼る??で見つけたのがslick.jsを使ったスライダーが設置できるプラグイン

動作が軽いと評判の【slick.js】を用いてWordpressサイトへ画像などのスライダーを簡単に設置できるプラグイン「Responsive Slick Slider WordPress」を紹介します

でした。ただこのプラグインでは画像そのものにリンクが設定できなくて、文字列とボタンを追加したときだけボタンにリンクが入るというものなのでできれば画像にリンクを張りたい!

また、slickで設定できるオプションの一部しか設定できないので、上にスライダー、下に連動したサムネイルを表示する、縦方向にスライドさせるなど「これができたら・・・」というのは実現できないので何とか手動で設置できないか??ということで頑張ってみました。

タイトルにもある通り、今回紹介するSlick.jsのスライダーが正常に動作したのは、私がこよなく愛するテーマ【Simplicity2】で実現できた方法ですけど、ほかのテーマでも恐らく動くであろうと思います。といいつつ不安なので、どんなテーマで動いた動かなかった・・などというコメントを残していただけるといろいろな方の参考になると思いますので、協力よろしくお願いします。

※コメント欄は文末にあります(遠くてすみません)
※ある程度の検証コメントが集まったらコメント閉鎖する予定ですので、投稿できない場合は「締め切ったのね」と思ってください。

では進めていきましょう!!今までダメだった、断念した方の助け舟になれれば幸いです。

大変そうだなぁ・・・と思われた方は設置代行します。こちらからお気軽にお問い合わせください。

スポンサーリンク



slick.jsの基本的な設定ができるプラグインを導入しよう

結局プラグインかよ・・と思った方がいるかも知れませんね。私もいろいろやってみましたが、結局この方法に行きつき、一番簡単に問題なくスライダー設置ができました。

これは

で配布されているプラグインです。入手してアップロードインストールするだけでslick.jsの読み込みが正常にできるようになります。

ただ、開発中のようでファイルが足りなかったりして最初は正常に表示できませんでしたので、ちょこっと改造して独自のものにしました。

こちらから自由にダウンロードできるようにしておきますので使ってやってください(この方法で正常に動いたかどうかの検証を求めていますので、設置後文末のコメント協力をお願いします)。上のものと同様入手したらアップロードインストールして有効化してください。

※動作を保証するものではありませんし、環境によっては不具合が発生することがあるかも知れません。不具合が出ても責任は負えませんので自己責任でお使いください。

これが導入されていることを前提に話を進めていきます(何だか怪しい・・・と思われる方は離脱していただいて結構です)

スライダーをとりあえず動かしてみよう

ヘッダーに・・・としましたがまずは通常の投稿などできちんと動くかどうかの確認をしましょう。新規追加して、テキストエディタで以下のhtmlコードをコピペしてください。

     	<div class="slick-responsive">
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL①"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL②"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL③"></a></div>
       </div>
これが1つの塊になります。左右にちらっと表示する画像も含め3つ以上の画像を用意しましょう。

もちろん

       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL③"></a></div>
を増やせば無限に画像は増やせます。

それぞれの画像とリンク先のURL(リンクがいらない場合には)

<div><img src="画像のURL①"></a></div>
だけにすればいいですね(この説明はhtmlの基本中の基本なので割愛します)

プレビューしてみてください・・・ね?ちゃんと左右にちらっと前後画像があるスライダーが表示されるはずです。

うーーーん動かない・・・などと言いながらたくさんの時間を使った私のような方、たったこれだけで動くなんて奇跡的ですね!!(自画自賛しすぎです)。

では次にこれを応用していよいよヘッダーへのスライダー実装へ進みます。

この段階で動かないという方はプラグインやテーマとのコンフリクト(競合)などが考えられますので他のプラグインを停止してみる、テーマを変えてみるなどの対処をしてみてください(絶対必要なプラグインと競合してしまっている場合には残念ながらこの方法は使えないということになります)。

またキャッシュ系のプラグインを使ってスクリプトの圧縮をしている場合にも動かない場合がありますから、ひとまずキャッシュプラグインを停止して動作確認してください(Autoptimizeプラグインでの対処方法はこのページの下の方に書いています)。

大変そうだなぁ・・・と思われた方は設置代行します。こちらからお気軽にお問い合わせください。

ヘッダーへスライダーを追加する

いよいよ本題です。と言っても上の項で設置したコードをそのままテーマのheader.phpへ追記するだけです。

注意点としては画像の幅はできるだけサイトの幅と同じにし、高さもきちんと切り抜いたものにするということです。一応サイズ調整は自動でされるものの、不格好になったり、Google様から「画像のサイズをきちんとするといいですよ!」と言われたりします。

【Simplicity2】の場合は親テーマを開き、「テーマヘッダー」を選択してスライダーのコードを挿入します。

画像の大きさを調整してURLなどをきちんと設定した

     	<div class="slick-responsive">
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL①"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL②"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL③"></a></div>
       </div>

を70行目近くにある

</header>
の下へ追記して保存します。

ここへ保存するとタイトルや抜粋文とメニューの間にスライダーが表示される形になります。

スライダーの調整

Slick.jsの設置に失敗された方は上のhtmlコードがどうなってるのか?何が設定されているのか?は理解されていると思います。簡単に言うと、slick-responsiveで囲まれた部分の画像をslick.jsを使ってスライド表示しなさいということになってるんですね。

ということは、スライダーを動かすスクリプトで同じslick-responsiveのところをカスタマイズすればオプションの追加や削除、速度の調整などができるということになります。

この部分が先ほどインストールしたプラグインに含まれています。ダウンロードはこちらです。

プラグインなので「プラグイン」→「プラグイン編集」を開き、「HA Slick Plugin」を編集します。

編集するのは「javascripts」の中の「slick-starter.js」というファイルです。

開くと

jQuery(document).ready(function ($) {
  'use strict';
  $('.slick-responsive').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 1500,
    dots: true,
    arrows: true,
    centerMode: true,
    centerPadding: '6%',
	pauseOnHover:false,
  });
});
というコードが入っています。失敗した方、「何か見たことあるコードだなぁ・・」と思うことでしょうね。

冒頭に「.slick-responsive」というのがありますね。これが前述した「このidならこのスクリプトを動かしてね」という指定になります。

Slickで使えるオプションについては

の公式ページを参照ください。きちんとスライダーが動くならこれらのオプションはすべて使えますからGoogle翻訳などをフル活用して独自の機能を追加しましょう。

違うスライダーを追加するには

もうここまでできる方なら解説する必要もないかと思いますが一応・・・。

jQuery(document).ready(function ($) {
  'use strict';
  $('.slick-responsive').slick({
    autoplay: true,
    autoplaySpeed: 4000,
    speed: 1500,
    dots: true,
    arrows: true,
    centerMode: true,
    centerPadding: '6%',
	pauseOnHover:false,
  });
});
がスクリプトの塊で、
     	<div class="slick-responsive">
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL①"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL②"></a></div>
       <div><a href="クリックしたときにジャンプするページのURL"><img src="画像のURL③"></a></div>
       </div>
が対応する画像の集まりなので、ここにある「slick-responsive」という文字列を変更したものをそれぞれに追加するだけです。例えばスクリプトが「.abc」なら画像の集まりの先頭にあるdivクラスも「abc」にするといった感じです。

呼応するスクリプトとhtmlで画像も動作も決まるわけですから、このサイトのようにトップページでは横に流れるヘッダースライダーを表示しつつサイドバーには縦に流れる幅の違うスライダーの設置というのが可能になります。

理論上設定は無限にできますので、必要に応じて増やすといいでしょう。


以上がSlick.jsを使ったスライダーの設置方法になります。多分頑張らなくてもできると思いますのでチャレンジしてみてくださいね。

大変そうだなぁ・・・と思われた方は設置代行します。こちらからお気軽にお問い合わせください。

おまけ ページ表示したときに一時画像が縦並びになってしまうときは

1つだけこのスライダーの残念なところは一瞬すべての画像が表示されてからスライダーになるところ。サーバーの性能や見るブラウザ・パソコンの性能によるのでひょっとすると一瞬どころか数秒そうなることもあるのかも知れません。これはちょっと格好悪い!!ということでついでに対策しましょう。

これについては

を参考に対処したところうまくいきましたので紹介させていただきます。

詳しくはリンク先のサイトを見ていただければと思います。このサイトで使ったのは以下のコード

.slick-responsive{
  opacity: 0;
  transition: opacity .3s linear;
}
.slick-responsive.slick-initialized{
  opacity: 1;
}

これを子テーマのStyle.cssへ追記するだけです(CSSセレクタを変えている場合には「.slider」を変更しないと反映されません)。

こうすることでSlick.jsがきちんと読み込まれるまでは空白、読み込み後はフェードインしてスライダー表示されるようになります。サーバーの性能やアクセス状況によっては一瞬ではなく結構な時間画像が縦並びになって不格好になることがありますから、せっかくなので設定しておきましょう。

※こちらも前述した通りslick-responsiveというクラスに対しての指示になりますので、別のクラスのスライダーには相応の記述をする必要があります。

おまけ 動作しないのはJSファイルを最適化するプラグインとの併用が原因かも

サイトの表示速度高速化を図る「Autoptimize」などのプラグインでJSファイルの最適化と圧縮を行う設定をしている場合、説明通りに設置してもスライダーが表示されず、スライダーに使う画像がそのまま縦並びになってしまうことがあります。

もちろんJSファイルの最適化と圧縮を停止すればいい話なのですが、それでは意味がありませんね。

前述した「Autoptimize」の場合には特定のJS(スクリプト)を除外する設定があります。そこへ「’slick.js’」を追加することで他のスクリプトは最適化されてもSlick.jsのみ無視されるようになり、きちんとスライダー表示されるようになります。

おまけ LazyLoad(画像の遅延読み込み)とは相性が悪いのかも

【Simplicity2】で最終的に不具合が出たのはこの項目で、画像が表示されたりされなかったりする現象が出ました。テーマカスタマイザーからLazyLoadをオフにしたところ、すべてOK!!問題なく表示されるようになりました。

さいごに コメントのお願い

いかがでしたか?お使いの環境では動きましたか??やっぱりだめでしたか??

このページを見てやってみよう!!と思っている方の参考になるよう、

  1. 動いたかどうか(動いた!動かなかった!で結構です)
  2. 動かない場合どんな不具合が出たか?
  3. テーマ(子テーマを使ってるかどうかも含めて)
  4. WordPressバージョンやお使いのサーバー
  5. 使用している主なプラグインなど
  6. 実際に動いているサイトのURL

などできるだけ詳しい内容を含めてコメントをお願いします

※動作したかどうかの検証とさせていただきますので、不具合解消方法のお問い合わせをいただいてもお答えすることができませんのでご了承ください。

また正常に動いた方でWordpressの紹介記事等を書かれている方はぜひこのページへのリンクをお願いします

最後の最後にお願いですが、結構苦労してたどり着いた方法ですので

  1. 勝手にプラグインの再配布をすること
  2. ご自身で紹介記事を書いてファイルはここから(いわゆる直リンク)とする行為

はご遠慮いただけますようお願いいたします。

参考 jQueryってなーに?

トップへ戻る