WordPressでjQueryが動かない!問題なく動作させるために設定する対策方法

WordPressでjQueryが動かない!問題なく動作させるために設定する対策方法

こんばんわ。taisonです。
唐突ですが、

WordPressでjQueryのライブラリを追加したい!」てこと、

結構ありませんか?

スライダー機能がしょぼいから後入れのライブラリで対応したい、
トップへ戻るボタンを追加したい、、などなど。
結構jQueryのコード・ライブラリを追加してサイト制作している方も多いと思います。

しかしWordpressでjQueryを使用するとき、ほとんどといっていい程

「動かない、、!」

とハマる可能性が高い!なぜか!
今日はその問題を解決するための記事を書きたいと思います。

もう悩む必要はありません!これでjQuery問題の全てを解決しましょう!

なぜ動かない?WordpressにおけるjQueryの罠

おそらくこの記事を見ている方は、以下のような問題にブチあたっているのではないでしょうか?

  • WordPressテーマファイルheader.php<head>タグ内もしくはbodyの上にjQueryコードを書いたが動かない
  • バージョン問題?jQueryを設置し直したが動かない
  • 単純にscriptコードを記入したが動かない

私も初めてWordpress上でjQueryライブラリを追加する時、上記のような問題に悩まされました。
なぜ上記のようなコトが起こるのか?というと、それはWordpressのシステム上の問題だったのです。

WordPressのjQueryにまつわる2つの問題

WordPressには自動生成されるデフォルトのjQueryが存在する

実はWordpressには初期状態でjQueryが含まれており、名前ですぐに呼び出しできる機能が備わっています。
そのためテーマの中ですでに呼び出しをされているパターンがかなり多く、上述した悩み事にぶち当たる可能性が高くなるのです。

自分でjQueryを設置したからjQueryを2つ読み込んだ状態になってしまい、衝突(コンフリクト)を起こして動作しなかった。ということですね。

デフォルトのjQueryを使用する場合記法に気をつける必要がある

WordPressデフォルトのjQueryを使用する場合、通常書いているようなjQueryコードの書き方にすると動作しません。例えば、


<script>
	$(function(){
		ここにコード
	});
</script>

上記のようなコードの書き方だと動作しません。なぜかというと、Wordpressは先ほど書いたような衝突を避けるため、頭の$文字(グローバルショートカット変数)が使えないようになっているのです。

そのためjQueryを使用したコードを記載したい場合、以下のように書き換える必要があります。


<script>
	jQuery(function($){ //頭の$をjQueryに差替え、ローカルに$を挿入
		ここにコード
	});
</script>

これによりこのコード内の中でのみショートカット変数が使えるようになり、衝突を回避するよー。というのが、Wordpressのご厚意なわけなんですが、、、

めんどくせえ。

そのまま書きてえ。いちいちWordpressの時だけ書き換えてたら頭の中がごっちゃごちゃになっちゃいますよ。

上記をふまえてjQuery問題のベストプラクティス

そのまま使えるようにしちゃいましょう。

いつものjQueryで書けたほうがなんだかシンプルで簡単じゃないですか。
というわけでサクっと自分仕様にjQueryを差替えちゃいましょう。

魔法の言葉wp_enqueue_script

これまたWordpressの初期機能です。
wordpressにはフックという機能追加や修正を行う便利なモノがありまして、
例えば今回の題材jQueryの呼び出しコードを追加する。なんてのも簡単に出来るようになっています。

ベストプラクティスを実践するためWordPressのデフォルトjQueryを読み込まないようにして、なおかつ任意のjQueryを呼び出す魔法の言葉は以下です。


//function.phpの中に記載する

function 半角英字で任意の関数名() {
	wp_deregister_script('jQuery');//いてつくはどうでデフォルトjQuery消す
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );//後述します
}
add_action( 'wp_enqueue_scripts', '半角英字で任意の関数名' );//関数を実行

wp_deregisterとadd_actionの部分は上記に書いてあるとおりで、中段にあるwp_enqueue_scriptについて簡単に解説。

$handle jQuery (識別名)
$src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js (挿入URL)
$deps array() (引数を入れると読み込み順を制御できます)
例:jQueryライブラリをwp_enqueue_scriptで呼び出す際に引数(()の中)にjQueryを記入する
$ver 1.12.4 (スクリプトのバージョン)
$in_footer true (scriptの読み込み位置(trueで/body前、falseで/head前))

以上を自分が必要なものに書き換えて設置したら完了。Wordpressで悩みのないjQuery生活が送れるようになります。解決できましたでしょうか?

jQueryの設置は色々試して改善していきましょう

さて、jQueryの基盤部分を差替えするお話でかなりシンプルでしたが、今回のはあくまで一例。
環境によってベストプラクティスは変わってくるでしょう。

導入しているプラグインやjQueryライブラリを使う場合、サイトの規模が大きかったりscriptコードの量が多いなど、関連して考えなくてはいけないものはたくさんありますしね。

まずは自身の環境を見つめなおし、どの対策がいいのか考えていくのが一番の解方法ではないでしょうか。

それではまた!

こちらの記事も読まれています

wordpressのファイルアップロード上限を変更して大きいサイズのファイルを投稿する... こんばんわ、ttaisonです。 最近この名前も飽きてきたから変えようかな、、、読みづらいし。 さて、今日はWordpressの投稿にまつわる問題。 Wordpressで作ったホームページやブログで、大きな容量のファイルをアップロードしたい時があるとします。 例えばお店のチラシ画像・...
WordPressのアップロード画像サイズを自動調整してくれるプラグインImsanity... こんばんわ、taisonです。 wordpressでサイトを制作して納品完了したあと、お客様からよくいただく言葉があります。 「画像アップロードに時間がかかるんだけど」 「画像がアップロードできない」 「管理画面が重たくなってきた」 制作側からすると意外と盲点なんですが、画像をアッ...
2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスで... こんばんはtaisonです。 最近仕事で「wordpressのお問い合わせフォームでコンバージョンの計測をしたいからサンクスページを作って」と久しぶりに言われたので、それについて応用も兼ね、ご紹介したいと思います。 コンバージョン計測に必要になる作業 まずContact Form 7でコンバー...
Contact Form 7の住所入力を自動化!郵便番号から住所を入力させるyubinbangoを設... こんばんわtaisonです。 皆さん住所入力の自動化、してますか? 今やお問い合わせフォームでは住所入力の自動化は必須ともいえますね。 今回は少しのjsとcssクラス名を記入するだけで住所入力を自動化するyubinbangoを、Contactform 7に設定してみました。 お手...

wordpressカテゴリの最新記事