首先, 什么是图床? 就是使用第三方的服务托管图片 (如: Flickr), 在自己网站上引用这些图片. 那么将图片上传到 WordPress 是什么意思? 即使用 WordPress 的 Media 功能, 在后台上传图片, 并在博客中使用.

使用图床

很多朋友喜欢使用图床, 尤其是写博客的各位. 为什么使用图床? 原因不外乎以下两种:

1. 流量不足. 很多人购买虚拟主机写博客, 每个月只有 20G 到 50G 空间, 不得不使用图床.
2. 图片便于管理. 一般图床有评论, 分类, 分享等完善的管理和分享功能.

使用图床的人会想方设法去寻觅一个适合自己的图片, 一般都是以上原因. 对我来说, 主要是流量问题, 我使用图床, 每个月还需要 90 多 GB 的流量, 如果直接使用 WordPress 的 Media 功能, 那就等着交附加流量的费用吧.

如果我不用为流量操心, 还会不会继续使用图床? 不会. 为什么? 请继续往下看.

图片上传到 WordPress

WordPress 2.5 开始支持画廊 (Gallery) 功能, 可以通过主题的 image.php 内建图库. 由那时开始图片不仅仅是图片了. 如果使用 WordPress 上传一张图片, 数据库将会生成一条类型为 attachment 的 post 数据. WordPress 对图片的定位不是附件, 而是另一种文章类型.

即使不是图片展示类型的网站, 内建的 WordPress 也可能为网站带来巨大的流量, 尤其是产品相关的网站. 如果某人想知道现在的花瓶有哪些外观, 他很可能使用 Google 或者百度的图片搜索功能. 如果你的网站内建图库, 并且相关性和文字描述做得足够好, 很可能被搜索到, 而且图片搜索的转化率很高.

使用 WordPress 内建图库作为文章的大图页面, 也应该是 WordPress SEO 中重要的一环, 使用的时候需要考虑一下几点.

1. 填写清晰, 带关键字的图片 alt 和 title.
2. 将图片放在文章中相关性高的段落前后.
3. 如果使用多语言, 在不同的语言版本使用不一样的图片描述. (否则搜索引擎无法定位主页面)
4. 避免使用超大的图片, 以影响页面加载, 图片备份和网站流量.

总结

本文认为, 在忽略流量, 管理等因素情况下. 本文认为将图片上传到 WordPress 比使用图床有更多好处. 但你需要做好图片页面和图片描述的优化.

最近我在为换主机做准备, 迁 VPS 后, 流量不再那么紧张, 所以重新考虑内置图片, 以到达更好的 SEO 效果.

• WordPress SEO 技巧
• WordPress 主题 Blocks2 (YO2 版本)
• 为 WordPress 的评论链接加上 nofollow
• WordPress 主题 Elegant Box (YO2 版本)
• 在主题上添加风格切换功能 (1)

上图是最近我在顶部放置的广告 banner. 上方红色的是某网站圣诞节促销活动的 Affiliate 广告, 中国大陆之外地区的访客可以看到; 下方蓝色的是最新发布的与我同行 Apply App 应用广告, 只有中国大陆地区的访客可以看到.

区分访客国家有什么用?

这里是几个我利用该功能的例子.

区分网站功能
这个博客有翻译文章的功能, 这是为了方便海外访客阅读文章, 但对中国人显得十分多余. 所以我通过 IP 判断国家, 对中国大陆地区屏蔽翻译功能.

区分展示广告
我在网站侧边栏放有广告, 很多中文广告对海外流量来说毫无意义, 所以我进行区分展示. 中国大陆地区在侧边栏最下方看到的是拿福能的广告, 而其他地区看到的是 Google 的广告. hostucan 是我的一个广告主, 有英文网站, 也有中文网站, 所以我可以向他提供区分展示服务, 免得浪费流量.

屏蔽布点服务
海外有很多好的服务平台, 在网站上布点即可采集数据和分享文章. 但很不幸, 因为某些原因, 他们在国内展示效果并不好, 不但没有起到应有效果, 还让页面加载时间变长. 可以对大陆访客屏蔽这些布点.

在 PHP 通过 IP 区分国家

如何用 PHP 通过 IP 区分国家和地区呢? Maxmind.com 提供一套 GeoIP 的解决方案, 只需要简单几步即可在 PHP 中通过 IP 判断访客的国家.

1. 下载数据库和 PHP 库文件

• 下载 GeoID.dat.gz, 解压为 GeoIP.dat 文件.
• 下载 geoip.inc.

2. 通过 PHP 代码获取国家信息
以下是一段示范代码, 演示如何获取国家代号和国家名称.

<?php
 
// 引入 PHP 库文件
include("geoip.inc");
 
// 打开本地数据库, 数据保存在 GeoIP 文件中.
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
 
// 获取国家 IP
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
 
// 获取国家名称
$countryName = geoip_country_name_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
 
// 关闭本地数据库
geoip_close($geoData);
 
?>

在 WordPress 中通过 IP 区分国家

既然 PHP 上使用没问题, WordPress 肯定也是 Okay 的. 看看我是怎么使用的.

1. 放置数据库文件
将 GeoIP.dat 解压到 WordPress 根目录中. (你可以在这个目录找到 wp-config.php 或者 wp-config-sample.php 文件)

2. 编写调用接口
在主题目录中新建文件夹 include, 将 geoip.inc 放置在新建文件夹中. 并在该文件夹新建文件 geoip.php 文件内容如下.

<?php
 
include('geoip.inc');
 
global $countryCode;
 
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
geoip_close($geoData);
 
?>

这里只取国家代号作为判别依据. 并且国家代号是全局变量, 以避免页面多处判断需要反复访问 GeoIP.dat 获取信息, 减少程序开销.

2. 调用接口, 获取国家代号
3. 打开 header.php 文件, 在文件顶部加入代码如下.

<?php include('include/geoip.php'); ?>

4. 使用国家代号
在主题中调用代码, 例子如下.

<?php
 
global $countryCode;
 
if($countryCode == 'CN') {
	// 中国大陆地区执行的代码
} else if($countryCode == 'US') {
	// 美国地区执行的代码
} else {
	// 中国大陆和美国以外地区执行的代码
}
 
?>

总结

通过 IP 判断访客来源十分精准的, 现在一些外贸网站都是通过这个方法向用户进行展示区分, 比如美国地区的用户默认看到美国能买到的商品和美国物流信息. 但不是百分之百的准确, 比如某人常年翻墙, 那他可能一直看不到本国的信息. 至于是否需要区分处理, 网站主要有所考虑.

可能有人会问, 加这么个东西, 性能如何? 会不会要求强大的服务器? 我测试过, 正常的服务器上几乎不影响页面加载性能, 可以看看这个博客的速度. 如果不放心, 自己测一下.

• 巧用 WordPress 缩略图
• 每日同步 Feedsky 订阅数
• 手机主题调度插件 WordPress Mobile Themes
• 将 Blogroll 分为两栏 (3)
• 文章存档插件 WP-EasyArchives

