我恨 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 的. 我们可以创建一个 page, 以 page 内容作为留言板话题, 并将该页面设为网站首页, 其他不可用链接全部转跳首页.

制作这个 WordPress 主题, 我们只需要 3 个文件: style.css, index.php, comments.php. 当 page.php 文件不存在时, page 会调用 index.php 作为它的模板. 以下是我的 index.php 文件内容.

<?php get_header(); ?>
 
留言板的话题和相关内容写在这里...
 
<?php 
	if(have_posts()) {
		the_post();
		comments_template('', true);
	}
 
	get_footer();
?>

可以看出, 还是要判断一下文章是否存在的, 倒不是为了显示文章内容, 这是为了给评论提供 $post 变量, 以便显示对应的评论. 留言板主题的其余部分与一般主题无异, 按需修改即可.

最后我们还需要为 WordPress 设置一下首页的映射, 进入后台 Setting -> Reading, Front page displays 选择 A static page, 并将 Front page 设为之前创建的 page. 如下图:

Okay, 大功告成! 是不是很简单? 下次再说说如何对这种页面做 SEO 吧.

• WordPress AJAX 加载文章内容 - 后台处理
• WordPress SEO 技巧
• WordPress 面包屑插件 Breadcrumb NavXT
• 手动升级 WordPress 的步骤
• 为 WordPress 主题添加管理选项

正在开发的版本可以在以下测试站点试用:
http://demo.neoease.com/index.php?wptheme=Blocks

对于本次更新, 我已经做了以下一些修改:

新增:
兼容 IE8
兼容 WordPress 2.8
支持多级菜单
添加日历 Widget 的样式
支持 'Mail To Commenter' 插件
在链接页面新增 '添加链接' 的按钮 (方便一点)
在文章中添加文章作者的链接和头像, 作为后台选项 (适合 Group Blog)
添加 'Ctrl+Enter' 快捷键提交评论
添加横幅广告位置及其后台选项
添加网页分析工具后台选项

更改:
更正 W3C 验证链接 (原本的 CSS 验证链接没加上 referer 参数)
将所有的 '<?' 标记改为 '<?php' (因为某些服务器的 PHP 禁止使用 '<?')
修改表格的样式 (美观一点)
优化获取 copyright 时间的 SQL (提高效率)
更改文章信息的布局 (简化布局, 也免得标签过多时错位)
更改作者存档的提示信息 (本来只显示 Author Archive, 现在显示为 Archive by {作者昵称})

修复:
修复当留言超多时 (10万条以上) 发生的后台留言页面显示错误
防止侧边栏在 IE6 中被挤到内容下方
解决 IE 中和其他浏览器嵌套回复风格不一的问题
修复 'New post' 按钮的链接
修复图片 captions 左对齐和右对齐错位的问题

移除:
移除 'description' 和 'keywords' 选项 (因为和很多 SEO 插件发生冲突)
移除图片转换功能 (除了我几乎没有人在用, 留着浪费资源)
移除侧边栏宽度调整的选项.
不再支持 WordPress 2.3.x.

对于该主题, 无论是否与本次修改相关, 都欢迎你可以在此提出意见和建议. 如果有任何疑问, 也可在此提问, 我会尽我所能来解答 (不保证能为你提供完整的解决步骤, 但可以说出我的思路).

• 在 Blocks 上实现分页导航
• WordPress 主题 Blocks
• WordPress 主题 Blocks (YO2 版本)
• Blocks2 主题提交记
• WP-RecentComments 升级 1.6 后可能出现的问题

之前我发过篇题为 "iNove 需求调查" 的文章, 意在向广大网友征集意见. 通过网友的投票, 我最终还是打消了合并侧边栏为一个的念头. 为主题添加了 Ctrl+Enter 提交评论的组合键. 不过我并没有添加 footer 可以添加代码的部分, 因为我发现很多插件可以做这事情. 在这里向提出建议和投票的各位表示感谢.

为了避免不必要的发问, 我在这里描述一下更新内容.

