🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

URLによって、ナビゲーションリストのCSSを切り替えるスクリプト

JavaScript WordPress

jQueryさんほんと便利ですね。
WordPressで固定ページのURLによって、ナビゲーションリストのCSSを切り替えるスクリプトを書いてみました。

目指せWeb屋さんの第一歩！

作ったもの

Wordpressには固定ページを追加できる機能があります。
その追加したページに対して、現在地を知らせてあげるタブメニューを設置したかったのです。

  • トップ
    • ブログ
    • 固定ページ1
    • 固定ページ2

みたいな時に。
※注：後述しますが、こんなもの書かなくてもWordpress様は良く出来てます＋プラグインもあったりします・・・。

ソース

//現在のURLからナビゲーションのリスト要素のcssを変更するスクリプト。
//現在のURLのhrefの3番目の値と、用意したページリストが同じ場合にクラスを付加。
//あらかじめcssに、.active{hoge:piyo;} は設定しておくこと。
$(function(){
var page = new Array();　//ページリストの配列。
page[1] = 'home';
page[2] = 'about-me';
page[3] = 'bass';
//page[4] = '新しいページのURL';　ページを増やしたら追加可能！

var url = location.href.split('/'); 
var now = url[3];
//変数nowに、今いるURLの"http://piyo.hoge.com/[この値]/・・・"を取得。
//3つ目(配列でいう4つ目)の[この値]がいわゆるページのパスになっているはず。

for (var i = 1; i <= page.length; i++) {
// page[1]はホーム以下なので無視し、追加したページからチェックしていく。
    if (page[i] == now) {
        var actv = page[i];
        $('#nav nav ul li a[href$="' + actv + '/"]').closest('li').addClass('active');
        // 今いるURLがそのページ内なら、li要素にクラスを付加。
    }
}
if(!(actv)){
  $('#nav>nav>ul>li:first-child').addClass('active');
  //どのページも該当しない＝ホーム以下の場合は、#nav以下先頭のli要素＝ホームにクラスを付加。
}
});

内容はコメントの通りですが、試行錯誤でなんとかたどりついた結論です。
もっとスマートに書ける方は書けると思います・・。
↑書ける方、是非教えてください！

ページはカテゴリとして使うつもり(私は)なので、そんなにページ自体の改廃はしないだろうとの判断で、配列には直接URLのパスを記述するようにしました。*1

こんなことしなくても

WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス

こんな便利なものがあるので、自己紹介ページみたいな単発完結型には、こっちのが圧倒的に良いと思います。

それだけじゃなくて、他にもWordpressさまさまな点がもう一つ。
追加したページへ遷移すると、そのページを表すliタグに.current_page_itemってクラスが自動でちゃんと付きますｗ
それも踏まえると、大方のやりたいことはできちゃうんじゃないのかなーと。

今回の私の場合だと、こうやってスクリプトを書かないと解決できなかったと信じてます。(いや、信じさせて！ｗ

以上、初めてこういうWeb系らしい記事を書いてみました。

*1:※20110611 追記 一部修正しました。 ページの子ページを作った際に表示がおかしくなっていた不具合を解消してます。