Breadcrumbs 与 Breadcrumb NavXT 的区别

1. 从界面上看, 两插件并没有太多区别, 可以在 WordPress 架构内的所有页面加上面包屑.
2. 从功能来看, Breadcrumb NavXT 更加强大. 可以针对特定类型页面进行设定, 并且提供两种结构的页面输出.
3. 从 SEO 来看, Breadcrumbs 更加合理. 由于插件作者 Yoast 的 SEO 功底很强大, 插件在这方面肯定会有更多关注. 可以选择在 Home 链接加上 nofollow, 在 Home 链接和后面的索引之间加上特定的页面 (如: 我加上了 All Categories 的页面链接).

Breadcrumbs 插件的缺陷

1. 如果文章被分配到多个类目中, 只有一个类目有效, 插件更具字母 A 到 Z 的循序选择头一个类目作为面包屑路径.
2. 文章详细页面的面包屑中包含文章标题, 这个多余了.

这里提及的两个问题 Breadcrumb NavXT 插件也有. 前一个问题我没有解决, 因为影响不到我的使用, 也没想过怎样去弄; 后一个问题我解决了, 除了除掉文章详细页面的文章标题, 还修改了面包屑中其他链接的标签结构, 比如: 为 SEO 将最后一个面包屑节点改成 h2.

Breadcrumbs 插件的使用

下载插件请移步 WordPress 插件中心的插件页面.

在 WordPress 主题中插入代码调用插件, 如下.

<?php
	if(function_exists('yoast_breadcrumb')) {
		yoast_breadcrumb('', '');
	}
?>

调用插件的方法有三个参数. 前两个是输出在前后的 HTML 片段; 第三个参数指定返回字符串还是输出页面, 如果第三个参数是 true 代码直接输出页面, 如果是 false 返回字符串, 默认是 true.

Breadcrumbs 插件的改进

我使用的是 Breadcrumbs, 因为功能简单, 代码少, 容易改. 为了 SEO 效果, 突出页面关键字, 避免出现重复链接, 我对插件进行了一些修改.

1. 将文章详细页面的面包屑中出现的文章标题去掉, 因为这个与文章标题重复.
2. 在面包屑的 Home 链接和类目链接之间加上 All Categories 的链接, 便于区分文章详细页面和独立页面的路径. (独立页面是不存在分类的.)
3. 在 Home 链接和 All Categories 页面链接加上 nofollow. Home 这个词跟你在首页没有关系, 而且页面 Logo 也链向首页, 没必要重复一下让爬虫混淆; 我的顶部导航中已经有 All Categories 的入口, 没有必要重复一下.
4. 将存档页面的面包屑最后一个词改为 h1, 因为它是整个页面的核心关键字. 比如: 现有存档页面面包屑 Home > All Categories > WordPress, 我会将 WordPress 改成 h1. 因为这里展示的是 WordPress 类目下的文章列表, 与其关系最大, 我将这个当成页面的标题来处理.
5. 将文章详细页面的面包屑最后一个链接改为 h2. 在我的这个博客中, 文章详细页面没有指定分类链接, 其实我是将这个功能与面包屑的合并了, 面包屑的最后一个链接就是该文章的分类链接. 除非有十分重要的副标题存在, 由于标签和分类是文章之间联系的桥梁, 可以仅此于标题给 h2.
6. 将面包屑中的 » 改为 >, 纯粹觉得不好看.

总结

面包屑很总要, 强烈建议用上. Breadcrumb NavXT 和 Breadcrumbs 是目前最受欢迎的两个 WordPress 面包屑插件, 看似不一样, 实际区别不大, 都很好用.

• WordPress 面包屑插件 Breadcrumb NavXT
• WordPress 的文章导航
• WordPress SEO 技巧
• WordPress 不同页面显示不一样的侧边栏
• 为 WordPress 的评论链接加上 nofollow

适用版本

WordPress 3.0 或以上

插件下载

WordPress Mobile Themes

安装方法

• 将压缩包解压到 {WordPress 根目录}/wp-content/plugins/.
• 登录你的 WordPress 后台, 到 Plugins 页面激活插件 WordPress Mobile Themes.
• 到 Appearance->Mobile Themes 页面修改插件设置.

插件本地化

此版本支持英文和简体中文, 其中英文是默认设置. 若要使用简体中文, 请执行以下步骤:
1. 打开 WordPress 根目录的文件 wp-config.php.
2. 查找 define ('WPLANG', ''); 并修改为 define ('WPLANG', 'zh_CN');.

更新日志

Change Log

• 最新评论插件 WP-RecentComments
• 文章存档插件 WP-EasyArchives
• 图片预览插件 Highslide4WP
• WordPress 上的 Feedsky 统计插件
• 多栏友情链接插件 WP-MulticolLinks

以前我没有花太多时间做搜索引擎优化, 搜索引擎收录效果不是很好. 去年二月我终于为博客搞了一下 SEO, 写下这个文章. 一年半以来陆续进行了更多 SEO 优化, 博客文章写得不多了, 流量却有增无减, 网站也重回 PageRank 7, 效果相当不错的. 这次我根据自己的 WordPress SEO 方案更新了本文的内容.

我不是什么 SEO 高手, 但作为一个搞搜索的前端开发, 或多或少知道一点, 折腾一下算是自我陶醉, 高人请绕道前行.

目录

• 优化博客副标题
• 区分显示页面标题
• Keywords 和 Description
• 定义面包屑
• 使用 h1, h2, h3, strong 标签
• 将 Related Post 改为 More posts about XXX
• 与文章无关内容后移
• 消灭内嵌 CSS 和内嵌 JavaScript
• 为 Read more (阅读全文) 链接加上 nofollow
• 不要制作欢迎页面
• 优化文章列表页面
• 使用微格式和微数据
• 向 Google 提交 Sitemap
• 使用 WordPress 内建图库, 并增加图片展示页面

优化博客副标题

副标题 (slogan), WordPress 中称为 tagline. 它与博客标题不一样, 可能会承载一些描述博客的文字, 优化一下可以利用起来. 如我的副标题是 "mg12's Blog - Just Another WordPress Blog", 其中的 WordPress Blog 被我设置为 h1. 因为我想告诉爬虫, 这是一个关于 WordPress 的博客.

区分显示页面标题

页面的标题不要包含博客名称. WordPress 标题一般会用到 bloginfo('name') 和 wp_title() 两部分, 前者是博客名称, 后者是文章标题 (如果标题不存在则不显示). 经典主题和默认主题输出标题用的代码如下.

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

输出的标题结构是 "文章标题 » 博客名称".

除非你的标题和文章内容相关度比较高, 否则这样的标题对 SEO 显然是不好的. 标题是爬虫认为重要的内容之一, 如果标题中包含了与文章内容无关的信息, 多少会对该页面有所影响.

那应该怎么弄呢? 我们可以对不同类型的页面进行区分, 我的实现代码如下.