1. 兼容 IE8, 因为 IE7 用户群多, 我又不想出现太多的 Hack 代码, 所以我只是选用了 IE7 模式来进行显示. 当 IE7 用户很少的时候 (或许要等 Windows 7 普及的时候), 我将会完全放弃兼容 IE7.
2. 支持 AJAX Comment Pager 插件, 因为这不是一个 click-click 插件, 需要改些代码, 所以很多朋友问我如何使用. 这次我干脆就把它给支持了, 只要激活插件, 修改后台参数就可以用了.
3. 支持 Denis 的 Thread Twitter 插件, 为此添加了一个 twitter.php 模板文件.
4. 支持 WP-Poll 插件, 其实只是为它重新定义了样式.
5. 增加日历 Widget 的样式.
6. 在主题设置页面增加一个选项, 控制是否显示 Feed 阅读器的列表.
7. 在主题设置页面增加向横幅添加 HTML 的选项, 可以在这个位置放个广告或者个人介绍, 推荐放置高度为 60px 的广告.
8. 增加几个地区的语言, 并更新简体中文和繁体中文的语言包.
9. 添加了 Ctrl+Enter 提交评论的组合键.
10. 更改表格的样式.
11. 更改图标 caption 的样式.
12. 更换搜索栏.
13. 将所有 '<?' 更改为 '<?php', 因为有些 PHP 容器没开通对前者的支持.
14. 修复多行 tag 不能显示的问题.
15. 当鼠标不在菜单上, 让鼠标变成回一般状态.
16. 修复显示评论数量不正确的问题, 本来连没同意显示的评论数量都算上了.
17. 修复显示 'this.menu is undefined' 错误信息并且不能显示 Feed 订阅器列表的问题.
18. 修复一些文本输出问题, 包括没被翻译到的字符串.
19. 移除 description 和 keywords 选项, 因为这与一些 SEO 插件冲突. (建议想弄 SEO 的朋友还是自己搞吧, 别信插件)
20. 移除图片切换功能, 因为这个只是我自己在用, 放在发布的代码里面有点不厚道.

我只能详细到这种程度了, 如果你还想知道哪些代码发生了变化, 建议你安装一个代码对比工具查看.

对于与一些插件不兼容的问题, 我还是那句话 "不可能兼容所有插件的". 如果你知道冲突问题怎么解决, 那么请可以告诉我, 我会尝试在新版中将这个问题解决掉. 关于 WP-PageNavi 插件, 我建议使用 2.3x 版本, 2.40 版本在 IE 上显示十分丑陋 (无论是什么主题).

主题何去何从? 这个主题将不会集成 jQuery, 不会发布其他配色, 更不会有三栏版本, 这些都是为了保持尽量的简洁, 毕竟它不是一个定制主题, 需要预留一定的修改空间. 以后我会将重点放在解决 bug 和提高兼容性方面, 外观不会有太大变化.

下载 iNove | 相关说明

最后 YY 一下, 目前 iNove 的总下载量达到十七万多了, 同时也将 NeoEase.com 推到了 PR7.

• WordPress 主题 iNove
• WordPress 新主题 iNove
• Change Header Color of iNove
• Thread Twitter 0.5
• Use Image Title in iNove

本文介绍的是如何在 iNove 主题中添加鼠标悬浮显示 @ 评论的功能. 或许我说得不准确, 但我真不知道该怎么描述. 比如: A 留言了, B 用 @ 回复了 A, 所以 B 的回复可能是这样的:

@A
How much money do you have?

就是说, 当鼠标悬停在 @A 上面的时候, 就会将 A 的评论内容显示在一个悬浮区域中.

实现步骤

其实这是 yinheli 实现的一个功能, 我看效果很好就借鉴过来了. 具体技术和原理可以看看 yinheli 的 (上), (下) 两篇教程. 下面我只会教你怎么在 iNove 中实现.

1. 下载 commenttips.js 文件. 该文件修改自 yinheli 的代码, 我去除了一些无关代码, 简化了效果, 和修复了几个 bug. 下载请点

2. 将 commenttips.js 文件放置到 inove/js 目录.

3. style.css 中追加样式代码如下:

#thecomments .tip {
	background:#FFF;
	border:1px solid #CCC;
	width:605px;
	padding:10px !important;
	padding:10px 10px 0;
	margin-top:0;
	position:absolute;
	z-index:3;
}
#thecomments .tip .act {
	display:none;
}
*+html #thecomments .tip {
	padding:10px 10px 0 !important;
}

