<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bolo的博客 &#187; Theme</title>
	<atom:link href="http://blog.imbolo.com/tag/theme/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.imbolo.com</link>
	<description>一个设计爱好者杂七杂八的博客</description>
	<lastBuildDate>Wed, 23 Nov 2011 16:19:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>WordPress SEO 技巧：内链优化</title>
		<link>http://blog.imbolo.com/wordpress-seo-tips/</link>
		<comments>http://blog.imbolo.com/wordpress-seo-tips/#comments</comments>
		<pubDate>Sun, 24 Oct 2010 15:55:52 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1968</guid>
		<description><![CDATA[最近在做一个新网站，Google 刚开始收录的时候发现归档页面的排名比文章还高，猜测原因是归档页面获得的内链太多了，因此产生一个把所有的指向归档页面的链接全部加上 rel="nofollow" 属性的想法。]]></description>
			<content:encoded><![CDATA[<p>最近在做一个新网站，Google 刚开始收录的时候发现归档页面的排名比文章还高，猜测原因是归档页面获得的内链太多了，因此产生一个把所有的指向归档页面的链接全部加上 rel=&#8221;nofollow&#8221; 属性的想法。要达到这个目的，我们完全可以用 WordPress 强大的 filter 来实现。打开主题的 functions.php ，在里面加上以下的代码：</p>
<p><span id="more-1968"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//给标签云里的链接加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_tag_cloud'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_tag_cloud'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_tag_cloud<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;a href='</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&lt;a rel=&quot;nofollow&quot; href='</span><span style="color: #339933;">,</span>  <span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//给 the_tags() 生成的链接 加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_tags'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_the_tag'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_the_tag<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'rel=&quot;tag&quot;'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'rel=&quot;tag nofollow&quot;'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//给 wp_list_categories() 生成的链接加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'wp_list_categories'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_wp_list_categories'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_wp_list_categories<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$text</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000088;">$text</span> <span style="color: #339933;">=</span> <span style="color: #990000;">stripslashes</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$text</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace_callback</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'|&lt;a (.+?)&gt;|i'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'wp_rel_nofollow_callback'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$text</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//给 the_category() 生成的链接加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'the_category'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_the_category'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_the_category<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$text</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #000088;">$text</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'rel=&quot;category tag&quot;'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$text</span> <span style="color: #339933;">=</span> cis_nofollow_wp_list_categories<span style="color: #009900;">&#40;</span><span style="color: #000088;">$text</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$text</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//给 the_author_post_link 生成的链接加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'the_author_posts_link'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_the_author_posts_link'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_the_author_posts_link <span style="color: #009900;">&#40;</span><span style="color: #000088;">$link</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;/a&gt;&lt;a href='</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&lt;a rel=&quot;nofollow&quot; href='</span><span style="color: #339933;">,</span>  <span style="color: #000088;">$link</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//给 comments_popup_link_attributes() 生成的链接加上 rel=&quot;nofollow&quot;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'comments_popup_link_attributes'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'cis_nofollow_comments_popup_link_attributes'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">function</span> cis_nofollow_comments_popup_link_attributes <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">' rel=&quot;nofollow&quot;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>上面的 filter 针对的都是主题开发时一些使用率比较高的函数，基本上已经能满足我的要求了。</p>
<p></a></pre>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/" title="提高主题的插件体验">提高主题的插件体验</a></li><li><a href="http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/" title="如何把插件集成到主题里(1)">如何把插件集成到主题里(1)</a></li><li><a href="http://blog.imbolo.com/wp-plugin-author-list-plus/" title="适合多人博客的作者列表插件：Author-List-Plus">适合多人博客的作者列表插件：Author-List-Plus</a></li><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/access-your-feedburner-stats-from-wordpress-dashboard/" title="在 WordPress 后台查看 FeedBurner 数据">在 WordPress 后台查看 FeedBurner 数据</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/wordpress-seo-tips/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>为 WordPress 3.0 自定义菜单添加描述</title>
		<link>http://blog.imbolo.com/improve-wordpress-navigation-menu-output/</link>
		<comments>http://blog.imbolo.com/improve-wordpress-navigation-menu-output/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 06:04:42 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Skill]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1914</guid>
		<description><![CDATA[WordPress 3.0 增加了一个强大的自定义菜单功能，但美中不足是要实现题图这样包含描述的菜单时，单靠目前 WordPress 的功能还无法实现。本文将教你改变 WordPress 默认的菜单输出，打造更加个性的菜单。]]></description>
			<content:encoded><![CDATA[<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/1-3.png" alt="WordPress 带描述的菜单" /></p>
<p>WordPress 3.0 增加了一个强大的自定义菜单功能，但美中不足是要实现题图这样包含描述的菜单时，单靠目前 WordPress 的功能还无法实现。本文将教你改变 WordPress 默认的菜单输出，打造更加个性的菜单。</p>
<p>也许你已经知道，当后台出现 <strong>Appearance > Menus</strong> 这个菜单项的时候，就标明你使用的主题支持 WordPress 3.0 自定义菜单。只需要用 <a href="http://codex.wordpress.org/Function_Reference/wp_nav_menu">wp_nav_menu()</a> 函数进行调用即可。但问题是 WordPress 输出的菜单 HTML 结构如下：<span id="more-1914"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="html4strick" style="font-family:monospace;">&lt;ul id=&quot;menu-main&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div>

<p>但我们需要的是像下面这种结构的菜单：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="html4strick" style="font-family:monospace;">&lt;ul id=&quot;menu-main&quot;&gt;
     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;strong&gt;Home&lt;/strong&gt;&lt;span&gt;Description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;strong&gt;About&lt;/strong&gt;&lt;span&gt;Description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;strong&gt;Contact&lt;/strong&gt;&lt;span&gt;Description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;strong&gt;Blog&lt;/strong&gt;&lt;span&gt;Description&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre></td></tr></table></div>

<p>通过对比，很明显 WordPress 默认输出的菜单结构并不能满足我们的要求。我们需要做的是先为每个菜单项写上 description，然后添加一个 filter 对 WordPress 输出的菜单进行整理。</p>
<p>在 <strong>Appearance > Menus</strong> 页面，菜单项的 description 输入框默认是隐藏的，我们可以在页顶的 <strong>Screen Options</strong> 里把 <strong>Description</strong> 勾上。<br />
<img src="http://i1001.photobucket.com/albums/af131/bolo1988/2-3.png" alt="显示菜单项描述输入框" /><br />
然后我们就开始为菜单项加上描述吧！<br />
<img src="http://i1001.photobucket.com/albums/af131/bolo1988/3-3.png" alt="填写菜单项描述" /><br />
在默认情况下，WordPress 已经自动为 Page 菜单项写上了长长的描述，在这里我们可以把这些描述改为自己喜欢的内容。</p>
<p>接下来我们要写一个 filter 用来整理 WordPress 输出的菜单代码。<a href="http://codex.wordpress.org/Function_Reference/wp_nav_menu">wp_nav_menu()</a> 函数有一个 <strong>walker</strong> 参数，我们通过这个参数来调用 filter。下面是 filter 的代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">class</span> description_walker <span style="color: #000000; font-weight: bold;">extends</span> Walker_Nav_Menu
<span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">function</span> start_el<span style="color: #009900;">&#40;</span><span style="color: #339933;">&amp;</span><span style="color: #000088;">$output</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item</span><span style="color: #339933;">,</span> <span style="color: #000088;">$depth</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
           <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wp_query</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$indent</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$depth</span> <span style="color: #009900;">&#41;</span> ? <span style="color: #990000;">str_repeat</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\t</span>&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$depth</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$class_names</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$classes</span> <span style="color: #339933;">=</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">classes</span> <span style="color: #009900;">&#41;</span> ? <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">classes</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$class_names</span> <span style="color: #339933;">=</span> <span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">' '</span><span style="color: #339933;">,</span> apply_filters<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'nav_menu_css_class'</span><span style="color: #339933;">,</span> <span style="color: #990000;">array_filter</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$classes</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$class_names</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">' class=&quot;'</span><span style="color: #339933;">.</span> esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$class_names</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;'</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$indent</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&lt;li id=&quot;menu-item-'</span><span style="color: #339933;">.</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$class_names</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&gt;'</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$attributes</span>  <span style="color: #339933;">=</span> <span style="color: #339933;">!</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">attr_title</span> <span style="color: #009900;">&#41;</span> ? <span style="color: #0000ff;">' title=&quot;'</span>  <span style="color: #339933;">.</span> esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">attr_title</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$attributes</span> <span style="color: #339933;">.=</span> <span style="color: #339933;">!</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">target</span> <span style="color: #009900;">&#41;</span>     ? <span style="color: #0000ff;">' target=&quot;'</span> <span style="color: #339933;">.</span> esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">target</span>     <span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$attributes</span> <span style="color: #339933;">.=</span> <span style="color: #339933;">!</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">xfn</span> <span style="color: #009900;">&#41;</span>        ? <span style="color: #0000ff;">' rel=&quot;'</span>    <span style="color: #339933;">.</span> esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">xfn</span>        <span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$attributes</span> <span style="color: #339933;">.=</span> <span style="color: #339933;">!</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">url</span> <span style="color: #009900;">&#41;</span>        ? <span style="color: #0000ff;">' href=&quot;'</span>   <span style="color: #339933;">.</span> esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">url</span>        <span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #000088;">$prepend</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;strong&gt;'</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$append</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;/strong&gt;'</span><span style="color: #339933;">;</span>
           <span style="color: #000088;">$description</span>  <span style="color: #339933;">=</span> <span style="color: #339933;">!</span> <span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">description</span> <span style="color: #009900;">&#41;</span> ? <span style="color: #0000ff;">'&lt;span&gt;'</span><span style="color: #339933;">.</span>esc_attr<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">description</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/span&gt;'</span> <span style="color: #339933;">:</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
           <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$depth</span> <span style="color: #339933;">!=</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span>
           <span style="color: #009900;">&#123;</span>
                     <span style="color: #000088;">$description</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$append</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$prepend</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
           <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$args</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">before</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&lt;a '</span><span style="color: #339933;">.</span> <span style="color: #000088;">$attributes</span> <span style="color: #339933;">.</span><span style="color: #0000ff;">'&gt;'</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$args</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">link_before</span> <span style="color: #339933;">.</span><span style="color: #000088;">$prepend</span><span style="color: #339933;">.</span>apply_filters<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'the_title'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">title</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #000088;">$append</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$description</span><span style="color: #339933;">.</span><span style="color: #000088;">$args</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">link_after</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&lt;/a&gt;'</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$item_output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$args</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">after</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> apply_filters<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'walker_nav_menu_start_el'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item_output</span><span style="color: #339933;">,</span> <span style="color: #000088;">$item</span><span style="color: #339933;">,</span> <span style="color: #000088;">$depth</span><span style="color: #339933;">,</span> <span style="color: #000088;">$args</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #339933;">&lt;/</span>li<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>这个 filter 只是在 WordPress 默认的 walker 脚本的基础上修改了一些内容（原代码在 wp-includes/nav-menu-template.php），并且只为顶级菜单项添加描述。</p>
<p>最后一步，我们只需在调用菜单的时候告诉 WordPress：“调用这个菜单的时候使用我自己的 walker 脚本”，WordPress 就会自动生成你所需要的结构的菜单了。在调用菜单是，我们这样写：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">wp_nav_menu<span style="color: #009900;">&#40;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
	<span style="color: #0000ff;">'container'</span> <span style="color: #339933;">=&gt;</span>false<span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'menu_class'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'nav'</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'echo'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'before'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'after'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'link_before'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'link_after'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'depth'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span>
	<span style="color: #0000ff;">'walker'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000000; font-weight: bold;">new</span> description_walker<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>要令菜单更好看的话，我们只需要编写自己喜欢的 CSS 样式即可。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/inpad/" title="主题发布：Inpad">主题发布：Inpad</a></li><li><a href="http://blog.imbolo.com/custom-gravatar/" title="自定义默认Gravatar头像">自定义默认Gravatar头像</a></li><li><a href="http://blog.imbolo.com/show-the-date-of-each-post/" title="显示每篇文章的日期">显示每篇文章的日期</a></li><li><a href="http://blog.imbolo.com/ajax-posting-comments/" title="为主题添加AJAX提交评论功能">为主题添加AJAX提交评论功能</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/improve-wordpress-navigation-menu-output/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>为 WordPress 3.0 的自定义菜单链接添加栏目图标</title>
		<link>http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/</link>
		<comments>http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/#comments</comments>
		<pubDate>Tue, 25 May 2010 15:18:57 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1854</guid>
		<description><![CDATA[WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。]]></description>
			<content:encoded><![CDATA[<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/custompagemenuitemicon.png" alt="WordPress 3.0 自定义菜单栏目图标" /></p>
<p>WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。</p>
<p>在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。<span id="more-1854"></span></p>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Captura-de-pantalla-2010-05-24-a-la.png" alt="默认自定义菜单项目参数" /></p>
<p>默认情况下能修改的参数很少，这时点击屏幕左上角的“Screen Options（屏幕参数）”，把“Show advanced menu properties（显示高级菜单属性）”里的项目全部勾选，我们就可以看到更多的参数。以本文题图为例，为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class，这样在前台调用菜单时，这些项目将拥有一个自定义的 CSS Class，接下来我们可以通过 CSS 为这些项目加上图标。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#header</span> ul<span style="color: #6666ff;">.navigation</span> li a<span style="color: #6666ff;">.home</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;images/home.png&quot;</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#header</span> ul<span style="color: #6666ff;">.navigation</span> li a<span style="color: #6666ff;">.about</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;images/about.png&quot;</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">0px</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#header</span> ul<span style="color: #6666ff;">.navigation</span> li a<span style="color: #6666ff;">.advertise</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;images/advertise.png&quot;</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">0px</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#header</span> ul<span style="color: #6666ff;">.navigation</span> li a<span style="color: #6666ff;">.archive</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;images/archive.png&quot;</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#header</span> ul<span style="color: #6666ff;">.navigation</span> li a<span style="color: #6666ff;">.contact</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">&quot;images/contact.png&quot;</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">3px</span> <span style="color: #993333;">transparent</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>在 WordPress 3.0 之前的版本里，我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值，再为它加上一个和 title 值相同的 Class，在 jQuery 里可以这样写：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'ul.navigation li a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/inpad/" title="主题发布：Inpad">主题发布：Inpad</a></li><li><a href="http://blog.imbolo.com/custom-gravatar/" title="自定义默认Gravatar头像">自定义默认Gravatar头像</a></li><li><a href="http://blog.imbolo.com/show-the-date-of-each-post/" title="显示每篇文章的日期">显示每篇文章的日期</a></li><li><a href="http://blog.imbolo.com/ajax-posting-comments/" title="为主题添加AJAX提交评论功能">为主题添加AJAX提交评论功能</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>10个令人叹为观止的Chrome主题</title>
		<link>http://blog.imbolo.com/10-best-chrome-theme/</link>
		<comments>http://blog.imbolo.com/10-best-chrome-theme/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 02:00:47 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[Software]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1669</guid>
		<description><![CDATA[毫无疑问，Google Chrome凭借优异的性能，已经成为世界上势头最猛的浏览器。Chrome3推出的换肤功能，更是摆脱了以往单调的印象，Chrome也开始走向时尚]]></description>
			<content:encoded><![CDATA[<p>毫无疑问，Google Chrome凭借优异的性能，已经成为世界上势头最猛的浏览器。Chrome3推出的换肤功能，更是摆脱了以往单调的印象，Chrome也开始走向时尚。</p>
<p>今天看到<a href="http://www.crispytech.com/2010/01/27/best-chrome-themes/" rel="external">20+ Best Chrome Themes</a>，里面的主题都很漂亮，我自己从中选出10个，和大家分享一下。</p>
<h3><a href="http://www.chromeplugins.org/google/chrome-themes/aero-theme-crx-version-1-5-a-8812.html#post19248" rel="external nofollow">Aero Black Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Aero_Black_Chrome_Theme-.jpg" alt="Aero Black Theme for Chrome" /><span id="more-1669"></span></p>
<p>很有Win7质感的主题，深夜使用也比较护眼。</p>
<h3><a href="https://chrome.google.com/extensions/detail/oikepnecenplfkileichpiiofmjnimha" rel="external nofollow">Alt_Chromium_Nxt Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Alt_Chromium_Nxt_Chrome_Theme-.jpg" alt="Alt_Chromium_Nxt Theme for Chrome" /></p>
<p>富有古典味道的主题，适合怀旧人士。</p>
<h3><a href="https://chrome.google.com/extensions/detail/ghjkcholelkaibjpjpnlohnppfoondne" rel="external nofollow">Aurora Grass Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Aurora_Grass_Chrome_Theme.jpg" alt="Aurora_Grass_Chrome_Theme" /></p>
<p>极光主题哦，不过极光好像不是白色的吧？</p>
<h3><a href="https://chrome.google.com/extensions/detail/daajpcocaibhkbhdhnjdggbibjejjlic" rel="external nofollow">Aurora Space Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Aurora_Space_Chrome_Theme.jpg" alt="Aurora_Space_Chrome_Theme" /></p>
<p>很有Mac味道的主题，果粉应该会喜欢。</p>
<h3><a href="https://chrome.google.com/extensions/detail/dlbfeiakikepppihgipiempgcnncpphb" rel="external nofollow">Avatar Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Avatar_Chrome_Theme.jpg" alt="Avatar_Chrome_Theme" /></p>
<p>阿凡达主题，随着电影的热映，这个主题应该也能赢得不少票房。</p>
<h3><a href="https://chrome.google.com/extensions/detail/nmkafemdimhlmhbonnkmnpdagkbcceog" rel="external nofollow">Bike Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Bike_Chrome_Theme.jpg" alt="Bike_Chrome_Theme" /></p>
<p>我觉得这个主题起错名字了，这可是哈雷摩托车啊，怎么也是moto-bike吧？</p>
<h3><a href="https://chrome.google.com/extensions/detail/hnneafiffajmgfkidbdfpfkehpodbhkd" rel="external nofollow">Dark Abstract Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Dark_Abstract_Chrome_Theme.jpg" alt="Dark_Abstract_Chrome_Theme" /></p>
<p>泡泡主题，是不是有很多遐想呢？</p>
<h3><a href="http://stamga.deviantart.com/art/Glowz-Aqua-146177127" rel="external nofollow">Glowz Aqua Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Glowz_Aqua_Chrome_Theme.jpg" alt="Glowz_Aqua_Chrome_Theme" /></p>
<p>虽然也是蓝色，但就是比默认主题好看多了。</p>
<h3><a href="https://chrome.google.com/extensions/detail/hfandfjnedocngfomhgkeomfkekkdpak" rel="external nofollow">Graph Control Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Graph_Control_Chrome_Theme.jpg" alt="Graph_Control_Chrome_Theme" /></p>
<p>我看到这个主题的第一印象是感觉浑身充满了力量。</p>
<h3><a href="http://www.chromeplugins.org/google/chrome-themes/superman-returns-crx-9142.html" rel="external nofollow">Superman Returns Theme for Chrome</a></h3>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/Superman_Returns_Chrome_Theme-.jpg" alt="Superman_Returns_Chrome_Theme" /></p>
<p>力量型主题。</p>
<h3>提醒</h3>
<p>这些主题都采用了Chrome官方的crx格式，兼容性比较好。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/wordpress-seo-tips/" title="WordPress SEO 技巧：内链优化">WordPress SEO 技巧：内链优化</a></li><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/" title="提高主题的插件体验">提高主题的插件体验</a></li><li><a href="http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/" title="如何把插件集成到主题里(1)">如何把插件集成到主题里(1)</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/10-best-chrome-theme/feed/</wfw:commentRss>
		<slash:comments>41</slash:comments>
		</item>
		<item>
		<title>提高主题的插件体验</title>
		<link>http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/</link>
		<comments>http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 03:08:44 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1637</guid>
		<description><![CDATA[很多主题作者为了提高开发效率，在主题里预留了一些指定插件的接口，当用户使用该主题，并且激活了相应的插件时，主题将自动调用插件，生成最适合该主题的效果]]></description>
			<content:encoded><![CDATA[<p>很多主题作者为了提高开发效率，在主题里预留了一些指定插件的接口，当用户使用该主题，并且激活了相应的插件时，主题将自动调用插件，生成最适合该主题的效果。<br />
如何为插件预留接口呢？以普及率很高的WP-Pagenavi插件为例，使用以下代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_pagenavi'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;</span> ?php wp_pagenavi<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p><span id="more-1637"></span><br />
这样当用户激活了WP-Pagenavi插件时，主题将自动调用插件的功能，不需要再修改模板。<br />
但是以上的代码当用户没有使用WP-Pagenavi插件时，主题将失去文章列表分页功能。为了让主题的功能<strong>平稳退化</strong>，现在所有的主题作者都会使用以下的代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_pagenavi'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;</span> ?php wp_pagenavi<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;</span>span <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;newer&quot;</span><span style="color: #339933;">&gt;&lt;</span> ?php previous_posts_link<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Newer Entries&amp;raquo;'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>span<span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>span <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;older&quot;</span><span style="color: #339933;">&gt;&lt;</span> ?php next_posts_link<span style="color: #009900;">&#40;</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&amp;laquo;Older Entries'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>span<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>这样在用户没有激活WP-Pagenavi插件时，主题将使用WordPress提供的分页功能对文章列表进行分页。主题也不会绝对的依赖插件。<br />
还有一种情况是在主题的某些模板中需要插件支持的，以我制作的Inpad主题为例，在Archives模板里需要调用WP_EasyArchives插件来生成安时间线存档的文章列表。在激活WP_EasyArchives插件时，该模板的效果如下：<br />
<img src="http://i1001.photobucket.com/albums/af131/bolo1988/ss1.png" alt="Archives模板正常效果 " /><br />
而当用户启用了Archives模板，但却没有激活WP_EasyArchives插件时，我采用以下的效果来提醒用户安装相关的插件：<br />
<img src="http://i1001.photobucket.com/albums/af131/bolo1988/ss2.png" alt="提醒用户激活相关插件" /><br />
代码如下：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">function_exists</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_easyarchives'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;</span> ?php wp_easyarchives<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;messagebox&quot;</span><span style="color: #339933;">&gt;</span>
		<span style="color: #339933;">&lt;</span> ?php _e<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Sorry, please activate WP-EasyArchives plugin.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span> ?php <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>同过设置环境条件不能达到模板要求时的应对方案，可以防止用户在没有激活插件时导致页面出错，也可以增强主题对用户的友好性。<br />
但这种强迫用户使用插件的行为同样也不是我所提倡的，只是时间关系，我不能及时地做出一个更好的应对方案。最好的方法，当然是集成插件，或者把一个完整的替代功能做进主题里。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/wordpress-seo-tips/" title="WordPress SEO 技巧：内链优化">WordPress SEO 技巧：内链优化</a></li><li><a href="http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/" title="如何把插件集成到主题里(1)">如何把插件集成到主题里(1)</a></li><li><a href="http://blog.imbolo.com/wp-plugin-author-list-plus/" title="适合多人博客的作者列表插件：Author-List-Plus">适合多人博客的作者列表插件：Author-List-Plus</a></li><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/access-your-feedburner-stats-from-wordpress-dashboard/" title="在 WordPress 后台查看 FeedBurner 数据">在 WordPress 后台查看 FeedBurner 数据</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>如何把插件集成到主题里(1)</title>
		<link>http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/</link>
		<comments>http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/#comments</comments>
		<pubDate>Thu, 21 Jan 2010 06:40:58 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Plugins]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1628</guid>
		<description><![CDATA[上一篇文章我发了一个免插件调用最多评论文章的代码，在读者的评论里出现了两种意见]]></description>
			<content:encoded><![CDATA[<p>上一篇文章我发了一个免插件调用最多评论文章的代码，在读者的评论里出现了两种意见。一种倾向于支持把一些优秀的插件集成到主题里，省却用户的麻烦。一种倾向于在主题里保留对某些插件的支持，在发现该插件激活时自动加载。</p>
<p>我个人倾向于主题应该保持最大限度的精简，但必须保持良好的插件兼容性。但有一些插件，各方面已经非常完善，并且在未来一定时间内也不会对新版本的WordPress出现兼容问题，我们则可以考虑把它集成到主题里。对于集成到主题里的插件，我们可以体会到一些好处：<br />
1.可以自主整合插件所需的JS和CSS文件，减少HTTP请求；<br />
2.在整合的过程中，你可以去除插件中你不需要的部分，减少垃圾可以令WordPress运行更快；<br />
3.可以提高主题的易用性。</p>
<p>在这个系列的文章里，我将说说怎么把插件集成到主题里，我选用MG12出品的<a rel="external" href="http://www.neoease.com/ajax-comment-pager/">AJAX Comment Pager</a>作为试验品。这款插件的特点是简单实用，源码里注释详细。<span id="more-1628"></span></p>
<h3>正文</h3>
<p><span style="color: #ff0000;"><strong>注意：如果你要按照这个教程试着折腾的话，请先备份你的主题，并且请确认你的主题支持按页码进行评论分页。</strong></span></p>
<h4>步骤1</h4>
<p>首先打开ajax-comment-pager文件夹里的ajax-comment-pager.php文件，这个文件就是整个插件的核心。我们可以看到细心的MG12对插件的每一个模块都做了注释。</p>
<p>我们要做的是先分析这个插件是怎么运行的，程序结构是怎样的。</p>
<p>首先，根据注释，我们可以发现程序结构如下图：</p>
<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/howtocombinepluginwiththeme1.png" alt="AJAX Comment Pager插件程序结构图" /></p>
<p>下面解释一下各个模块的作用：<br />
l10n：提供插件的本地化语言，在整合是可以忽略；<br />
options：用于配置插件参数；<br />
AJAX function：处理AJAX请求，并返回相应的结果，核心中的核心；<br />
add to WordPress：加载插件运行所需的JS脚本和CSS样式文件。<br />
到这里，插件的运行机制已经呼之欲出。<br />
首先由add to WordPress加载所需的文件-&gt;在点击评论翻页时发出AJAX请求-&gt;AJAX function模块获取options里的参数，处理AJAX请求并返回结果-&gt;add to WordPress事先加载的脚本把AJAX function返回的结果插入到评论列表位置。</p>
<h4>步骤2</h4>
<p>在充分了解插件的结构以后，我们开始提取所需的代码，先把cpage_ajax和commentpager_head改名，我给这两个函数名同意加上了“bolo_”前缀。这一步是为了避免和原来的插件产生冲突，改名的方法推荐先复制原来的函数名，改名后用新函数名全部替换原函数名。</p>
<p>接下来把ajax-comment-pager.css和ajax-comment-pager.js复制到主题文件夹里并且在ajax-comment-pager.js里查找一下“cpage_ajax”，加上前缀“bolo_”。</p>
<p>水平高一点的童鞋们，在这一步就可以整合css和js文件了，如果你不会整合这两个文件则需要在主题的header.php里加载这两个文件，并且在加载ajax-comment-pager.js前需要先输出以下代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span><span style="color: #006600; font-style: italic;">//&lt; ![CDATA[</span>
<span style="color: #003366; font-weight: bold;">var</span> ajaxCommnetsPagerCommentsId <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;thecomments&quot;</span> <span style="color: #006600; font-style: italic;">//thecomments是评论列表的ID，请根据自己的主题自行修改</span>
<span style="color: #003366; font-weight: bold;">var</span> ajaxCommnetsPagerAjaxLoader <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Loading...&quot;</span>
<span style="color: #006600; font-style: italic;">//]]&gt;&lt;/script&gt;</span></pre></td></tr></table></div>

<h4>步骤3</h4>
<p>把 AJAX function 模块的所有代码复制到主题的functions.php里，我们还需要修改一下。<br />
我们的目的是直接把最适合我们主题的参数整合进去，所以options，callback method name 和 type 这几部分都可以删去，并充新补上$callback和$type这两个变量。<br />
$callback是自定义评论样式的名字，一般是custom_comment，请自行查看主题配置。<br />
$type是翻页是需要显示的内容，只显示评论则是&amp;type=comment，只显示pingback则是&amp;type=pings，两者都显示则留空。<br />
在这里我设置为</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$callback</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'custom_comment'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//我的主题里评论样式名为custom_comment</span>
<span style="color: #000088;">$type</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&amp;amp;type=comment'</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//只显示评论</span></pre></td></tr></table></div>

<h4>步骤4</h4>
<p>在打开comments.php，在合适的地方加上</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>span id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;cp_post_id&quot;</span><span style="color: #339933;">&gt;&lt;</span> ?php <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #339933;">&lt;/</span>span<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>如果你不知道什么地方是“合适的地方”，那就把这句代码加到任一个&lt;/div&gt;前吧。</p>
<h4>后记</h4>
<p>到这里为止，你可以发现主题集成的AJAX Comment Pager已经可以正常运行了。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/wordpress-seo-tips/" title="WordPress SEO 技巧：内链优化">WordPress SEO 技巧：内链优化</a></li><li><a href="http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/" title="提高主题的插件体验">提高主题的插件体验</a></li><li><a href="http://blog.imbolo.com/wp-plugin-author-list-plus/" title="适合多人博客的作者列表插件：Author-List-Plus">适合多人博客的作者列表插件：Author-List-Plus</a></li><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/access-your-feedburner-stats-from-wordpress-dashboard/" title="在 WordPress 后台查看 FeedBurner 数据">在 WordPress 后台查看 FeedBurner 数据</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/how-to-combine-plugin-with-theme-1/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>显示最多评论的文章（无插件版）</title>
		<link>http://blog.imbolo.com/list-most-comment-posts-without-plugin/</link>
		<comments>http://blog.imbolo.com/list-most-comment-posts-without-plugin/#comments</comments>
		<pubDate>Mon, 18 Jan 2010 13:57:05 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1626</guid>
		<description><![CDATA[终于放寒假了，昨天回到了家里，今天装好电脑后就开始忙一个新的网站了]]></description>
			<content:encoded><![CDATA[<p>终于放寒假了，昨天回到了家里，今天装好电脑后就开始忙一个新的网站了。<br />
怎新的网站里，我需要在某个地方显示最多评论的文章。作为一个定制模板，强行要求用户在使用这个模板前先安装某个插件显然是很不好的，因此我们必须在模板里集成所有用户所需要的功能。废话不多说了，上代码。<span id="more-1626"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> most_popular_posts<span style="color: #009900;">&#40;</span><span style="color: #000088;">$no_posts</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">10</span><span style="color: #339933;">,</span> <span style="color: #000088;">$before</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;li&gt;'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$after</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'&lt;/li&gt;'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$show_pass_post</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #000088;">$duration</span><span style="color: #339933;">=</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #666666; font-style: italic;">//定制参数，可以自己修改相关参数，以便写样式</span>
<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$request</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;SELECT ID, post_title, COUNT(<span style="color: #006699; font-weight: bold;">$wpdb-&gt;comments</span>.comment_post_ID) AS 'comment_count' FROM <span style="color: #006699; font-weight: bold;">$wpdb-&gt;posts</span>, <span style="color: #006699; font-weight: bold;">$wpdb-&gt;comments</span>&quot;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//在数据库里选择所需的数据</span>
<span style="color: #000088;">$request</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot; WHERE comment_approved = '1' AND <span style="color: #006699; font-weight: bold;">$wpdb-&gt;posts</span>.ID=<span style="color: #006699; font-weight: bold;">$wpdb-&gt;comments</span>.comment_post_ID AND post_status = 'publish'&quot;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//筛选数据，只统计公开的文章</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000088;">$show_pass_post</span><span style="color: #009900;">&#41;</span> <span style="color: #000088;">$request</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot; AND post_password =''&quot;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$duration</span> <span style="color: #339933;">!=</span><span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000088;">$request</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot; AND DATE_SUB(CURDATE(),INTERVAL &quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$duration</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot; DAY) &lt; post_date &quot;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000088;">$request</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot; GROUP BY <span style="color: #006699; font-weight: bold;">$wpdb-&gt;comments</span>.comment_post_ID ORDER BY comment_count DESC LIMIT <span style="color: #006699; font-weight: bold;">$no_posts</span>&quot;</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//按评论数排序</span>
<span style="color: #000088;">$posts</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_results</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$request</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$posts</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$posts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$post_title</span> <span style="color: #339933;">=</span> <span style="color: #990000;">stripslashes</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$comment_count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_count</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$permalink</span> <span style="color: #339933;">=</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$before</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&lt;a href=&quot;'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$permalink</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; title=&quot;'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$post_title</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;&gt;'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$post_title</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&lt;/a&gt; ('</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$comment_count</span><span style="color: #339933;">.</span><span style="color: #0000ff;">')'</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$after</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #666666; font-style: italic;">//输出文章列表项</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$output</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$before</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;None found&quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$after</span><span style="color: #339933;">;</span>
<span style="color: #666666; font-style: italic;">//没有文章时则输出</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$output</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>以上代码写在主题的functions.php里，在需要调用最多评论文章的地方添加以下代码：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span> ?php most_popular_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<h5>后记：</h5>
<p>现在发现很多WordPress玩了有一段日子的老鸟热衷于寻找各种无插件实现XX功能的方法，这些所谓无插件的方法其实很多都是从相关的插件里把函数提取出来的，并且用这个方法为网站添加相关功能会一定程度上造成以后维护比较困难，并且也增加了BUG的风险。<br />
对于一些很简单的功能，例如本文所述的显示最多评论文章，可以把这些简单的功能集成到主题里。但一些复杂的功能，例如AJAX，个人建议还是用插件吧，因为插件的兼容性比专用代码强，而且一般插件作者会负责相关的维护，免除了很多麻烦。<br />
当然在使用一个新插件之前强烈建议现在本地测试一下，看看该插件的功能能否达到自己的要求，有没有明显的BUG等等。有技术的朋友可以修改一下插件的数据存储方法，据本人的经验有些插件写进数据库里的内容是多而乱的，这样的插件要慎用。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/wordpress-seo-tips/" title="WordPress SEO 技巧：内链优化">WordPress SEO 技巧：内链优化</a></li><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/10-best-chrome-theme/" title="10个令人叹为观止的Chrome主题">10个令人叹为观止的Chrome主题</a></li><li><a href="http://blog.imbolo.com/improve-the-experience-of-plugin-in-a-theme/" title="提高主题的插件体验">提高主题的插件体验</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/list-most-comment-posts-without-plugin/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>主题发布：Inpad</title>
		<link>http://blog.imbolo.com/inpad/</link>
		<comments>http://blog.imbolo.com/inpad/#comments</comments>
		<pubDate>Fri, 15 Jan 2010 16:25:40 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1618</guid>
		<description><![CDATA[Inpad其实是我很久之前就开始构思的一个主题，可是当时做得十分失败]]></description>
			<content:encoded><![CDATA[<p>Inpad其实是我很久之前就开始构思的一个主题，可是当时做得十分失败。这次发布的Inpad代码已经全部经过重写，并且通过了详细的测试，错漏应该比较少了，就重新发布吧。<br />
<img src="http://i1001.photobucket.com/albums/af131/bolo1988/Inpad.png" alt="WordPress主题：Inpad" /><span id="more-1618"></span></p>
<h5>特点：</h5>
<p>*Inpad是一个纯CSS的主题<br />
*后台支持多种配色切换<br />
*拥有丰富的社会化应用设置<br />
*支持嵌套/@评论回复<br />
*支持Widget<br />
*无需任何插件即可正常使用</p>
<h5>已支持插件：</h5>
<p>*<a href="http://wppluginsj.sourceforge.jp/quick-comments/" rel="external">Quick Comments</a><br />
设置:<br />
Comment Form CSS Path:form#commentform;<br />
Comment List CSS Path:ol#commentlist;<br />
提示：只能在“@”评论回复模式下使用。</p>
<p>*<a href="http://lesterchan.net/portfolio/programming/php/" rel="external">WP-PageNavi</a></p>
<p>*<a href="http://wordpress.org/extend/plugins/wp-easyarchives/" rel="external">WP-EasyArchives</a><br />
建立新页面时选择Archives模板。</p>
<p>*<a href="http://wordpress.org/extend/plugins/ajax-comment-pager/" rel="external">AJAX Comment Pager</a></p>
<p>下载地址：<a href="http://code.google.com/p/cantonbolo/downloads/list?q=label:Inpad" rel="external">http://code.google.com/p/cantonbolo/downloads/list?q=label:Inpad</a></p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/custom-gravatar/" title="自定义默认Gravatar头像">自定义默认Gravatar头像</a></li><li><a href="http://blog.imbolo.com/show-the-date-of-each-post/" title="显示每篇文章的日期">显示每篇文章的日期</a></li><li><a href="http://blog.imbolo.com/ajax-posting-comments/" title="为主题添加AJAX提交评论功能">为主题添加AJAX提交评论功能</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/inpad/feed/</wfw:commentRss>
		<slash:comments>46</slash:comments>
		</item>
		<item>
		<title>自定义默认Gravatar头像</title>
		<link>http://blog.imbolo.com/custom-gravatar/</link>
		<comments>http://blog.imbolo.com/custom-gravatar/#comments</comments>
		<pubDate>Thu, 07 Jan 2010 11:30:38 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1605</guid>
		<description><![CDATA[最近给我的音乐博客修改主题，在主题发现了一段有趣的函数，可以自由定制Gravatar的默认头像，现在记录一下]]></description>
			<content:encoded><![CDATA[<p>最近给我的<a href="http://nosay.in" rel="external">音乐博客</a>修改主题，在主题发现了一段有趣的函数，可以自由定制Gravatar的默认头像，现在记录一下。<br />
主函数如下，作用是获取Gravatar头像。<span id="more-1605"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> gravatar<span style="color: #009900;">&#40;</span><span style="color: #000088;">$rating</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #000088;">$size</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #000088;">$default</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #000088;">$border</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$comment</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$out</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;http://www.gravatar.com/avatar.php?gravatar_id=&quot;</span><span style="color: #339933;">.</span><span style="color: #990000;">md5</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$comment</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">comment_author_email</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$rating</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$rating</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$out</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&amp;amp;rating=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$rating</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$size</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$size</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$out</span> <span style="color: #339933;">.=</span><span style="color: #0000ff;">&quot;&amp;amp;size=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$size</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$default</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$default</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$out</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&amp;amp;default=&quot;</span><span style="color: #339933;">.</span><span style="color: #990000;">urlencode</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$default</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$border</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #000088;">$border</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span>
		<span style="color: #000088;">$out</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">&quot;&amp;amp;border=&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$border</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$out</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>但在调用函数时有一个小技巧，代码如下。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strick" style="font-family:monospace;">&lt;img src=&quot;&lt;?php gravatar(&quot;R&quot;, 45, get_bloginfo('template_url').&quot;/images/avatar-replace.png&quot;); ?/&gt;&quot; alt=&quot;Avatar&quot; /&gt;</pre></td></tr></table></div>

<p>这段代码作用是显示头像，如果用户的E-mail没有设置Gravatar头像的话则显示主题目录\images\avatar-replace.png这个图片。<br />
具体效果大家可以到我的<a href="http://nosay.in" rel="external">音乐博客</a>测试一下，用一个没有设置Gravatar头像的E-mail留言，将会显示音乐博客的Logo。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/inpad/" title="主题发布：Inpad">主题发布：Inpad</a></li><li><a href="http://blog.imbolo.com/show-the-date-of-each-post/" title="显示每篇文章的日期">显示每篇文章的日期</a></li><li><a href="http://blog.imbolo.com/ajax-posting-comments/" title="为主题添加AJAX提交评论功能">为主题添加AJAX提交评论功能</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/custom-gravatar/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>显示每篇文章的日期</title>
		<link>http://blog.imbolo.com/show-the-date-of-each-post/</link>
		<comments>http://blog.imbolo.com/show-the-date-of-each-post/#comments</comments>
		<pubDate>Sat, 19 Dec 2009 08:07:34 +0000</pubDate>
		<dc:creator>bolo</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.imbolo.com/?p=1570</guid>
		<description><![CDATA[WordPress的模板非常灵活，一个优秀的模板所实现的功能往往超出你的想象。这篇文章说说在WordPress里调用文章的发布日期]]></description>
			<content:encoded><![CDATA[<p><img src="http://i1001.photobucket.com/albums/af131/bolo1988/date_format.png" alt="WordPress日期格式" /><br />
WordPress的模板非常灵活，一个优秀的模板所实现的功能往往超出你的想象。这篇文章说说在WordPress里调用文章的发布日期。<span id="more-1570"></span><br />
在输出文章列表时，日期的主要职能是告诉读者这篇文章是什么时候发表的，以让读者知道文章的时效范围。但如果你是制作一个主题的话，就必须考虑到不同的国家或者地区惯用的日期格式是不同的，有的国家习惯“日/月/年”，但中国则习惯“年/月/日”。在大多数的WordPress模板和主题里，日期的格式都被设计者定为当地的惯用格式，用户需要改变日期格式的话通常需要改动模板，这一点对一些不懂后台的用户很不好。<br />
但WordPress后台->Setting->General里提供了日期格式的设置，我们通过这个设置来方便用户自定义日期格式是一个比较好的方案。<br />
WordPress里调用时间的函数是<em>the_time()</em>，例如要显示&#8221;Saterday,December 19, 2009&#8243;这样的日期，应该把函数定义为这种格式：<em>the_time(&#8216;l, F j, Y&#8217;)</em>。<br />
我们要做的是把General里设置的日期格式调用到<em>the_time()</em>里。通过WordPress的官方文档查到调用General里设置的日期格式所用到的函数是<em>get_option(&#8216;date_format&#8217;)</em>，因此我们只需要在调用文章列表的循环里把时间调用函数换成<em>the_time(get_option(&#8216;date_format&#8217;))</em>就可以方便地调整日期格式了。</p>
<p  class="related_post_title">Related Posts</p><ul class="related_post"><li><a href="http://blog.imbolo.com/improve-wordpress-navigation-menu-output/" title="为 WordPress 3.0 自定义菜单添加描述">为 WordPress 3.0 自定义菜单添加描述</a></li><li><a href="http://blog.imbolo.com/customizing-the-new-wordpress-3-0-custom-menus-adding-different-icons-to-each-link/" title="为 WordPress 3.0 的自定义菜单链接添加栏目图标">为 WordPress 3.0 的自定义菜单链接添加栏目图标</a></li><li><a href="http://blog.imbolo.com/inpad/" title="主题发布：Inpad">主题发布：Inpad</a></li><li><a href="http://blog.imbolo.com/custom-gravatar/" title="自定义默认Gravatar头像">自定义默认Gravatar头像</a></li><li><a href="http://blog.imbolo.com/ajax-posting-comments/" title="为主题添加AJAX提交评论功能">为主题添加AJAX提交评论功能</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.imbolo.com/show-the-date-of-each-post/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

