2008.04.10

Page表示メニューをヘッダーの下に移動

テーマkoikikukan3のサイドバーにあるPage表示メニューをWerdPress MeのテーマEasyAll 1.0ののPageメニューのようにヘッダー下に設置する。
style.cssの適当な位置に以下を記述します。

#navcontainer ul {
padding: 0;
margin: 0;
background: #5F707A;
border-top: 1px solid #DFDFDF;
border-bottom: 1px solid #DFDFDF;
float: left;
width: 100%;/* ナビの横幅760pxを変更 */
font: 13px Osaka, Verdana, sans-serif;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li.page_item a {
padding: 5px 14px 5px 14px;
background: #9C9D95;
color: #ffffff;
text-decoration: none;
font-weight: bold;
float: left;
border-right: 1px solid #FFFFFF;
}
#navcontainer ul li.page_item a:hover {
color: #FFFFFF;
background: #C9C0B0;
}
#navcontainer ul li.current_page_item a {
padding: 5px 14px 5px 14px;
background: #C9C0B0;
color: #FFFFFF;
text-decoration: none;
float: left;
border-right: 1px solid #DFDFDF;
}
#navcontainer ul li.current_page_item a:hover {
background: #6F6F6F;
}

次にheader.phpの下方設置位置に以下のHTMLを記述します。

<div id="navcontainer">
<ul>
<?php wp_list_pages(’title_li=’); ?>
</ul>
</div>

これでヘッダー下にPage表示メニューの設置が出来ました。

しかし、この状態でカテゴリーを追加すると追加したカテゴリーが全てヘッダー下のナビゲーションメニューに表示されてしまいます。
これを回避するために

<div id="navcontainer">
<ul>
<?php wp_list_pages(’exclude=○,○&title_li=’); ?>
</ul>
</div>

のようにexclude=○,○を挿入し○,○にはカテゴリーリストページ夫々のidを書き込みナビゲーションメニューの表示から削除しました。

Posted at 09:21 | Category: koikikukan3 | No Comments