4. 在主题中添加代码调用 JavaScript. 打开 templates/end.php, 在 </body> 前面一行添加以下代码:
(如果你有其他插件或者自己已经添加了 jQuery 的库, 那第一行代码可以不必添加.)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/commenttips.js"></script>

5. 好了, 刷新一下有 @ 回复的页面, 等页面加载完, 将鼠标悬停在 @ 回复上, 你会看到效果的.

第一次接触 jQuery, 写得还凑合吧, 觉得写得好的给点掌声, 觉得写得不好的赏两个臭鸡蛋...

跨页显示评论

在 WordPress 上实现跨页显示评论的原理, 技巧, 代码请参考《跨页悬浮显示 @ 评论》

• 在主题中添加 LavaLamp 菜单效果
• 将 iNove 菜单上的小屋图标换成文字
• Use Image Title in iNove
• CSS 菜单列表设计
• 话说前端 (1)

回答一些问题:
1. header 下方的菜单经常被别人认为是分类导航. 但并不是我不想修改, 而是我想不到更好的效果, 如果你有好的想法, 可以告诉我.
2. 菜单只能到 2 层, 我知道有人希望更多层次的. 因为我没这个需求, 所以也觉得不紧急, 如果你觉得有必要, 希望也能贡献些代码.
3. 有些朋友希望能在后台替换 header, 这会打乱主题的结构估不作考虑, 有需要的朋友可以自己换个图片.
4. 发布多颜色版本和三栏版本的方案, 我的习惯是不发布多个版本, 除非作为主题的功能进行处理, 但是这个主题不宜添加这样的功能.
5. 虽然该主题已经支持了很多插件, 但还是很多朋友问能不能支持 XXX 插件. 答案是肯定的, 但是有些插件本人并不使用, 不知道使用方法也不想花时间去研究, 所以如果你有你样的需求, 请告诉我它有什么特点, 为什么你你喜欢它, 应该怎么添加到主题里面,...
6. 请不要问我要 Feed 阅读器的 PSD 文件, 因为我也没有. 用图片编辑器换一个订阅器标志就行了.
7. 我不准备让首页和文章的侧边栏不一样, 你可以参考我的 Random Posts 和 Recent Posts 的处理自己加工主题.
8. 侧边栏的标题是我故意不进行 i18n (国际化) 的, 因为 sidebar.php 是常变的.
9. 该主题将不会发布多个颜色版本. 因为 iNove 的图片比较多, 所以也不会像 Elegant Box 主题一样添加风格切换功能.

新版本预定更新:
1. 添加一个选项控制是否显示订阅器列表.
2. 添加几个国家和地区的语言.
3. 将所有 <? 开头的 PHP 语句改成 <?php 开头.
4. 修改一下文章中 table 的样式, 可以参考这个页面.
5. 修复多行 tags 时重叠在一起的问题.
6. 修复鼠标放在菜单右边时还显示手指图标的问题.
7. 将东南西北四个侧边栏合并为一个.
8. 添加 WP-Polls 样式处理.
9. 添加 Ctrl+Enter 快捷键提交评论.

如果你还有什么问题, 需求, 意见和建议, 请在此留言, 谢谢!
最后我将汇总各人的意见再整理代码, 因为各人需求不一, 众口难调, 我不保证最后发布的版本会包含你的功能建议, 也未必是你所期望的那个样子.

• WordPress 新主题 iNove
• Change Header Color of iNove
• 将 iNove 菜单上的小屋图标换成文字
• Use Image Title in iNove
• WordPress 主题 iNove

关于 iNove 主题, 被问得最频繁的莫过于 "怎样将博客的标题换成图片?" 这个问题. 一些朋友使用了 iNove 主题, 而他们希望能将文字标题换成他们的个性图片. 那么, 现在我将为你演示如何将标题换成图片.

Step 1 - Create your image title. In fact, I supply a PSD file (title_psd/title.psd) in iNove package, you can edit it for your blog.
步骤 1 - 创建一个标题图片. 其实我已经在主题包中提供了一个 PSD 文件 (title_psd/title.psd), 你可以编辑一下以适应你的博客使用.

If you have created an image yourself, then you can ignore 1.1~1.3 and jump to 1.4.
如果你已经自己创建了一个个性标题图片, 那么你可以忽略 1.1~1.3, 直接跳到 1.4.

