jqueryでカテゴリごとにメニューの画像を切り替えるTips 2

以前にも一度書いてますが、汎用性0で非常に使いにくいものだったので、再度組み直し。良くわからないまま組んだけど、とりあえず動いているっぽいので公開します。

/*========================================

gnav画像を反転させるjquery plugin

========================================*/

function globalNaviCurrent() {
	var url = location.pathname
	var directory = url.split("/");

	if(directory[1]==''){
		var currentDirectory = "/";
	}else if(directory[1]=='category'){
		var currentDirectory = directory[2];
	}else{
		var currentDirectory = directory[1];
	}
	var currentA = $('#header #GlobalNavigation ul li a[@href$=' + currentDirectory + '] img');

	if(imgsrc = currentA.attr("src")){
		var kugiri = imgsrc.split("_n",2);
		var imgsrcCurrent = kugiri[0] + "_r" + kugiri[1];
		currentA.attr({ src: imgsrcCurrent });
	}
};
$(document).ready(globalNaviCurrent);

ルートの直後の階層のパスを取得して判別します(「https://2inc.org/web/html」だったら「web」)。一応wordpress用ってことで、カテゴリーページには「category」というパスが入るようだったので、その判別入れてます。

サイトに会わせて書き換えないといけないのは「currentA」に渡す画像の階層の部分。あとは_nという画像と_rという画像を用意してそれを反転させてます。

参考

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく