海豚的WordPress Theme教程 part5

由 發(fā)表于 ┊2,667 PV

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

sidebar.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  <div id="menu">
  <div id="nav">
  <ul>
  <li><a href="<?php bloginfo('url'); ?>">首頁(yè)</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>
  <!-- nav -->
  <div id="about">
  <h2>About Me</h2>
  <p>關(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>
  <!-- menu -->
  <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>文章分類(lèi)</h2>
  <ul>
  <?php wp_list_cats('optioncount=1'); ?>
  </ul>
  </div>
  </div>

KD02模版的sidebar被分成了兩個(gè)部分：位于右邊的部分提供導(dǎo)航菜單、“關(guān)于我”、搜索和Feed訂閱地址，位于footer上方的分成了三欄來(lái)顯示一些信息。
line1-line24: 是右側(cè)的sidebar。
line2-line9: 這是導(dǎo)航菜單的部分，用css控制一下li的表現(xiàn)就很容易實(shí)現(xiàn)，如果菜單比較多或者少可以調(diào)整一下寬度。
line11-line13: “關(guān)于我”的部分，沒(méi)什么說(shuō)的。
line14-line17: 搜索部分。
line18-line23: Feed訂閱地址。
line26-line48: 這是footer上方的三欄內(nèi)容，用三個(gè)div來(lái)分隔，內(nèi)容不是很重要，各位都會(huì)有自己的習(xí)慣。
這里提一下sidebar的陰影制作：先決定需要的欄寬；然后做一個(gè)1px高度、欄寬寬度40px的jpg文件；左右作20px適當(dāng)?shù)幕疑幌鄳?yīng)css如下。很簡(jiǎn)單吧，不用作大圖片，會(huì)根據(jù)div的高度自適應(yīng)。

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

footer.php

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

footer沒(méi)什么內(nèi)容，主要就是一些站點(diǎn)的相關(guān)信息。計(jì)數(shù)器之類(lèi)的非本地站點(diǎn)代碼我也建議放在footer里，因?yàn)榉旁趆eader里很可能因?yàn)榫W(wǎng)絡(luò)原因拖慢整個(gè)頁(yè)面的讀入速度。