1.1 - Open title_psd/title.psd in Photoshop, change the text on 'NeoEase' layout. (If the canvas is not long enough, please change the width of canvas.)
1.1 - 在 Photoshop 中打开 title_psd/title.psd, 修改 'NeoEase' 图层的文字. (如果画布长度不够, 请修改一下画布宽度.)

1.2 - Hide 'Background' layout.
1.2 - 隐藏 'Background' 图层.

1.3 - Save as title.gif (GIF file), and set 'Matte' to black color.
1.3 - 保存为 title.gif (GIF 图片), 并且将 '杂边' 设置为黑色.

1.4 - Move title.gif file to 'img' directory. (If you have an GIF image, please rename the image to 'title.gif'.)
1.4 - 将 title.gif 文件移动到 'img' 目录(文件夹). (如果你已有一个 GIF 文件准备作为标题图片的, 也请移动到这里.)

Step 2 - Now, your image is ready and you have to edit 'style.css' file to change the title.
步骤 2 - 现在你的图片已经准备就绪了, 但你还需要编辑一下 'style.css' 文件以更换标题.

2.1 - Open the style.css and find '#title a'.
2.1 - 打开 style.css 文件, 并在文件中找到 '#title a'.

2.2 - Close or remove the following lines.
2.2 - 屏蔽或者移除以下代码.

#title a {
	text-decoration:none;
	color:#FFF;
	/*width:250px;*/
	height:30px;
	display:block;
	font-family:"Trajan Pro";
	letter-spacing:0;
}

2.2 - Open the following lines. (remove the beginning /* and the ending */)
2.2 - 激活下面的代码. (移除掉开始位置的 /* 和 结束位置的 */ 即可)

#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px; /* change '250' to the width of you title.gif file */
	height:30px;
	text-indent:-999em;
	display:block;
}

If you want to remove the tagline and increase the height of the title, follow the next steps.
除此之外, 如果你还想移除掉副标题部分和增加标题的高度, 你可以跟着做下面的一些步骤.

Step 3 - Remove the following line in templates/header.php file.
步骤 3 - 在 templates/header.php 文件中移除下面的代码.

<div id="tagline"><?php bloginfo('description'); ?></div>

Step 4 - Find '#title a' in style.css and change 'height:30px;' to 'height:44px;'.
步骤 4 - 在 style.css 文件中找到 '#title a', 将 'height:30px;' 改为 'height:44px;'.

#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px;
	height:44px; /* change 30px to 44px */
	text-indent:-999em;
	display:block;
}

Step 5 - If you need higher title, please modify the attributes of '#caption' and '#title a', for example:
步骤 5 - 如果你需要更高的标题, 可以修改一下 '#caption' 和 '#title a' 的相关属性, 下面是一个例子. 如果你使用中文语言 (将 WPLANG 改成了 zh_CN 或者 zh_TW), 那请打开 chinese.css 文件修改一下 '#caption' 的属性.

#caption {
	height:65px; /* change 44px to 65px (44 + 21 = 65) */
	padding:25px 30px 0; /* change 21px to 0 */
}
#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px;
	height:65px; /* change 44px to 65px */
	text-indent:-999em;
	display:block;
}

• Change Header Color of iNove
• 在主题中添加 LavaLamp 菜单效果
• 将 iNove 菜单上的小屋图标换成文字
• iNove 中鼠标悬浮显示 @ 评论
• 用图片代替文字标题

Step 1 - Start up your Photoshop, open the header_footer.jpg file.
步骤 1 - 启动 Photoshop, 打开 header_footer.jpg 文件.

Step 2 - Select the dark section of header.
步骤 2 - 选择图片中顶部的暗色部分.

Step 3 - Create a new layout named 'Layout 1' and fill any color you like.
步骤 3 - 创建一个命名为 "图层 1" 的新图层, 并涂上你喜欢的颜色.

Step 4 - Set the blend mode to 'Overlay' and change the fill opacity on 'Layout 1'.
步骤 4 - 将图层模式设置为 "叠加", 并调整一下 "图层 1" 的填充不透明度.

Step 5 - Remove unwanted color of the two corners on 'Layout 1'.
步骤 5 - 在 "图层 1" 中清除两处转角中不必要的颜色.

