WordPressでjQueryがうまく動かない時に確認するべき３つの事

WordPressでjQueryがうまく動かずに悩むことってありませんか？

Webデザイン初心者や紙媒体デザイナーにとって敷居の高いjQueryですが、Wordpressで使う場合は思うように動かない事がよくあり、結果的にさらに敷居が上がっているような気がします。

WordPressでjQueryがうまく動かない時に、初心者が確認しておくべき３つのポイントを簡単にまとめました。

jQueryが「＄」で始まっていないか確認
コピペしたまま使ってないか確認
コードを記述している場所の確認
jQueryはfunction.phpから読み込む
まとめ

jQueryが「＄」で始まっていないか確認

WordPressでjQueryを使う場合、コードの記述ルールが若干変わります。
例えば下記のようなスクロール量で透明度を変更するコードがあったとします。

$(function(){
	$(window).scroll(function(){
		var distanceTop = 500;
		if ($(window).scrollTop() > distanceTop) {
			$('#fixed-side-nav').css({ opacity: "1" });
		} else {
			$('#fixed-side-nav').css({ opacity: "0" });
		}
	});
});

$(function(){

$(window).scroll(function(){

var distanceTop = 500;

if ($(window).scrollTop() > distanceTop) {

$('#fixed-side-nav').css({ opacity: "1" });

} else {

$('#fixed-side-nav').css({ opacity: "0" });

}

});

通常はこの記述で問題ないですが、WordPressの場合は「$」から始まる記述だと、jQueryが動きません。そこで以下のように変更します。

jQuery(function($){
	$(window).scroll(function(){
		var distanceTop = 500;
		if ($(window).scrollTop() > distanceTop) {
			$('#page-top').css({ opacity: "1" });
		} else {
			$('#page-top').css({ opacity: "0" });
		}
	});
});
// 1行目の $ を jQuery に変更し function() を function($) に変更

jQuery(function($){

$(window).scroll(function(){

var distanceTop = 500;

if ($(window).scrollTop() > distanceTop) {

$('#page-top').css({ opacity: "1" });

} else {

$('#page-top').css({ opacity: "0" });

}

});

// 1行目の $ を jQuery に変更し function() を function($) に変更

パッと見は変わってないように見えますが、1行目が微妙に変わっていますね。

「$」を「jQuery」に変更して「function( )」を「function($)」に変更するだけでこの問題は解決できます。

コピペしたまま使ってないか確認

初心者さんが WordPress で jQuery を使う場合、他のサイトからコピペをする事が多くなると思いますが、コードをコピペすると「$」から始まる記述になっている事が多く、そのままではjQueryが動かないので上記の方法でコードを書き換えます。

もう一つコピペで発生する問題として、ID名やクラス名をコピペしたまんま使っている場合が考えられます。

jQuery(function($){
	$(window).scroll(function(){
		var distanceTop = 500;
		if ($(window).scrollTop() > distanceTop) {
			$('#page-top').css({ opacity: "1" });
		} else {
			$('#page-top').css({ opacity: "0" });
		}
	});
});
// コピペしたコードから任意のID名やクラス名に変更する！

jQuery(function($){

$(window).scroll(function(){

var distanceTop = 500;

if ($(window).scrollTop() > distanceTop) {

$('#page-top').css({ opacity: "1" });

} else {

$('#page-top').css({ opacity: "0" });

}

});

// コピペしたコードから任意のID名やクラス名に変更する！

上記コードは、スクロール量を認識して「#page-top」というID名がついた要素の透明度を変更するわけですが、「#page-top」はあくまでサンプルコードとして記述しているだけなので、自身のサイトで「#page-top」というID名を使ってなければ、当然jQueryも動きません。

このコードの場合は、5行目と7行目の「#page-top」を任意のID名に変更すれば問題解決です。

コードを記述している場所の確認

<head>タグ内にjQueryを記述している場合は、<?php wp_head(); ?>より前にコードを記述しているとjQueryが動きません。<?php wp_head(); ?>の後ろにjQueryのコードを記述する必要があります。

下記のように </head>の直前に記述していれば問題解決です。

<head>
	<?php wp_head(); ?>
	<script>
		jQuery(function($){
			$(window).scroll(function(){
				var distanceTop = 500;
				if ($(window).scrollTop() > distanceTop) {
					$('#page-top').css({ opacity: "1" });
				} else {
					$('#page-top').css({ opacity: "0" });
				}
			});
		});
	</script>
</head>