一般的なサイトならば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(); ?>」の上に以下の文を記入します。
|
1 |
<?php wp_enqueue_script('jquery'); //jQueryの読み込み?> |
必ず「<?php wp_head(); ?>」の上に記述してください。
そうしないと動きません。
これでjQueryが動くようになります。
WordPress独自の記述ルールに注意！
jQueryの記述と言うと、基本的なのは以下のような記述です。
|
1 2 3 |
$(document).ready( function(){ alert('jQuery'); }); |
ところがこの記述、Wordpressでは動きません。
Wordpressは内部のプログラムでのバグを防ぐために、「$」のみの表記を禁止しています。
そのためWordpressでjQueryを動かす場合には以下の2つの施策が有効です。
- $をjQueryに変更
- 構文全体をjQuery(function ($) {})で囲む
「＄」はjQueryにおける簡易表記で、正式に書くなら「jQuery」になります。
よって先ほどの文を以下のように変更することで機能します。
|
1 2 3 |
jQuery(document).ready( function(){ alert('jQuery'); }); |
でも全ての「＄」を「jQuery」に変更するのは場合によっては大変ですよね。
その場合は2番目の方法が有効です。
囲むことで内部は「＄」表記でも問題なくなります。
よって先ほどの文を以下のように変更することでも機能します。
|
1 2 3 4 5 |
jQuery(function ($) { $(document).ready( function(){ alert('jQuery'); }); }); |
こちらの方が中の「＄」表記を変えなくていいので楽ですね。
WordpressでjQueryを使用する場合の参考にしてください。