海豚的WordPress Theme教程 part5

kDolphin @ 9:48 pm April 20th, 2006

　　這次講sidebar.php和footer.php，這兩個(gè)其實(shí)能講的不多，一般來說各位拿到一個(gè)模版最可能改的就是這兩個(gè)文件了。

sidebar.php

PHP:

<div id="menu">
<div id="nav">
<ul>
<li><a href="<?php bloginfo(‘url‘); ?>">首頁</a></li>
<li><a href="1" title="1">留言</a></li>
<li><a href="2" title="2">鏈接</a></li>
<li><a href="3" title="3">存檔</a></li>
</ul>
</div>
<div id="about">
<h2>About Me</h2>
<p>　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我　　關(guān)于我</p>
</div>
<div id="search">
<?php _e(‘Search‘); ?>
<?php include (TEMPLATEPATH . ‘/searchform.php‘); ?>
</div>
<div id="rss">
<ul>
<li><a href="<?php bloginfo(‘rss2_url‘); ?>">RSS Feed</a></li>
<li><a href="<?php bloginfo(‘comments_rss2_url‘); ?>">RSS Comments</a></li>
</ul>
</div>
</div>
<div id="sub-menu">
<div class="subleft">
<h2>存檔</h2>
<ul>
<?php wp_get_archives(‘type=monthly‘); ?>
</ul>
</div>
<div class="subcenter">
<ul>
<?php get_links_list(); ?>
</ul>
</div>
<div class="subright">
<h2>文章分類</h2>
<ul>
<?php wp_list_cats(‘optioncount=1‘); ?>
</ul>
</div>
</div>

KD02模版的sidebar被分成了兩個(gè)部分：位于右邊的部分提供導(dǎo)航菜單、“關(guān)于我”、搜索和Feed訂閱地址，位于footer上方的分成了三欄來顯示一些信息。

line1-line24: 是右側(cè)的sidebar。
line2-line9: 這是導(dǎo)航菜單的部分，用css控制一下<li>的表現(xiàn)就很容易實(shí)現(xiàn)，如果菜單比較多或者少可以調(diào)整一下寬度。
line11-line13: “關(guān)于我”的部分，沒什么說的。
line14-line17: 搜索部分。
line18-line23: Feed訂閱地址。
line26-line48: 這是footer上方的三欄內(nèi)容，用三個(gè)<div>來分隔，內(nèi)容不是很重要，各位都會有自己的習(xí)慣。

　　這里提一下sidebar的陰影制作：先決定需要的欄寬；然后做一個(gè)1px高度、欄寬寬度+40px的jpg文件；左右作20px適當(dāng)?shù)幕疑幌鄳?yīng)css如下。很簡單吧，不用作大圖片，會根據(jù)<div>的高度自適應(yīng)。

CSS: