wp_enqueue_script('jquery');がきかず、slick.jsがきかないときの対処法【仕事の現場でサッと使える！デザイン教科書】

”WordPress 仕事の現場でサッと使える！デザイン教科書”でWordPressの勉強をしていた際、なぜかメインページ上部のスライダー（slick.js）がきかず無効になってしまうときの対処法を紹介します。

私はこれに半日ほど悩まされたのですが、解決法としてはめちゃくちゃ簡単だったのでメモとして記します。

同じところで躓いている初心者の方はぜひ参考にしてみてください。

wp_enqueue_script('jquery');がきかず、slick.jsがきかないときの対処法

WordPress 仕事の現場でサッと使える！デザイン教科書という良書のP.061にて、

wp_enqueue_script('jquery');

というコードを記述し終わり、P.062の削除作業を終えたあと、なぜかメインページの美しいスライダーが動作しなくなり、ただ画像が並んでいるだけになってしまった場合。

↑スライダーがきかず、画像を並べただけになっている。

解決法としては、めちゃくちゃ単純なんですが、盲点でした。

解決法：wp_head();の前にwp_enqueue_script('jquery');を書く

コードを見直してみて、以下のような並び順になってませんか？

wp_head();
wp_enqueue_script('jquery');
wp_enqueue_script('bistro-calme-main' , get_template_directory_uri() . '/assets/js/main.js');

具体的には、wp_enqueue_script('jquery');がwp_head();より後に記述してあると、スライダーslick.jsが動かなくなるみたいです。

ですので、wp_enqueue_script('jquery');はwp_head();より前に記述してください。具体的には、以下のように、書籍の見本通りに記述してください。

  wp_enqueue_script('jquery');
  wp_enqueue_script('bistro-calme-main' , get_template_directory_uri() . '/assets/js/main.js');
  wp_head();

これでスライダーslick.jsが動作するようになるはずです。

↑ちゃんと動作するようになりました。

なぜ逆に記述すると動作しなくなるのかは、よくわかりません（初心者ゆえ）。。

読み込みのタイミングの問題かとは思っているのですが。。

とにもかくにも、悩んでいる方はぜひこの点を見直してみてください。

それではでは。

それにしても、初心者でもWP化ついてよくわかるこの本はかなりの良書です。WordPressを勉強したい方にかなりおすすめです。