・「Write jQuery」を導入する意味

　WordPress を使っていると、「今、jQuery を使えたら」と思ったことはないでしょうか。

　手の届く範囲の修正ですが、なかなか子テーマファイルの修正だと、敷居が高いかもしれません。そのうえ、「テーマの更新」が来た場合、テーマのファイルは総上書きされますので、その都度、jQueryを書き直さななければいけません。

　今回、ご紹介させて頂くのは、「テーマの更新」が来ても問題なく、jQuery を書けるプラグインです。テーマのファイルを汚すことなく、独立した jQuery を書き込めます。

　後述いたします、「jQuery のサンプル」で、今後、WordPress に必要な jQuery のサンプルを載せています。ぜひ、ご利用ください。

※使ってみたうえで、不具合やこうしたらもっと良くなるのに　　と思われましたところがございましたら、遠慮なくお問い合わせください。（ページ下部 問い合わせフォーム）

※ワードプレスの構築・プラグインの修正開発・テーマの修正開発を行っております。ご気軽にご相談ください。

お問い合わせ

・プラグインの導入方法

　WordPress の管理画面ページから「プラグイン」→「新規追加」を選択します。

　検索入力フォームへ「 Write jQuery 」と入力し検索してください。

　検索結果から「 Write jQuery 」が出てきましたら、インストールしてください。

数秒後、インストールが終了します。

その後、プラグインを有効化してください。

これで、プラグインを導入できました！

・プラグインの使い方

　管理画面ページの左メニューから「 Write jQuery 」をクリックしてください。

　jQuery のコードを書くフォームと「変更を保存」するボタンが表示されます。

　jQuery を書く場合は、最初と最後は、「jQuery(function($){ ～～ }); 」で、囲ってください。に記入してください。

※ワードプレスにて、jQuery を使うルールとなっておりますので、ご理解ください。

例えば、下記のコードを入力してください。

$('h1').css('color','red');

最後に「変更を保存」ボタンを押して頂くと、内容が保存されます。

保存されると、WordPressの記事の h1 部分が赤く表示されていれば、正常です。（これはテストですので、消して頂いて結構です。）

・jQueryのサンプル

Safari や ファイアーフォックス の場合、「戻る」ボタンを押すと、前のページのキャッシュが表示されてしまう件

　こちらユーザー側にとっては、Webページの推移がとても早くなるので、とても便利な機能です。ですが、最新機能の為、下記のような問題が発生します

・スマホににて、メニューボックスを開いてからページ推移すると、「戻る」を押した時、メニューボックスが開かれた状態で、前のページが表示されてしまいます。

　2018年11月時点では、ファイアーフォックスやSafariで確認されていますが、今後は全てのブラウザで、この機能が付くため、対応が必要です。

　現状、対策として、ページを読み込んだときに「再リロードを行うの」が慣例となっていますが、jQuery を使えば、もっと簡単に治せます。

それを防ぐためには、下記のコードを追加してみてください。

	$(document).ready(function ($) {
		
		//メニューバーの a要素をクリックした時の処理
		$('a').on('click',function(event){
			
			//ユーザーエージェントを取得
			var agent = navigator.userAgent;
		
			//「iPhone・ipad・ipod」の場合
			if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 ){
				
				//スマホ時の場合
				if($('メニューボックスのclass名 OR id名').css('display') !== 'none'){
				
					//一度リンクを無効にします。
					event.preventDefault();
					
					//リンク先のURLを取得
					var linkUrl = $(this).attr('href');
					
					//メニューバーを非表示にします
					$('メニューボックスのclass名 OR id名').css('display','none');
					
					//リンク先へ推移
					location.href = linkUrl;
				}
			}
		});
	});

13行目と22行目の「メニューボックスのclass名 OR id名」は、書き換えてください。

参考ＵＲＬ：iphone iOS safariの「戻る」ボタンの問題

参考ＵＲＬ：iOSのSafariでBack Forward Cacheにハマる

参考ＵＲＬ：Safariで”戻る・進む”時のキャッシュを無効にする

参考ＵＲＬ：ブラウザの戻るボタンで戻ったときに呼ばれるイベントとかキャッシュとかそこらへんのこと

・まとめ（飛ばして頂いてもOKです！）

　ワードプレスのプラグイン！初めてリリースしてみました！！実は昨年から、ずっ～～～と作りたかったのですが、やりたい事が多すぎて、今、リリースできました💦

　今回のプラグインは、「jQuery を使えるようにするプラグイン」と、結構、簡単なプラグインなのですが、「必要な人にとっては喉から手が出るほど欲しいプラグインじゃないのかな」と思ってます。（実体験(笑)）

　これからも、どんどんプラグインをリリースしていきます、奮闘するマン

ᕙ(*´ω｀*)ᕗﾑｷｯ

次回もぜひご期待ください！！

　最後まで読んでいただき、ありがとうございました＾＾