海豚的WordPress Theme教程 part5

kDolphin @ 9:48 pm April 20th, 2006

　　这次讲sidebar.php和footer.php，这两个其实能讲的不多，一般来说各位拿到一个模版最可能改的就是这两个文件了。

sidebar.php

PLAIN TEXT

PHP:

1. <div id="menu">
2.         <div id="nav">
3.             <ul>
4.             <li><a href="<?php bloginfo(‘url‘); ?>">首页</a></li>
5.             <li><a href="1" title="1">留言</a></li>
6.             <li><a href="2" title="2">链接</a></li>
7.             <li><a href="3" title="3">存档</a></li>
8.             </ul>
9.         </div><!-- nav -->
10.         <div id="about">
11.         <h2>About Me</h2>
12.         <p>　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我　　关于我</p>
13.         </div>
14.         <div id="search">
15.         <?php _e(‘Search‘); ?>
16.         <?php include (TEMPLATEPATH . ‘/searchform.php‘); ?>
17.         </div>
18.         <div id="rss">
19.             <ul>
20.             <li><a href="<?php bloginfo(‘rss2_url‘); ?>">RSS Feed</a></li>
21.             <li><a href="<?php bloginfo(‘comments_rss2_url‘); ?>">RSS Comments</a></li>
22.             </ul>
23.         </div>
24.     </div><!-- menu -->
25.  
26.     <div id="sub-menu">
27.  
28.         <div class="subleft">
29.         <h2>存档</h2>
30.         <ul>
31.         <?php wp_get_archives(‘type=monthly‘); ?>
32.         </ul>
33.         </div>
34.  
35.         <div class="subcenter">
36.         <ul>
37.         <?php get_links_list(); ?>
38.         </ul>
39.         </div>
40.  
41.         <div class="subright">
42.         <h2>文章分类</h2>
43.         <ul>
44.         <?php wp_list_cats(‘optioncount=1‘); ?>
45.         </ul>
46.         </div>
47.  
48.     </div>

KD02模版的sidebar被分成了两个部分：位于右边的部分提供导航菜单、“关于我”、搜索和Feed订阅地址，位于footer上方的分成了三栏来显示一些信息。

• line1-line24: 是右侧的sidebar。
• line2-line9: 这是导航菜单的部分，用css控制一下<li>的表现就很容易实现，如果菜单比较多或者少可以调整一下宽度。
• line11-line13: “关于我”的部分，没什么说的。
• line14-line17: 搜索部分。
• line18-line23: Feed订阅地址。
• line26-line48: 这是footer上方的三栏内容，用三个<div>来分隔，内容不是很重要，各位都会有自己的习惯。

　　这里提一下sidebar的阴影制作：先决定需要的栏宽；然后做一个1px高度、栏宽宽度+40px的jpg文件；左右作20px适当的灰色；相应css如下。很简单吧，不用作大图片，会根据<div>的高度自适应。

PLAIN TEXT

CSS:

1. #menu {
2. float:right;
3. overflow:hidden;
4. display:inline-block;
5. font-size:0.8em;
6. width:213px;
7. margin: 220px 0 0 0;
8. background: url(images/fade.jpg) repeat-y;
9. padding: 0 20px 10px 20px ;
10. }

footer.php

PLAIN TEXT

PHP:

1. <div id="footer">
2.             <?php bloginfo(‘name‘); ?> is proudly powered by
3.             <a href="http://wordpress.org">WordPress</a>
4.     </div>
5. </div><!-- page -->
6.  
7.     <?php do_action(‘wp_footer‘); ?>
8.  
9. </body>
10. </html>

footer没什么内容，主要就是一些站点的相关信息。计数器之类的非本地站点代码我也建议放在footer里，因为放在header里很可能因为网络原因拖慢整个页面的读入速度。