编辑“WordPress定制侧边栏”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
侧边栏(sidebar)，又被称为菜单栏，是一个狭长的、描述网站相关信息的竖状列表。在大多数WordPress网站上，侧边栏通常出现在网页的左侧或右侧。有时一个网站会出现两个侧边栏，日志正文的页面两侧各一个。这里我们向大家介绍侧边栏中的一些工具及其功能。希望通过我们的介绍，大家添加或更改侧边栏内容时能更加得心应手。

==嵌套列表==
[http://www.wordpress.la/theme.html WordPress默认主题]Classic和Default都利用嵌套列表来显示侧边栏信息。嵌套列表是一系列无序的信息列表，各种信息相互嵌套。下面是一个简单的嵌套列表示例：

[[Image:20100319001.png|WordPress定制侧边栏]]

嵌套列表中的每个区块（section）都可以获得一个[[CSS]] ID，以相互区别或相互统一，这取决于样式表单中对这些区块的样式设计。

是否为侧边栏使用嵌套列表取决于你自己的想法。如果想按照上面的用法在WordPress核心主题中使用嵌套列表，首先需要了解嵌套列表的运行方式。想了解更多关于设计WordPress嵌套列表的信息，请看用[http://www.wordpress.la/codex-%E7%94%A8CSS%E5%AE%9A%E5%88%B6%E5%88%97%E8%A1%A8%E6%A0%B7%E5%BC%8F.html CSS定制样式列表]。
==导航==
一直以来，侧边栏的主要功能就是为网站访问者提供导航帮助——到目前为止，侧边栏的这一主要功仍然没有变化。我们设计各种各样的导航帮助，使访问者能够在我们的网站上无障碍穿行，指引他们查看我们提供的各种信息。提供导航服务的侧边栏列表项包括[http://codex.wordpress.org/Administration_Panels#Categories 分类]、[http://www.wordpress.la/codex-%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8.html 页面]、[http://codex.wordpress.org/WordPress_Features#Archives_and_Search 存档]以及最近日志。侧边栏中的搜索框也属于导航工具，访问者可以利用搜索框来查找自己需要的信息。

WordPress标准安装下的第一项侧边栏信息是[http://www.wordpress.la/codex-%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8.html 页面]列表或分类列表。访问者可以通过[http://www.wordpress.la/codex-%E9%A1%B5%E9%9D%A2%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E4%BD%BF%E7%94%A8.html 页面]了解更多网站主人的信息，像是<STRONG>关于</STRONG>、<STRONG>联系方式</STRONG>、<STRONG>注册</STRONG>以及<STRONG>网站地图</STRONG>。

侧边栏显示的信息由[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html 主题]模板文件sidebar.php掌控。

下面是sidebar.php文件中，页面列表模板标签的用法示例：
 <?php wp_list_pages('title_li=< h2>Pages</h2>'); ?>  

在这个示例中，Pages作为标题以H2字体显示在侧边栏中，标题下以列表形式列出所有页面。 这只是一个简单的用法，我们还有很多方法可以控制模板标签[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-wp_list_pages%28%29.html wp_list_pages()]的最终输出结果。

列出分类信息能够让访问者快速找到自己喜欢的话题：
 < li id="categories"><?php _e('Categories:'); ?>
 	< ul> <?php wp_list_cats(); ?>	< /ul>
 </ li>
这个示例将Categories（分类）作为标题显示在menu列表中，在Categories下嵌套显示我们曾添加的所有分类。如果某个分类下没有日志，默认情况下该分类不显示在分类列表中。如果我们为这个分类添加了一篇日志，分类名称就会出现在嵌套的分类列表中。

WordPress自带的Default主题——Kubrick在其模板文件index.php中使用了一组导航标签，我们也可以在自己的侧边栏中用同一组导航标签，以此突出按时间顺序从一篇日志跳转到下一篇日志的导航效果：
 < div class="navigation">
 < div class="alignleft">
     <?php next_posts_link('&laquo; Previous Entries') ?>
 < /div>
 < div class="alignright">
     <?php previous_posts_link('Next Entries &raquo;') ?>
 < /div>
 < /div>
这个例子将链接文本放在页面的左右两侧。我们可以通过更改样式表单引用或定制“[[WordPress“上一篇”和“下一篇”导航链接]]”来调整链接文本的位置，使链接文本和侧边栏达到更好的搭配效果。

==日志列表==
把访问者带往特定日志和存档，这也是导航的一部分功能。近期日志和存档都可以以多种方式显示在侧边栏中。WordPress的Classic主题和Default主题按月份显示日志存档：
 < li id="archives"><?php _e('Archives:'); ?>
     < ul>
 < ?php wp_get_archives('type=monthly'); ?>
     < /ul>
利用模板标签[http://codex.wordpress.org/Template_Tags/wp_get_archives wp_get_archives]，可以为存档设计多种显示方式。假设我们想列出最近15篇日志的标题，可以用下面的代码代替type=monthly：
 <?php wp_get_archives('type=postbypost&limit=15'); ?>
一些[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6.html 插件]也可以帮我们定制日志列表的样式。这些插件可以按照分类、评论次数最多、最新、最新修改等多种方式列出相应日志。

[http://www.coffee2code.com/archives/2004/08/27/plugin-customizable-post-listings/ Coffee2code's   Customizable Post   Listings]中提供了多种设置侧边栏日志列表的方法。例如，如果想显示一份“最近评论次数最多的5篇日志”的列表：
 < ul>Recently Commented Posts
   <?php c2c_get_recently_commented(5); ?>
 < /ul>
有些插件也能根据访问者目前所浏览的日志生成其它相关日志。其中一个是由Wasabi开发的[http://www.w-a-s-a-b-i.com/archives/2004/05/26/wordpress-related-entries-plugin/ WordPress Related Entries Plugin]，插件可以快速激活，并在侧边栏中以以下方式返回十篇相关日志列表：
 < li id="related"><?php _e('Related Articles'); ?>  
 < ul><?php related_posts(10, 10, '< li>', '< /li>', '', '', false, false); ?>< /ul>< /li>

以上描述的只是冰山一角，侧边栏日志列表的显示方式多种多样，在稍后介绍的插件网站上我们或许能发掘出更多。

==元数据==
只要我们愿意，我们可以在侧边栏显示任何信息。有些人喜欢将日志元数据显示在侧边栏内，日志元数据中含有当前日志的相关信息以及日志类别、发表日期、甚至上下篇日志的链接，为访问者提供更多选择。

[http://www.wordpress.la/codex-WordPress%E4%BD%BF%E7%94%A8.html WordPress使用]中有一篇文章——[http://www.wordpress.la/codex-%E6%97%A5%E5%BF%97%E5%85%83%E6%95%B0%E6%8D%AE.html 日志元数据]能够帮助大家更好地了解怎样定制侧边栏信息。

元数据中有一部分是关于日志作者身份和网站类型的信息。我们可以用标准[[HTML]]和[[CSS]]代码来添加这些信息，之后将信息显示在侧边栏的任意位置上，例如：

 < p class="aboutme">Have a passion for racing 
 cars? Join the club. This site is dedicated to the hobby
 and passion of car racing.</p>

记住，这是我们自己的侧边栏，我们可以按照自己的喜好显示各种各样的内容。
==链接列表==
链接列表，又被称为博客友情链接，是我们列出的、可供访问者访问的其它博客链接，当然，被链接的博客也会在他们的博客上列出我们的网站。这是博客互换链接的一种方式。<br>
链接列表由WordPress的[http://codex.wordpress.org/Links_Manager 链接管理器]控制。每个链接都可以以文字或图片的形式显示。在WordPress自带的Default主题中，生成链接列表的是一个条件标签，这个条件标签只在首页上而不在主题的其它任何网页上显示链接列表。Classic主题用下面的代码将链接列表显示在所有网页上：<br>
 <?php get_links_list(); ?>
显示链接列表的方式也多种多样，上面只是其中一种。利用模板标签[http://codex.wordpress.org/Template_Tags/get_links get_links()] 页可以设置列表的显示方式。例如，假设我们只需要以图片形式（不是文字形式）显示类别2的日志链接，并且按URL地址顺序为链接排序：<br>
 < ul><?php get_links(2, '< li>', '</li>', '', TRUE, 'url', FALSE); ?>< /ul>
[http://codex.wordpress.org/index.php?title=Plugins/Links&action=edit&redlink=1 一些插件]也可以帮我们定制链接列表样式。<br>
想自己设计链接列表但又不想使用链接管理器？想高亮显示某篇日志或页面？请看 [http://www.wordpress.la/codex-%E5%86%85%E5%AE%B9%E9%93%BE%E6%8E%A5.html 内容链接]。<br>
[http://codex.wordpress.org/index.php?title=Plugins/Links&action=edit&redlink=1 一些插件]也可以帮我们定制链接列表样式。<br>
想自己设计链接列表但又不想使用链接管理器？想高亮显示某篇日志或页面？请看 [http://www.wordpress.la/codex-%E5%86%85%E5%AE%B9%E9%93%BE%E6%8E%A5.html 内容链接]。<br>
<H4>作者链接列表</H4>
如果需要列出带有相应作者网站链接的作者列表，可以考虑效仿下面这个专为WordPress的Default主题的sidebar.php文件而设计的示例。其中[http://codex.wordpress.org/wpdb_Class wpdb   Class]从[http://codex.wordpress.org/Database_Description#Table_wp_users wp_users]表中收集用户ID信息（[http://codex.wordpress.org/wpdb_Class#get_col_-_SELECT_a_Column get_col]）。所有用户的用户ID都被存储在一个名为 <EM>$user_ids</EM>的数组中。 [http://en.wikipedia.org/wiki/Foreach foreach loop]用来“循环” <EM>$user_ids</EM>数组中的所有用户。在[http://en.wikipedia.org/wiki/Foreach foreach loop]循环调用WordPress函数[http://www.wordpress.la/codex-%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0-get_userdata%28%29.html get_userdata]来获取某一个已知用户的所有资料，最终获取用户网站地址（$user-&gt;user_url）并公布用户姓名，以此组成能够指向用户网站的“a   href”标签链接：<br>
[[Image:20100319002.png|WordPress定制侧边栏]]

==特别的侧边栏==
'''添加侧边栏信息的传统方法'''

侧边栏有时出现，有时消失....嗯，至少在WordPress的Default主题中会出现这样的情况。在首页、存档或分类存档页面上可以看到侧边栏，但点击日志标题浏览正文时，侧边栏就不见了。这是怎么回事呢？

WordPress 1.5为网站的不同版块使用模块化的模板文件。现在我们要说的就是其中一个文件，sidebar.php。在一些主题中，archive.php, single.php, search.php, 以及category.php等页面的优先权高于index.php。这些日志页面能够适应不同类型的侧边栏、页眉和页脚。想看看侧边栏怎么根据访问者的访问内容（分类页、存档页或首页）而变化么？下面我们来分析具体过程。

默认情况下，调用侧边栏的是：
 <?php get_sidebar(); ?>  
在WordPress的Default主题中，single.php模板文件不请求调用侧边栏。如果我们正浏览某篇日志，会发现日志正文覆盖了原本侧边栏所在的位置。点击返回存档页面、分类页面和首页时，侧边栏又出现在原来的位置上。Default主题删除了对侧边栏的调用。

我们可以利用PHP命令INCLUDE而不是使用默认的模板标签，让侧边栏出现在其它模板标签上，从而显示与众不同的样式。
 <?php include ('sidebar2.php'); ?>  
以上代码被存储在single.php或category.php模板文件而不是默认标签中，因此这个与众不同的标签会出现在single.php或category.php页面上。我们可以在sidebar2.php中存入不同于默认侧边栏内容的信息。

如果想在single.php模板文件上展现一个特别的侧边栏，而在存档或分类页面上又展现另一个不同的侧边栏，我们需要编辑archive.php或category.php模板文件，将侧边栏调用更改为：
 <?php include ('sidebar-cat.php'); ?>
 <?php include ('sidebar-archive.php'); ?>
实际上我们可以使用任何自己喜欢的名字，甚至可以根据当前浏览的页面命令[[WordPress主循环]]来调用不同的侧边栏，在WordPress手册关于开发主循环的部分能找到这方面的详细信息。掌握基本用法后就可以尽情发挥自己的创意挖掘其它用法了。

===添加侧边栏信息新技巧===
我们可以注册多个侧边栏。在wp-includes/widgets.php文件中找到register_sidebars()的函数定义，我们需要利用该函数在主题目录下（functions.php——如果该文件不存在，新建一个空白的同名php文件）定制函数：
 <?php if ( function_exists ('register_sidebar')) { 
    register_sidebar ('custom'); 
 } ?>
这里的“custom”表示我们需要新建一个名为sidebar-custom.php的自定义侧边栏文件。新建侧边栏会被编入所以。默认侧边栏（sidebar.php）的索引号为1。每新建成功一个侧边栏，其索引号依次为2，3，4，5.......在博客管理界面“外观”菜单下的“小工具”中能看到所有侧边栏。

根据侧边栏的索引号，可以在侧边栏模板中调用动态生成的文本（widgets）：
 <?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?> 
 ... regular html ...
 <?php dynamic_sidebar (1); ?>
 ... regular html ...
 <?php endif; ?>
还可以在模板文件（如index.php, single.php, archives.php）中整合所有侧边栏：
 <?php get_sidebar (); ?>  
从而得到默认侧边栏。
 <?php get_sidebar ('custom'); ?>  
则能够显示自定义侧边栏。

==装饰侧边栏==
我们可以在侧边栏中显示任何内容，可以根据页面的跳转显示随机图片或文字，也可以显示与当前日志相关的一些信息作为边注，还可以添加几个自己喜欢的网站“按钮”或图标，甚至可以秀出自己获得过的奖项。提供当天的天气预报或者头条新闻也是个不错的主意。下面我们会一一举出示例。

'''显示随机信息'''

我们可以根据页面的转换在侧边栏显示不同图片或文字，觉得惊讶么？其实有很多脚本和工具都可以帮网站生成随机图片，每跳转一次页面或刷新一次浏览器，访问者就能看到另一张图片。关键问题是图片尺寸要合适，能够正常显示在侧边栏内。

竖幅图片能更好地展示在狭长的竖状侧边栏中。但只要横幅图片的宽度不超过侧边栏，也可以选择横幅图片。如果横幅图片的宽度超过侧边栏的宽度，两者可能会相互覆盖，也可能会打乱周围的文字，最终影响整个布局。

下面介绍一些可以生成随机图片的工具：
*[http://wordpress.org/extend/plugins/random-image-selector/ Random Image   Selector by Keith Murray]
*[http://photomatt.net/scripts/randomimage Random Image Script by   PhotoMatt]
*[http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's   Random File Plugin]
*[http://automaticlabs.com/products/rotator Automaticlabs' Image   Rotator] 

利用插件，可以在侧边栏中显示随机文字。如果希望显示日志的随机链接列表，随机名言引用，或者其它随机信息，这些插件都能给我们很大的帮助：

*[http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's   Random File Plugin]
*[http://www.gerd-riesselmann.net/archives/2005/01/wordpress-randomized-blogroll-plugin/ Randomized   Blogroll Plugin]
*[http://xmouse.ithium.net/essays/implementing-a-code-snippet-system/ Code   Snippet System]
*[http://mickdakota.com/wordpress-fortune-plugin Fortunate (random quote)   Plugin] 

能够出现在侧边栏中的随机信息还有很多，[http://wordpress.org/extend/plugins/search.php?q=random WordPress   Extend]推荐了很多适用插件

==边注==

这里的“边注”有点类似于迷你型日志或超小栏报导，是我们显示在侧边栏中的、关于某个话题的一些自己的看法。插件和链接管理器都可以生成“边注”。

下面假设我们要在链接管理器中生成一个名为Elsewhere的链接分类。首先输入希望排列在侧边栏内“边注”中的所有链接，然后为每个链接添加简单的名称和说明以相互区别。最后在侧边栏显示Elsewhere边注的地方，输入以下代码：

 < h3>Worth Visiting:</h3>
 < ul id="elsewhere">
 <?php get_links(5, '< li>', '</li>', ' ', FALSE, '_id', FALSE, FALSE, 3, FALSE, TRUE); ?>
 < /ul>
Elsewhere的类别ID为5，模板标签[http://codex.wordpress.org/Template_Tags/get_links get_links()]为该类别显示了三条链接并将链接以ID顺序排列，同时get_links()还显示了各个链接的名称。我们可以自定义链接的显示样式，更改模板标签，使之在显示链接名称的同时也显示出链接说明，最后页面显示结果是：
*Worth Visiting 
*[http://codex.wordpress.org/Customizing_Your_Sidebar#Asides Alice in Wonderland]
*Read this adventure 
*online about the little 
*girl lost through the 
*looking glass
*[http://codex.wordpress.org/Customizing_Your_Sidebar#Asides Little Red Riding Hood]
*A walk in the woods
*turns wicked for a
*little girl visiting her 
*grandmother.
*[http://codex.wordpress.org/Customizing_Your_Sidebar#Asides Cinderella]
*One wrong step 
*sends a prince 
*seeking his mystery 
*princess, and a 
*housekeeper 
*becomes a princess.
有些插件可以将“迷你型日志”转换成边注：
*[http://codex.wordpress.org/Adding_Asides Adding Asides]
*[http://photomatt.net/2004/05/19/asides/ Photomatt's Asides]
*[http://doocy.net/mini-posts/ Mini-posts Plugin]
*[http://www.coldforged.org/archives/2004/11/15/wordpress-asides-coldforged-style/ Coldforged's   Asides]
*[http://russ.innereyes.com/2005/01/the-rustasides-wp-15-plugin/ Innereyes'   Rustasides]

==按钮和图标==
很多博客喜欢利用高亮显示的按钮和图标把自己的友情链接和自己的成就展示在侧边栏中。相较于列出一个表明网站具有“[http://codex.wordpress.org/Validating_a_Website 有效XHTML代码或CSS代码]”的文字链接，不如新建一个“awarded”图标并将图标链接到所有通过验证的网站。如果我们的网站曾经获得过某个奖励，或者是某个网链中的一部分，又或者是某个博客圈的成员，我们都可以用相应的图标显示出来，甚至可以将RSS订阅符号也设为图标。

WordPress自带的Default主题和Classic主题都附带一个验证网站的文本链接，如下所示：

[[Image:20100319003.png|WordPress定制侧边栏]]

要将文字连接换成“XHTML代码有效”图标这样的图形链接，需要将图标复制到网站，然后尝试使用以下代码，将其中的文件名和文件夹名称替换成相应名称以符合实际情况：

[[Image:20100319004.png|WordPress定制侧边栏]]

也可以用同样的方法来高亮显示网站所获得的奖项或其它图形链接：

[[Image:20100319005.png|WordPress定制侧边栏]]

为RSS订阅设计的图形[[链接]]和在链接中插入图片有所不同，WordPress用模板标签在WordPress网站中显示RSS订阅。没有图形的RSS2.0链接看上去是这样的：

[[Image:20100319006.png|WordPress定制侧边栏]]

模板标签[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE-bloginfo%28%29.html bloginfo()]对不同订阅器设置不同参数，因此我们不必亲自设置订阅地址，模板标签会自动生成地址。接下来用图形代替链接文本。

过去人们习惯于用一个橘黄色的小方框作为订阅标志，而现在的技术可以让[[RSS]]订阅标志变成任何样式，但为了便于识别，大多数网站上的订阅标志都比较相似。这些订阅标志通常表现为一个具有两列颜色的横向文本框，一列颜色较深一列颜色较淡，文本框上有RSS|FEED或RSS|Valid字样。我们可以在文本框显示任何文字，只要链接最终能指向订阅地址就可以了。利用[http://www.feedforall.com/public/rss-graphic-tool.htm Feedforall's DYI Feed Graphic Designer]可以轻松设计订阅图标。

[http://feedicons.com/ Feed Icons]网站也为用户提供了大量由Mozilla基金会开发并被Microsoft采用的Feed图形按钮。图形按钮避免了文字按钮可能遇到的宽度问题。

下面是一个特别的订阅图标的样式：

[[Image:20100319007.png|WordPress定制侧边栏]]

有了这些示例的指导，之后大家就可以发挥自己的想象力进行创新了。

'''天气，地理位置，时间'''

能够显示在侧边栏的信息还有很多。[[网站]]主人当地的天气报告、GPS和地理位置信息甚至不同时区的时间都经常出现在不同网站的侧边栏上。有些插件甚至可以以倒计时方式帮我们列出临近的约会、大事件和假期。

找不到能够达到预期效果的侧边栏插件时，我们可以自己动手[http://www.wordpress.la/codex-%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91.html 编写插件]以满足需要，然后和WordPress用户分享自己的劳动成果。

插件资源
之前我们只提到了少数能用来设计、定制WordPress侧边栏的插件，从下面列出的插件资源或搜索引擎中可以找到更多具有类似功能的插件。

使用插件时请根据插件开发者提供的使用说明，谨慎操作。如果使用过程出现问题，首先查看开发者的网站，再联系开发者，如果仍然无法解决问题，请到互联网上搜索可能的解决方法，也可以到[http://wordpress.org/support/ WordPress论坛]寻求帮助。

*[http://codex.wordpress.org/Plugins WordPress Codex   Plugins List]
*[http://www.wp-plugins.org/ wp-plugins.org]
*[http://www.wp-plugins.net/ wp-plugins.net]
*[http://www.bloggingpro.com/archives/category/wordpress-plugins/ BloggingPro   WordPress Plugins]
*[http://www.google.com/search?rls=en&q=site:wordpress.org+plugin&ie=UTF-8&oe=UTF-8 Search   Google for More WordPress Plugins]

'''不用CSS进行测试'''

有人会在禁用[[CSS]]的情况下测试侧边栏，以此了解此时（例如，在基于文字而没有图形的浏览器中时）侧边栏的状况。通常结果会非常令人吃惊，页面变得冗长乏味，到处都是成堆的文字，（这也是一个进行页面优化的机会），之前的侧边栏也全部变成了文字，成为纵向页面的一部分。


==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|S]]
[[category:WordPress使用|S]]
说明	输入内容	输出结果
斜体	''斜体文字''	斜体文字
粗体	'''粗体文字'''	粗体文字
粗斜体	'''''粗斜体文字'''''	*粗斜体文字*