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

全ページに共通のグローバルナビゲーションがある場合、私はphpのincludeを利用して、navi.txtとか作ってそれを全ページに使いまわすということを結構やります。
非常に便利というか、修正がある場合でも1つのファイルを修正するだけで済むという手間要らずな感じが大好きなのですが、カテゴリごとにメニューの画像を切り替えるのが面倒くさいんですよね。
例えば「about」のカテゴリーのページを開いた場合はグローバルメニューの「about」の画像のみがonになるとか。

で、それをjqueryを使って何とかならないかなと思ってやってみました。

例えばHTMLがこんな感じだったとします。メニューの画像はそれぞれ_off.gifと_on.gifの2つを用意。

<div id="GlobalNavigation">
  <ul>
    <li class="about"><img src="images/about_off.gif" alt="about" /></li>
    <li class="gallery"><img src="images/gallery_off.gif" alt="gallery" /></li>
    <li class="link"><img src="images/link_off.gif" alt="link" /></li>
  </ul>
</div>

そして、javascriptの方が、こんな感じ。

$(document).ready(function(){
  //パス取得
  path = location.pathname

  if(path.match("/about/")){
    $("#GlobalNavigation .about img").remove()
    $(#GlobalNavigation .about").prepend('<img src="images/about_on.gif" alt="about" />')
  }else if(path.match("/gallery/")){
    $("#GlobalNavigation .gallery img").gallery()
    $("#GlobalNavigation .gallery").prepend('<img src="images/gallery_on.gif" alt="gallery" />')
  }else if(path.match("/link/")){
    $("#GlobalNavigation .link img").remove()
    $("#GlobalNavigation .link").prepend('<img src="images/link_on.gif" alt="link" />')
  }
})

まず、path = location.pathnameで、現在開いているページのパスをpathという変数に代入します。
このとき取得できるパスは、ルート以下の部分となります。
https://2inc.org/about/index.htmlなら、/about/index.htmlという感じ。

そして、path.match(検索文字列)でpathの中に検索文字列が含まれるか調べます。
含まれていたらtrueを返すので、これをif文の条件としてそれぞれ分岐させます。

あとは、<li>のclassを目印として_off.gifの削除、そして_on.gifの挿入を行うという流れです。

ただ、このスクリプトだとメニュー項目が増えるたびにごちゃごちゃ書き加えないといけないので、手間です。
もっとオブジェクト化して引数渡すだけでチャチャッとできるようにすると使い勝手も良くなるんですが。
残念なことに私にはそこまでjavascriptの知識がありません…。

MW WP Form

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

さらに詳しく
Habakiri

Habakiri

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

さらに詳しく
basis-stylus

Basis

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

さらに詳しく