Step 6 - Save as JPG file and change the image in your iNove theme.
步骤 6 - 将图片保存为 JPG 格式, 并将主题中的原图替换掉.

• Use Image Title in iNove
• WordPress 新主题 iNove
• 将 iNove 菜单上的小屋图标换成文字
• iNove 1.3 发布
• iNove 需求调查

window.onload = function(e) { // 页面加载完成时
	var cookie = readCookie("style"); // 读取 Cookie
	var title = cookie ? cookie : getPreferredStyleSheet(); // 获取上一次的风格
	setActiveStyleSheet(title); // 重新设定风格
}

以下是 wpdesigner7 的方法:

function getPreferredStyleSheet() {
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 遍历所有 link 标签
		if(a.getAttribute("rel").indexOf("style") != -1 // 找到包含 style 的描述
			&& a.getAttribute("rel").indexOf("alt") == -1 // 找不到包含 alt 的描述
			&& a.getAttribute("title") // 找到 title 属性
		) {
			return a.getAttribute("title");
		}
	}
	return null;
}

以下是我的处理方法:

function getPreferredStyleSheet() {
	var i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1
			&& a.getAttribute("title")
		) {
			return a.getAttribute("title");
		}
	}
	return null;
}

或许你已经注意到了, 少了句代码而已. a.getAttribute("rel").indexOf("alt") == -1 的意思是 "在标签中无法找到带 alt 的描述属性".
wpdesigner7 靠这个来判断获取哪个风格 (非默认风格都添加了属性 rel="alternate stylesheet"), 找到不带该属性的那个风格就立刻返回.
而我的没有用这个属性, 只能将默认的风格放在最前, 找到立刻返回. 也就是说, 每次放最前面的就是它的默认风格.

• 在主题上添加风格切换功能 (1)
• WordPress 评论的 @ 回复
• WordPress AJAX 加载文章内容 - 后台处理
• jQuery 导航菜单
• 提高 WordPress 访客评论时的用户体验

1. 用 JavaScript 实现的切换功能
本例的演示主题中我已经提供了完整的 JavaScript 代码 (js/styleswitcher.js), 如果你对 JavaScript 并不熟悉则没有必要研究它, 知道怎么调用就行了. 这段代码要利用 Cookie, 可以获取当前主题的样式代号(第一次取默认主题的), 和保存当前主题的样式代号.
js/styleswitcher.js 文件内 99% 的代码来自 wpdesigner7 主题. 但我修改过的 1% 决定了我的处理方法和 wpdesigner7 主题并不相同, 后续文章中我会说说其中的区别与优缺点.

2 .在主题中引用脚本 js/styleswitcher.js
在 header.php 的 <head> 和 </head> 之间添加以下代码:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/styleswitcher.js"></script>

3. 在主题中添加切换按钮
在主题内任何地方添加都可以, 但为了方便查阅我们还是将这些按钮添加到 header 中. 一共三个按钮, 在 header.php 文件的最后面追加以下代码:

<div id="styleswitchers">
	<a id="style-green" onclick="setActiveStyleSheet('green');" href="javascript:void(0);">green</a>
	<a id="style-blue" onclick="setActiveStyleSheet('blue');" href="javascript:void(0);">blue</a>
	<a id="style-red" onclick="setActiveStyleSheet('red');" href="javascript:void(0);">red</a>
	<div style="clear:both;"></div>
</div>

4. 为切换按钮的外形定义样式
在 style.css 中追加以下代码:

#styleswitchers a {
	width:16px; /* 宽度为 16 个像素 */
	height:16px; /* 高度为 16 个像素 */
	text-indent:-999em; /* 不显示文本信息 */
	display:block; /* 为了不显示文本信息而定义为块状 */
	float:left; /* 左对齐 */
	margin-right:4px; /* 按钮右边的外边距 */
}

5. 定义不同风格的样式 (以红色为例)
创建文件 styles/red/default.css 和 styles/red/global.css 两个文件, 其中 default.css 只在激活该风格时才会生效, 它控制整个界面的样式; 而 global.css 则是任何时候有效的, 它只负责确定切换按钮的样式.

