KumaTechLab
2020-06-03/2023-05-23

【WordPress】wordpressでjQueryを使う

【WordPress】wordpressでjQueryを使う

今回はwordpressでjavascriptファイルを使用できるようにします。

また、そのファイルで「jquery」を使用したいと思います。

経緯

このサイトのトップページでページ送りの部分が記事と横並びになっていることに気が付きました。

今までは全然気が付きませんでした。。。

そこでページ送りの部分のphp部分を子テーマでいじろうかなとおもったわけですが、jsで要素移動させた方が早いかなと思ったわけです。

そしてjqueryを書き実行したら「$ is not a function」と怒られました。。。

その反省もかねてまとめます。

それでは、順に見ていきましょう！

wordpressでjavascriptを使う

wordpressでjavascriptを使う

今回はwordpressの子テーマを利用する方法でjavascriptファイルを読み込もうと思います。

テーマにカスタムCSSと同じようにカスタムjavascriptが記述できるものはそこに記述する方法でもいいでしょう。

子テーマの「function.php」に以下を記述します。子テーマで「style.css」などすでに読み込んでいる場合はそこに追加してください。

function theme_enqueue_styles() {
    wp_enqueue_script('move-nav' , get_stylesheet_directory_uri() . '/move-nav.js' , array(),false , true);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

functionの名前は何でも大丈夫です。add_actionの第二引数にも同じものが入りますのでそこは合わせてください。

wp_enqueue_script()の第１引数にはスクリプトのハンドル名です。好きな名前つけてください。このスクリプトを異なる場所で使用したりする際にハンドル名で呼び出せます。

第２引数にはスクリプトがある場所のURLを記述してください。

第３引数には依存するスクリプトのハンドル名の配列です。私の場合はテーマでjqueryがヘッダーで読み込まれていたので必用ありませんでした。

必用であれば「array( ‘jquery’ )」のように記述してください。初期値は空の配列「array()」です。

第４引数にはバージョン番号を入れます。必要ないので「false」を指定しました。初期値でもfalseです。

第５引数は</body>タグの直前に読み込ませるかどうかです。初期値はfalseとなっています。今回はtrueにしました。

これでjavascriptファイルをwordpressで読み込む準備ができました。

wordpressでjqueryを読み込む

wordpressでjqueryを読み込む

javascriptであればそのまま読み込むだけでよいのですが、jquery使用している場合はやや注意が必用です。

「$」を利用して記述している場合には競合してしまいエラーが出ます。

なので以下の方法で対処しましょう。

  • 「$」を「jQuery」に変える
  • 関数内では「$」を使えるようにする
  • 違う文字に変える

順に見ていきましょう。

「$」を「jQuery」に変える

こちらは名前の通りです。例えば下記のように書いていたとします。

$(function() {
   $("section").addClass("laod");
});

この時$は使用できないのでその部分をJQueryに変えます。

jQuery(function() {
    jQuery("section").addClass("load");
});

このような形になります。

普段コードを書く際に「$」を使用する人にはあまりなじみのない書き方かもしれません。

これもjQueryの書き方です。

関数内では「$」を使えるようにする

上の例を使い書き直すと以下のような形です。

(function($) {
    $("section").addClass("laod");
})(jQuery)；;

この場合functionの中でのみ「$」を使用することができます。既存の$を使用する関数は使用できません。

違う文字に変える

上の例でやってみます。

var $j = jQuery ;


$j(function() {
   $j("section").addClass("laod");
});

このようにすることもできます。

毎回毎回jQueryと書くのは長いと感じる方はこちらのように「$」と一文字組み合わせることで短くすることができます。

まとめ

jquery実行したら「$ is not a function」といわれてもってなりますよね。文法に間違いはなさそうなのになぜとなります。

以前どこかで使えないというのを見ていたのをふと思い出し、書き直したらちゃんと動きました。

記事を読んだ方も忘れないように覚えておきましょう。

2020 KumaTechLab.