<title><?php
	// 如果是首页和文章列表页面, 显示博客标题
	if(is_front_page() || is_home()) { 
		bloginfo('name');
 
	// 如果是文章详细页面和独立页面, 显示文章标题
	} else if(is_single() || is_page()) {
		wp_title('');
 
	// 如果是类目页面, 显示类目表述
	} else if(is_category()) {
		printf('%1$s 类目的文章存档', single_cat_title('', false));
 
	// 如果是搜索页面, 显示搜索表述
	} else if(is_search()) {
		printf('%1$s 的搜索结果', wp_specialchars($s, 1));
 
	// 如果是标签页面, 显示标签表述
	} else if(is_tag()) {
		printf('%1$s 标签的文章存档', single_tag_title('', false));
 
	// 如果是日期页面, 显示日期范围描述
	} else if(is_date()) {
		$title = '';
		if(is_day()) {
			$title = get_the_time('Y年n月j日');
		} else if(is_year()) {
			$title = get_the_time('Y年');
		} else {
			$title = get_the_time('Y年n月');
		}
		printf('%1$s的文章存档', $title);
 
	// 其他页面显示博客标题
	} else {
		bloginfo('name');
	}
?></title>

Keywords 和 Description

Keywords 为搜索引擎提供网页包含的核心内容, Description 则为搜索引擎提供网页的描述信息. 我发布的主题曾经包括了对 keywords 和 description 的处理, 但因为一些 SEO 插件发生冲突, 在较新的版本中已经去除. 笔者认为 WordPress 的很多所谓 SEO 插件做得并不到位, 对中文博客支持都很差, 自己修改一下效果可能更好.

以下是我对 keywords, description 和页面标题的处理规则, 实现方法可以参考上一段关于页面标题的说明.

文章详细页面的描述一般取文章的前 220 个字符即可, 特别重要的页面和文章可以自定义摘要, 使其信息准确度更高. 如果存在摘要信息则使用摘要, 没有则使用前 220 个字符, 实现代码如下.

<?php
	if($post->post_excerpt) {
		$description = $post->post_excerpt;
	} else {
		// utf8_trim 方法是为了在截取字符之前对字符串进行转义, 避免出现截取半个汉字的情况
		// 参考文档: http://php-utf8.61924.nl/documentation/functions/utf8_trim.html
		$description = utf8_trim(substr(strip_tags($post->post_content), 0, 220));
	}
?>

定义面包屑

面包屑在网站中起到导航的作用, 便于搜索引擎进行索引. 如果一个网站存在面包屑, 在 Google 中看到的是路径索引, 而不是文章链接, 如下图.

我介绍过两款 WordPress 面包屑插件, 分别是 Breadcrumb NavXT 和 Breadcrumbs.

使用 h1, h2, h3, strong 标签

h1 给予文章标题或者与网站相关性高的推广性内容, 而不是博客标题. 比如: 文章详细页面的 h1 给文章标题, 因为相关度最高.
h2 是跟文章有关的描述式信息, 如面包屑, 分类和标签.
h3 是其他类似内容, 如相关文章, 小标题.
strong 给文章内的关键字. 比如: 本文第一段将 strong 放在 "WordPress SEO 技巧" 这个词组上.

将 Related Post 改为 More posts about XXX

其中 XXX 是关键字及其链接, 本人建议使用分类或者标签链接代替. 从 SEO 优化的角度来说, 因为 Related 一词与几个文章的链接没有任何关系, 但标签与之相关度很高. (一般相关文章是通过相似标签来确定的.) 从用户体验的角度来说, 没有太多人留意你的 Tags 是什么, 不如将标签和相关文章结合现实. 阿里巴巴速卖通的产品详细页面也类似这样做的, 这是我 2009 年操刀搞上去的.

与文章无关内容后移

很多爬虫都会爬取全页进行分析, 但还有些爬虫只会分析页面的前 N 个字节的内容. 无论是曝光次数还是分析次序, 显然前面内容的权重相对会比较高. 为了爬虫有效的收录, 应该尽量将无关内容后移. 如 JavaScript 等可以在 DOM ready 时再执行.

这个博客顶部的很多与内容无关的内容其实都是放在页脚的, 如搜索栏, 订阅按钮都是放到页脚, 在 DOM ready 时通过 CSS 或者 JavaScript 重新定位来实现的.

消灭内嵌 CSS 和内嵌 JavaScript

内嵌的 CSS 和 JavaScript 可能带有一些关键字和链接, 而且拖慢页面加载速度, 影响爬虫收录. 尽量将这些写在外部文件中.

避免出现重复内容的文章
WordPress 的评论分页可能导致多个重复内容的文章, 会将某些关键词的权重分散了, 有必要进行 SEO 优化.

关于 WordPress 评论的 SEO, 我已经在《对评论分页的 SEO》写过处理方法. 后来又在《WordPress 评论 SEO》中介绍了另一种处理方法, 该方法不需要借助插件.

为 Read more (阅读全文) 链接加上 nofollow

因为 Read more 链接的路径实际和文章标题相同, 没必要再多加一个文本与页面内容无关的链接. 再者, "Read more..." 在网站出现 N 多次, 可能会干扰爬虫. 后来我专门写了一个文章 Step-by-step 教你如何在 WordPress 进行修改, 请阅读《为 WordPress 的 Read more 加上 nofollow》.

不要制作欢迎页面

很多朋友喜欢把博客首页做成欢迎页面, 但因为大量链接链向首页, 它是最重要的页面, 应该尽量放置与博客相关的内容. 关于网站的首页, 我给两个建议.

1. 直接使用文章列表页面作为首页, 如 NeoEase.com.
2. 制作一个频繁更新内容的文章导航页面, 可以放置特色产品, 热门文章和最新评论等内容.

优化文章列表页面

经过我长期的试验, 切勿在文章列表页面展示所有文章内容. 如果你的文章直接相关度都很高 (比如: 全站都是写 SEO 相关的文章), 建议展现所有文章的摘要. 如果文章之间相关度不高 (比如: 像这个博客一样, 有时写 SEO, 有时写 WordPress, 有时写前端, 有时又招聘), 那么只展示前三个文章的摘要即可.

如果部分文章只显示标题, 可以动态加载文章以方便用户. 详细请参考《WordPress 动态加载文章内容》.

使用微格式和微数据

微格式和微数据都是为了语义化网页结构, 在网页上标记内容以描述特定类型的信息, 如评论, 事件, 商品等. 不用的是微格式使用 class 来语义化标签, 而微数据则是使用特定的标签. 两种方式 Google 都支持, 而微数据的适用范围更广, 使用方便, 更多内容请参考 Google 网站站长工具的文档 和 schema.org 上的例子.

我使用微格式对博客的评论进行了处理. 当文章内出现新的评论时, 搜索引擎会认为页面有所更新, 微格式和微数据可以令爬虫评论内容和时间更加敏感, 避免页面被认为是死页面.

向 Google 提交 Sitemap

WordPress 有很多自动生成 sitemap 的插件, Google XML Sitemaps 是我用过最好的一个, 按插件说明使用即可生成 sitemap 文件. 然后登录 Google Webmaster Tools, 并向 Google 提交网站的 sitemap XML 文件.

