<?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>nan.im &#187; WordPress</title>
	<atom:link href="http://nan.im/blog/tags/wordpress/feed" rel="self" type="application/rss+xml" />
	<link>http://nan.im/blog</link>
	<description></description>
	<lastBuildDate>Sat, 28 Jan 2012 05:58:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>【WP】如何添加新版 WordPress 菜单系统代码</title>
		<link>http://nan.im/blog/1271</link>
		<comments>http://nan.im/blog/1271#comments</comments>
		<pubDate>Sat, 19 Jun 2010 09:27:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CMS 内容管理系统]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1271</guid>
		<description><![CDATA[WordPress.org 昨天释放了 3.0 的正式版的更新，在新版 WordPress 中引入了一个新的系统 “MENU” 菜单系统 WP 的新菜单系统和 Drupal 及其他 CMS 的菜单系统功能基本相同但使用上更为方便也使 WordPress 在主题开发者和用户使用者直接建立了又一座友好的桥梁，下面提供一些代码给主题（theme）开发者尽快将你的主题升级开启（menu）菜单系统的支持…… 函数语法： Menus SubPanel：http://codex.wordpress.org/Appearance_Menus_SubPanel wp_nav_menu：http://codex.wordpress.org/Function_Reference/wp_nav_menu register_nav_menus：http://codex.wordpress.org/Function_Reference/register_nav_menus 组件模式： 考虑到目前绝大多数主题模板均不支持新版的菜单系统所以 WordPress 3.0 添加了一个专门为菜单系统使用的 Widget 小组件叫 CustomMenu 定制菜单，对于不支持新菜单系统的主题使用者仍然可以在后台 外观 &#8211; 菜单 页面创建一个新的菜单，然后使用 CustomMenu Widget 加载到页面的小组件区域显示，正式版加入的这个小组件使得目前所有的主题无需任何修改即可平滑的支持新版菜单系统，之前在 RC 版则需要为主题添加 add_theme_support(&#8216;nav-menus&#8217;) 语句才能开启菜单系统，但使用组件的缺点是显而易见的，使用者只能将菜单放置到小工具的位置以固定的结构显示，这个时候其实和之前的链接 Links Widget 小组件并没有什麽区别甚至可定制性更差，所以我们需要对主题模板做一些修改使其支持最新版的 WordPress 菜单系统。 菜单简介： 之前 WordPress 的链接功能虽然可以实现部分菜单的功能，因为我也发现很多主题开发者使用链接功能来使用户可以方便的定制自己的导航和菜单，在新版 WordPress 中则提供了更为自由和先进的菜单系统，就像我之前所说的他为主题开发者和模板使用者直接架起了又一座友好的桥梁，使开发者不用为了一个菜单或导航的变动而修改源代码，用户可以根据自己的情况随时 添加 删除 排序 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://wordpress.org/">WordPress.org</a> 昨天释放了 3.0 的正式版的更新，在新版 WordPress 中引入了一个新的系统 “MENU” 菜单系统 WP 的新菜单系统和 Drupal 及其他 CMS 的菜单系统功能基本相同但使用上更为方便也使 WordPress 在主题开发者和用户使用者直接建立了又一座友好的桥梁，下面提供一些代码给主题（theme）开发者尽快将你的主题升级开启（menu）菜单系统的支持……<span id="more-1271"></span></p>
<h3>函数语法：</h3>
<blockquote>
<p>Menus SubPanel：<a href="http://goo.gl/f7Gk">http://codex.wordpress.org/Appearance_Menus_SubPanel</a></p>
<p>wp_nav_menu：<a href="http://goo.gl/rcrE">http://codex.wordpress.org/Function_Reference/wp_nav_menu</a></p>
<p>register_nav_menus：<a href="http://goo.gl/RUmG">http://codex.wordpress.org/Function_Reference/register_nav_menus</a></p>
</blockquote>
<h3>组件模式：</h3>
<p>考虑到目前绝大多数主题模板均不支持新版的菜单系统所以 WordPress 3.0 添加了一个专门为菜单系统使用的 Widget 小组件叫 CustomMenu 定制菜单，对于不支持新菜单系统的主题使用者仍然可以在后台 外观 &#8211; 菜单 页面创建一个新的菜单，然后使用 CustomMenu Widget 加载到页面的小组件区域显示，正式版加入的这个小组件使得目前所有的主题无需任何修改即可平滑的支持新版菜单系统，之前在 RC 版则需要为主题添加 add_theme_support(&#8216;nav-menus&#8217;) 语句才能开启菜单系统，但使用组件的缺点是显而易见的，使用者只能将菜单放置到小工具的位置以固定的结构显示，这个时候其实和之前的链接 Links Widget 小组件并没有什麽区别甚至可定制性更差，所以我们需要对主题模板做一些修改使其支持最新版的 WordPress 菜单系统。</p>
<h3>菜单简介：</h3>
<p>之前 WordPress 的链接功能虽然可以实现部分菜单的功能，因为我也发现很多主题开发者使用链接功能来使用户可以方便的定制自己的导航和菜单，在新版 WordPress 中则提供了更为自由和先进的菜单系统，就像我之前所说的他为主题开发者和模板使用者直接架起了又一座友好的桥梁，使开发者不用为了一个菜单或导航的变动而修改源代码，用户可以根据自己的情况随时 添加 删除 排序 层级 排列菜单系统，更可以直接在后台页面设置一些菜单属性如 打开方式 菜单描述 链接关系 等等，而这一切只需要添加很少的代码即可实现……</p>
<h3>基本运用：</h3>
<p>例如，我们在 WP 后台的 外观 &#8211; 菜单 页面添加了一个新的菜单其名称为 “菜单示例” 然后在主题模板中就可以使用 wp_nav_menu(&#8216;menu&#8217; => &#8216;菜单示例&#8217;) 来直接调用这个菜单不过具体操作中尽量不要使用中文，因为默认该函数会以菜单名称做为 class 或者 id 的一部分，虽然可以使用参数 container_class 来覆写最外层的 class 但下一级的 ul 仍会引用菜单名称为 id 的一部分。</p>
<h3>高级应用：</h3>
<p>但显然该方式并不灵活，因为我们的开发者需要告知用户创建菜单的名称是什麽，双方必须有一个约定期间如果有任何差别菜单都不会被正确的显示，这可不是我们所需要的于是更高级的应用则是使用 register_nav_menus 函数为主题注册一个菜单位置（Theme Locations）然后由用户来觉得将哪个菜单什么样的菜单放置到这个主题位置中去，这有点类似 drupal 中的区块（block）概念，这是一个平滑友好的接口：</p>
<p>首先，需要在主题中注册声明菜单位置：需要在你的主题模板 functions.php 中添加一个新的注册语句 register_nav_menus 该函数接收一个数组参数做为注册的菜单项，例要添加两个菜单一个用于导航一个用于页脚链接如 register_nav_menus(array(&#8216;topMenu&#8217; => &#8216;导航&#8217;, &#8216;subMenu&#8217; => &#8216;页脚&#8217;)) 其中参数数组的下标用于在内部程序调用数组内容则显示给后台用户，添加该语句之后就可以在后台 外观 &#8211; 菜单 界面看到 Theme Locations 选择区块了，里面也可以看到我们新添加的这两个菜单位置一个叫导航另一个页脚；</p>
<p>然后，需要在主题模板文件中调用菜单：开发者可根据自己的需求在需要显示菜单的位置使用 wp_nav_menu 函数调用输出由用户自行配置的菜单如要输出导航位置的菜单可使用 wp_nav_menu(array(&#8216;theme_location&#8217; => &#8216;topMenu&#8217;)) 使用参数 theme_location 来指定前面声明的菜单位置，这样就建立了一个很好的中间层帮助用户和开发者处理菜单链接的问题。</p>
<h3>补充说明：</h3>
<p>另外 wp_nav_menu 也支持很多参数可供调用如：参数 container_id 和 container_class 用来定义输出的菜单外层标签属性；参数 container 用来定义菜单外层的 HTML 标签类型如 div 等等；参数 menu_id 和 menu_class 可用来定义菜单 ul 的 class 属性；参数 echo 可控制返回 return 还是直接输出我觉得 WP 的多数函数都应该添加该参数或者都改为 return 返回方式就像 drupal 一样返回值而不是输出；另外还有很多参数可从本文开头提供的链接查询。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1271/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>【WP】新版发布 WordPress 3.0 新增功能简介</title>
		<link>http://nan.im/blog/1268</link>
		<comments>http://nan.im/blog/1268#comments</comments>
		<pubDate>Fri, 18 Jun 2010 10:03:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CMS 内容管理系统]]></category>
		<category><![CDATA[Evaluating 评测]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1268</guid>
		<description><![CDATA[WordPress.org 之前也有一直在提供 3.0RC 的下载我自己也装过但没仔细去看，今天发现 WordPress 3.0 正式版已向所有用户释放，总的来说感觉这次改进并没有多数用户所期待的那样明显，但毕竟 WordPress 发展到现在，做为一套个人 Blog 系统已经是非常完美和完善了 WordPress 非常清楚自己的定位，如果你拿一套超级 CMS 眼光去衡量肯定是不合理的，虽然 Drupal Joomla 之类的 CMS 已经非常强大，但对于个人站长或博客来说 WordPress 更适合我们，文章最后有一段新版 WP3 的官方介绍视频英文不错的朋友可以略过本文直接查看官方英文视频介绍…… 安装过程 整个安装过程与之前的版本并没有太多区别，唯一的改进是终于可以自定义超级管理员的用户名和密码了，不用使用默认的管理员名称和随机密码登录再修改那么麻烦了。 界面调整 新版的 WordPress 后台管理界面也做了小小的调整，原来位于“工具”菜单下面的的“升级”功能被挪到了“控制面板”下，主题管理页面的版式有了小小的改进，选项卡式的页面确实层次清晰也使用方便重要的是便于展示主题的缩略图，但安装插件的页面仍是旧的一个“Add New”按钮后期应该也会有所改变。 默认主题 新版 WordPress 只附带了一个默认主题叫 Twenty Ten 该主题支持 WP 3.0 的一些特性：可更换头部图片 颜色 背景等，特别的是支持 WordPress 3.0 中新引入的 “Menu” 菜单系统，这使得没有 HTML CSS PHP 经验的用户也可以方便的定制博客上的链接菜单。 菜单系统 新版 WordPress [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://wordpress.org/">WordPress.org</a> 之前也有一直在提供 3.0RC 的下载我自己也装过但没仔细去看，今天发现 WordPress 3.0 正式版已向所有用户释放，总的来说感觉这次改进并没有多数用户所期待的那样明显，但毕竟 WordPress 发展到现在，做为一套个人 Blog 系统已经是非常完美和完善了 WordPress 非常清楚自己的定位，如果你拿一套超级 CMS 眼光去衡量肯定是不合理的，虽然 Drupal Joomla 之类的 CMS 已经非常强大，但对于个人站长或博客来说 WordPress 更适合我们，文章最后有一段新版 WP3 的官方介绍视频英文不错的朋友可以略过本文直接查看官方英文视频介绍……<span id="more-1268"></span></p>
<p><center><embed src="http://player.youku.com/player.php/sid/XMTgyNjcyNDY4/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed></center></p>
<h3>安装过程</h3>
<p>整个安装过程与之前的版本并没有太多区别，唯一的改进是终于可以自定义超级管理员的用户名和密码了，不用使用默认的管理员名称和随机密码登录再修改那么麻烦了。</p>
<h3>界面调整</h3>
<p>新版的 WordPress 后台管理界面也做了小小的调整，原来位于“工具”菜单下面的的“升级”功能被挪到了“控制面板”下，主题管理页面的版式有了小小的改进，选项卡式的页面确实层次清晰也使用方便重要的是便于展示主题的缩略图，但安装插件的页面仍是旧的一个“Add New”按钮后期应该也会有所改变。</p>
<h3>默认主题</h3>
<p>新版 WordPress 只附带了一个默认主题叫 Twenty Ten 该主题支持 WP 3.0 的一些特性：可更换头部图片 颜色 背景等，特别的是支持 WordPress 3.0 中新引入的 “Menu” 菜单系统，这使得没有 HTML CSS PHP 经验的用户也可以方便的定制博客上的链接菜单。</p>
<h3>菜单系统</h3>
<p>新版 WordPress 引入了一个新的菜单系统，该系统可以使用户方便的修改定制模板中涉及菜单和链接列表的内容条目，新的菜单系统为 WordPress 用户和主题开发者之间建立了又一座友好的桥梁，明天我会专门针对 WordPress 3.0 的菜单系统做一个详细的说明和代码演示。</p>
<h3>其他改进</h3>
<p>其他的一些改进多是 WordPress 原来已经有的一些功能在 3.0 新版系统中进行的优化和完善如：用于定制内容类型的 <a href="http://codex.wordpress.org/Function_Reference/register_post_type">register_post_type</a> 及用于定制分类内容的 <a href="http://codex.wordpress.org/Function_Reference/register_taxonomy">register_taxonomy</a> 其实在之前的 WordPress 中也有这里进行了完善，另外 <a href="http://mu.wordpress.org/">WordPress MU</a> 也在 3.0 版本并入主分支但默认并没有开启，这里我也不推荐个人站点开启该功能实在没有必要，如果指望用 WordPress MU 做一个 Blog Service Provider 的话虽然技术上可以但市场运作成功的概率几乎为零，另外之前版本的 WordPress 只支持 wp.me 的网址缩写在新版中可支持个人域名的网址缩写，暂时我只有看到有上面这些改进或变化，后续随着运用和开发的深入我会继续更新本文……</p>
<p>新版 WordPress 视频：<a href="http://player.youku.com/player.php/sid/XMTgyNjcyNDY4/v.swf" rel="shadowbox[sbpost-1268];width=800;height=600;">官方新版 WordPress 介绍视频</a></p>
<p>新版 WordPress 下载：<a href="http://wordpress.org/latest.zip">http://wordpress.org/latest.zip</a>（支持下载工具）</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1268/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>小站换新衣了 新的 WordPress 主题</title>
		<link>http://nan.im/blog/1226</link>
		<comments>http://nan.im/blog/1226#comments</comments>
		<pubDate>Sat, 20 Mar 2010 12:33:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[无聊日记]]></category>
		<category><![CDATA[Design 设计]]></category>
		<category><![CDATA[Diary 日记]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">/blog/?p=1226</guid>
		<description><![CDATA[可能你已经看到了本博换了一件新 WordPress 衣服，最近花了点时间重新做了一个 WordPress 主题，并没有太多的设计成份，毕竟一个小小的博客还是应该以内容为主的，新主题使用了一些 CSS3 的特性及 Win7 的新字体，所以 IE 浏览器可能无法获得最佳的显示效果，建议使用 Firefox 或者 Chrome 等符合 W3C 标准的浏览器，不仅仅是为了某个网站，更为了广大的网站前端工作者，我们比任何人都期待 IE6 的彻底消失。虽然从统计数据上看本站的 80% 的访问者都在使用 IE 浏览器，但今天可能要对其中 44% 的 IE6 用户说抱歉了，本主题暂时未计划处理 IE6 的兼容性问题…… 上面是本站之前的 2009 版主题截图留个纪念，之前横幅区的几个快捷链接被我暂时放到了右边栏上，在新版的主题上我会尽量使更换横幅图片变得容易些从而能够保持横幅图片的更新，但考虑到小博客只是我个人的业余爱好，更新缓慢也是正常的 ^_^ 毕竟主要的精力还是应该在工作上。 另外关于本博的三个谷歌广告位，或许看起来感觉多了些，但我个人也是考虑希望能够通过谷歌广告的收入来支付小站的空间租用费用，不喜欢广告的同学可以用 Firefox 或者 Chrome 浏览器加上 AdBlock 插件即可轻松过滤掉本站所有的广告栏目了。 新 WordPress 主题问题肯定有很多，有在浏览本站时碰到显示或其他问题可在我的 留言板 中反馈。]]></description>
			<content:encoded><![CDATA[<p>可能你已经看到了本博换了一件新 WordPress 衣服，最近花了点时间重新做了一个 WordPress 主题，并没有太多的设计成份，毕竟一个小小的博客还是应该以内容为主的，新主题使用了一些 CSS3 的特性及 Win7 的新字体，所以 IE 浏览器可能无法获得最佳的显示效果，建议使用 Firefox 或者 Chrome 等符合 W3C 标准的浏览器，不仅仅是为了某个网站，更为了广大的网站前端工作者，我们比任何人都期待 IE6 的彻底消失。虽然从统计数据上看本站的 80% 的访问者都在使用 IE 浏览器，但今天可能要对其中 44% 的 IE6 用户说抱歉了，本主题暂时未计划处理 IE6 的兼容性问题……<span id="more-1226"></span></p>
<p><center><a href="http://anyliv.com/blog/wp-content/uploads/anyLiv-blog-2010-0319.jpg" rel="shadowbox[sbpost-1226];player=img;" title="anyLiv-blog-2010-0319"><img src="http://anyliv.com/blog/wp-content/uploads/anyLiv-blog-2010-0319-364x225.jpg" alt="" title="anyLiv-blog-2010-0319" width="364" height="225" class="aligncenter size-thumbnail wp-image-1227" /></a></center></p>
<p>上面是本站之前的 2009 版主题截图留个纪念，之前横幅区的几个快捷链接被我暂时放到了右边栏上，在新版的主题上我会尽量使更换横幅图片变得容易些从而能够保持横幅图片的更新，但考虑到小博客只是我个人的业余爱好，更新缓慢也是正常的 ^_^ 毕竟主要的精力还是应该在工作上。</p>
<p>另外关于本博的三个谷歌广告位，或许看起来感觉多了些，但我个人也是考虑希望能够通过谷歌广告的收入来支付小站的空间租用费用，不喜欢广告的同学可以用 <a href="http://www.mozilla.com/">Firefox</a> 或者 <a href="http://www.google.com/chrome">Chrome</a> 浏览器加上 AdBlock 插件即可轻松过滤掉本站所有的广告栏目了。</p>
<p>新 WordPress 主题问题肯定有很多，有在浏览本站时碰到显示或其他问题可在我的 <a href="http://anyLiv.com/blog/note">留言板</a> 中反馈。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1226/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>如何在 WordPress 安装目录外调用 WP 函数</title>
		<link>http://nan.im/blog/1200</link>
		<comments>http://nan.im/blog/1200#comments</comments>
		<pubDate>Sat, 06 Feb 2010 15:17:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1200</guid>
		<description><![CDATA[通常我们会把 WordPress 安装到站点根域名的 /blog/ 目录，这样将非常方便以后拓展其他站点功能，可如果要在站点的根目录如 “/” 调用最新发布的文章该怎么办？大概有这么几种方法：最为直接的方法是使用 PHP 读取 WordPress 数据库的 posts 表取出最新更新的内容；另一种使用 PHP 或者 JavaScript 抓出 WordPress 的 RSS 订阅内容；第三种方法就是我下面要介绍的直接使用 WordPress 自带函数在非安装目录输出想要的内容…… 代码很简单：require(&#8216;/blog/wp-blog-header.php&#8217;) 在要使用 WP 函数的页面直接 require 引入 wp-blog-header.php 文件即可，具体路径根据情况修改。 引入 wp-blog-header.php 文件之后就可以在该页面使用诸如 get_archives(&#8216;postbypost&#8217;, 10) 之类的 WordPress 自带函数了，非常方便！]]></description>
			<content:encoded><![CDATA[<p>通常我们会把 WordPress 安装到站点根域名的 /blog/ 目录，这样将非常方便以后拓展其他站点功能，可如果要在站点的根目录如 “/” 调用最新发布的文章该怎么办？大概有这么几种方法：最为直接的方法是使用 PHP 读取 WordPress 数据库的 posts 表取出最新更新的内容；另一种使用 PHP 或者 JavaScript 抓出 WordPress 的 RSS 订阅内容；第三种方法就是我下面要介绍的直接使用 WordPress 自带函数在非安装目录输出想要的内容……<span id="more-1200"></span></p>
<p>代码很简单：require(&#8216;/blog/wp-blog-header.php&#8217;) 在要使用 WP 函数的页面直接 require 引入 wp-blog-header.php 文件即可，具体路径根据情况修改。</p>
<p>引入 wp-blog-header.php 文件之后就可以在该页面使用诸如 get_archives(&#8216;postbypost&#8217;, 10) 之类的 WordPress 自带函数了，非常方便！</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1200/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>【WordPress】如何给 WP 增加单篇文章的分页功能</title>
		<link>http://nan.im/blog/1180</link>
		<comments>http://nan.im/blog/1180#comments</comments>
		<pubDate>Sat, 02 Jan 2010 14:12:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1180</guid>
		<description><![CDATA[目前的 WordPress 虽然内核早已支持文章分页功能，但后台编辑器的分页按钮一直被注释掉，包括官方附带模板在内的绝大多数模板也并不支持文章分页功能。这里提供一些代码帮助你修改模板使你的 WordPress 前端支持单文章分页符的显示，后台编辑器上也添加分页符添加按钮等功能，而重要的是不涉及 WordPress 核心代码，未来升级 WordPress 将不需要修改这些代码…… 一、首先是为后台的管理页面添加一个 JavaScript 的入口，代码添加于主题的 functions.php 文件中： if(is_admin()){ wp_enqueue_script('admins', WP_CONTENT_URL.'/.../jquery.admin.dev.js', array('jquery'), '0.0.9', true); } 其实直接添加后面的 js 代码到管理页底部也可以，但为了以后为后台管理页添加 js 的方便，还是单独放一个文件吧。这里用到了 WordPress 中用来引入 JavaScript 的 wp_enqueue_script 函数和判断是否是管理页面的 is_admin 函数。 二、然后是为文章 HTML 编辑器添加 nextpage 按钮，代码添加到上面引入的 admin.dev.js 文件中： if(anyBar = document.getElementById("ed_toolbar")){ var barSize = edButtons.length; var barLast = anyBar.lastChild; edButtons[edButtons.length] = new [...]]]></description>
			<content:encoded><![CDATA[<p>目前的 WordPress 虽然内核早已支持文章分页功能，但后台编辑器的分页按钮一直被注释掉，包括官方附带模板在内的绝大多数模板也并不支持文章分页功能。这里提供一些代码帮助你修改模板使你的 WordPress 前端支持单文章分页符的显示，后台编辑器上也添加分页符添加按钮等功能，而重要的是不涉及 WordPress 核心代码，未来升级 WordPress 将不需要修改这些代码……<span id="more-1180"></span></p>
<p>一、首先是为后台的管理页面添加一个 JavaScript 的入口，代码添加于主题的 functions.php 文件中：</p>
<pre lang="php" line="1">
if(is_admin()){
	wp_enqueue_script('admins', WP_CONTENT_URL.'/.../jquery.admin.dev.js', array('jquery'), '0.0.9', true);
}
</pre>
<p>其实直接添加后面的 js 代码到管理页底部也可以，但为了以后为后台管理页添加 js 的方便，还是单独放一个文件吧。这里用到了 WordPress 中用来引入 JavaScript 的 <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script">wp_enqueue_script</a> 函数和判断是否是管理页面的 is_admin 函数。</p>
<p>二、然后是为文章 HTML 编辑器添加 nextpage 按钮，代码添加到上面引入的 admin.dev.js 文件中：</p>
<pre lang="javascript" line="1">
if(anyBar = document.getElementById("ed_toolbar")){
	var barSize = edButtons.length; var barLast = anyBar.lastChild;
	edButtons[edButtons.length] = new edButton("ed_next","page","<! --nextpage-- >","","n");
	while( barLast.nodeType != 1 ){ barLast = barLast.previousSibling; }
	barLast = barLast.cloneNode(true);
	barLast.id = "ed_pag"; barLast._idx = barSize; barLast.value = "PAGE"; barLast.title = "";
	barLast.onclick = function(){ edInsertTag(edCanvas, this._idx); return false; }
	anyBar.appendChild(barLast);
}
</pre>
<p>其实打开 wp-includes 里面 js 目录下的 quicktags.dev.js 会发现里面原本已经有 nextpage 按钮的代码但被注释了，约在 130 行左右，上面用到了一些现成的接口，会把一个 nextpage 按钮添加到 HTML 编辑器的最后面，这样可以在 HTML 编辑器模式非常方便的插入用于分页的 nextpage 标记。上面代码中的 nextpage 按钮两边的空格是为了防止 WordPress 文章输出为注释加的，实际应用时需要删掉。</p>
<p>三、最后是为分页链接提供显示位置，修改模板文件在文章内容输出的后面添加代码，通常是 index.php 中的 the_content 函数输出内容之后，添加一个 <a href="http://codex.wordpress.org/Template_Tags/wp_link_pages">wp_link_pages</a> 函数即可，具体的一些函数参数可从 WordPress 网站参考。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1180/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>为 WordPress 主题增加 jQueryTools 支持</title>
		<link>http://nan.im/blog/1151</link>
		<comments>http://nan.im/blog/1151#comments</comments>
		<pubDate>Wed, 11 Nov 2009 08:23:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1151</guid>
		<description><![CDATA[用的越多越发现 jQueryTools 是一个非常不错的 jQuery 附加库，如同其官方网站所描述的 “The missing UI library for the Web” 仅仅整合了网站前端中常用的一些功能，于是忍不住想拿来替换掉本站 anyLiv.com 目前使用的 jQuery + swfObject + LightBox 形式的库，这样将大大利于未来扩展一些功能及应用。下面将提供一些代码帮助给主题模板添加 jQueryTools 支持。 这里用到了 WordPress 的 wp_enqueue_script 函数，以下代码将添加到当前主题的 functions.php 文件中： // 直接使用 wp_enqueue_script 引入即可同时自动注册该库： // 1、使用 jQueryTools 提供的 CDN 地址加载，但目前提供该服务的 NetDNA 在亚洲还没有服务器； wp_enqueue_script('jquery-tools', 'http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js', array('jquery'), '1.1.2'); // 2、最好还是直接从本地加载吧，后面的地址根据具体情况修改； wp_enqueue_script('jquery-tools', WP_CONTENT_URL.'/themes/anyLiv/script/jquery.tools.min.js', array('jquery'), '1.1.2'); // 如果你跟我一样想把 jQueryTools [...]]]></description>
			<content:encoded><![CDATA[<p>用的越多越发现 <a href="http://flowplayer.org/tools/">jQueryTools</a> 是一个非常不错的 <a href="http://jquery.com/">jQuery</a> 附加库，如同其官方网站所描述的 “The missing UI library for the Web” 仅仅整合了网站前端中常用的一些功能，于是忍不住想拿来替换掉本站 anyLiv.com 目前使用的 jQuery + swfObject + LightBox 形式的库，这样将大大利于未来扩展一些功能及应用。下面将提供一些代码帮助给主题模板添加 jQueryTools 支持。<span id="more-1151"></span></p>
<p>这里用到了 WordPress 的 <a href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script">wp_enqueue_script</a> 函数，以下代码将添加到当前主题的 functions.php 文件中：</p>
<pre lang="php" line="1">
// 直接使用 wp_enqueue_script 引入即可同时自动注册该库：

// 1、使用 jQueryTools 提供的 CDN 地址加载，但目前提供该服务的 NetDNA 在亚洲还没有服务器；
wp_enqueue_script('jquery-tools', 'http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js', array('jquery'), '1.1.2');
// 2、最好还是直接从本地加载吧，后面的地址根据具体情况修改；
wp_enqueue_script('jquery-tools', WP_CONTENT_URL.'/themes/anyLiv/script/jquery.tools.min.js', array('jquery'), '1.1.2');

// 如果你跟我一样想把 jQueryTools 合并到 jQuery.js 文件中的话需要下面代码：
wp_deregister_script('jquery');      // 首先反注册 jquery 库的句柄；
wp_enqueue_script('jquery', WP_CONTENT_URL.'/themes/anyLiv/script/jquery.tools.min.js', false, '1.3.2');
// 反注册以后重新引入同名的 jquery 库但文件是打包了 jquery + jQueryTools 后的 js 文件；
</pre>
<p>将上面的代码加入当前主题目录下的 functions.php 中即可在模板中使用 jQueryTools 提供的方法了，如果不需要在 WordPress 后台页面也出现 jQueryTools 的话可以在外面使用 !is_admin() 作为条件判断即可。</p>
<p>后面覆写 jQuery 句柄的方法也可以用来在 WordPress 主题中禁用 jQuery 反注册后不使用 enqueue_script 即可；也可以用于替换 WordPress 默认的 jQuery 版本，如果当前 WP 附带的 1.3.2 版本并不适合你的主题，你可以使用上面的方法替换成低版本的 jQuery 库或者替换成你的 CDN 地址也是可行的（如使用 GoogleAPI 提供的地址：http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 等等）。</p>
<p>其中 wp_enqueue_script() 的函数格式可访问 http://codex.wordpress.org/ 查询或参考下面：</p>
<blockquote><p>wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );</p>
<p>$handle：句柄，所引入 JavaScript 的唯一命名；</p>
<p>$src：地址，所引入的 JavaScript 的地址；</p>
<p>$deps：依赖，所引入 JavaScript 的依赖情况，数组格式如上面的 array(&#8216;jquery&#8217;) 字串；</p>
<p>$ver：版本，所引入 JavaScript 的版本；</p>
<p>$in_footer：页脚输出，这是 2.8.x 新加入的一个参数用于在页脚 wp_footer() 位置输出；</p></blockquote>
<p>以上的参数除 handle 以外均为可选，另外覆写 jquery 句柄的时候注意版本号最好和当前 WordPress 版本号一致。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1151/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>为 WordPress 添加 rel=canonical 标记</title>
		<link>http://nan.im/blog/1116</link>
		<comments>http://nan.im/blog/1116#comments</comments>
		<pubDate>Mon, 21 Sep 2009 08:45:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1116</guid>
		<description><![CDATA[谷歌中文黑板报在题为 “指定 URL 范式” 文章中详细阐述了关于一个新的网页 head 标记 rel=canonical 对于搜索引擎处理站内重复内容时的参考作用。之后包括 微软必应（Bing.com）雅虎搜索（Yahoo.com） 在内的一些搜索引擎也开始支持这个标记，这里提供一段代码为 WordPress 添加该标记…… 网站重复内容通常是多个 URL 地址内容相同或指向同一页面，这将导致页面权重（PR）分散等负面影响。体现在 WordPress 中最常见的就是诸如以下类型的链接： http://anyLiv.com/blog/744.html http://anyLiv.com/blog/744.html/comment-page-2#comments 上面两个链接一个是文章的正文页面，另一个是评论翻页之后的地址，但其正文部分两个页面是相同的，这种情况体现在“谷歌网站管理员工具”里面会被提示“重复的标题标记”建议，如果使用 rel=canonical 标记主体页面的话将可以避免这种情况并利于页面权重的积累，具体修改方法如下：将以下内容添加至你的主题的 functions.php 文件（如果没有则创建一个）： // for add canonical to WordPress head ... function any_head_canonical( $output = '' ){ if( is_category() ){ global $cat; $output = get_category_link($cat); } if( is_tag() ){ global $tag_id; $output = [...]]]></description>
			<content:encoded><![CDATA[<p>谷歌中文黑板报在题为 “<a href="http://www.googlechinablog.com/2009/02/url.html">指定 URL 范式</a>” 文章中详细阐述了关于一个新的网页 head 标记 rel=canonical 对于搜索引擎处理站内重复内容时的参考作用。之后包括 微软必应（Bing.com）雅虎搜索（Yahoo.com） 在内的一些搜索引擎也开始支持这个标记，这里提供一段代码为 WordPress 添加该标记……<span id="more-1116"></span></p>
<p>网站重复内容通常是多个 URL 地址内容相同或指向同一页面，这将导致页面权重（PR）分散等负面影响。体现在 WordPress 中最常见的就是诸如以下类型的链接：</p>
<blockquote><p>http://anyLiv.com/blog/744.html</p>
<p>http://anyLiv.com/blog/744.html/comment-page-2#comments</p></blockquote>
<p>上面两个链接一个是文章的正文页面，另一个是评论翻页之后的地址，但其正文部分两个页面是相同的，这种情况体现在“谷歌网站管理员工具”里面会被提示“重复的标题标记”建议，如果使用 rel=canonical 标记主体页面的话将可以避免这种情况并利于页面权重的积累，具体修改方法如下：将以下内容添加至你的主题的 functions.php 文件（如果没有则创建一个）：</p>
<pre lang='php' line='1'>
// for add canonical to WordPress head ...
function any_head_canonical( $output = '' ){
	if( is_category() ){ global $cat; $output = get_category_link($cat); }
	if( is_tag() ){ global $tag_id; $output = get_tag_link($tag_id); }
	if( is_single() ){ $output = get_permalink(); }
	if( $output != '' ){ echo '
<link rel="canonical" href="',$output,'" />'; }
}
add_action('wp_head', 'any_head_canonical');
</pre>
<p>这样在 WordPress 分别处于 分类页面 标签页面 文章页面 时将添加诸如以下的代码到所有重复页面的 head 标签里面：</p>
<pre lang='html4strict' line='1'>
<link rel="canonical" href="http://anyLiv.com/YourURL.html" />
</pre>
<p>另外这里有一些摘自谷歌文章的有用内容：</p>
<blockquote>
<p>从强制性与否来说，请问 rel=”canonical” 是一个建议，还是一个指令？    是一个建议。这是一个我们非常自豪的功能，您可以以此提示搜索引擎考虑您对URL格式的喜好。</p>
<p>我能用相对路径来指定我的URL规范么？    可以，在这里使用相对路径是可以被正确识别的，如果您在代码中指定了link，那么相对路径都会以此base URL为基础。</p>
<p>我可以将URL范式使用在不是完全相同内容的其他网页上吗？    我们允许这些网页之间有些细微差别，比如归在不同类目下的同一产品网页。</p>
<p>如果被指定为规范格式的URL返回404，怎么办呢？    我们会继续访问和抓取您的内容，并应用一些联想功能去寻找一个URL范式，但是我们强烈建议您将一个可访问的URL设置成URL范式。</p>
<p>如果我指定的URL范式并没有被索引会怎样？    就像网络上所有的公共内容一样，我们会努力发现和寻找您指定的URL范式，一旦我们索引到它，我们就会立即将您的rel=”canonical”付诸考虑。</p>
<p>我的URL范式可以是一个重定向URL么？    可以，您可以指定一个发生重定向的URL作为URL范式，谷歌会继续跟踪这个重定向并尝试去抓取它。</p>
<p>如果我不小心指定了互相矛盾的URL范式怎么办？    不用担心，我们的算法是很聪明并宽容的，我们会跟踪抓取这个URL范式链，但是我们还是强烈建议您尽快将URL范式指定为特定单一URL形式，从而确保您的搜索结果早日得到优化。</p>
<p>这个link tag可以被用来建议一个在其他域名上的URL么？    不可以。如果您需要转移到一个不同的域名上，那么301永久重定向对您来说更合适。谷歌现在只能认可在不同子域名下的URL范式的指定。所以，站长们可以将 www.example.com 和 example.com 及 help.example.com 互相指定为范式，但是不能将example.com和example-widgets.com互相指定为范式。</p>
</blockquote>
<p>补充：目前该 Link Tag 也被 Ask.com 微软 Bing 及雅虎 Yahoo! 等搜索引擎所支持。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1116/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>如何达到 Yahoo! ySlow GradeA 速度指标（二）</title>
		<link>http://nan.im/blog/1111</link>
		<comments>http://nan.im/blog/1111#comments</comments>
		<pubDate>Tue, 15 Sep 2009 05:26:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1111</guid>
		<description><![CDATA[上篇文章针对 ySlow 的前 7 项指标做了说明，这里继续后面的 7 项指标。虽然网页显示速度对于 SEO 或许意义没有那么重大，但对于用户体验却十分有意义，有统计表明网页如果在 5 秒钟内没有下载完成则会丢失一半以上的用户，之后下载时间与用户流失成指数比例增长。这里将继续补充 ySlow 在 Small Site or Blog 标准下的后 7 项指标解释及如何达到 GradeA 指标…… 这里继续描述剩下的 ySlow 技术指标： 8、Avoid URL redirects 避免 URL 跳转：避免网址跳转，如一些较旧的站点喜欢做网站的引导页，然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。 具体措施：如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。 9、Remove duplicate JavaScript and CSS 移除重复代码：随着网站代码的积累，或多个开发人员的共同协作，不可避免在代码里面会出现一些重复代码，最为常见的就是 CSS 的重复定义，甚至 JavaScript 中也有可能出现函数的重复问题。 具体措施：在修改 CSS 或 [...]]]></description>
			<content:encoded><![CDATA[<p>上篇文章针对 ySlow 的前 7 项指标做了说明，这里继续后面的 7 项指标。虽然网页显示速度对于 SEO 或许意义没有那么重大，但对于用户体验却十分有意义，有统计表明网页如果在 5 秒钟内没有下载完成则会丢失一半以上的用户，之后下载时间与用户流失成指数比例增长。这里将继续补充 ySlow 在 Small Site or Blog 标准下的后 7 项指标解释及如何达到 GradeA 指标……</p>
<p><span id="more-1111"></span></p>
<p><center><a href="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a.png" rel="shadowbox[sbpost-1111];player=img;" title="yslow-grade-a"><img src="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a-322x225.png" alt="yslow-grade-a" title="yslow-grade-a" width="322" height="225" class="aligncenter size-thumbnail wp-image-1111" /></a></center></p>
<p>这里继续描述剩下的 ySlow 技术指标：</p>
<p> 8、<strong>Avoid URL redirects</strong></p>
<p>避免 URL 跳转：避免网址跳转，如一些较旧的站点喜欢做网站的引导页，然后里面加上例如 http-equiv=”refresh” 的 meta 标签用来跳转到默认栏目等等。如果刷新时间过短这种方式甚至会被搜索引擎认为作弊对于 SEO 也同样不利。</p>
<p>具体措施：如果因为网站文件结构变化或其他栏目变化而需要改变旧的链接地址可使用 301 重定向或 简洁链接 解决。</p>
<p> 9、<strong>Remove duplicate JavaScript and CSS</strong></p>
<p>移除重复代码：随着网站代码的积累，或多个开发人员的共同协作，不可避免在代码里面会出现一些重复代码，最为常见的就是 CSS 的重复定义，甚至 JavaScript 中也有可能出现函数的重复问题。</p>
<p>具体措施：在修改 CSS 或 JS 文件时务必删除旧的部分，不要一直在后面累加代码，添加新代码的同时需要删除旧的重复代码。</p>
<p>10、<strong>Reduce the number of DOM elements</strong></p>
<p>减少 DOM 元素：减少文档对象模型（DOM）数量，这其实也是一种提高页面信息熵的手段，通常大小的页面其有用信息内容所占比例越高，页面信息熵也越高对于 SEO 非常有用，同时也意味着用最少的 DOM 节点数量实现需要的效果。</p>
<p>具体措施：减少 DOM 元素需要 HTML 和 CSS 经验的积累，实现同样的视觉效果必定不止一种两种方法，但哪种方法使用的 DOM 节点最少就需要长时间经验的积累。</p>
<p>11、<strong>Avoid HTTP 404 (Not Found) error</strong></p>
<p>避免 404 错误：所谓 404 页面错误通常是浏览器访问不存在的页面时服务器返回的错误代码，在正常浏览中这种情况是不应该出现的。</p>
<p>具体措施：一旦网站成型开始内容填充，就不要轻易改变网站 URL 结构，特别是对于搜索引擎已抓取的页面，修改 URL 地址时务必使用 301 重定向代码导向正常的页面，尽量修改页面内容而不是删除。</p>
<p>12、<strong>Avoid AlphaImageLoader filter</strong></p>
<p>避免 AlphaImage 滤镜：道理跟前面的第五条类似，由于 CSS 滤镜属性只有 IE 浏览器支持且需要消耗较多浏览器资源。</p>
<p>具体措施：删除所有 CSS 滤镜，替换为图片背景或符合 W3C 的 CSS 属性。</p>
<p>13、<strong>Do not scale images in HTML</strong></p>
<p>禁止在缩放图片：在页面 HTML 里应禁止缩放图片，其实在页面结构修饰部分是不推荐使用 img 标签插入图片的，当然更不用说是缩放。这样会导致你的页面下载多余的文件流。</p>
<p>具体措施：基于用多大的图片就做多大思想，尽量避免在 html 中插入 img 图片，修饰部分尽量使用 CSS 背景来出效果。</p>
<p>14、<strong>Make favicon small and cacheable</strong></p>
<p>制作小的缓存图标：浏览器通常会对服务器跟目录请求 favicon.ico 图标，如果没有将出现一个 404 错误见前面 11 条。</p>
<p>具体措施：由于 favicon.ico 将做为 cookie 存储，更小的 cookie 将减少服务器和客户端对 cookie 的浏览。使用专业的图标及图片优化工具，使用压缩的文件格式处理等等方法都可以大大减小图标文件的大小。</p>
<p>至此，关于 Yahoo! ySlow 里面 Small Site or Blog 标准里面的 14 项指标全部介绍完毕，这也是提高网站速度最基本的 14 项措施，在以后的文章里将继续介绍用于 Classic v1 标准及 ySlow v2 标准的其他一些指标，这些指标对于中大型网站将非常有用。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1111/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何达到 Yahoo! ySlow GradeA 速度指标（一）</title>
		<link>http://nan.im/blog/1108</link>
		<comments>http://nan.im/blog/1108#comments</comments>
		<pubDate>Mon, 14 Sep 2009 09:49:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1108</guid>
		<description><![CDATA[Yahoo! YSlow 是一个由 Yahoo! 雅虎开发的 Firebug 插件，其实通过这个名字就知道这款插件是干嘛的即 Y(why)Slow 名字起的太好了 ySlow 可以通过分析网页内各项资源的加载情况对三类网页进行评级，并提供一些非常有用的建议，目前主要被用来测试网站加载速度及获得网页提速建议。记得这个小站刚开播的时候是 GradeC 后来简单调了一下到了 GradeB 今天终于下决心冲一下 GradeA 重写了几乎三分之一的代码和图片，终于功夫不负有心人不仅整体达到 GradeA 级别，并且所有的 14 项指标也均为 GradeA 评级 Overall performance score 99 分，那么如何能顺利达到这个指标呢，这里将分别从 14 项内容简单描述一下…… 先截图留个纪念吧…… 但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴…… [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://developer.yahoo.com/yslow/"><strong>Yahoo! YSlow</strong></a> 是一个由 Yahoo! 雅虎开发的 Firebug 插件，其实通过这个名字就知道这款插件是干嘛的即 Y(why)Slow 名字起的太好了 ySlow 可以通过分析网页内各项资源的加载情况对三类网页进行评级，并提供一些非常有用的建议，目前主要被用来测试网站加载速度及获得网页提速建议。记得这个小站刚开播的时候是 GradeC 后来简单调了一下到了 GradeB 今天终于下决心冲一下 GradeA 重写了几乎三分之一的代码和图片，终于功夫不负有心人不仅整体达到 GradeA 级别，并且所有的 14 项指标也均为 GradeA 评级 Overall performance score 99 分，那么如何能顺利达到这个指标呢，这里将分别从 14 项内容简单描述一下……</p>
<p><span id="more-1108"></span></p>
<p>先截图留个纪念吧……</p>
<p><center><a href="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a.png" rel="shadowbox[sbpost-1108];player=img;" title="yslow-grade-a"><img src="http://anyliv.com/blog/wp-content/uploads/yslow-grade-a-322x225.png" alt="yslow-grade-a" title="yslow-grade-a" width="322" height="225" class="aligncenter size-thumbnail wp-image-1109" /></a></center></p>
<p>但这个 GradeA 仍然是 Small Site or Blog 标准下的 GradeA 另外其它另外的两个标准 Classic 和 YSlow2 目前仍然是 GradeC 级别，单就里面 CDN 这一项个人网站就没有办法克服，但本站本来就是 Blog 嘛理应还是用 Blog 的标准衡量的，下面就分别以这 14 个指标简单解释一下，其中的一些内容我们不需要了解其原理，因为浏览器都是图形界面的，我们通常不了解在这华丽的背后发生的事情，这是网络协议的范畴……</p>
<p> 1、<strong>Make fewer HTTP requests</strong></p>
<p>减少 HTTP 请求：浏览器打开页面并与服务器的 IP 地址建立 TCP 链接之后就会开始发送 HTTP 请求来下载页面上相关文件及元素，通常每个文件（外部样式 外部脚本 图片 等等）都需要浏览器发送一次 HTTP 请求。而建立 HTTP 请求是需要时间和带宽开销的，在 56Kbps 时代网络带宽很小，我们通常需要将大图切割成小图来多次下载以减少每个图片从下载到显示的时间；而目前的宽带时代则需要通过减少 HTTP 链接次数来减少网页加载时间。</p>
<p>具体措施：合并文件以达到减少 HTTP 请求次数的目的如：合并多个 CSS 文件到一个文件；合并多个 js 脚本到一个脚本文件；合并全部背景图片使用 CSS Sprites 技术等。</p>
<p> 2、<strong>Compress components with gzip</strong></p>
<p>使用 gZip 压缩：这种压缩技术存在于 服务器 和 浏览器 之间，首先浏览器在请求 URL 地址时会包含是否支持 gZip 的信息头，如果支持服务器将对网页文件流进行压缩（这种压缩通常能到源文件的 1/10 ~ 3/10 从而节约 70% 的下载时间）；如果浏览器不支持则发送未压缩的文件流给浏览器。这种压缩下载应该是目前提高网页下载速度最为有效的方式之一。</p>
<p>具体措施：需要咨询你的服务器托管维护人员或虚拟主机供应商，服务器端配置开启 gZip 压缩，必要时安装第三方功能及模块，但某些情况下 IE6 对这项技术的支持并不尽人意。</p>
<p> 3、<strong>Put CSS at top</strong></p>
<p>页头 CSS 文件：将引入 CSS 样式表的代码移至页头 head 标签内将有助于页面渲染逐步加快，也可避免代码先于样式表完成下载造成的无样式页面。</p>
<p>具体措施：使用 link 标签引入 CSS 样式表并限定设备类型，这样可避免其他设备下载并可在客户端缓冲 CSS 文件从而加快二次浏览速度。</p>
<p> 4、<strong>Put JavaScript at bottom</strong></p>
<p>页脚 JS 文件：将引入 JavaScript 脚本文件的代码移至页脚，可避免由于下载 js 文件而耽误页面主体内容的下载进度，通常 js 脚本都用来处理用户行为，所以也应该在页面加载完成之后再后台下载。</p>
<p>具体措施：使用 script 标签引入 JavaScript 脚本的代码放到 body 标签或 html 标签之前即可，另外尽量不要在页面中出现 js 内容，而是把所有脚本放在一个 js 文件中引入，也可以缓存从而加快二次浏览速度。</p>
<p> 5、<strong>Avoid CSS expressions</strong></p>
<p>避免 CSS 脚本：在 IE 浏览器中可以使用 filter 这个 IE 私有的 CSS 属性来在样式表文件中实现 js 脚本的一些功能，但这样做的代价是巨大的，在丧失浏览器兼容性的同时也会浪费大量系统资源，因为 IE 浏览器在渲染 filter 属性的时候不仅是页面缩放甚至滚动页面、鼠标移动的同时都需要重新计算 filter 值，所以在 CSS 中使用表达式（Expressions）是可怕的。</p>
<p>具体措施：删除 CSS 样式表中所有的 filter 属性使用标准的 W3C 样式表属性代替，实在需要设置变量值的可以在 js 文件中编写脚本实现。</p>
<p> 6、<strong>Reduce DNS lookups</strong></p>
<p>减少 DNS 查询：所谓 DNS 查询就是浏览器从 DNS 服务器查询域名获取 IP 地址的过程。通常这种情况出现于网页内有出现其他域的文件，比如在域 anyLiv.com 下的网页如果添加了 谷歌分析 统计代码就会增加一次到 www.google-analytics.com 的 DNS 查询。</p>
<p>具体措施：尽量在网站本域下放置所有的网页文件及代码，这样整个页面只需要一次 DNS 查询就足够了。但并不是说绝对如此，如果在大型网站使用 Content Delivery Network（CDN）内容分发网络 的话即使会有 DNS 查询，但仍然会提高页面总体下载速度。</p>
<p> 7、<strong>Minify JavaScript and CSS</strong></p>
<p>压缩 JS CSS 文件：网页文件的大小非常直接的反映在页面下载时间上，这里的压缩是指文件本身的压缩，不同于前面服务器端的 gZip 压缩。</p>
<p>具体措施：从文件中删除不必要的字符如多余的空格符 换行符 跳格符 注释 等内容以达到减少页面体积缩短下载时间的目的。</p>
<p>今天就先到这，欲知后事如何，请看下集《<a href="http://anyliv.com/blog/1111.html">如何达到 Yahoo! ySlow GradeA 速度指标（二）</a>》……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1108/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

