<?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>木木木木木 &#187; 侧边栏</title>
	<atom:link href="http://immmmm.com/tag/%e4%be%a7%e8%be%b9%e6%a0%8f/feed" rel="self" type="application/rss+xml" />
	<link>http://immmmm.com</link>
	<description>不问明天，悠然浪费</description>
	<lastBuildDate>Mon, 21 May 2012 12:03:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>“关闭/显示侧边栏”完美终结版</title>
		<link>http://immmmm.com/close-show-sidebar-prefect-code.html</link>
		<comments>http://immmmm.com/close-show-sidebar-prefect-code.html#comments</comments>
		<pubDate>Sat, 08 May 2010 08:47:15 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[侧边栏]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1286</guid>
		<description><![CDATA[之前文章《”关闭/显示侧边栏”最简代码版》，先来看看其中的jQuery代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 &#160; $&#40;'#close-sidebar a'&#41;.toggle&#40;function&#40;&#41;&#123; &#160; $&#40;this&#41;.text&#40;&#34;显示侧边栏&#34;&#41;; &#160; $&#40;'#sidebar'&#41;.hide&#40;&#41;; &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;960px&#34;&#125;, 1000&#41;; &#160; &#125;,function&#40;&#41;&#123; &#160; $&#40;this&#41;.text&#40;&#34;关闭侧边栏&#34;&#41;; &#160; $&#40;'#sidebar'&#41;.show&#40;&#41;; &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;705px&#34;&#125;, 800&#41;; &#160; &#125;&#41;; 这段代码有个小小不完美的地方的，其实也有多个留心的童鞋发现并向我反馈过： 当点击“显示侧边栏”时，浏览器右侧的滚动条“急剧变化”，若侧边栏比较长更是明显…… 其实当点击“显示”，侧边栏立即就显示出来了，只是主体的宽度还未缩回，它就被压在主体下面，页面的高度也随之增加，0.8s后才得以跳上来。 这与我们之前写代码的期望有点出入：点击“关闭”，侧边栏消失，主体宽度伸长；点击“显示”，主体宽度缩回，侧边栏显现。 处理这个小问题，首先想到的是用jQuery的fadeIn/fadeOut，轻松解决，可杯具的是经过这个淡入淡出后的字体，在IE下会变得惨不忍睹，尤其是雅黑。怎么办呢？ 再次看《jQuery1.4中文文档》，发现新增了一个函数，可将队列中的函数延时执行： .delay() 用这个函数也轻松解决，调整后的jQuery代码： 1 2 3 4 5 [...]]]></description>
			<content:encoded><![CDATA[<p>之前文章<a rel="nofollow" href="http://immmmm.com/close-show-sidebar-simple-code.html" target="_blank">《”关闭/显示侧边栏”最简代码版》</a>，先来看看其中的jQuery代码：</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
</pre></td><td class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#close-sidebar a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;显示侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;关闭侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>这段代码有个小小不完美的地方的，其实也有多个留心的童鞋发现并向我反馈过：</p>
<p>当点击“显示侧边栏”时，浏览器右侧的滚动条“急剧变化”，若侧边栏比较长更是明显……<span id="more-1286"></span></p>
<p>其实当点击“显示”，侧边栏立即就显示出来了，只是主体的宽度还未缩回，它就被压在主体下面，页面的高度也随之增加，0.8s后才得以跳上来。</p>
<p>这与我们之前写代码的期望有点出入：点击“关闭”，侧边栏消失，主体宽度伸长；点击“显示”，主体宽度缩回，侧边栏显现。</p>
<p>处理这个小问题，首先想到的是用jQuery的fadeIn/fadeOut，轻松解决，可杯具的是经过这个淡入淡出后的字体，在IE下会变得惨不忍睹，尤其是雅黑。怎么办呢？</p>
<p>再次看<a target='_blank' rel='nofollow' href='http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml'>《jQuery1.4中文文档》</a>，发现新增了一个函数，可将队列中的函数延时执行：</p>
<p style="text-align: center;"><span style="color: #3366ff;"><strong>.delay()</strong></span></p>
<p>用这个函数也轻松解决，调整后的jQuery代码：</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
</pre></td><td class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#close-sidebar a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;显示侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;关闭侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">delay</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>可，用最新版1.4的童鞋并不多，还是通过网络搜索学习，原来早有另外一种书写格式可实现这个函数的功能，经过尝试，当当当当，完美版出现：</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
</pre></td><td class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#close-sidebar a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;显示侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;关闭侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">800</span><span style="color: #339933;">,</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;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</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>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>把原7、8两行代码合并，即实现了主体宽度缩回后，侧边栏再显示！</p>
<p>OK，到此本文的任务已经完成，下面分享我使用“关闭/显示侧边栏”的jQuery代码：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#close-sidebar a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;显示侧边栏&quot;</span><span style="color: #009900;">&#41;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;关闭侧边栏&quot;</span><span style="color: #009900;">&#41;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">delay</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prev</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>如果你的主题侧边栏和主体的HTML结构是同级的，并且调用的是jQuery1.4版，就可以使用上述代码啦~</p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/close-show-sidebar-prefect-code.html/feed</wfw:commentRss>
		<slash:comments>90</slash:comments>
		</item>
		<item>
		<title>“关闭/显示侧边栏”最简代码版</title>
		<link>http://immmmm.com/close-show-sidebar-simple-code.html</link>
		<comments>http://immmmm.com/close-show-sidebar-simple-code.html#comments</comments>
		<pubDate>Sun, 06 Dec 2009 13:57:43 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[侧边栏]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1228</guid>
		<description><![CDATA[之前分享过《JQuery 学习笔记之：关闭/显示 WordPress侧边栏》，引燃了很多童鞋的折腾劲，不过代码稍微长了点。这次再次翻开《锋利的jQuery》这本书，突然想到新的代码： &#160; &#60;li id=&#34;close-sidebar&#34;&#62;&#60;a&#62;干掉侧边栏&#60;/a&#62;&#60;/li&#62; /* 可加在导航ul标签中 */ &#160; $&#40;'#close-sidebar a'&#41;.toggle&#40;function&#40;&#41;&#123; //选中id=&#34;close-sidebar&#34;内的a标签的内容，即“干掉侧边栏” &#160; $&#40;this&#41;.text&#40;&#34;显示侧边栏&#34;&#41;; //点击此中内容后改变成“显示侧边栏” &#160; $&#40;'#sidebar'&#41;.hide&#40;&#41;; //隐藏id=&#34;sidebar&#34;的内容，即“侧边栏” &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;960px&#34;&#125;, 1000&#41;; //让id=&#34;content&#34;，即主体部分的宽度伸长至960px，时间为1000毫秒 &#160; &#125;,function&#40;&#41;&#123; &#160; $&#40;this&#41;.text&#40;&#34;关闭侧边栏&#34;&#41;; //点击此中内容后改变成“关闭侧边栏” &#160; $&#40;'#sidebar'&#41;.show&#40;&#41;; //显示id=&#34;sidebar&#34;的内容，即“侧边栏” &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;705px&#34;&#125;, 800&#41;; //让id=&#34;content&#34;，即主体部分的宽度缩至705px，时间为800毫秒 &#160; &#125;&#41;; 相比之前，代码逻辑更为清晰简洁！特此分享~ 2010-5-8更新：《”关闭/显示侧边栏”完美终结版》]]></description>
			<content:encoded><![CDATA[<p>之前分享过<a href="http://immmmm.com/off-display-wordpress-sidebar.html">《JQuery 学习笔记之：关闭/显示 WordPress侧边栏》</a>，引燃了很多童鞋的折腾劲，不过代码稍微长了点。这次再次翻开《锋利的jQuery》这本书，突然想到新的代码：</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:Microsoft Yahei;">&nbsp;
&lt;li id<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;close-sidebar&quot;</span><span style="color: #00AA00;">&gt;</span>&lt;a<span style="color: #00AA00;">&gt;</span>干掉侧边栏&lt;/a<span style="color: #00AA00;">&gt;</span>&lt;/li<span style="color: #00AA00;">&gt;</span> <span style="color: #808080; font-style: italic;">/* 可加在导航ul标签中 */</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#close-sidebar a'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toggle</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: #006600; font-style: italic;">//选中id=&quot;close-sidebar&quot;内的a标签的内容，即“干掉侧边栏”</span>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;显示侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//点击此中内容后改变成“显示侧边栏”</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//隐藏id=&quot;sidebar&quot;的内容，即“侧边栏”</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//让id=&quot;content&quot;，即主体部分的宽度伸长至960px，时间为1000毫秒</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</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>
&nbsp;
	$<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;">text</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;关闭侧边栏&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//点击此中内容后改变成“关闭侧边栏”</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//显示id=&quot;sidebar&quot;的内容，即“侧边栏”</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">800</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//让id=&quot;content&quot;，即主体部分的宽度缩至705px，时间为800毫秒</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>相比之前，代码逻辑更为清晰简洁！特此分享~</p>
<p>2010-5-8更新：<a href="http://immmmm.com/close-show-sidebar-prefect-code.html" target="_blank">《”关闭/显示侧边栏”完美终结版》</a></p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/close-show-sidebar-simple-code.html/feed</wfw:commentRss>
		<slash:comments>75</slash:comments>
		</item>
		<item>
		<title>JQuery 学习笔记之：关闭/显示 WordPress侧边栏</title>
		<link>http://immmmm.com/off-display-wordpress-sidebar.html</link>
		<comments>http://immmmm.com/off-display-wordpress-sidebar.html#comments</comments>
		<pubDate>Mon, 02 Nov 2009 05:16:18 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[侧边栏]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1211</guid>
		<description><![CDATA[这回标题说得很清楚了，就是利用 jQuery 在 WordPress 上的一个应用，什么应用呢？就是关闭或者显示侧边栏。（点击此页面导航最右边，试一试？） 默认显示侧边栏，点击导航最右的“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，点击则过程相反。整体效果明显，就是在IE下，经过这样过程后侧边栏内的文字杯具了…… 首先，请添加下面两行代码至WordPress主题模板中，一般都放header.php的导航栏里： &#160; &#60;span class=&#34;close-sidebar&#34;&#62;关闭侧边栏&#60;/span&#62; &#160; &#60;span class=&#34;show-sidebar&#34; style=&#34;display:none;&#34;&#62;显示侧边栏&#60;/span&#62; jQuery代码详解，请复制以下代码并修后后另存为all.js： &#160; jQuery&#40;document&#41;.ready&#40;function&#40;$&#41;&#123; &#160; &#160; &#160; $&#40;'.close-sidebar'&#41;.click&#40;function&#40;&#41; &#123; //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时 &#160; $&#40;'.close-sidebar,.sidebar'&#41;.hide&#40;&#41;; //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏” &#160; $&#40;'.show-sidebar'&#41;.show&#40;&#41;; //显示class=“show-sidebar”的对象,即导航中“显示侧边栏” &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;960px&#34;&#125;, 1000&#41;; &#125;&#41;; //以1000毫秒让id=“content”的对象,即“文章主体部分”的宽度增加到960px &#160; $&#40;'.show-sidebar'&#41;.click&#40;function&#40;&#41; &#123; //点击导航中“显示侧边栏”时 &#160; $&#40;'.show-sidebar'&#41;.hide&#40;&#41;; //隐藏导航中“显示侧边栏” &#160; $&#40;'.close-sidebar,.sidebar'&#41;.show&#40;&#41;; //显示导航中“关闭侧边栏”和主题的“侧边栏” &#160; $&#40;'#content'&#41;.animate&#40;&#123;width: &#34;705px&#34;&#125;, 1000&#41;;&#125;&#41;; //以1000毫秒让“文章主体部分”的宽度收缩回705px &#160; &#160; &#160; &#125;&#41;; 看懂上面代码的童鞋应该知道需修改其中部分属性及属性值，至少你需要查看自己主题的侧边栏样式是不是class=“sidebar”，主体又是不是id=“content”，不是则修改之；另外那个宽度width值也需相应修改！ [...]]]></description>
			<content:encoded><![CDATA[<p>这回标题说得很清楚了，就是利用 jQuery 在 WordPress 上的一个应用，什么应用呢？就是关闭或者显示侧边栏。（点击此页面导航最右边，试一试？）</p>
<p style="text-align: center;"><img class="pie-img" src="http://lh5.googleusercontent.com/_65ZfNm-tR48/Su5HvTb1g6I/AAAAAAAADA0/YTP1bvpK4UY/csidebar_01.jpg?imgmax=720" alt="csidebar_01.jpg" /> <img class="pie-img" src="http://lh4.googleusercontent.com/_65ZfNm-tR48/Su5Htv_Xh2I/AAAAAAAADAw/Mb9bxZuyZuU/csidebar_02.jpg?imgmax=720" alt="csidebar_02.jpg" /></p>
<p>默认显示侧边栏，点击导航最右的“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，点击则过程相反。整体效果明显，<del datetime="2009-11-02T11:54:48+00:00">就是在IE下，经过这样过程后侧边栏内的文字杯具了……</del><span id="more-1211"></span></p>
<p>首先，请添加下面两行代码至WordPress主题模板中，一般都放header.php的导航栏里：</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:Microsoft Yahei;">&nbsp;
&lt;span class<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;close-sidebar&quot;</span><span style="color: #00AA00;">&gt;</span>关闭侧边栏&lt;/span<span style="color: #00AA00;">&gt;</span>
&nbsp;
&lt;span class<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;show-sidebar&quot;</span> style<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;display:none;&quot;</span><span style="color: #00AA00;">&gt;</span>显示侧边栏&lt;/span<span style="color: #00AA00;">&gt;</span></pre></div></div>

<p>jQuery代码详解，请复制以下代码并修后后另存为all.js：</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:Microsoft Yahei;">&nbsp;
jQuery<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>
&nbsp;
&nbsp;
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.close-sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</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: #006600; font-style: italic;">//点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.close-sidebar,.sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>       <span style="color: #006600; font-style: italic;">//隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏”</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.show-sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>      <span style="color: #006600; font-style: italic;">//显示class=“show-sidebar”的对象,即导航中“显示侧边栏”</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;960px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</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: #006600; font-style: italic;">//以1000毫秒让id=“content”的对象,即“文章主体部分”的宽度增加到960px</span>
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.show-sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</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: #006600; font-style: italic;">//点击导航中“显示侧边栏”时</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.show-sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>             <span style="color: #006600; font-style: italic;">//隐藏导航中“显示侧边栏”</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.close-sidebar,.sidebar'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>        <span style="color: #006600; font-style: italic;">//显示导航中“关闭侧边栏”和主题的“侧边栏”</span>
&nbsp;
   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#content'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>width<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;705px&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</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: #006600; font-style: italic;">//以1000毫秒让“文章主体部分”的宽度收缩回705px</span>
&nbsp;
&nbsp;
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>看懂上面代码的童鞋应该知道需修改其中部分<strong><span style="color: #3366ff;">属性及属性值</span></strong>，至少你需要查看自己主题的侧边栏样式是不是class=“sidebar”，主体又是不是id=“content”，不是则修改之；另外那个宽度width值也需相应修改！</p>
<p>最后，在header.php里载入jQuery库及这个JS：</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:Microsoft Yahei;">&nbsp;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://xxxooo.xxx/xxxooo/all.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>OK，搞定！不过你现在可还没有伸缩抖动的效果，需另加载一个<a href="https://dl-web.dropbox.com/u/837457/jquery.easing.1.3.7z">jquery.easing.js</a> ，然后修改文中jQuery部分代码。为方面各位同学对照学习，提供两者合并后的JS：</p>
<p style="text-align: center;"><a href="https://dl-web.dropbox.com/u/837457/off-display-sidebar.7z"><span style="color: #3366ff;"><strong>off-display-sidebar.7z</strong></span></a></p>
<p><strong>友情提醒：</strong>在修改时请尤其注意，不要多删一个符号，不要少加一个符号，我就是因为少了个<strong>“);”</strong>，硬生生让我多折腾了一个多小时……</p>
<p><strong>2009年12月6日：</strong>更新代码，详情看此文<a href="http://immmmm.com/close-show-sidebar-simple-code.html">《”关闭/显示侧边栏”最简代码版》</a></p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/off-display-wordpress-sidebar.html/feed</wfw:commentRss>
		<slash:comments>133</slash:comments>
		</item>
		<item>
		<title>关于 WordPress 侧边栏的种种</title>
		<link>http://immmmm.com/say-about-wordpress-sidebar.html</link>
		<comments>http://immmmm.com/say-about-wordpress-sidebar.html#comments</comments>
		<pubDate>Wed, 15 Jul 2009 14:11:00 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[Simple-Lines]]></category>
		<category><![CDATA[WordPress技巧]]></category>
		<category><![CDATA[侧边栏]]></category>
		<category><![CDATA[小工具]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1165</guid>
		<description><![CDATA[几天前正式发布了WordPress主题：Simple-Lines ，为使主题简洁侧边栏也完全采用原生的后台小工具，但问题随之而来，小工具的功能太少了，完全不能满足各位童鞋的需要，侧边栏就显得有点单薄了。下面，木木童鞋就结合上篇文章推荐的WordPress插件：WP Kit CN，尽可能得使侧边栏不再鸡肋，满足我们大众的需求。 首先简单说明一个问题：如何使后台小工具与手动在sidebar添加的功能同时显示于侧边栏？如何解决，其实很简单，不过此方法不能算完美，那就先来看看怎么个简单法吧~ 一般主题都把侧边栏的手动代码添加在2、4行间，当用户在后台添加小工具后，侧边栏就只显示后台内置的小工具，而手动代码添加的功能就失效了。对了，真聪明！我们可以把代码移动到第1行或者第5行，这样就不受后台是否添加小工具的影响了！那刚才说的“不完美”也显而易见，后台小工具的显示要么最前、要么中间、要么最后，这只能算个折中的办法…… 当当当当，主角出场：WP Kit CN，此插件改自大名鼎鼎历史悠久国人强作《WordPress中文工具箱》，增强之处就是集成了6个原本需要通过手动添加代码于侧边栏的小工具，开启此插件后我们就可以在后台小工具使用：最近n天评论最多用户Widget、评论最多的文章Widget、随机文章Widget、本周或本月评论之星Widget、最新评论Widget、高级友情链接Widget，而且超多自定义显示调节选项，让原生小工具顿时黯然失色！ 通过WP Kit CN侧边栏显示的内容大大增强，不过，有个小问题，就是样式不怎么美观，而且插件作者也并没提供样式代码。不不过，没关系，自己动手，丰衣足食！ WP Kit CN修改版，(Simple-Lines主题样式专用)，修改了后台6个小工具默认定义的样式，使完美显示于Simple-Lines主题！ 接下来，强烈推荐建议使用Simple-Lines主题的童鞋，通过手动代码添加侧边栏的功能，因为WP Kit CN可使用的函数有9个，也就是说其中3个是没有集成到后台小工具中的！下面分享在Simple-Lines主题下完整的调用代码： &#60;div class=&#34;widget_recent_entries&#34;&#62; &#60;h3&#62;&#60;span&#62;本月热评&#60;/span&#62;&#60;/h3&#62; &#60;ul&#62;&#60;?php wkc_most_commented_posts&#40;'number=10&#38;days=30'&#41;; ?&#62;&#60;/ul&#62; &#60;/div&#62; &#60;div class=&#34;widget_recent_comments&#34;&#62; &#60;h3&#62;&#60;span&#62;最新评论&#60;/span&#62;&#60;/h3&#62; &#60;ul&#62;&#60;?php wkc_recent_comments&#40;'number=10&#38;length=25'&#41;; ?&#62;&#60;/ul&#62; &#60;/div&#62; &#60;div class=&#34;widget_recent_entries&#34;&#62; &#60;h3&#62;&#60;span&#62;相关文章&#60;/span&#62;&#60;/h3&#62; &#60;ul&#62;&#60;?php wkc_related_posts&#40;'number=10'&#41;; ?&#62;&#60;/ul&#62; &#60;/div&#62; &#60;div class=&#34;widget_recent_entries&#34;&#62; &#60;h3&#62;&#60;span&#62;最新文章&#60;/span&#62;&#60;/h3&#62; &#60;ul&#62;&#60;?php wkc_recent_posts&#40;'number=10'&#41;; ?&#62;&#60;/ul&#62; &#60;/div&#62; &#60;div class=&#34;widget_recent_entries&#34;&#62; &#60;h3&#62;&#60;span&#62;随机文章&#60;/span&#62;&#60;/h3&#62; &#60;ul&#62;&#60;?php wkc_random_posts&#40;'number=10&#38;length=40'&#41;; ?&#62;&#60;/ul&#62; &#60;/div&#62; &#60;div class=&#34;widget_recent_comments&#34;&#62; [...]]]></description>
			<content:encoded><![CDATA[<p>几天前正式发布了WordPress主题：<a href="http://immmmm.com/wordpress-theme-simple-lines.html">Simple-Lines</a> ，为使主题简洁侧边栏也完全采用原生的后台小工具，但问题随之而来，小工具的功能太少了，完全不能满足各位童鞋的需要，侧边栏就显得有点单薄了。下面，木木童鞋就结合上篇文章推荐的WordPress插件：<a href="http://immmmm.com/wordpress-plugins-wp-kit-cn.html">WP Kit CN</a>，尽可能得使侧边栏不再鸡肋，满足我们大众的需求。</p>
<p>首先简单说明一个问题：<strong>如何使后台小工具与手动在sidebar添加的功能同时显示于侧边栏？</strong>如何解决，其实很简单，不过此方法不能算完美，那就先来看看怎么个简单法吧~</p>
<p style="text-align: center; "><img class="pie-img" src="https://lh6.googleusercontent.com/_65ZfNm-tR48/Sl3XGmCqcUI/AAAAAAAACbM/s3zthXx6SJs/cbl.jpg?imgmax=720" alt="cbl.jpg" /></p>
<p><span id="more-1165"></span>一般主题都把侧边栏的手动代码添加在2、4行间，当用户在后台添加小工具后，侧边栏就只显示后台内置的小工具，而手动代码添加的功能就失效了。对了，真聪明！我们可以把代码移动到第1行或者第5行，这样就不受后台是否添加小工具的影响了！那刚才说的“不完美”也显而易见，后台小工具的显示要么最前、要么中间、要么最后，这只能算个折中的办法……</p>
<p>当当当当，主角出场：<a href="http://immmmm.com/wordpress-plugins-wp-kit-cn.html">WP Kit CN</a>，此插件改自大名鼎鼎历史悠久国人强作《WordPress中文工具箱》，增强之处就是集成了6个原本需要通过手动添加代码于侧边栏的小工具，开启此插件后我们就可以在后台小工具使用：最近n天评论最多用户Widget、评论最多的文章Widget、随机文章Widget、本周或本月评论之星Widget、最新评论Widget、高级友情链接Widget，而且超多自定义显示调节选项，让原生小工具顿时黯然失色！</p>
<p>通过WP Kit CN侧边栏显示的内容大大增强，不过，有个小问题，就是样式不怎么美观，而且插件作者也并没提供样式代码。不不过，没关系，自己动手，丰衣足食！</p>
<p><strong>WP Kit CN修改版，(<a href="https://dl-web.dropbox.com/u/837457/wp-kit-cn.7z">Simple-Lines主题样式专用</a>)</strong>，修改了后台6个小工具默认定义的样式，使完美显示于Simple-Lines主题！</p>
<p>接下来，强烈推荐建议使用Simple-Lines主题的童鞋，通过手动代码添加侧边栏的功能，因为WP Kit CN可使用的函数有9个，也就是说其中3个是没有集成到后台小工具中的！下面分享在Simple-Lines主题下完整的调用代码：</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:Microsoft Yahei;">&lt;div class=&quot;widget_recent_entries&quot;&gt;
	&lt;h3&gt;&lt;span&gt;本月热评&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_most_commented_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'number=10&amp;days=30'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;widget_recent_comments&quot;&gt;
	&lt;h3&gt;&lt;span&gt;最新评论&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_recent_comments<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'number=10&amp;length=25'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;widget_recent_entries&quot;&gt;
	&lt;h3&gt;&lt;span&gt;相关文章&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_related_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'number=10'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;widget_recent_entries&quot;&gt;
	&lt;h3&gt;&lt;span&gt;最新文章&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_recent_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'number=10'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;widget_recent_entries&quot;&gt;
	&lt;h3&gt;&lt;span&gt;随机文章&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_random_posts<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'number=10&amp;length=40'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;widget_recent_comments&quot;&gt;
	&lt;h3&gt;&lt;span&gt;本月最水&lt;/span&gt;&lt;/h3&gt;
	&lt;ul&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> wkc_recent_commentors<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'type=month&amp;skipuser=admin'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/ul&gt;
&lt;/div&gt;</pre></div></div>

<p>当然，以上代码不是一个整体，是以一对div包围的代码为一个单位的一个功能，各位童鞋可以把它手动添加到sidebar.php中小工具插入代码之前（图中的第1行）、之间（第3行）或者之后（第5行），这样完美又向完美显示侧边栏接近了一大步！</p>
<p><strong>友情提示</strong>：Simple-Lines主题采用了首页与文章页侧边栏的分离，而WP Kit CN插件集成到后台的小工具就只能用一次，所以这也是我强烈推荐建议各位童鞋使用手动添加代码方式的根本原因！另外，若侧边栏出现乱码更改sidebar.php文件的编码为UTF-8即可~~</p>
<p>PS：发表一看，哇，都敲了那么多字啦，看来是有几天没写憋坏了…………</p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/say-about-wordpress-sidebar.html/feed</wfw:commentRss>
		<slash:comments>55</slash:comments>
		</item>
		<item>
		<title>WordPress 侧边栏加强插件：WP Kit CN</title>
		<link>http://immmmm.com/wordpress-plugins-wp-kit-cn.html</link>
		<comments>http://immmmm.com/wordpress-plugins-wp-kit-cn.html#comments</comments>
		<pubDate>Wed, 15 Jul 2009 12:19:08 +0000</pubDate>
		<dc:creator>林木木</dc:creator>
				<category><![CDATA[折腾无休]]></category>
		<category><![CDATA[WordPress插件]]></category>
		<category><![CDATA[侧边栏]]></category>
		<category><![CDATA[后台]]></category>
		<category><![CDATA[小工具]]></category>

		<guid isPermaLink="false">http://immmmm.com/?p=1166</guid>
		<description><![CDATA[此款插件制作目标是：让不懂PHP，不懂HTML的您，可以使用几乎全部的功能！ 可使用函数： wkc_recent_comments()  显示最新评论 wkc_recent_pings() 显示最新回响，包括pingback和trackback wkc_recent_posts() 显示最新文章 wkc_most_commented_posts() 显示评论最多的文章 wkc_random_posts() 显示随机文章 wkc_most_active_commentors() 显示n天内，评论最多的用户 wkc_recent_commentors() 显示本周或者本月内评论最多的用户 wkc_related_posts() 显示相关文章 wkc_posts_in_the_same_categories() 输出同一个分类下的文章 可使用小工具： 最近n天评论最多用户Widget 评论最多的文章Widget 随机文章Widget 本周或本月评论之星Widget 最新评论Widget 高级友情链接Widget 官方下载（这里），具体使用说明请看：《WP Kit CN 文档》 PS：此文仅作推荐，下文将详细讲解，使此插件完美与Simple-Lines融合！]]></description>
			<content:encoded><![CDATA[<p>此款插件制作目标是：<strong>让不懂PHP，不懂HTML的您，可以使用几乎全部的功能！</strong></p>
<p>可使用函数：</p>
<blockquote><p>wkc_recent_comments()  显示最新评论<br />
wkc_recent_pings() 显示最新回响，包括pingback和trackback<br />
wkc_recent_posts() 显示最新文章<br />
wkc_most_commented_posts() 显示评论最多的文章<br />
wkc_random_posts() 显示随机文章<br />
wkc_most_active_commentors() 显示n天内，评论最多的用户<br />
wkc_recent_commentors() 显示本周或者本月内评论最多的用户<br />
wkc_related_posts() 显示相关文章<br />
wkc_posts_in_the_same_categories() 输出同一个分类下的文章</p></blockquote>
<p><span id="more-1166"></span>可使用小工具：</p>
<blockquote><p>最近n天评论最多用户Widget<br />
评论最多的文章Widget<br />
随机文章Widget<br />
本周或本月评论之星Widget<br />
最新评论Widget<br />
高级友情链接Widget</p></blockquote>
<p>官方下载（<a href="http://wordpress.org/extend/plugins/wp-kit-cn/">这里</a>），具体使用说明请看：<a href="http://sexywp.com/wp-kit-cn-doc">《WP Kit CN 文档》</a></p>
<p>PS：此文仅作推荐，下文将详细讲解，使此插件完美与<a href="http://immmmm.com/wordpress-theme-simple-lines.html">Simple-Lines</a>融合！</p>
]]></content:encoded>
			<wfw:commentRss>http://immmmm.com/wordpress-plugins-wp-kit-cn.html/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
	</channel>
</rss>