使用 WordPress 内建图库, 并增加图片展示页面

如果网站上的内容涉及视觉感官的内容, 比如: 地图, 产品和 Logo 设计, 建议使用 WordPress 的 Media 功能建立图库, 而不是库床. WordPress 2.5 之后的主题支持 image.php, 可以内建图片类型页面, 只要稍作优化, 可能为你的网站带来极大流量和更好的转化率.

我写了一篇关于选择 WordPress 内建图库和图床的文章, 可以参考一下.

总结

以上几点仅为个人意见, 具体效果可以参考本博客, 如发现问题或有好的建议请务必提出.
另外, 有些内容我没有提供具体的代码, 只是说了自己的想法或者做法. 如果你对其中某项有兴趣, 请在留言说明, 需求大的我会另起文章具体说明.

• 为 WordPress 的 Read more 加上 nofollow
• 为 WordPress 的评论链接加上 nofollow
• 使用中的 WordPress 插件
• 关于网站的链接优化
• WordPress 评论 SEO

插件功能

看看 WordPress 后台截了个图, 功能一目了然.

• 支持对指定类型的图片进行加水印操作
• 支持水印定位和位置微调
• 支持自定义水印文本, 修改文字类型, 文字尺寸和文字颜色

设置完成后, 当用户使用 WordPress 的添加附件功能上传图片, 即在指定格式的图片上进行水印处理. 也就是说, 这个插件在上传图片后, 在传送到指定目录之前为图片加上水印.

半透明水印

在多款 WordPress 图片水印插件中, Watermark Reloaded 并不算功能强大, 但是它使用起来十分便利. 除了半透明水印效果, 它可以满足我其他最想要的功能, 所以我决定改造一下, 让它水印支持透明度调整. 很简单的, 跟我来试一下...

打开插件的主文件 watermark-reloaded.php, 并找到 imageAddText 方法. 将该方法修改如下:

private function imageAddText($image, array $opt) {
	// calculate watermark position and get full path to font file
	$offset = $this->calculateOffset($image, $opt);
	$opt    = $this->getFontFullpath($opt);
 
	// allocate text color
	$color = $opt['watermark_text']['color'];
 
	// 这是不透明度, 介于 0.0 和 1.0 之间, 可以参考 CSS3 关于 opacity 的说明.
	$opacity = 0.65;
 
	// Add the text to image
	$red = hexdec(substr($color, 0, 2));
	$green = hexdec(substr($color, 2, 2));
	$blue = hexdec(substr($color, 4, 2));
	$alpha = (1 - $opacity) * 127;
	$style = imagecolorallocatealpha($image, $red, $green, $blue, $alpha);
	imagettftext($image, $opt['watermark_text']['size'], 0, $offset['x'], $offset['y'], $style, $opt['watermark_text']['font'], $opt['watermark_text']['value']);
 
	return $image;
}

如果你实在懒得不想动手, 或者就是搞不来... 没关系, 我基于 Watermark Reloaded 1.2.4 修改了一份. 可以通过下方链接下载.
Watermark Reloaded 1.2.4 半透明水印版

注意: 因为图片通道问题, GIF 图片上的半透明水印会显示成红色.

插件不足

如前面所说, Watermark Reloaded 功能不强大, 不能完全满足我们的需求, 比如: 支持图片 (PNG) 水印, 文字阴影等等. 最要命的是无法根据图片大小进行自适应的水印处理.

举个例子吧, 我正在上传一个 600x600 的图片, WordPress 会为我生成 150x150 的缩略图, 但我只能定义一个大小的水印 (因为只能定义一个文字类型, 字号和尺寸). 当我设定文字尺寸为 72px 的时候, 可能 600x600 显示的效果刚刚好, 但是 150x150 的图片还没有水印大, 被水印完全挡住.

相关插件

我用 Google 找到的第一个 WordPress 图片水印插件是 Marekkis Watermark. 从功能介绍看这个插件很强大, 支持布局, 修改字体, 图片水印, 透明度等等. 看似十分完美, 但很遗憾, 我在 WordPress 3.2.1 中激活插件导致页面布局异常, 所以放弃了... 追求某些水印功能的朋友可以一试.

后话

我的博客没有使用 WordPress 的图库功能, 也不考虑要给图片打水印. 所以关于插件的不足, 写个新给插件作者建议一下好了, 在此打住不折腾. 如果你也像我一样需要图床服务, 可以留意一下《发放图海 VIP 邀请码》, 我会不定期发放.

• 在主题中添加 LavaLamp 菜单效果
• WordPress 淡出淡入导航菜单
• 在主题上添加风格切换功能 (1)
• WordPress 搜索框添加文字提示
• Use Image Title in iNove

随着智能手机和移动网络的广泛应用, 手机浏览器成了最常用的网页载体之一. 但因为受手机屏幕小所限, 很多网站对手机浏览进行了特殊处理, 让访客方便阅读...

使用动机

可能你也曾想过做一套针对手机用户的界面, 或是进行网页兼容 (比如: 不显示侧边栏). 无论是再做一套还是进行兼容, 工作量都不少. 然而, 如果你使用 WordPress, 一切并没有那么艰难, 你可以使用 WPtouch, 它为我们提供整套的浏览器兼容方案. 该插件简单易用, 安装激活即可.

功能特点

WPtouch 支持 iPod, iPhone, iPad, Android, 黑莓, Palm OS 等常用的触摸设备浏览器. 而且强大如一个网站管理工具, 免费版就可以进行一些常规的页面修改, 如选择是否显示文章 Tags, 分类, 作者信息, view more 链接, 菜单管理, 搜索, 分享按钮等常规的功能. WPtouch Pro 版貌似很犀利, 可以自定义主题, 管理广告, 还支持平板电脑界面.

显示效果

如果有 iPhone 或者 Android 手机, 可以访问我的博客看看效果.

免费版已经很强大, 没有必要使用付费版本. 如果要定义主题, 可以修改 default 主题达到效果. 插件提供的那些强大的自定义功能对个人博客来说没什么用, 而且平板设备屏幕大, 进行网页兼容即可兼容, 没有必要另起一套.

后话

插件提供默认主题功能很强大, 连 AJAX 加载文章的功能都有, 但页面结构并不好, 建议有时间爱折腾的同学自我修改和优化.

本来我是想自己多做一套针对手机设备的 WordPress 主题, 在 PHP 层判断浏览来源, 如果是手机设备则使用这套主题. 后来望月告诉我有这个叫 WPtouch 的插件, 就把玩了起来. 我不知道以后会不会一直用着, 但会研究一下这个插件, 这么强大一个插件有很多可以借鉴的内容.

2011年10月6日更新: 现在我已经开发了一个名叫 WordPress Mobile Themes 的插件, 可以为使用手机浏览的访客选择另一套主题, 作为手机主题. 也为该博客设计了一套手机主题, 用手机浏览器访问即可看到...

