絶対解決！Wordpressでslick.jsが動かない場合の対処法 │ Triple Threat(トリプルスレッド)

こんばんわ。たいそん(@ttaison)です。

今回の題材はslick.js。
一応知らない人のためにも説明しておくと、
画像やテキストなどのコンテンツにスライダー機能を実装してくれる便利なjQueryプラグインでございます。

WordPress・静的なhtmlサイト問わず、スライダープラグインで使っている方はかなり多いのではないでしょうか？ファイルさえ設置してしまえばたった数行のコードでコンテンツスライダーが完成してしまいます。

ただ、そんな簡単なslickも、WordPressがからむと少しやっかい。
初めて使う場合は特に、表示されない！てな具合に悩まされることでしょう。

今日はそんなslickを間違いなくWordpressに実装する方法を紹介します。

ちなみにこの内容はWordpressでjQuery関連のプラグインを使うと起こりやすい間違いを解決する記事になるので、slick.js以外のjQueryプラグインにも流用できます。

1. なぜWordpressだとslickは動かない？
2. まとめ

なぜWordpressだとslickは動かない？

そもそも静的なサイトではフツウに動くはずのslickが、なぜWordpressだと動かなくなってしまうのか？

原因は大きく分けると３つあります。

WordPress特有のjQuery記法により動かない
ファイルの置き場所が違うので動かない
htmlやjsの書き方を間違えているので動かない

以上が動かない原因となっていることがほとんどです。
まずは消去法で解決を目指しましょう。

WordPress特有のjQuery記法により動かない

まず一つ目はWordpressのjQueryの記法により動かない場合。
WordPressは備え付けのjQueryを利用する場合、書き方が通常の記法ではなくWordPress独自の書き方になっています。

どんな書き方かというと、通常$であらわす部分をjQueryと書き換えているのですね。

$('class'){}
↓
jQuery('class'){}

そのため、slick公式やそのほかの記事を見てそのまま$から始まる書き方をしてしまうと、slickが動かない！となってしまうワケです。

それをふまえての対処法は以下の2とおり。

備え付けのjQueryを無効にして、通常のjQueryを読み込む
slickの書き方をwordpressのjQueryに合わせる

では実際に解決してみましょう。

備え付けのjQueryを無効にして、通常のjQueryを読み込む

このやり方は、もうメンドクサイからいつものjQueryを読み込んじゃおう！というやり方です。

メリットとしては、$から始まるいつもどおりの書き方ができる。
デメリットは、使用テーマがデフォルトjQueryを使った機能を持っている場合、それらが無効化されます。トップへ戻るボタンやナビの開閉など、テーマ特有の機能を使っている場合はご注意ください。

やり方は下記のコードをwp_head()の上に設置するだけ。
囲いの<>は除外して設置してください。

<
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery','//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), NULL, true );
>

WordPress特有のコードを使って設置します。

1.12.4という部分はjQueryのバージョンなので、お好みのバージョンをお使いください。

※1系とか2系とかは使っているテーマの系に合わせたほうがいいかも。1系だったら1系を設定するとか。

slickの書き方をwordpressのjQueryに合わせる

これは先ほどお伝えした$をjQueryに書き換える方法ですね。
メリットは他に影響を与えない
デメリットはなんか違和感。それだけです笑

$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});

//↓ これを下記のように書き換える

jQuery(document).ready(function(){
jQuery('.your-class').slick({
setting-name: setting-value
});
});

jQueryの記法で動かない場合は以上の方法で解決できたかと思います。

ファイルの置き場所が違うので動かない

これは意外とやりがちなのですが、slickを機能させるいくつかのファイルを分散して置いてしまい、動かなかったというパターン。

例えばファイル管理をキチンとしたいあまり、テーマのcssフォルダとjsフォルダにslickのcssファイル、jsファイルをそれぞれ置いてしまったり、フォントファイルの置き場所がよくわからず反映されなかったり。

こういった置き場所のズレをなくすためにもslickのファイルは一か所にまとめて設置するようにしましょう。

私の場合はルートディレクトリ（wp-login.phpが置いてある階層）にslickという名前のフォルダを作り、画像など含めslick関連のファイルは全部そこに置いています。

これでファイルの置き場所で動かなくなることはなくなりましたね。

htmlやjsの書き方を間違えているので動かない

これは単純にhtmlの書き方やjavascriptの書き方を間違えているパターン。
特に多いのが、htmlの書き方。

slickのスライダーは公式のサイトを見ると、

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

がデフォルトの書き方になっています。
これを例えば、

<div class="flex_box">/* 親要素にdisplay: flex; */
<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
</div>

こうすると、とたんに動かなくなります。
(親要素にinline-blockの場合も不具合あり。作動するけどドットがなくなる)

なぜこの現象が起きるかというと、slickは展開する時に独自の親要素を参照して画面サイズの測定などを行うため、余分なスタイルがあたっている場合、表示崩れが起きてしまうためです。
※無理くり作動させることもできますが、ここでは触れません。

なのでslickを利用する際のhtmlは、なるべく公式が出している書き方を参考にしましょう。
※div要素をul要素で代用するなどは問題ありません。