WordPressでjQueryを使用したい場合の注意点一覧!

  • 2021年2月26日
  • 2021年2月28日
  • wordpress

一般的なサイトならばjQueryを使用するのは簡単です。
headにタグを挿入するだけですね。

ただし、Wordpressの場合はすべてのコードを弄れるわけではないので、
場合によっては詰まることがあります。
今回はWordpressでjQueryを使用する際の注意点を説明します!

WordPressでjQueryを使用したい場合の注意点一覧!

基本的にはjQueryは標準装備

以下は有料のテーマ「THE THOR」を使用している当サイトのソースです。
headの中にjQueryの記述があるのが分かります。

このように、有料だったり、インストールするようなテーマの場合は、
最初からjQueryを使用する準備が整っています。
なので、jQueryを書き込んでOKです。

ただし、Wordpress立ち上げ時に元から入っているテーマはこの限りではありません。
例えば

  • Twenty Twenty
  • Twenty Nineteen
  • Twenty Twenty-one

などは上記のような記述がありません(なぜだ……)。
これらのテーマではjQueryを記述しても動くことはありません。

jQueryの記述を入れるには

ぶっちゃけるとテーマ変えましょう、という話ですが、一応情報として共有を。
Wordpressはheadの中身をheader.phpというファイルで保持しています。
管理画面の左側の「外観」→「テーマエディター」を起動させて、header.phpを開きましょう。

「 <?php wp_head(); ?>」の上に以下の文を記入します。

必ず「<?php wp_head(); ?>」の上に記述してください。
そうしないと動きません。
これでjQueryが動くようになります。

WordPress独自の記述ルールに注意!

jQueryの記述と言うと、基本的なのは以下のような記述です。

ところがこの記述、Wordpressでは動きません。
Wordpressは内部のプログラムでのバグを防ぐために、「$」のみの表記を禁止しています。
そのためWordpressでjQueryを動かす場合には以下の2つの施策が有効です。

  1. $をjQueryに変更
  2. 構文全体をjQuery(function ($) {})で囲む
①$をjQueryに変更

「$」はjQueryにおける簡易表記で、正式に書くなら「jQuery」になります。
よって先ほどの文を以下のように変更することで機能します。

でも全ての「$」を「jQuery」に変更するのは場合によっては大変ですよね。
その場合は2番目の方法が有効です。

②構文全体をjQuery(function ($) {})で囲む。

囲むことで内部は「$」表記でも問題なくなります。
よって先ほどの文を以下のように変更することでも機能します。

こちらの方が中の「$」表記を変えなくていいので楽ですね。
WordpressでjQueryを使用する場合の参考にしてください。