ワードプレス上でJQueryを動かしたいけど、どんな記述の仕方をすればいいのかわからない。
そんな方向けの記事です。
そもそもJQueryって？
JQueryというのは、簡単にサイト内で動的な動き／アニメーションができるようにJavaScriptで書かれたライブラリのことです。
入力を受け付けて、その結果を返したり、特定の位置までスクロールジャンプさせたりと、色々便利な機能を、非常に簡素な記述で実装できます。
世界的にも非常に普及しており、本家のJavaScriptを書くタイミングが思いつかないレベルで便利な、Webサイトのフロントエンドの事実上の標準言語。
実はワードプレスは標準でJQueryを読み込んでいる
ワードプレスは標準の状態でvar.1系のJQueryを読み込んでいます。
「var3系が使いたい！」などの特別な要望がない場合はそのまま標準読み込みのJQueryを使うことができます。
ワードプレスのJQueryは独自仕様
ワードプレスのJQueryにはコンフリクト回避の機能が備わっていて、CMSを使わず自前で作ったサイトなどで動くJQueryと少し仕様が異なります。
ワードプレス内ではいつもの「$」を使ってJQueryを記述しようとすると、上手く動かない場合があります。(テーマなどによるかもしれませんが)
ワードプレス標準のJQueryを使う記述法
//以下の記述でカプセル化
jQuery(function ($) {
//この中ではいつも通りの「$」が使えます。以下テスト
console.log($('h1').text()); //ページのh1タグを取得してコンソールに出力
});
この記述方法を使えば、いつも通りの「$」を使って記述することが可能です。
基本は<head>～</head>内への記述です。
ワードプレスの標準JQueryの読み込み位置は<head>タグ内の
<?php wp_head(); ?>
の位置で読み込まれますので、任意のJQueryコードはそれより下の位置に記述する必要があります。
それでも上手くJQueryが動かない
プラグインなどの関係で、標準JQuery読み込み位置が変わっていたり、高速化処理のために[async / defer]属性が振られていたりする場合、上手く動かないパターンも考えられます。
その場合は以下の記述でほぼ動きます。
//さっきの記述を更にwindow.onloadで囲む
window.onload = function() {
jQuery(function ($) {
//この中ではいつも通りの「$」が使えます。以下テスト
console.log($('h1').text()); //ページのh1タグを取得してコンソールに出力
});
}
window.onload は 「全てのDOMの準備が終わり、描画が終わった後に処理してね」という命令です。
つまり、確実に標準のJQueryが読み込まれた後で自作JQueryを読み込むことが可能になります。
JQueryによる動きを付ける部分がファーストビュー内にある場合は、一瞬改変前のDOMが出力されてしまいますので、注意が必要です。
まとめ
生のJavaScriptでも出来なくはないですが、ソースコードが冗長になるので、あまり僕は好きじゃありません。
ワードプレスのサイトで会員登録をさせたい場合など、ユーザーの入力を受け付ける場合はJQueryは非常に便利です。
コメント