vicuna CMSのグローバルナビのカスタマイズ

このブログではvicuna CMSを使わせてもらってます。グローバルナビは最初ついてないので、いろいろカスタマイズしてみました。

まずは5-module.cssの5-5. Global Navigation Module部分のCSSのコメントアウトを削除。※2010/1/18追記vicuna CMSバージョンアップによりグローバルナビのCSSはcore.cssに書くようになりました。

/*
@import url(module/mod_gNavi.css);
*/

　　　↓

@import url(module/mod_gNavi.css);

インデックス、シングルページ、アーカイブ、ページのテンプレートのXHTMLにコードを追加。
直接HTMLを書いてもいいけど、変更の手間がかからないので共有ファイルとして読み込んでみる。

の中にこの一文を挿入。

<?php include (TEMPLATEPATH.'/globalnavi.php'); ?>

/wp-content/themes/vicuna/にglobalnavi.phpを作り、表示したいグローバルナビを書く。
このサイトの場合こんな感じ。

<ul id="globalNavi">
<li<?php if (is_home()): ?> id="navistrong"<?php endif; ?>><a href="<?php bloginfo('url'); ?>">home</a></li>
<li<?php if (is_category('vector_illustrations')): ?> id="navistrong"<?php endif; ?>><a href="<?php bloginfo('url'); ?>/vector_illustrations">downloads</a></li>
<li<?php if (is_page('about')): ?> id="navistrong"<?php endif; ?>><a href="<?php bloginfo('url'); ?>/about">about</a></li>
<li<?php if (is_page('contact')): ?> id="navistrong"<?php endif; ?>><a href="<?php bloginfo('url'); ?>/contact">contact</a></li>
<li<?php if (is_page('link')): ?> id="navistrong"<?php endif; ?>><a href="<?php bloginfo('url'); ?>/link">link</a></li>
</ul>

そのページだったらCSSのスタイルでナビゲーションが強調表示するようにしたのがポイント。php ifで条件分岐し、CSSのidであるnavistrongをつけるようにしています。

そしてmoduleフォルダの中のmod_gNavi.cssに

li#navistrong a {
　background:#F5F5F5 url(../images/mark/arrow03.gif) no-repeat 10% 50% !important;
　font-weight: bold;
　margin:0;
　padding:0;
}

背景色と文字を太字に、ついでに矢印アイコンもつける。

そうするとこんな風に表示される。