Q1: 为什么不将 default.css 和 global.css 两个文件合并在一起?
A1: 因为我们要将主题样式和按钮样式分离开, 在本例中并看不出有什么优点, 但在后续文章的例子中, 这将变成极大的方便. 如: 一个主题本来有 1, 2, 3 三种风格, 当引入风格 4 的时候, 我们就不需要再去修改 1, 2, 3 中关于 4 风格的切换按钮样式了 (各负责各的).

Q2: 分为 default.css 和 global.css 两个文件对性能有什么影响?
A2: 因为链接数多了, 所以效率相对低一点点, 但这是微乎其微的, 不会影响用户体验.

Q3: 什么情况下不用分为 default.css 和 global.css 两个文件.
A3: 如果你的风格不多, 或者风格数量不变, 那没有必要分为两个文件.

这里的 styles/red/default.css 只是修改了 header 和 footer 的背景颜色, 代码如下:

.credit {
	background:#a09090;
}
#header {
	background:#a09090;
}

而 styles/red/global.css 定义了红色风格切换按钮的样式, 代码如下:

a#style-red {
	background:#a09090;
}
a#style-red:hover {
	background:#e09090;
}

以同样的方式创建 green 和 blue 风格. 如果你要创建更多风格或者用别的命名, 请保持使用英文, 数字和下划线的组合 (数字不能是第一个字符), 因为 HTML 标签中的 id 和 class 属性不能存在其他的字符.

6. 在主题中引入各种风格的样式
在 header.php 的 <head> 和 </head> 之间添加以下代码: (第一个为默认风格)

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/green/default.css" type="text/css" media="screen" title="green" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/green/global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/blue/default.css" type="text/css" media="screen" title="blue" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/blue/global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/red/default.css" type="text/css" media="screen" title="red" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/red/global.css" type="text/css" media="screen" />

现在 Classic 主题已经拥有了简单的风格切换功能. 你也可以点击下面的链接下载我已经修改好的主题:
classic_with_styleswitcher_1.zip

下次, 我们会讨论一下本例与 wpdesigner7 主题在处理风格切换上的主要不同, 如果你本文或者以后的章节有任何意见和想法, 请在此留言.

• 在主题上添加风格切换功能 (2)
• 为主题添加风格切换功能
• 让侧边栏列表一分为二
• 制作 Elegant Box 主题风格
• WordPress 主题审核

对于第一种含义, 比较经典的例子是 Wpdesigner7 主题, 它是著名主题设计人小土豆 (Small Potato) 的力作, 可以通过点击页面上的切换按钮实现风格切换.
对于第二种含义, Glued Ideas Subtle 主题是个很好的例子, 就像它的名字一样, 它是一个十分灵活的主题, 可以在后台通过更改选项来控制页面的现实风格. 另外还有本人的 Blocks 主题, 它可以在后台控制页面结构, 实现在两栏和三栏模式之间的切换.
而本人发布的第一个 WordPress 主题 Elegant Box 则属于两者兼具的主题, 可以让访客在页面上切换风格, 也可以在后台选择默认的显示风格和是否允许访客在页面切换风格.

带有风格切换的主题最大的好处就是灵活, 网站管理员可以方便改变网站外观, 访客可以选择符合自己审美的风格. 但也有其弊端, 因为改变风格无法改变页面内容. 比如你的页面上有个 Google 广告, 选择白色作为背景, 主题也选用了白色风格, 而当访客点选了其他风格, 那么就会造成页面的不协调. 当然, 你可以有意识地避免出现这样的问题.

前面介绍了什么是主题风格切换, 它的例子和优缺点, 或许你以为本文还会谈谈如何在主题里添加风格切换功能, 就像题目写的一样. 但很遗憾, 可能会让你失望, 因为内容比较多, 本文只能算是个 "序". 我会在后面几篇文章中, 以 Elegant Box 为例, 完整地说说如何实现这个功能, 下面是我预订的讨论内容:

1. 在页面上简单实现主题风格切换
2. 在页面上自动加载风格切换选项
3. 添加默认风格选项
4. 添加是否允许用户切换风格选项

因为年末比较忙, 感觉自己有点闭塞, 没讯息来源就好像没啥好写了. 所以才打算翻些旧东西出来凑凑文章, 希望农历新年之前可以完成全部章节. 如果你有什么意见或建议, 请不要犹豫, 将你的想法告诉我.

