JSを使ってWPで作ったページの確認作業を楽ちんにする

カテゴリー:javascript

すでに公開されているサイトに「__wp」ディレクトリを作成して、
その中にインストールを行ったサイトの確認作業を行う
メニューなどのリンクがドメイン直下から始める絶対パスで作られることが多いため確認作業がしにくいですよね?
MaMoTaKuはいつもURLを打ち直してとかやってたんですごく不満でした。
なので、jsで解決させちゃいましょ!

MaMoTaKu何言ってるか意味わからない

僕もそう思います、、、
たとえば
http://mamotaku.com/にはすでに公開されているページがあるので
http://mamotaku.com/__wp/にWordPressをインストールしてサイトを作っていきます。
サイトができたらページを確認すると思いますが、
コーディングをするときは大体ドメイン直下からの絶対パスでつくりますよね?
でも、ドメイン直下はすでに公開されているサイトがあるから「__wp」から始めるコーディングをしちゃうと、
本番化するときに直すのが大変&直し忘れが怖い
ですよね?
なので、コーディングでリンクを作るときはドメイン直下にしつつ、
jsを使って、aタグのリンクに「/__wp」を足しちゃおう!
ってjsを作りました。
これでいみわかるかな、、、?

htmlにjsを追加する

以下のjsをhtmlに追加してください。
jQueryが必要なので、jQueryより下に呼び出すようにしてください。

//------------------------------
//WP開発用デバッグモード
var wpDirectory = "";
$(function wpDebug() {
	var url         = location.search.replace("?", "");
		wpDirectory = "/__wp";
	if (url == "debug") {
		$("a").each(function() {
			var _this = $(this);
			var _href = _this.attr("href");

			//画像だった場合はスキップ
			if (_href.toLowerCase().indexOf(".jpg") != -1 || _href.toLowerCase().indexOf(".jpeg") != -1 || _href.toLowerCase().indexOf(".png") != -1 || _href.toLowerCase().indexOf(".gif") != -1 || _href.toLowerCase().indexOf(".bmp") != -1) return true;

			if (_href == "/") {
				_this.attr("href", wpDirectory + "/?debug");
			} else if (_href.substr(0, 1) == "/") {
				_this.attr("href", wpDirectory + _href + "/?debug");
			}
		});
	}
});

ダウンロード版はこちら


追記 2015.05.28
画像へのリンクパスは変更しないように条件を追加

後はURLにパラメーターとして
「?debug」をつけてください。
例)http://mamotaku.com/__wp/?debug
※上記のURLを見ても何も起きません<(_ _)>

aタグのhrefに自動で「__wp」が追加されます。
ちなみにaタグのhrefが書き換わる条件として
・aタグであること
・hrefのに書かれている最初の文字が「/」で始まっていること
です!
ここ気を付けてください!

これでページの確認が楽になるぞー!
(※MaMoTaKuはね)