ワードプレスでJQueryを動かすための記述方法



ワードプレス上でJQueryを動かしたいけど、どんな記述の仕方をすればいいのかわからない。

そんな方向けの記事です。

そもそもJQueryって?

JQueryというのは、簡単にサイト内で動的な動き/アニメーションができるようにJavaScriptで書かれたライブラリのことです。

入力を受け付けて、その結果を返したり、特定の位置までスクロールジャンプさせたりと、色々便利な機能を、非常に簡素な記述で実装できます。

世界的にも非常に普及しており、本家のJavaScriptを書くタイミングが思いつかないレベルで便利な、Webサイトのフロントエンドの事実上の標準言語。

実はワードプレスは標準でJQueryを読み込んでいる

ワードプレスは標準の状態でvar.1系のJQueryを読み込んでいます。

「var3系が使いたい!」などの特別な要望がない場合はそのまま標準読み込みのJQueryを使うことができます。

ワードプレスのJQueryは独自仕様

ワードプレスのJQueryにはコンフリクト回避の機能が備わっていて、CMSを使わず自前で作ったサイトなどで動くJQueryと少し仕様が異なります。

ワードプレス内ではいつもの「$」を使ってJQueryを記述しようとすると、上手く動かない場合があります。(テーマなどによるかもしれませんが)

ワードプレス標準のJQueryを使う記述法

この記述方法を使えば、いつも通りの「$」を使って記述することが可能です。

基本は<head>~</head>内への記述です。

ワードプレスの標準JQueryの読み込み位置は<head>タグ内の

の位置で読み込まれますので、任意のJQueryコードはそれより下の位置に記述する必要があります。

それでも上手くJQueryが動かない

プラグインなどの関係で、標準JQuery読み込み位置が変わっていたり、高速化処理のために[async / defer]属性が振られていたりする場合、上手く動かないパターンも考えられます。

その場合は以下の記述でほぼ動きます。

window.onload は 「全てのDOMの準備が終わり、描画が終わった後に処理してね」という命令です。

つまり、確実に標準のJQueryが読み込まれた後で自作JQueryを読み込むことが可能になります。

JQueryによる動きを付ける部分がファーストビュー内にある場合は、一瞬改変前のDOMが出力されてしまいますので、注意が必要です。

まとめ

生のJavaScriptでも出来なくはないですが、ソースコードが冗長になるので、あまり僕は好きじゃありません。

ワードプレスのサイトで会員登録をさせたい場合など、ユーザーの入力を受け付ける場合はJQueryは非常に便利です。