• 整合 Google 自定义搜索 CSE
• WordPress 主题提交经历
• WordPress 新主题 iNove
• WordPress 主题 Elegant Box (YO2 版本)
• WordPress 主题 Elegant Box

主题简介:
本人第四个 WordPress 主题, 零插件要求, 支持 Widgets. 很幸运地该主题上了 WordPress Theme Directory 的头版.
使用 YO2 的朋友可以直接到后台选用该主题.

相关标签:
双栏式, 固定宽度, 支持 Widget, 右侧边栏, 白色, 通过 XHTML, 通过 CSS, 后台管理

适用版本:
WordPress 2.5 或以上版本

主题演示:
点击这里进入演示页面

主题下载: Download

测试验证:
测试用 WordPress: 2.3.3, 2.5.1, 2.6.1, 2.7.1, 2.8.3
测试用浏览器: IE 6/7/8, Firefox 2/3/3.5, Opera 9.6, Safari 4 和 Chrome 2.0
通过 XHTML 1.1 和 CSS 3 验证

推荐插件:
WP-PageNavi
WP23 Related Posts
WP-RecentComments
Highslide4WP
WP-Syntax
Quick Comments (0.7.0 或以上版本)
WP-EasyArchives
Thread Twitter (0.4 或以上版本)
WP-Polls
AJAX Comment Pager (Comment list ID: thecomments | Callback method name: custom_comments)
Mail To Commenter (支持 "@+user+blank" 模式)

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

博客图片标题:
因为发布主题中的标题必须显示正确的博客名字, 故不能使用图片. 若要使用图片作为标题, 请执行以下步骤:
1. 使用 title_psd 文件夹中的 PSD 图片和字体文件, 将图片修改为你的博客标题, 并另存为 title.gif.
2. 在 style.css 文件中查找 #title a 使用去除注释以激活该段样式.

备注信息:
该主题灵感来自 MacZone, 但为了通过 WordPress 官方验证, 不能为它加上 backlink, 深表遗憾. 详见如下邮件 (部分) 内容:

http://maczone.sk/ looks like a spam/sponsored/paid/seo link. If this theme was truly inspired by that site the link would be better in the description instead of inside the theme.

2008/11/17: 总下载量突破 10,000.
2008/12/19: 单周下载量突破 10,000.
2008/12/27: 总下载量突破 50,000.
2009/01/07: 支持 20 个国家和地区的语言.
2009/01/31: 总下载量突破 100,000.
2009/05/11: 总下载量突破 200,000.

• WordPress 主题 Blocks2
• WordPress 主题 Blocks
• WordPress 新主题 iNove
• WordPress 主题 Elegant Box
• 手机主题调度插件 WordPress Mobile Themes

主题简介:
本人第三个 WordPress 主题, 沿用 Blocks 主题配色. 他们是两个主题, 你可以将 Blocks2 看作是 Blocks 的兄弟版本, 而不是加强和升级. 零插件要求, 支持 Widgets. 另外, 因为受限于 YO2, 没有实现侧边栏 DBX 的效果.
在 WordPress 2.3.3/2.5.1/2.6.1 上使用 IE 6/7, Firefox 3, Opera 9, Konqueror 3.5.10, Safari 3.1.2 和 Chrome 0.2 测试通过.

本文内所有提及内容, 包括主题只适用于 YO2, 自建 WordPress 用户请访问 http://www.neoease.com/blocks2/ 查看普通版本的相关信息.

相关标签:
双栏式, 固定宽度, 支持 Widget, 右侧边栏, 白色, 简洁, 淡雅, 后台管理

主题下载: Download

推荐插件:
SRG Clean Archives
WP23 Related Posts
Pagebar2

主题管理:
受限于 YO2, 不能像普通版本一样在后台插入标签页管理, 只能使用修改配置文件的方式.
关于配置管理, 修改主题目录中的 config.php 文件即可, 文件中每个选项都已经附有详细的说明.

主题使用英文:
1. 删除主题目录中的 zh_CN.mo 文件.
2. 如果希望字体细小些, 可以在 header.php 中删除以下代码

<?php if (strtoupper(get_locale()) == 'ZH_CN') : ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/zh_CN.css" type="text/css" media="screen" />
<?php endif; ?>

