WordPress化したらslick（スライダー）が動かない？！その原因はjQueryの処理タイミングかも。

たったの2単語で解決！？！？！？！

静的HTMLで一度コーディングし終え、よしWordPress化（PHP化）するぞ！
「あれ、slickが動かない、、、」という経験がありませんか？

ちなみに私の場合、たった一行（というか２単語）書き換えるだけで動くようになりました。

それの原因はズバリ、jQueryの記述方法にありました。

記述方法といっても、headタグ内に記述するとか、bodyの閉じタグ直前に記述するといった「jQueryの処理自体を読み込ませるタイミング」のことではないです。

jQueryが「処理を実行するタイミング」です。

詳しく見ていきましょう。

動いたコードと動かなかったコード

まずは、実際のコードをご覧ください。
※下記は、body閉じタグ直前に記述している想定です。

WordPress化する前までは動いていた記述。（WordPress化したら動かなくなった記述）

<script>
$(document).on('ready', function() {
    $('#jq_slide').slick({
    //スライダーの内容
    });
});
</script>

WordPress化しても動く記述

<script>
$(window).on('load', function() {//修正箇所
    $('#jq_slide').slick({
    //スライダーの内容
    }); 
});
</script>

上記は、.on(‘ready’)と.on(‘load’)だけの違いです。

onreadyって？onloadって？

まず、onreadyとonloadの違いについて。

onreadyとonloadの違い

ブラウザがHTMLやjQueryを読み込む順序

また、ブラウザがHTMLやjQueryを読み込む順序は、下記イメージです。

1. HTMLファイルの記述が、上から順に読み込まれていく(readyとonloadで囲った範囲はスキップされる)
2. HTMLファイルが読み込み終わり、HTML構造の読込み（DOMの構築）が完了
3. readyで囲った範囲が実行
4. 画像など画面の要素全ての読み込みが完了
5. onloadで囲った範囲が実行

いかがでしょうか？

勘がいい人は、動かいない原因について、もう気づいてるかもしれません。

そもそもslickってどんなプラグイン？

そもそもslickは、スライダーとして動かしたい要素内にある画像の高さや幅までちゃんと読み込まれていなければ正しく動作しないプラグインです。

······

ここで疑問。

先程、onreadyは、画像などその他の要素は読み込んでなくても処理が実行されると説明しました。

であるならば、WordPress化する前でも動かないんじゃないか？と。

ただ、自分の場合、WordPressする前は動いていました。

ここは、一概には言えないのですが、単なる回線速度の問題。
もしくは、静的ページから動的ページになったことが原因だと思います。

静的ページと動的ページ

ここで、静的ページと動的ページについて、軽く触れておきます。

静的ページ

WordPress化する前は、いわゆる「静的ページ」と言われます。
WordPress側の処理やPHPの記述がなく、基本的にHTMLとCSSで構成されてます。（簡単な動きのためにJava scriptを利用している場合もあります。）
静的ページの特徴の一つとして、処理が軽いため、Webページを早く表示することができます。

動的ページ

また、WordPress化した後は、「動的ページ」になります。
動的ページは、静的ページと違ってPHPなどのによる処理もあり、静的ページより処理量が多く掛かります。
よって、Webページの表示速度は、静的ページに比べて遅くなってしまいます。

今回の状況に置き換えると、、、

静的ページの状態では、ページそのもの軽く、jQueryが処理を実行する前に、画像も完全に読み込みされていたために、slickが動いていたのだと思います。

※利用している回線速度が遅いとか、画像の容量がすごく大きいとかだと、画像より後の処理記述でも動かないかもしれないです。

逆に、WordPressになると、画像はPHPや、WordPressの関数で呼び出す処理になります。
そのため、jQueryが処理を実行する前に画像を完全に読み込めず、slickが動かなかったのだと思います。

※画像容量が非常に軽かったり、回線速度が早い場合は、動くかもしれないです。

とまあ、こんな不安定なページ、嫌ですよね。。。

