WordPressでjQueryが読み込まれない時に見るポイント

Last updated at 2020-11-07Posted at 2020-11-07

WordPressでjQueryを読み込んだときに、動かないことがたまにあります。
その際に、見ておくべきポイントを抑えておきましょう！

$を使ってないですか？

静的サイトでjQueryを使用していた方だとこのようにコードを書いているのではないでしょうか？

script.js

$(document).ready(function(){
    ここにjQueryの処理を書く
});

//または

$(function(){
    ここにjQueryの処理を書く
});

ちなみにここで書かれている$(document).ready(function(){はHTMLの読み込み完了後に処理を実行するという記述になります

でも、実はWordPressでは＄を使うと動かない仕様になっています。
WordPressでは他のライブラリも使用しており、jQuery同様に$を使用するものがあるため衝突をさけるために機能しないようにされているようですね。
なので、このように書き換える必要があります。

script.js


jQuery(function(){
    ここにjQueryの処理を書く
});

こちら、意外と盲点でした。
WordPressでテーマ開発をするときに、意味もわからず、wp_header()とwp_footer()を読み込んでいるのですが非常に大切な役割があるので解説していきます。

wp_headerはタグの直前に記述する必要があります。

index.php

<head>
<? php wp_header(); ?>
</head>

ここでは、wp_headerを読み込むと、functions.phpからstyle.cssの情報を呼び出すことができます。

wp_footerは</body>の直下に記載します。

index.php

</body>
<?php wp_footer(); ?>
</html>

wp_header同様にfunctions.phpからscript.jsを読み込むように設定します。

テーマ開発する際には、多くの方がfunctions.phpから読み込むように設定しているかと思います。
なので、wp_footerがないとjsを読み込まれないといった現象が起きるわけですね。

styleやjs読み込まれないと焦りますよね。でも、一つずつ原因を絞っていけば必ず動くようになりますので焦らず取り組んでいきましょう〜！