「jQuery-URL-Parser」でURLの一部を取得してbody classにする

jQueryで現在開いているページのURLの一部を取得して、body class="ココ" に入れちゃえという話。

jQueryプラグイン　jQuery-URL-Parserについて

jQuery-URL-Parserは、URLをパースしてくれるjQueryのプラグインです。

以下は簡単にどこを取れるか書いています。詳しくはjQuery-URL-Parserで確認してくださいね。

URL attributes 「.attr()」
https://example.com/folder/dir/index.html?item=value
・/folder/dir/index.html
・/folder/dir/
・index.html
Query string parameters 「.param()」
https://example.com?sky=blue&grass=green
・'blue'
・'green'
・'grass':'green'
URL segments 「.segment()」
https://example.com/folder/dir/example/index.html
・'folder'
・'example'
Fragment parameters and/or segments 「.fparam()」「.fsegment()」
https://example.com#sky=blue&grass=green
・'blue'
https://example.com/#/about/us/
・'about'

WordPressの場合

WordPressの場合は、body_class というテンプレートタグが存在しますので、以下のようにテーマを編集すれば良いだけです。このjQueryは必要ありません。

<body <?php body_class(); ?>>

手順

jQuery-URL-Parserをダウンロード
ヘッダーにダウンロードしたjsを追加
ヘッダー又は別途作成したjsにjQuery functionを追加

作業

ダウンロードしたjsを、ヘッダーに追加します。
ちなみに、見本として EC-CUBE 2.11.x のタグで書いています。

<script type="text/javascript" src="
<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.url.js"></script>

次に、ヘッダー（site_frame.tpl）に以下のjQuery functionを追加します。

<script type="text/javascript">
$(function(){
    var url = $.url();
    var URLsegment = url.segment(1);
    $("body").addClass(URLsegment);
});
</script>

.segment(1)の所を、2や-1など数値を変えることで取得してくる部分が違います。

.segment(1)の場合、
https://example.com/products/detail.php?product_id=4
<body class="products">
https://example.com/abouts/
<body class="abouts">

こんな感じにclassが付きます。後はCSSで好き放題！
jquery-1.6.1.min.js、IE6,7,8、Firefox4で動作確認済みですが、導入は自己責任でお願いします。
期待値ではない場合、.segment以外をいろいろとお試しください。

jQueryプラグイン jQuery-URL-Parserについて

WordPressの場合

手順

作業

jQueryプラグイン　jQuery-URL-Parserについて