これを避けるためにも、slick等の画像が読み込まれなければ正しく動作しないような処理を行う場合は、静的ページや動的ページに限らず、要素を読み込み（load）してからの処理を実行するといった記述が良いです。
load処理として記述しておけば、画像が最後まで読み込まれてから処理が実行されるため、確実にslickは動きます。

今回伝えたいこと

今回のような経緯を踏まえて、jQueryに限らず、プログラムを動かす場合、下記を大切にしましょう。

• 使いたいプラグインは、どんな性質のプラグインなのか。（例：画像は読み込む？読み込まない？）
• そのプラグインを、どのタイミングで読み込んで欲しいのか。（記述場所）
• そのプラグインを、とのタイミングで実行処理して欲しいのか。（記述方法）

なんとなーく、調べたサイトにあるコードをそのまま貼り付けて、「動いたからいい」や、となっている方いたら、この機会に一度、学びなおしてみるのも良いかもしれません。

「動かない！（激おこ）」や、思わぬバグがあった際、基礎を知らないと、思わぬ時間を食います。

ちなみに、今回動かないとなっていた時の話です。
現役バリバリの我らが社長が、「動かない原因は処理のタイミングかも」と一言。

ズバリ、そのとおりでした（強い）

私は３時間ほど格闘したのに。。。

それでも動かない？

もし、今回ご紹介した方法で解決しない場合、静的からWordPress化する際になにかしらの記述を消してしまった等の、そもそも正しくslickファイルを読み込めていない可能性があります。

一度、下記サイト等を参考に、確認するのがおすすめです。

slickのスライダーが動かない6つの原因【WordPressのケースも解説】

また、WordPressの場合、WordPress特有のjQuery記法により動かないこともあります。
念のため、下記サイトの内容も試してみて下さい。

絶対解決！WordPressでslick.jsが動かない場合の対処法
※上記サイトは、readyで紹介されているので、ご注意！

記述についていろいろ

なお、今回は、onreadyやonloadといった「on」を記述する方法で紹介しました。

しかし、例えば、.load()などと記述すると、jQueryのバージョンではエラーが起こる場合があるのでご注意！

下記はNG！

$(window).load(function() {
　//処理内容
});

また、今回は、readyやloadを紹介しましたが、slickのような画像を扱うプラグイン”以外”では、基本的にreadyの処理で問題ないです。

loadによる処理の場合、画像などもすべて完全に読み込まれてから処理が実行されるので、場合によっては画面表示まで無駄に時間がかかります。

単純なHTML構造だけを読み込んで処理する内容で構わないページなら、readyによる処理のほうがページ表示速度が早いです。

加えて、readyについては、わざわざreadyと書かなくても動きます。

というのも、下記すべて、readyの処理です。

$(function(){
  //処理
});
 
jQuery(function(){
  //処理
});
 
jQuery(document).ready(function(){
  //処理
});

記述量は少ないに越したことはないので、一番最初の$(function(){ //処理 });で問題ないです。

また、HTMLファイルは上から読み込まれていきます。
そのため、jQueryの記述をbody閉じタグの直前に書けば、必然的にHTMLの読み込みが完了した後に処理が実行されるので、readyとわざわざ書かずとも動作します。

このあたりも意識しつつ、色々試してみるのもいいでしょう。

最後に

いかがでしたか？
今回は、jQueryの処理タイミングについて、slickが動かない原因とともにご紹介しました。

上記内容を踏まえて、自分の思うままにプログラムを活用できるように頑張りましょう！

最後に、今回参考にさせていただいたサイトをご紹介しておきます。

• 【jQuery入門】ready(load)の使い方とHTMLの読み込み方法！
• 【jQuery】処理実行タイミング $(document).readyと$(window).load
• jQueryのready()やload()のタイミングの違い
• 【jQuery】readyとonloadの違いと実行順についてのまとめ
• jQueryの読込み「ready」と「load」と「function」の順番について

最後まで読んでいただき、ありがとうございました！ではまた！