PR

WordPressでjQueryを使うための方法

カスタマイズ
2024.05.21

jQueryってよく見かけるけど何?!と思う方必見!

この記事では

  • jQueryとはなにか
  • WordPressでの導入方法

を解説します。

WordPressでjQueryを導入したいけどうまくいかない人はこれで解決できます!

jQueryってなに?

とりあえず公式サイトから引用してみます。

jQuery は、高速かつ小型で機能が豊富な JavaScript ライブラリです。多数のブラウザーで動作する使いやすい API により、HTML ドキュメントの走査と操作、イベント処理、アニメーション、Ajax などがはるかにシンプルになります。 jQuery は多用途性と拡張性を兼ね備えており、何百万人もの人々の JavaScript の書き方を変えてきました。

https://jquery.com/

結局何?!

ホームページを運用する上でよく目にする単語のひとつにJavaScriptがあります。JavaScriptはホームページ上に動きを出すことを得意とする言語です。動きとは例えば、ボタンをクリックしたらページが開いたり閉じたり、などです。

そしてjQueryとはJavaScriptよりも簡潔で効率的なコードを記述するためのフレームワークです。

JavaScriptでやりたいことはjQueryで簡単に実現できるということですね!

なるほど!?

WordPressでjQueryを導入してみよう

jQueryを使用するにはjQueryを読み込むための記述が必要です。

しかしWordPressでは標準でjQueryが導入されています。ですのでいきなりjQueryのコードを記述しても動きます。

注意点はjQueryのコードをそのまま貼り付けても動作しませんので、WordPress用の記述に合わせる必要があります。

まずはWordPress上のjQuery記述方法のテンプレートを確認しましょう。

テンプレートは以下です。

jQuery(function($){
	// このなかにコードを記述する


});

3行目から実際のjQueryのコードを記述します。

//はコメント扱いですので不要な方は削除してOKです。

WordPressのサイトに動きをつけてみよう

動くWebデザインアイデア帳
ugokuweb.coco-factory.jp

※現在は閲覧制限がかかっています。

こちらの素敵なホームページを丸パクリ参考にしてテキストに動きをつけてみます。

実現するためには、

  1. jQueryのコード
  2. スタイルシート
  3. タグにclassを追加(HTML)

が必要です。

jQueryのコード

以下のコードをすべてコピーしてmyscript.jsという名前で保存します。

文字コードはUTF-8です。BOMは不要です。

WordPress用にコードを修正していますのでそのまま貼り付けても動作します。

myscript.jsに記述
jQuery(function($){
	// このなかにコードを記述する
function slideAnime(){
	//====左に動くアニメーションここから===
		$('.leftAnime').each(function(){ 
			var elemPos = $(this).offset().top-50;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll >= elemPos - windowHeight){
				//左から右へ表示するクラスを付与
				//テキスト要素を挟む親要素(左側)とテキスト要素を元位置でアニメーションをおこなう
				$(this).addClass("slideAnimeLeftRight"); //要素を左枠外にへ移動しCSSアニメーションで左から元の位置に移動
				$(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft");  //子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
			}else{
				//左から右へ表示するクラスを取り除く
				$(this).removeClass("slideAnimeLeftRight");
				$(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");
				
			}
		});
		
	}
	
	// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述

	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

});

作成したjQueryを子テーマ内にアップロードします。アップロードだけでは反映されていないのでfunctions.phpでmyscript.jsを読み込むように以下を記述します。

functions.phpに記述
//自作jsを読み込む
function enqueue_custom_script() {
	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() .'/myscript.js', array(), '1.0', true );
}
add_action( 'wp_footer', 'enqueue_custom_script' );

このコードは子テーマフォルダの中でmyscript.jsを読み込むように記述しています。

自作ファイルをつくらずにfunctions.phpのみで実現する

自作ファイルを作るのが難しい方や、ファイルを作らずにfunctions.phpのみで実現したい方は以下をお試しください。このコードはfunctions.phpに記述します。

functions.phpに記述
/*-------------------------------------------*/
/* jQuery(テキストが流れるように出現) */
/*-------------------------------------------*/
function my_enqueue_scripts_text_appears_flowing() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}

	$script = "
jQuery(function($){
function slideAnime(){
	//====左に動くアニメーションここから===
		$('.leftAnime').each(function(){ 
			var elemPos = $(this).offset().top-50;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll >= elemPos - windowHeight){
				//左から右へ表示するクラスを付与
				//テキスト要素を挟む親要素(左側)とテキスト要素を元位置でアニメーションをおこなう
				$(this).addClass('slideAnimeLeftRight'); //要素を左枠外にへ移動しCSSアニメーションで左から元の位置に移動
				$(this).children('.leftAnimeInner').addClass('slideAnimeRightLeft');  //子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
			}else{
				//左から右へ表示するクラスを取り除く
				$(this).removeClass('slideAnimeLeftRight');
				$(this).children('.leftAnimeInner').removeClass('slideAnimeRightLeft');
				
			}
		});
		
	}
	
	// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述
	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

});
";
	wp_add_inline_script( 'jquery-core', $script, 'after' );//インラインスクリプトを追加する
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_text_appears_flowing' );

