WordPress + NAVT 横並びメニューバーの作り方

最近、趣味でWordPressをいじっているのですが
使用するテンプレートによっては、ナビゲーションメニューがなく
探したら、結構楽に作成できるプラグインを見つけたので試してみました。

使用プラグイン:
Navigation List Plugin NAVT
バージョン 1.0.34

JavaScriptエラーについて
WinXP+IE8の環境では、ツール→NAVTリストをクリックした時点で
JavaScriptエラー「実行しましたが、ページでエラーが発生しました。」が表示されて、使う事ができませんでした。

そこで色々と調べたところ、バージョンによって問題箇所が異なるらしく
どうしようかと悩みつつ、駄目元でFirefox 5.0.1 で試してみたらエラーにならないで使う事ができました。
特に修正は加えずできました。相変わらず、IEでは駄目みたいでした。
jsエラーなので各環境に左右されるので一概には言えないようですが・・
そして、ナビゲーションメニューは、基本的に縦並びになって表示されてしまいます。
それについては、CSSの修正で横並びにすることができるようです。

<まとめ>
1.CSSは、グループのオプション設定で
「ワードプレスのデフォルトのCSSクラスを使用」にする。

2.テーマ編集→スタイルシートをクリックして
スタイルシートの一番下に下記コードを追加


.menubar {
margin: 0px; /* 任意のマージン*/
padding: 0px; /*任意のパディング*/
height: 30px; /* メニューバーの任意の高さ */
background: #ccb7a3 repeat-x; /* 背景の指定。横方向にリピート */
}
.menu {
padding: 0px;
margin: 0px;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: inline;
float: left;
height: 30px;
background: #D2B48C;
}
.menu li a {
color: #006699;
display: block;
border-right: 1px solid #222222;
padding:5px 10px;
}

3.header.phpの任意の場所に以下のコードを追加
<div class=”menubar”>
<ul class=”menu”><?php navt_getlist(‘headnavi’); ?></ul>
</div>

※headnaviは、NAVTリストで作成するときに付けた名前です。

タイトルとURLをコピーしました