WordPress

WordPress のテーマを自分で作ってみる(8) – Header の下側に作成したページへのリンクを並べる

2009年9月23日

通常多くのページで、ヘッダーの下側に、「ページ」へのリンクを並べているので、これを作ってみる。

image

ページへのリンクの部分は、リスト表示で作成する。
一番始めの 「TOP」の部分は、トップページだが、厳密には WordPress の「ページ」では無いので、リンクは bloginfo(‘url’)  でリンクを作成する。それ以外のページは、wp_list_pagets( ) で作成する。

以下の様な形で、header の div の最期に、「ページ」へのリンクをリストするようなコードを書く。

<div id="header">
<h1><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a></h1>
<p><?php bloginfo('description'); ?></p>

<ul>
<li><a href="<?php bloginfo('url'); ?>" title="トップページ">TOP</a></li>
<?php wp_list_pages('sort_column=menu_order & depth=1 & title_li='); ?>
</ul>

</div>

これだけだと、以下の様に本当のリストができてしまうので、 CSS でスタイルを定義する。

image

「ページ」へのリンクは、header の中に書いているので、header の中の ul と li を以下の様に定義する。

#header ul { /* ページ・リンクのボタンを入れる箱全体 */
    background-color: #ffffff; /* white */
    margin: 0;
    padding: 0;
    list-style-type: none;  /* リスト形式の ・ を付けない */
    border-bottom: solid 1px  #cccccc;  /* 薄いネズミ色 */ /* 全体の下線 */
    height: 24px;  /* ページ・リンクへのボタンを入れる横長な箱の高さ */
    font-size: 12px;  /* TOP選択メニューが崩れない様に文字サイズを固定する */
    font-family: "Arial", "MS Pゴシック", "Osaka-等幅", sans-serif;
}

#header li { /* Botton の高さ */
    text-align: center; /* ボタンの真ん中に文字を配置する */
    /* margin: 0px 0px -1px 0px; */
    border-right: solid 1px  #cccccc;  /* 薄いネズミ色 */
    border-bottom: solid 1px  #cccccc;  /* 薄いネズミ色 */
    float: left;
    line-height: 24px; /* ページ・リンクボタンの高さ。指定しないと文字サイズを囲む様な形になる */
}

#header li a {
     display: block;
     width: 110px; /* ページリンクを入れる箱の幅 */
     text-decoration: none;
     color: #333333;
}

#header li a:hover {  /* カーソルを置いた時のページ・ボタンの色 */
    background-color: #bbff7a;  /* 緑色 */
}

最期の  li a:hover  の定義は、リストのアイテムの上にマウスカーソルが来たときに、以下の様にボタンの色を変更するためのもの。

image

-WordPress

Copyright© エンジニアの何でもメモ帳 , 2022 All Rights Reserved.