スタイルシート

次にstyle.cssなどのスタイルシートに以下を記述します。スタイルシートへの記述は必須です。

スタイルシートに記述
.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
	opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
		transform: translateX(-100%); /*要素を左の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}


@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);/*要素を右の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}

タグにclassを追加(HTML)

動きをつけたいテキストをclass付きのspanタグで囲みます。classの付いたspanタグに動きが付きます。

HTMLに記述
<p><span class="slide-in leftAnime"><span class="slide-in_inner leftAnimeInner">左から右へテキストが流れます。左から右へテキストが流れます。</span></span></p>

実行結果

このテキストだけ動きをつけてみました!テキストは動いていますか?

応用の手引き

この動きを実現するためには各テキストにclass付きのspanタグをつけていく必要があります。

思い切ってすべてのpタグにclass付きのspanタグをつけてみます。

myscript.jsに記述
jQuery(function($){
	// このなかにコードを記述する
function slideAnime(){
	//====左に動くアニメーションここから===
		$('.leftAnime').each(function(){ 
			var elemPos = $(this).offset().top-50;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll >= elemPos - windowHeight){
				//左から右へ表示するクラスを付与
				//テキスト要素を挟む親要素(左側)とテキスト要素を元位置でアニメーションをおこなう
				$(this).addClass("slideAnimeLeftRight"); //要素を左枠外にへ移動しCSSアニメーションで左から元の位置に移動
				$(this).children(".leftAnimeInner").addClass("slideAnimeRightLeft");  //子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
			}else{
				//左から右へ表示するクラスを取り除く
				$(this).removeClass("slideAnimeLeftRight");
				$(this).children(".leftAnimeInner").removeClass("slideAnimeRightLeft");
				
			}
		});
		
	}
	
	// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述

	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

//すべてのpタグのテキストを流れるようにする
$('p').wrapInner('<span class="slide-in leftAnime"><span class="slide-in_inner leftAnimeInner"></span></span>');
});

35行目に1行追加しています。

自作ファイルを作らなかった方は以下のコードです。

functions.phpに記述
/*-------------------------------------------*/
/* jQuery(テキストが流れるように出現) */
/*-------------------------------------------*/
function my_enqueue_scripts_text_appears_flowing() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}

	$script = "
jQuery(function($){
function slideAnime(){
	//====左に動くアニメーションここから===
		$('.leftAnime').each(function(){ 
			var elemPos = $(this).offset().top-50;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll >= elemPos - windowHeight){
				//左から右へ表示するクラスを付与
				//テキスト要素を挟む親要素(左側)とテキスト要素を元位置でアニメーションをおこなう
				$(this).addClass('slideAnimeLeftRight'); //要素を左枠外にへ移動しCSSアニメーションで左から元の位置に移動
				$(this).children('.leftAnimeInner').addClass('slideAnimeRightLeft');  //子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
			}else{
				//左から右へ表示するクラスを取り除く
				$(this).removeClass('slideAnimeLeftRight');
				$(this).children('.leftAnimeInner').removeClass('slideAnimeRightLeft');
				
			}
		});
		
	}
	
	// 画面をスクロールをしたら動かしたい場合の記述
	$(window).scroll(function (){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面をスクロールをしたら動かしたい場合の記述
	// 画面が読み込まれたらすぐに動かしたい場合の記述
	$(window).on('load', function(){
		slideAnime();/* アニメーション用の関数を呼ぶ*/
	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
//すべてのpタグのテキストを流れるようにする
$('p').wrapInner('<span class=\"slide-in leftAnime\"><span class=\"slide-in_inner leftAnimeInner\"></span></span>');
});
";
	wp_add_inline_script( 'jquery-core', $script, 'after' );//インラインスクリプトを追加する
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_text_appears_flowing' );

41行目に1行追加しています。

スタイルシートは追加する必要がありますが、HTMLの編集が不要になりました。

これですべてのpタグに対してclassが追加されます。すべてのpタグが動くのはさすがにやりすぎですので程よく改造してご利用ください。

まとめ

jQueryを導入するとサイトに動きが出てサイト訪問者に注目を集めることができます。

jQueryのコードを考えるのは大変ですが、便利な世の中ですので実現したいことの大半は検索すれば出てきます。

ここぞというときに動きをつけて差をつけましょう。

タイトルとURLをコピーしました