• 智通人才网手机客户端
• 手机主题调度插件 WordPress Mobile Themes
• 为 iPhone 和 iPad 自定义网站的主屏幕图标
• 魅族 M8 的 iPhone 风格主题 Suave
• App 每日推送 - 挖掘免费 iPhone/iPad 应用

<script type='text/javascript' src='{ROOT DIR}/wp-includes/js/l10n.js?ver=20101110'></script>

i18n 和 l10n

i18n^[1] 和 l10n^[2] 是 IT 领域常用的缩写术语, 分别是国际化和本地化的意思. i18n 指应用程序能够为不同的国家和语言环境的用户群体提供本地化的服务, 而 l10n 则是在用户使用环境实现本地化特性, 国际化和本地化泛指语言环境的多语言实现. 如: WordPress 是一个支持国际化的程序, 只要提供对应国家语言包并制定国家代号, 就能替换整个网站的语言环境.

JavaScript 本地化

如前面的例子, WordPress 一直支持国际化, 并提供 _e() 和 __() 两个 PHP 方法对程序进行本地化. 但随着前端 JavaScript 应用越来越多, 后端的国际化已经满足不了所有需求, 有必要引入 JavaScript 的国际化和本地化.

若你使用的主题支持 wp_head() 方法, 将在页面加载 l10n.js 文件, 而且用户可以通过简单的代码向页面注入本地化资源. l10n.js 是一个 JavaScript 本地化的工具库, 包含 convertEntities() 方法, 可以将 HTML 对象还原成原来的值, 所以它会在所有注入的 JavaScript 脚本和本地化资源之前载入.

使用的方法

我们可以为每一个要载入的 JavaScript 文件定义本地化资源. 实现代码如下^[3]:

// 必须先载入一个 Javascript 文件
wp_enqueue_script('some_handle', '/some_javascript.js');
 
// 组装本地化数据, 使用 __() 制作本地化内容
$data = array( 'some_string' => __( 'Some string to translate' ) );
 
// 加载本地化脚本. 这里必须指定一个需要载入的 JavaScript 文件.
wp_localize_script( 'some_handle', 'object_name', $data );

执行后将在页面上生成代码如下:

/* <![CDATA[ */
var object_name = {
some_string: "Some string to translate"
};
/* ]]> */
<script type='text/javascript' src='{ROOT DIR}/some_javascript.js?ver=3.1'></script>

本地化资源会在指定脚本之前载入和定义. 其中 {ROOT DIR} 是网站的根目录.

此时如果我们可以通过以下代码进行测试:

alert(object_name.some_string); // 弹出对话框, 显示 'Some string to translate'

利弊和应用场合

好处前面说了很多, 可以方便地进行前端本地化 (需要后端 PHP 配合). 缺点也很明显, 会在每次页面加载时计算本地化资源, 并且载入大量 JavaScript 代码, 增加系统负担和延长页面加载时间.

JavaScript 本地化是 WordPress 主题和插件制作中让人较为烦恼的地方, 一些插件开发者会在页面上自行定义 l10n 对象, 可以参考 WP-RecentComments 插件的做法. WordPress 这次强行引入, 很可能会被主题和插件开发者广泛应用. 也就是说, 不久的将来你未必敢卸载掉它, 否则某些插件将运行不了.

卸载和恢复的方法

虽说 l10n.js 文件很小, 好歹会发出一个请求, 如果你真的认为没用, 可以在 functions.php 中添加以下代码将它卸载掉.

wp_deregister_script('l10n');

如函数名, 这个方法不是禁用, 而是注销. 也就是说, 一旦你注销就没有了, 就算删除这段代码也不会还原. 如果在注销后希望回复需要使用以下方法:

wp_register_script('l10n');

总结

WordPress 的想法很好, 但这实现方式叫我该如何吐槽, 希望 "支持 JavaScript 本地化" 不是通过主题审核的必要条件. 作为前端, 多少有点页面洁癖, 我已经将这个脚本注销掉了. 另外, 看到 WordPress 3.1 那夺目的 Admin Bar 我淡定地笑了, 祝 WordPress 越来越臃肿.

• JavaScript 的 parseInt 取整
• JavaScript 的命名空间
• WordPress 动态加载文章内容
• JavaScript 初始化装载方法
• 关于 JavaScript 的 with 语句

因为时间问题, 自己的没有做得很满意, 所以没有说明如何处理后台响应, 出了那么一个不完整的教程. 直到昨天有人来公司面试跟我提起这个, 觉得还是可以说说的. 本文将会对此进行具体的讲解.

处理思路

从前台传到后台的参数有两个, 一个是 action ID, 用于确定使用的接口, 另一个是文章的 ID, 用于获取文章对应的内容.

《动态加载文章内容》一文中我提示过, 可以参考 wp-includes/post-template.php 的 get_the_content 方法, 通过文章 ID 获取文章内容. 下面我们来分析一下这个方法.

function get_the_content($more_link_text = null, $stripteaser = 0) {
	global $id, $post, $more, $page, $pages, $multipage, $preview;
 
	// 设定 "查看全文" 的链接文案
	if ( null === $more_link_text )
		$more_link_text = __( '(more...)' );
 
	// 返回内容
	$output = '';
 
	// More 标签是否存在的标记位
	$hasTeaser = false;
 
	// 如果文章要求输入密码, 并且在 Cookie 中找不到处理过的信息, 则返回要求输入密码的查看表单
	if ( post_password_required($post) ) {
		$output = get_the_password_form();
		return $output;
	}
 
	// 请求的文章片段对应的页面大于最大页数 (即文章片段不存在), 则返回最大页码的文章片段
	if ( $page > count($pages) )
		$page = count($pages);
 
	// 文章内容是最后分页中的文章片段
	$content = $pages[$page-1];
	// 如果文中有 More 标签, 要求切断文章并输出 "查看全文" 链接, 则重定义文章内容, 标记 More 标签存在
	if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
		$content = explode($matches[0], $content, 2);
		if ( !empty($matches[1]) && !empty($more_link_text) )
			$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
 
		$hasTeaser = true;
	} else {
		$content = array($content);
	}
 
	// 如果进行了文章切断处理, 且不存在分页要求, 
	if ( (false !== strpos($post->post_content, '<!-- noteaser -->') && ((!$multipage) || ($page==1))) )
		$stripteaser = 1;
 
	// 获取文章内容的第一部分; 如果在独立文章存在 Read more 和切断处理, 则文章内容为空
	$teaser = $content[0];
	if ( ($more) && ($stripteaser) && ($hasTeaser) )
		$teaser = '';
	$output .= $teaser;
 
	// 如果文章分为多个片段, 在独立文章中拼接上第二部分, 摘要内容中显示 "阅读全文" 链接
	if ( count($content) > 1 ) {
		if ( $more ) {
			$output .= '<span id="more-' . $id . '"></span>' . $content[1];
		} else {
			if ( ! empty($more_link_text) )
				$output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>", $more_link_text );
			$output = force_balance_tags($output);
		}
 
	}
 
	if ( $preview ) // preview fix for javascript bug with foreign languages
		$output =	preg_replace_callback('/\%u([0-9A-F]{4})/', create_function('$match', 'return "&#" . base_convert($match[1], 16, 10) . ";";'), $output);
 
	// 返回文章内容
	return $preview;
}