• WordPress 主题 Blocks2
• WordPress 主题 Blocks (YO2 版本)
• WordPress 主题 Elegant Box (YO2 版本)
• WordPress 主题 Blocks
• Blocks2 主题提交记

这个主题原本是为一个朋友设计的, 奈何对方不满意, 被我冷藏了一年. 这次拿出来大改造了一番, 加宽了内容框, 修改了评论样式, 支持了很多插件... 自我审视了一番觉得勉强可以见人, 就用上了.

iNove 与之前做过的几个 WordPress 不太一样, 它是有做 PS 设计的, 并在 coding 时大量地采用图片, 尤其是小图标. 另外, 像这样的评论和 Trackbacks 的处理方式, 我在做 Blocks2 时就很想用了, 可是受限于图片一直没有实现.

嗯, 就像我之前说过的, 我一定要做一个多图的主题. 虽然下载图片会增加网站的流量和稍微影响网站的显示速度, 但有时候图片的魅力会让人着迷, 自从见到 Delacro 的 INSay 之后我一直都这么认为.

回顾以前做过的几个 WordPress 主题

Elegant Box
以 dayvan 为框架, 参考过 N 多个主题制作而成. 现在看来 XHTML 和 CSS 都写得有点烂, 架构中有些标签名字和它的实质用途没对上, 也没规范, 样式表中还使用很多固定宽度的属性. 我在这个主题做了无数的实验, 绝对是我学习 WordPress 主题制作的试验田.

Blocks
以 Classic 为框架, 使用了我在 Opera 时做的主题 nopic 的风格, 是一个零图片的主题. 从 Elegant Box 继承了很多东西, 也规范多了, 但为了实现一些效果, 令页面结构过于复杂了. 这个主题也是一个试验田, 在它上面实现了双栏和三栏互相切换和左右栏互相切换等一些功能.

Blocks2
从零开始, 沿用 Blocks2 的色调, 为节省空间而淡化了边界的概念, 也是一个零图片的主题. 这主题没有太多新的东西, 功能也没前面两个丰富, 但结构比较清晰. 这个主题带来了一些提高用户体现的功能, 使用了大量的 JavaScript 代码 (没有使用 framework).

iNove 主题信息

该主题已经免费对外提供下载, 主题相关信息请转跳主题页面.
WordPress 主题 - iNove

• WordPress 主题 iNove
• 更新至 WordPress 2.7 正式版
• iNove 1.3 发布
• WordPress 主题 Blocks2
• 2008 年度总结

主题简介:
本人第三个 WordPress 主题, 沿用 Blocks 主题配色. 他们是两个主题, 你可以将 Blocks2 看作是 Blocks 的兄弟版本, 而不是加强和升级. 零插件要求, 支持 Widgets.
已发布 YO2 的专用版本: Blocks2 for YO2

相关标签:
双栏式, 固定宽度, 支持 Widget, 右侧边栏, 白色, 简洁, 淡雅, 通过 XHTML, 通过 CSS, 后台管理

适用版本:
WordPress 2.3 或以上版本

主题演示:
点击这里进入演示页面

主题下载: Download

测试验证:
测试用 WordPress: 2.3.3, 2.5.1, 2.6.1, 2.7.1, 2.8.3
测试用浏览器: IE 6/7/8, Firefox 2/3/3.5, Opera 9.6, Safari 4 和 Chrome 2.0
通过 XHTML 1.1 和 CSS 3 验证

推荐插件:
WP-PageNavi
WP23 Related Posts
WP-RecentComments
WP-EasyArchives
WP-MulticolLinks
Highslide4WP
WP-Syntax
wp_addbookmarks [修改版本]
Mail To Commenter (@+user+blank)
Quick Comments
WP-PostViews
Gravatar (针对 WordPress 2.3 或以下版本)

关于插件 WP-PostRatings, 需要在后台的插件模板管理中作一些处理才能得到更好的效果. 另外, 为了能通过 W3C 验证, 对插件 wp_addbookmarks 做了简单的修改.

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

• WordPress 主题 Blocks
• WordPress 主题 Blocks2 (YO2 版本)
• WordPress 主题 iNove
• WordPress 主题 Elegant Box
• Blocks2 主题提交记