【WordPress】記事内でjQueryを使う方法！functionの書き方に注意！

今回は、WordPressで「記事内でjQueryを読み込む方法」について紹介します。

 

htmlやjavascriptのコードを紹介する際、記事内に直接コードを書き込むことで、よりわかりやすく解説できると思います。

コード自体は同じものでOKなので参考にしてみてください。

はじめに

 

今回紹介する内容は「WordPressの記事内でjQueryを使う方法」です。

まずはこちらをチェックしてください。

 

 

 

こちらは「現在のスクロール量」を表すテキストを「html」で設置し、イベントが発生するたびスクロール量を「jQuery」で変化させています。

このように、特定の記事でだけ動作するjQueryが作成できるので早速チェックしていきましょう。

 

WordPressの記事内でjQueryを使う

 

まず先に結論から言っちゃいましょう。

WordPressの記事内でjQueryを使うためには、エディタの「テキスト」に以下のように記述します。

 

<div><script type="text/javascript">
  (function($) {
    ここにjQueryのコードを記述
  })(jQuery);
</script></div>

 

どこに記述しても動作するので、私はわかりやすいように「記事の一番下」に設置しました。

今回の場合だと「スクロールイベント」も取得しているので、最終的なコードは以下のようになっています。

 

<div><script type="text/javascript">
  (function($) {
    $(window).scroll(function(){
      var top = $(this).scrollTop();
      $('.scroll-txt').text("Scroll = [" + top + "]");
    });
  })(jQuery);
</script></div>

 

WordPressで記事内にjQueryを記述する場合、補完が働くため普通に<script>と書くだけではダメなようですね。

上のコードのように「<div>」で囲んだり、function($)というように書き出さなくてはうまく動作しませんでした。

 

 

$(funciton(){ }); はエラーが発生する

 

jQueryを記述するときの始まり方っていくつかありますよね。

WordPressでjQueryを実行する場合「$(function(){ });」というように記述するとエラーが発生します。

 

 

こんな感じのエラーがでます。

WordPressでは「$」で始まるのがダメなようなので、以下のように書き始めればOKでした。

 

(function($){
  ここに記述する
})(jQuery);

 

 

 

jQueryでエラーが発生する場合

 

先ほど紹介した通り、WordPressでjQueryを使うときは「div」で囲むのですが、ここで一つ注意点があります。

ここでも、WordPressの自動補完が働くため、コード内に「空白行」があるとエラーが発生します。

 

<div><script type="text/javascript">
  (function($) {
    ここにjQueryのコードを記述

    ここに空白があるとエラー

    ここにjQueryのコードを記述
  })(jQuery);
</script></div>

 

 

こんな感じで、可読性を重視して「空白行」を入れるとエラーになるので注意してください。

おそらく、空白行が「<p>&nbsp;</p>」のように判断されているのだと思います。

 

 

どうしても空白が使いたいときは「//（コメントアウト）」を使えばOKでした。

 

まとめ

 

今回紹介したように、WordPressの記事内に直接jQueryを記述するためには、いくつかの決まりごとがありました。

特定の記事でだけ使いたいjQueryがあるときや、今回のように実際の動作をサンプルとして表示したいときに使えるので、ぜひ参考にしてみてください。

 

 

ではまた。