你完全可以这样想: 只要满足一些传入的参数, 去除一些不必要的, 更换一些可取代的, 将页面返回改成输出, 就是一个输出文章内容的接口.

处理方法

如果我们暂时不考虑输入密码, 分页等功能; 另外, 因为 More 和切断功能不应该在展开文章内容中存在, 响应处理可以变得很简单. 我们要做的事就这么几个:
1. 做出 action 对应的接口
2. 获取指定文章的内容
3. 格式化文章内容
4. 返回文章内容

多说无用, 直接上代码, 加注释:

function load_post() {
	// 如果 action ID 是 load_post, 并且传入的必须参数存在, 则执行响应方法
	if($_GET['action'] == 'load_post' && $_GET['id'] != '') {
		$id = $_GET["id"];
		$output = '';
 
		// 获取文章对象
		global $wpdb, $post;
		$post = $wpdb->get_row($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE ID = %d LIMIT 1", $id));
 
		// 如果指定 ID 的文章存在, 则对他进行格式化
		if($post) {
			$content = $post->post_content;
			$output = balanceTags($content);
			$output = wpautop($output);
		}
 
		// 打印文章内容并中断后面的处理
		echo $output;
		die();
	}
}
// 将接口加到 init 中
add_action('init', 'load_post');

看完这段代码, 是不是感到相当的简单明了? 因为这是最基本的操作, 很多功能并没考虑在内. Okay, 这样就引出多个问题:
1. 如果存在某个插件, 会对文章内容进行特殊处理 (如: WP-Polls), 响应处理需要特殊处理吗? 如何操作?
2. 如果有加密文章, 如何向用户呈现? 前后台又该如何配合?
3. 如果存在文章分页, 当用户点击翻页链接时会发生什么事情? 怎样处理体验更好?

这些问题作为后面的话题我会逐一讲解并解决掉, 但再此之前, 你是否已经想到解决办法了?

• WordPress 动态加载文章内容
• 评论分页插件 AJAX Comment Pager
• 为 WordPress 的 Read more 加上 nofollow
• AJAX 评论提交插件 Quick Comments
• WordPress SEO 技巧

Feedsky 是国内著名的订阅托管服务, 但官方只提供图片和 Flash 两种途径获取订阅统计信息的, 而我们设计网站风格时往往期望可以更加灵活地获取信息, 如文本方式.

为此, 本插件应运而生, 名为 Feedsky Statistic. 它可以在每天的特定时间自动将 Feedsky 的前一天的统计数据 (订阅人数和点击次数) 同步到 WordPress 中.

之前我写过一个说明 Feedsky 统计同步原理的文章, 并提供了核心代码. 愿意折腾的同学请参考文章《每日同步 Feedsky 订阅数》, 不愿意折腾的同学可以购买插件使用.

该插件仅售 ¥ 2.98 人民币.
立即购买

插件的安装

Feedsky 统计插件的安装和使用非常简单, 只需要按一下几个步骤操作即可.

1. 将插件解压到 '/wp-content/plugins/' 目录.
2. 在 WordPress 后台的 'Plugins' 页面中激活插件.
3. 在主题代码中调用统计信息. 如下：

显示 Feedsky 的订阅数量:

<?php if(function_exists('get_feedsky_count')) {echo get_feedsky_count();} ?>

显示 Feedsky 的点击次数:

<?php if(function_exists('get_feedsky_comein')) {echo get_feedsky_comein();} ?>

插件的设置

填入 Feed ID 和定期更新的时间, 并保存更改.

插件本地化

此版本支持英文和简体中文, 其中英文是默认设置. 若要使用简体中文, 请执行以下步骤:

1. 打开 WordPress 根目录的文件 wp-config.php.
2. 查找 define ('WPLANG', ''); 并修改为 define ('WPLANG', 'zh_CN');.

备注

使用该插件时, 请确保你的 PHP 服务器允许读写网络文件. 可以通过以下方式打开服务.
1. 打开 PHP 配置文件 php.ini.
2. 找到 allow_url_include 并将它的值改为 On.

• 手机主题调度插件 WordPress Mobile Themes
• 文章存档插件 WP-EasyArchives
• 最新评论插件 WP-RecentComments
• 图片预览插件 Highslide4WP
• 多栏友情链接插件 WP-MulticolLinks

WP Cron 是什么? 是 WordPress 一套定时触发机制, 可以循环安排任务执行. 如: 定时发布新文章, 定期检测版本等功能都是通过这个来实现的.

WP Cron 可以为我们实现什么? 我们可以循环更新和提交网站数据, 节日定期向读者发送贺卡或者表单, ...

WordPress 定时任务方法列表可以参考: WP-Cron Functions
WP-Cron 效率不高, 但还是很方便好用的, 整理了一下相关函数的使用方法如下.

wp_get_schedule

通过勾子别名, 获取预定安排的勾子. 成功时返回循环周期类别 (hourly, twicedaily, daily, ...), 失败时返回 false.

<?php wp_get_schedule( $hook, $args ) ?>

$hook: 勾子别名
$args: 勾子对应函数的参数数组 (可选)

wp_get_schedules

WordPress 默认支持的循环周期类别有 hourly, twicedaily 和 daily. 通过该函数我们可以获取所有这些循环周期数组.

<?php wp_get_schedules() ?>

在默认情况下, 由以上方法获得的数组对象如下.

array(
	'hourly' => array(
		'interval' => 3600,
		'display' => 'Once Hourly'
	),
	'twicedaily' => array(
		'interval' => 43200,
		'display' => 'Twice Daily'
	),
	'daily' => array(
		'interval' => 86400,
		'display' => 'Once Daily'
	)
)

我们可以向 cron_schedules 过滤器添加更多的类型. 添加例子如下:

add_filter('cron_schedules', 'cron_add_weekly'); 
function cron_add_weekly( $schedules )
{
	// Adds once weekly to the existing schedules.
	$schedules['weekly'] = array(
		'interval' => 604800, // 1周 = 60秒 * 60分钟 * 24小时 * 7天
		'display' => __('Once Weekly')
	);
	return $schedules;
}

wp_next_scheduled

通过勾子别名, 获取预定安排的下一个运行时刻, 以整型返回. 常用于判断是否已经做了预定安排.

<?php $timestamp = wp_next_scheduled( $hook, $args ); ?>

$hook: 勾子别名
$args: 勾子对应函数的参数数组 (可选)

wp_schedule_event

按周期循环预定安排一个 WordPress 勾子, 在预定时间触发勾子对应的函数.

<?php wp_schedule_event($timestamp, $recurrence, $hook, $args); ?>

$timestamp: 时间 (整型)
$recurrence: 循环周期类别 (hourly, twicedaily, daily, ...)
$hook: 勾子别名
$args: 勾子对应函数的参数数组 (可选)

wp_reschedule_event

按周期循环重新预定安排一个 WordPress 勾子. 但我发现这个方法不能正常使用, Codex 写得很草, 如果哪位清楚知道怎么使用, 请告知一下.

wp_unschedule_event

通过预定时间和勾子别名, 取消预定的安排.

<?php wp_unschedule_event($timestamp, $hook, $args ); ?>

$timestamp: 时间 (整型)
$hook: 勾子别名
$args: 勾子对应函数的参数数组 (可选)

wp_clear_scheduled_hook

通过勾子别名, 移除预定安排的勾子.

<?php wp_clear_scheduled_hook( $hook ); ?>

$hook: 勾子别名

wp_schedule_single_event

预定安排一个 WordPress 勾子, 在预定时间触发勾子对应的函数. 与 wp_schedule_event 不同的是该方法的只安排一次触发, 不存在循环预定.

<?php wp_schedule_single_event($timestamp, $hook); ?>

$timestamp: 时间 (整型)
$args: 勾子对应函数的参数数组 (可选)

查看 WordPress 定时任务列表

因为是定时任务, 不能立即生效, 那我们要如何查看这些任务安排呢? 可以装个插件进行辅助. 我建议使用比较轻量级的 WP-Cron Dashboard (与 Quick Comments 同一个作者), 安装后可以在 Tool -> WP-Cron 打开控制面板.

• WordPress 3.0 导航菜单 (开发篇)
• WordPress 二级导航菜单
• WordPress 嵌套回复构成原理
• WordPress 2.7 Trackbacks 的两种处理方法
• WordPress 3.0 导航菜单 (使用篇)

我恨 WordPress 的主题审核, 并打算不再向官方提交主题更新了 (可能找台服务器放自己的主题更新). 但我可以分享一下自己对这些审核条目的看法以及操作时需要注意的事项, 写这个文章目的有两个:
1. 让准备向官方提交主题的同学知道如何通过主题审核.
2. 回顾一下 WordPress 无理的审核事项, 说说我对其心灰的原因.

让我们一起来看看现在 WordPress 的主题审核 Review 文档吧. 看完你就知道审核团队对你的主题有些什么要求, 从而需要做些什么来让你的主题通过审核. 请打开 Theme Review of WordPress. 我说过一句话: 可有可无的说明可以没有, 所以不重要的我们统统跳过, 只挑那些通过审核的必要条件来讲.

代码质量

PHP
关闭所有插件, 并将 wp-config.php 中的 WP_DEBUG 设为 true 如下:

define(WP_DEBUG, true);

不允许出现任何提示, 警告, 错误和弃用的方法. 我很久之前就说过 WordPress 的方法命名和调用规则不一致, 看来现在打算整治了. 但我有同时担心某天会有大批插件突然无法使用.

HTML 和 CSS
主题需要通过 (X)HTML 和 CSS 的 W3C 认证. 话说我的主题一直都能过 W3C, 甚至我的博客全部页面都能通过, 这个真不难.

JavaScript
页面上没有任何 JavaScript 脚本错误.

功能支持

Feed 链接
使用 add_theme_support('automatic-feed-links') 为浏览器增加网站的订阅链接. 这是个蛋疼的功能, 因为帮你都封装好了, 输出就是原生的 RSS. 本应该人为选择的 (如我主题中的 Feed 自定义功能), 要求这个功能很恶心, 但必须添加. 真想不使用, 又要通过审核? 嗯, 还是有办法的, 你可以通过以下语句添加功能并使它失效.

add_theme_support('automatic-feed-links');
remove_action('wp_head', 'feed_links_extra');

Widgets
提供 Widgets 支持, 这个常谈, 不多言了.

评论
要求使用评论模板 comments_template() 调用 comment.php 的内容.
使用评论列表 wp_list_comments(), 该方法可以通过定义 callback 来自定义评论样式.
需要使用 comment_form() 来定义回复框的结构, 这个很扯淡, 任何美好的设计在它面前都会失色.
还要求支持嵌套回复. 相当扯淡, 本来 WordPress 的嵌套回复设计就不是很好, 现在变成强行要求了.

模板标签及勾子

wp_head() 和 wp_footer() 分别在 head 和 footer 调用勾子, 对插件来说是必须的, 所以得有.

body_class() 和 post_class() 分别在 body 和文章的节点上, 用来输出一大串乱七八糟的 class. 评价: 扯淡的要求.

$content_width 用于向用户提供调整主题宽度的功能, 例子如下:

<?php if ( ! isset( $content_width ) ) $content_width = 640; ?>

用 wp_link_pages() 为文章添加分页导航.

用 paginate_comments_links() 或者 previous_comments_link()/next_comments_link() 添加评论分页.

用 posts_nav_link() 或者 previous_posts_link()/next_posts_link() 在文章内容显示上一篇和下一篇文章的链接. 我认为在文章内页显示前后的文章是不合理的, 因为文章间没有必然联系, 放置相关文章才靠谱.

get_header(), get_sidebar(), get_footer() 和 comments_template() 这几个模板标签必须使用, 分别用来调用 header.php, sidebar.php, footer.php 和 comment.php 这几个文件.

WordPress 的 CSS 框架代码

用作水平对齐的样式 .aligncenter, .alignleft 和 .alignright. 因为使用 WordPress 的富文本编辑器插入图片时可以选择对齐模式, 这几个样式是必须的.

添加图片外框和标题的样式 .wp-caption, .wp-caption-text 和 .gallery-caption. 同样是富文本编辑器的属性要求.

CSS 代码会在提交代码的时候由机器审核, 但上传成功后同样会有关于样式效果的人为审核.

主题模板

以下 4 个模板必须存在:
index.php, 请参考 Template Hierarchy of WordPress
comments.php, 评论模板
screenshot.png, 缩略图, 需要跟实际效果保持一致.
style.css, 主题相关信息和样式

授权

主题中用到的 PHP, HTML, CSS, 图片, 字体和图标都必须在 GPL 授权框架下, 或者使用支持 GPL 的授权.

主题使用的授权需要通过以下两种方式之一来声明:
1. 在 style.css 文件中添加 License 和 License URI 来制定授权信息.
2. 在主题目录中添加 license.txt 文件为主题添加授权声明.

主题命名

主题命名里不能出现 WordPress 和 Theme 关键字, 但 WP 可以使用. 如 WordPress AwesomeSauce 和 AwesomeSauce Theme 不能使用, 但 WP AwesomeSauce 可以.

主题命名里不能出现有版本相关和审核相关的关键字, 如 Pure CSS3 就不行.

主题命名里不能出现作者和针对 SEO/spam 优化过的相关词语, 如 iNove by mg12 和 iNove Free WP Template 这样的名字都是不可以用的.

其他的都是可有可无的. 因为审核相当严格, 准备向 WordPress Theme Directory 提交主题的同学请对以上的内容逐条对照, 官方 Review 文档里面还有很多建议, 推荐一看.

为什么我不再提交主题审核了?

WordPress 为了推广一些可有可无的新特性, 强行要求主题对其进行支持. 让主题的个性化功能失色, 而且完全丧失了对老版本的兼容. 我觉得这些是得不偿失的, 与其为了他接受我的主题, 不如我将自己想做的东西提交到别的网页. 如果跟着这些条目来规约主题内容, 要通过这些审核并不困难, 但我只做我觉得靠谱的主题.

• iNove 1.3 发布
• WP 技巧: WordPress 的 RSS feed
• WordPress 主题 iNove
• Use Image Title in iNove
• WordPress 主题提交经历

WordPress 的头像服务 Gravatar 的部分服务器在国内访问困难, 原因是 Gravatar 所使用的 edgecast CDN 服务遇到了某些问题. WordPress 3.0 通过读取缓存服务器的方式, 减少了对 www.gravatar.com 的直接请求; 以往直接读取官方服务器. 现在都被分流到 0.gravatar.com, 1.gravatar.com 等缓存服务器上了, 这次遇上 CDN 故障, 所以就出现了无法读取头像的问题.

WordPress 最新评论插件 WP-RecentComments 直接调用 WordPress 的评论头像接口, 所以也会出现同样的问题. 但只要修复 WordPress 头像显示的问题就能正常如前了.

只需修改 Gavatar 头像的访问方式, 直接请求官方服务器就可以解决问题了. 一些热心网友已经找到问题, 并给出了解决方案. 而现在有更方便的解决办法, 插件. Gravatar Fixed 插件通过函数覆盖的方式, 重新自定义 Gravatar 服务器, 直接访问 www.gravatar.com 读取头像, 以保证正常访问.

插件页面: Gravatar Fixed 头像修正插件
下载链接: gravatar-fixed.zip

• WordPress 主题提交经历
• 升级到 WordPress 2.6
• WordPress 主题 Blocks2
• 主题技巧: WordPress 2.7 的评论分页
• WordPress 主题 Elegant Box

我写插件的时候一般分成两个文件写 PHP 代码, 一个是 core.php 用于书写核心代码 (如: 算法, 函数库这些与表现层无关的方法). 另一个文件才是插件代码, 在该文件内引用核心代码加以处理. 得益于这种写法, 这次重写时避开了很多不必要的处理, 如筛选评论, 删除配对标签这些. 如果再细分, 其实还可以将配置页面, 插件 Widget 和页面呈现分别写在三个文件里面, ... 但这些都是后话, 先看看我们这次更新都有哪些内容吧.

新老版本有什么区别?

页面初始化
1.x: 在页面加载时将评论列表输出. 包括事件绑定等. 影响页面其他内容的加载; 爬虫可以爬到这些数据, 对 SEO 不利. 关于评论的 SEO 文章
2.x: 在页面加载完成是生成评论列表并绑定事件. 减少最新评论加载对页面加载时间和搜索引擎的影响.

JavaScript 放置
1.x: 在页面 head 部分加载 JS. 因为在页面初始化时通过标签属性绑定了事件, 所以必须在此之前定义好事件.
2.x: 在页面底部加载 JS. 因为最新评论列表也是在页面加载完成时生成, 所以可以这样来后移 JS 的位置, 以减少对页面加载速度的影响.

翻页处理
1.x: 在后台将 HTML 片段拼接好返回页面. 数据量大, 服务器压力大.
2.x: 返回数据格式, 由前台拼接. 数据量小, 服务器压力小.

查看内容
1.x: 进入详细页面查看. 交互复杂, 不能同时看多个评论内容.
2.x: 直接在列表中更新. 简单方便.

插件配置
1.x: 在调用插件的时候进行配置. 保持与 WordPress 原生的 Widget 功能呢个类似, 不需要数据库, 没有学习成本.
2.x: 有专门的配置页面进行配置. 与其他很多插件一样, 需要使用数据库, 有一定的学习使用成本.

代码比较
1.x: 页面结构, 事件绑定混在一起. 工作量小, 处理方便, 但是代码不清晰, 维护麻烦, 扩展性差.
2.x: 页面结构和事件分开处理. 代码量大 (因为前端代码大幅增加), 但代码清晰易懂, 扩展性强.

解决了什么问题?

1. 延后 JavaScript 加载和事件绑定, 以不影响页面加载和搜索爬虫.
2. 减少服务器处理压力, 转由客户端进行拼装处理.

下一步要做什么?

1. 会开放一些对外的接口, 让主题和其他插件调用, 用来更新最新评论列表.
2. 增加新的功能, 功能可选择使用.

插件 2.0 升级答疑

Q: 为什么会一直出现 "正在加载..." 而不显示评论?
A: 请检查主题中的 footer.php 文件是否有代码 <?php wp_footer(); ?>, 如果没有请在 </body> 标签之前加上. 如果还不行, 请到 Settings -> WP-RecentComments 页面查看 JavaScript 的配置是否正确. 如果你不知道选择哪个, 请选第一或者第二项.

Q: 为什么样式没有正确显示?
A: 确保 Settings -> WP-RecentComments 页面中 "使用 wp-recentcomments.css" 被选中. 如果主题目录中存在 wp-recentcomments.css 文件, 请备份并删除掉这个文件. 若删除后样式仍不正确, 请调整一下文件内的样式.

• 最新评论插件 WP-RecentComments
• 插件更新: WP-EasyArchives 2.0
• WP-RecentComments 升级 1.6 后可能出现的问题
• WP-RecentComments 功能调查
• 关于 WordPress 上传图片失效的问题

1. 与 Read more 链接同样, comment 这种词语在网络中泛滥出现.
2. 为了让爬虫明确链接相关内容 (尤其是内链), 应该保证链接在页面中是唯一的.
所以需要 nofollow 掉这些评论链接, 以减少对文章链接的干扰.

怎样为评论链接加上这个 nofollow 属性呢?

或许你已经找到生成评论链接的方法: comments_popup_link.

并准备如同处理 Read more 一样为链接加上 nofollow, 但是最终发现这个方法不能使用 filter. 是的, 这个方式不能这样搞, 三年前就有人认为这是一个 bug 了.

其实不然, 该方法在打印 a 标签的 title 属性前有以下语句:

echo apply_filters( 'comments_popup_link_attributes', '' );

什么意思? 说明可以通过 comments_popup_link_attributes 为链接加上其他属性. 所以我们可以在 function.php 或者在插件中加入以下代码来为 WordPress 的评论链接加上 nofollow:

function add_nofollow_to_comments_popup_link(){
	return ' rel="nofollow" ';
}
add_filter('comments_popup_link_attributes', 'add_nofollow_to_comments_popup_link');

更多 WordPress SEO 相关技巧请参考《WordPress SEO 技巧》

• 为 WordPress 的 Read more 加上 nofollow
• WordPress 2.7 Trackbacks 的两种处理方法
• WordPress 评论 SEO
• WordPress SEO 技巧
• WordPress AJAX 加载文章内容 - 后台处理