适用版本

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

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

使用动机

可能你也曾想过做一套针对手机用户的界面, 或是进行网页兼容 (比如: 不显示侧边栏). 无论是再做一套还是进行兼容, 工作量都不少. 然而, 如果你使用 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 应用

我恨 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 主题添加管理选项

无论如何, 既然买了, 我不能对不住自己的 2380 大元, 还是会用出它应有的价值, 也会偶尔美化一下. 今天看到一套 iPhone 风格的叫 Suave 的图标, 很是喜欢. 做了一套 M8 主题, 分享一下, 希望用 M8 的朋友会喜欢.

主题只支持 0.9.x 的 M8 固件, 预览图如下, 下载请到 Box.net

最后, 赞一下魅族的 M8SE 换机活动, 我在广州买的机, 用了刚 10 个月, 触摸屏被我搓坏了, 在杭州没花一分钱就换了个新机. 不过好像所有 09 年初买的机器都有这触摸屏问题, 换机人数超多, 魅族现在已经不敢玩了...

• 为 iPhone 和 iPad 自定义网站的主屏幕图标
• App 每日推送 - 挖掘免费 iPhone/iPad 应用
• Gnome-Buuf-Deuce
• Shiftie Pastel
• Pidgin 状态图标

这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.

效果演示
二级导航菜单
淡出淡入导航菜单
滚动导航菜单

相关话题:

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
多级导航菜单
jQuery 导航菜单
点选式导航菜单 (待定话题)

二级导航菜单

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
 
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
 
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
			}
 
		);
	});
});

淡出淡入导航菜单

鼠标悬停显示淡入显示菜单, 离开淡出隐藏菜单. 需要加上延迟处理, 原因请参考请参考如下文章.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
 
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			}
 
		);
	});
});

滚动导航菜单

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},
 
			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}
 
		);
	});
});

演示主题:

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css, 添加了文件 js/menu.js

下载主题: default_with_menubar_6.zip

jQuery 的确好用, 这么简便地就把效果做出来了. 撇开别的不错, 这时间就节省不少. 但这绝对是用来忽悠入门者的, 如果想知道其原理, 还是建议看一下之前的文章, 自己敲几个代码, 那样你会收获更多.

下回预告:

下次要不要谢谢 YUI 的实现方法呢? (Prototype 就算了, 我自己实现的代码结构就是模范 Prototype 的.)

• jQuery 的 slideUp 和 slideDown 动画
• WordPress 淡出淡入导航菜单
• WordPress 滚动导航菜单
• WordPress 导航菜单
• Lazy Load, 延迟加载图片的 jQuery 插件

我发布的几款主题都可以在后台选择使用 Google Custom Search Engine (CSE), 但是并不提供内页处理, 搜索后会转跳到 Google.com. 包括我自己的博客, 一直也是如此. 今天折腾了一下, 把 Google 自定义搜索整合到了 WordPress 主题里面, 做成了内页显示. 其实很简单, 这就和大家分享一下.

为什么要使用 Google 自定义搜索 CSE?
1. WordPress 自带的搜索功能跟 Google 比起来实在太弱, 太弱, 太弱了. (当你的网站被 Google 收录良好, 这是很好的选择)
2. CSE 上可以显示 Google Adsense 为你带来一些广告收益.

为什么要将 CSE 整合到主题中?
1. 看起来整齐且舒服.
2. 不用转跳至 Google.com, 用户在本站的持续浏览.

CSE 页面的工作原理.
1. 创建一个可访问的页面. (不搜索也可直接访问)
2. 搜索的时候带参转跳至该页面.
3. 通过 JavaScript 对参数进行处理, 从 Google 获取数据并返回搜索结果.

如何把 Google CSE 集成到 WordPress 中?
你可以在我爱水煮鱼中找到答案:
http://fairyfish.net/2008/04/29/integrate-google-custom-search-into-wordpress/
如果你是 iNove 用户, 可以看看 whisperer 的教程:
http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/

为什么我不将这集成到发布的主题中?
这个功能需要后台添加页面和评论菜单项. 因为不是每个人都会折腾这玩意儿, 为免产生误解, 宁可不搞.

PS. iNove 主题可以将 googleSearchFrameWidth 设置为 605.

• 新版 Google Analytics
• WordPress 搜索框添加文字提示
• Google.cn 的首页工具栏
• Google 10周年时间轴
• Google 帮你的博客搬家

为什么要动态加载文章?

1. 快速向访客展示页面
文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的.

2. 让文章列表化
使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长.

为什么不动态加载文章?

1. 对搜索引擎不友好
搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的.
后来发现, 如果你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 表示影响不大.

2. 增加了请求次数
虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数.
后来我有选择地显示部分文章内容, 而且不是通过异步加载的方式, 也就是说, 这个问题是可以通过简单的修改解决掉的.

3. 一些插件失效
因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效.
可以通过特殊处理解决掉, 以后文章中会提及.

动态加载文章的设计思路

1. 找到页面上所有文章
为每个文章添加一个展开/折叠按钮

2. 向文章添加展开/折叠按钮
点击按钮, 如果文章内容没有加载, 加载并展开文章内容.
点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容.

3. 加载文章内容
将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上.

JavaScript 处理代码分析

1. 找到页面上所有文章

// 在文档加载完毕的时候遍历所有匹配文章的元素
jQuery(document).ready(function(){
	jQuery('div.post').each(function() {
		// 如果元素相应位置是文章 ID
		var id = jQuery(this).attr('id');
		if(/^post\-[0-9]+$/.test(id)) {
			// 则为每个文章添加一个展开/折叠按钮
			...
		}
	});
});

2. 向文章添加展开/折叠按钮

toggle.toggle(function() { // 展开
	// 如果文章内容为空, 加载文章内容
	if(jQuery('#' + id + ' .content').text() == '') {
		...
	}
	// 显示文章内容, 并切换按钮样式
	jQuery('#' + id + ' .content').slideDown();
	jQuery(this).removeClass('collapse').addClass('expand');
},
function() { // 折叠
	// 隐藏文章内容, 并切换按钮样式
	jQuery('#' + id + ' .content').slideUp();
	jQuery(this).removeClass('expand').addClass('collapse');
// 将按钮追加到文章标题前方
}).prependTo(jQuery('#' + id + ' h2'));

3. 加载文章内容

// 取得文章 ID
var postId = id.slice(5);
// 使用 AJAX 获取并处理文章内容
jQuery.ajax({
	type:         'GET'
	,url:         '?action=load_post&id=' + postId
	,cache:       false
	,dataType:    'html'
	,contentType: 'application/json; charset=utf-8'
	// 取得返回内容之前显示加载信息
	,beforeSend:  function(data){loadPostContent(id, '<p class="ajax-loader">Loading...</p>');}
	// 获取文章内容成功, 更新文章内容
	,success:     function(data){loadPostContent(id, data);}
	// 获取文章内容失败, 显示出错提示
	,error:       function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');}
});

后台代码处理

这个功能的难点是前台的 JavaScript 处理, 以 ID 获取文章内容的代码可以参考 wp-includes/post-template.php 的 get_the_content 方法. 后来我写了个文章, 专门讲解如何处理后台响应, 可以参考这篇文章: 《WordPress AJAX 加载文章内容 - 后台处理》

备注

这是一篇不完整的教程, 因为我觉得这个功能还没完成. 在我的计划中, 还有针对搜索引擎优化部分和其他的一些页面效果, 但由于最近比较忙没有时间完善起来.

出此文的用意是提供一种解题思路, 引导各位去思考如何实现类似的效果. (这也是为什么我没有详细的说明 get_the_content 如何修改的原因)

最近发现已经有几个人实现了这样的效果, 并在给了网友们很多帮助, 我很高兴. 但某人的一些留言过于煽情 (广告成分太高), 我屏蔽掉了, 特此说明.

• WordPress AJAX 加载文章内容 - 后台处理
• 为 WordPress 的 Read more 加上 nofollow
• 跨页悬浮显示 @ 评论 (代码篇)
• jQuery 导航菜单
• WordPress 搜索框添加文字提示

要不要使用嵌套回复? (优缺点对照)

一部分人对这个功能垂涎已久, 在 WordPress 原生支持嵌套回复之前就尝试使用一些插件来支持该功能. 嵌套回复有很多优点:

1. 它可以提高用户体验, 调动访客回复的积极性, 从而增加评论的数量, 能让博客变得像社区一样活跃.

2. 博客的回复邮件通知功能越来越被重视, 因为它可以为你挽留一些游客. 另外评论者发表评论后也不用经常回来查看是否被答复, 可以在一定程度上提高互动性. 嵌套回复可以有针对性的对评论进行答复, 评论者只要收到邮件便可知其所答.

另一部分人不使用嵌套回复, 我就是其中之一. 为什么呢? 且听我慢慢道来. 任何事物都有其利弊, 嵌套回复也存在一些缺点:

1. 嵌套回复是一种依赖程序的显示结构, 也就是说, 只要你使用了一次, 以后必须使用, 否则评论的顺序就乱了. 假设现在有 A, B, C 三人, 他们都进行了一次评论, 操作如下:
A 添加了一条评论.
B 也添加了一条评论.
C 回复了 A 的评论.

如果主题支持嵌套回复, 会得到以下的显示结构:

A

C

B

但如果主题不支持嵌套, 则会显示如下:

A

B

C

也就是说, 页面结构将变得无比的混乱, 你不得不让当前主题支持嵌套回复, 或者使用插件对其进行支持. 这就是对程序的依赖, 除非精通其制作原理, 否则它会限制你对主题和插件的选择.

2. 嵌套回复有针对性的回复功能 (针对某条评论进行回复) 是它的优势, 同时也是他的劣势. 如果有 100 个人在你的一篇文章中发表了评论, 并且你习惯对大部分评论都进行回复, 那是不是你也需要回复差不多 100 次? 如果这样的话, @ 回复比嵌套回复更适合你.

3. 嵌套回复依赖浏览器对 JavaScript 的支持.

我不使用嵌套回复也是因为前两个原因, 我不敢确定自己以后会一直使用嵌套回复, 并且在我的回复者中, 经常出现几个人提问同一个问题. 使用 @reply 是一个折中的选择, 我可以在一个回复中回答网友的评论, 并且我无需对相同的提问进行多次回答; 另外, 通过一些插件, 我同样可以实现回复邮件通知的功能, 仅是邮件内容稍为复杂罢了.

怎样将嵌套回复功能集成到主题中?

在主题中实现嵌套回复的方法有二, 包括 WordPress 提供的默认方法和自定义的回调方法. 下面我会讲解一下如何实现起嵌套结构, CSS 部分请自行研究.

默认方法:
WordPress 提供的基本的嵌套风格, default 主题用的就是这种模式.
优点: 方便使用, 减少代码量.
缺点: 代码结构不好, 不可能适合所有的主题.
实现步骤如下:

1. 在 header.php 的 <?php wp_head(); ?> 前方添加以下代码.

<?php if(is_singular()) wp_enqueue_script( 'comment-reply' ); ?>

其作用是加载嵌套回复所需的 JavaScript 代码. (也就是说, 如果浏览器不支持 JavaScript, 嵌套回复就没法实现)

2. 在 comments.php 文件的顶部添加以下代码.

<?php
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) {
		die (__('Please do not load this page directly. Thanks!'));
	}
?>

3. 在 comments.php 文件的评论列表元素中添加以下代码调用所有相关评论.

<?php wp_list_comments(); ?>

4. 在 comments.php 的 id="commentform" 元素内部添加以下代码.

<?php comment_id_fields(); ?>

和表单的适当取消回复按钮, 代码如下.

<?php cancel_comment_reply_link() ?>

5. 将所有调用评论部分的代码由

<?php comments_template(); ?>

修改为一下代码

<?php comments_template('', true); ?>

回调方法:
在基本嵌套的基础上, 定义 callback 方法以重新定义评论的内容和布局.
优点: 灵活多变
缺点: 增加大量代码

关于自定义嵌套回复, 我在之前的文章 "更新至 WordPress 2.7 正式版" 中误报了一个 bug. 在此, 我向所有读过此文的读者道歉.

1. 在默认方法的基础上, 添加一个回调函数, 以取代 WordPress 默认的评论布局. 我在 function.php 中添加了一个名为 custom_comments 的方法. 这里需要注意, 请不要加上结束的 </li> 标签, 我会在后续文章中说明具体为何不能加上.

2. 在 comments.php 中将

<?php wp_list_comments(); ?>

修改为以下代码以调用自定义的 custom_comments 方法

<?php wp_list_comments('callback=custom_comments'); ?>

详细代码可以参考本人制作的 Blocks 主题.

什么主题适合添加嵌套回复?

在主题中添加嵌套回复是个麻烦事, 它很折腾人, 而且会打乱整个主题结构, 直到现在我还在怀疑官方是否应该原生地支持嵌套回复. 但既然支持了很应该尝试一下, 那是不是所有的主题都适合添加嵌套回复功能? 我觉得不是.

对于一些图片较多的, 或者评论页面结构复杂的主题, 显然是不适合的, 这就是为什么我一直不在 iNove 添加嵌套回复功能的原因. 但是对于一些不依赖图片的主题, 如 Blocks 就很适合添加.

另外, 还需要根据你的需求判断是否支持嵌套回复, 支持多少层的回复? 最深层次是 10, 但我们可以只支持到第二或者第三层, 以降低开发成本.

后记

不知为何, 没有使用嵌套回复的我被多次问及相关的问题. 因为嵌套回复实现复杂, 难以维护, 和其他一些原因, 很多主题没有支持嵌套回复, 但很多人却是对它情有独钟, 我觉得可以将我的理解和大家分享一下.

接下来, 我还会另起文章讲解一下 "嵌套回复的工作原理" 和 "如何在兼容多个 WordPress 版本的前提下实现嵌套回复", 如果你有更好的建议或者任何意见, 请在此留言.

• WordPress 主题 Blocks
• 主题技巧: WordPress 2.7 的评论分页
• WordPress 评论分页的一个 bug 与解决办法
• WordPress 主题 Blocks (YO2 版本)
• 提高 WordPress 访客评论时的用户体验

我的主题同样带有页面模板, 但为了界面美观和简化处理, 我并没有将这些链接按分类来进行显示. 后来我觉得按分类处理还是有必要的, 不久前我开始在自己博客上做了些相关实验, 貌似网友们也比较喜欢将链接按分类进行显示.

那怎样才能按分类来显示友情链接呢?

咱们先了解一下获取链接列表的方法.
请打开 default 主题的 links.php 文件, 它的内容很简单, 调用链接列表的代码如下:

<?php wp_list_bookmarks(); ?>

这句代码将调出所有链接, 并按分类显示出来, 是一个嵌套的列表结构. 关于 wp_list_bookmarks 方法可以参看 wp-includes/bookmark-template.php 的源代码和 Codex 的使用说明.

既然实现如此简单方便, 为什么不使用这个代码来做呢?

因为代码结构不易进行加工, 所以我将所有链接不分类进行处理, 代码如下:

<?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand'); ?>

这段代码的意思是: 没有标题, 不进行分类, 链接位置随机安排.
在 iNove 中整个链接框的实现代码如下:

<div class="boxcaption"><h3><?php _e('Blogroll', 'inove'); ?></h3></div>
<div class="box linkcat">
	<ul><?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand'); ?></ul>
	<div class="fixed"></div>
</div>

那是否可以按照自己的意愿来显示其中一个分类呢?

是可以的! 我们可以通过以下代码只获取属于名字为 'firend' 的分类的所有链接:

<?php $bookmarks = get_bookmarks('category_name=firend'); ?>

关于 get_bookmarks 方法可以参看 wp-includes/bookmark.php 的源代码和 Codex 的使用说明.

那么我们可以通过下面的代码来显示名字为 'firend' 的分类的链接, 取代显示所有链接.

<div class="boxcaption"><h3>firend</h3></div>
<div class="box linkcat">
	<ul>
	<?php
		$bookmarks = get_bookmarks('category_name=firend');
		if ( !empty($bookmarks) ) {
			foreach ($bookmarks as $bookmark) {
				echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>';
			}
		}
	?>
	</ul>
	<div class="fixed"></div>
</div>

既然一个可以显示, 是不是所有分类都可以这样显示出来?

当然可以, 现在要想办法把所有链接分类找出来. 为此, 我们可以先看一下数据库中分类的存储结构:

可以看出, 我们只需要在 terms 表中出去相应数据元组对应的 name 属性就 OK 了. 所以这里需要通过 term_id 和 terms_taxonomy 表联一下, 并且将 taxonomy 的值限定为 'link_category'. SQL 如下:

SELECT T1.name AS name
FROM   $wpdb->terms T1,
       $wpdb->term_taxonomy T2
WHERE  T1.term_id = T2.term_id
AND    T2.taxonomy = 'link_category'

通过以上 SQL 我们可以将所有链接分类的名字找出来, 然后做一个循环处理, 把链接按照分类查找出来, 并置于页面中.

<?php
$linkcats = $wpdb->get_results("SELECT T1.name AS name FROM $wpdb->terms T1, $wpdb->term_taxonomy T2 WHERE T1.term_id = T2.term_id AND T2.taxonomy = 'link_category'");
if($linkcats) : foreach($linkcats as $linkcat) : ?>
	<div class="boxcaption"><h3><?php echo $linkcat->name; ?></h3></div>
	<div class="box linkcat">
		<ul>
			<?php
				$bookmarks = get_bookmarks('orderby=rand&category_name=' . $linkcat->name);
				if ( !empty($bookmarks) ) {
					foreach ($bookmarks as $bookmark) {
						echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>';
					}
				}
			?>
		</ul>
		<div class="fixed"></div>
	</div>
<?php endforeach; endif; ?>

使用 default 主题的处理方法的好处是简单, 方便, 但缺乏灵活性. 对于后一种方法, 需要有些许代码能力才能实现, 但并不是很难. 在决定要使用什么方法前请权衡时间, 能力, 需求等多方面的因素, 不可能尽善尽美, 适合自己就是最好的. 请不要发信请求我帮你修改, 我会在所有主题的下个版本中加入这个功能.

• WordPress 评论分页的一个 bug 与解决办法
• WordPress 不同页面显示不一样的侧边栏
• WordPress 防止冒充留言
• 将 Blogroll 分为两栏 (2)
• WordPress AJAX 加载文章内容 - 后台处理

正在开发的版本可以在以下测试站点试用:
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 后可能出现的问题

时隔 9 个多月, 关于导航菜单的话题又回来了. 上次写到三级菜单就不写了是因为我发现自己根本用不上, 就没去研究. 最近我在做一个小玩意儿用到了这个, 所以把它给做了出来并集成到 iNove 主题上. 因为内容繁多, 所以还是以之前的文章和代码作为基础来展开讲解, 希望这个文章会对大家有所帮助.

为了简化处理, 明确目标, 这次我们会以二级导航菜单作为原型进行扩展. 本文只对多级菜单相关处理进行讨论, 其他内容请参考以前的几篇关于菜单导航的文章, 文章链接你可以在本文相关话题中找到.

这是效果演示

相关话题:

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
jQuery 导航菜单
多级导航菜单
点选式导航菜单 (待定话题)

作业分析:

因为菜单由本来的二级菜单变成了多级菜单, 所以菜单结构会有些变化 (会有新的更深层的子菜单加入). 另外, 页面的样式和脚本都会有相应的变更, 重点在于对 JavaScript 的加工.

主要操作如下:
1. 鼠标移动到一级菜单的菜单项时, 如果该菜单项包含了二级菜单, 那么在下方显示其子菜单.
2. 鼠标移动到 N (N >= 2) 级菜单的菜单项时, 如果该菜单项包含了 N+1 级菜单, 那么在右侧显示其子菜单.

预想结构:

<div id="menubar">
	<ul class="menus">
		<li class="..."><a href="http://.../">Home</a></li>
		<li class="...">
			<a href="http://.../">菜单1</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单11</a></li>
				<li class="...">
					<a href="http://.../">菜单12</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单121</a></li>
						<li class="..."><a href="http://.../">菜单122</a></li>
						<li class="..."><a href="http://.../">菜单123</a></li>
						<li class="..."><a href="http://.../">菜单124</a></li>
					</ul>
				</li>
				<li class="...">
					<a href="http://.../">菜单13</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单131</a></li>
						<li class="..."><a href="http://.../">菜单132</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="...">
			<a href="http://.../">菜单2</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单21</a></li>
			</ul>
		</li>
		<li class="...">
			<a href="http://.../">菜单3</a>
			<ul class="children">
				<li class="..."><a href="http://.../">菜单31</a></li>
				<li class="...">
					<a href="http://.../">菜单32</a>
					<ul class="children">
						<li class="..."><a href="http://.../">菜单321</a></li>
						<li class="..."><a href="http://.../">菜单322</a></li>
					</ul>
				</li>
			</ul>
		</li>
		...
	</ul>
</div>

实施操作:

1. 调出无限级菜单 (子分类)
是否还记得如何设定列表的深度? 可以通过参数 depth 来进行设定. 当我们将深度设为 1 时不显示子分类, 将深度设为 2 时显示二级菜单. 现在我们要无限制层数的菜单, 所以可以去除这个参数, 系统会自动返回所有菜单. 所以显示菜单的代码如下:

<?php wp_list_pages('depth=2&title_li=0&sort_column=menu_order'); ?>

2. 修改菜单的样式
在子菜单项添加 display:inline; 以免在 IE (IE6/IE7/IE8) 中发生错位.

/* 子菜单的菜单项 */
#menubar ul.children li {
	float:none; /* 垂直排列 */
	margin:0;
	padding:0;
	/* multi 2009/06/11 ADD START */
	display:inline; /* 对 IE 来说十分很重要 */
	/* multi 2009/06/11 ADD END */
}

追加包含子菜单的菜单项的样式

#menubar ul.children li a.subtitle {
	border-right:3px solid #4281B7;
	width:97px;
}

添加当前菜单的效果, 以明确当前路径.

#menubar ul.menus li a:hover, 
/* multi 2009/06/11 ADD START */
#menubar ul.menus li a.current {
/* multi 2009/06/11 ADD END */
	background:#4281B7; /* 背景颜色 */
}

3. 加载菜单
加载菜单是应该分开处理, 对于对层次的菜单, 菜单显示有两种状态. (1) 作为二级菜单显示在上一级菜单的下方; (2) 而三级和以上层次的菜单则会显示在上一级菜单的右侧.

// 找到所有的菜单
var menus = this.obj.getElementsByTagName('ul');
for (var i = 0; i < menus.length; i++) {
	// 找到菜单的父节点 (包括标题链接部分)
	var menu = menus[i].parentNode;
 
	// 如果菜单的父节点就是根菜单, 显示一般的菜单
	if(menu.parentNode === this.obj) {
		new Menu(menu, opacity);
 
	// 如果菜单的父节点不是根菜单, 说明当前菜单是子菜单
	} else {
		new Menu(menu, opacity, 1);
		// 在子菜单的标题链接上加上 class 名, 以便定义样式
		menu.firstChild.className += ' subtitle';
	}
}

4. 菜单的初始化
添加一个参数, 以识别是否为子菜单 (三级以上的菜单); 去除 overflow:hidden; 的设置, 否则子菜单无法显示出来.

initialize: function(target, opacity, sub) {
	this.util = new MenuUtil();
 
	// 获取目标菜单 (没多余元素)
	this.obj = this.util.cleanWhitespace(target);
 
	// 定义透明度, 默认透明
	this.opacity = opacity || 1;
 
	/* multi 2009/06/11 ADD START */
	// 是否为子菜单
	this.sub = sub || -1;
	/* multi 2009/06/11 ADD START */
 
	// 获取菜单
	this.menu = this.obj.childNodes
 
	// 重要! 如果菜单不包含菜单项, 则不进行处理
	if (this.menu.length < 2) { return; }
 
	// 菜单标题和菜单体
	this.title = this.menu[0];
	this.body = this.menu[1];
 
	// 定义初始样式
	this.util.setStyle(this.body, 'visibility', 'hidden');
	this.util.setStyle(this.body, 'position', 'absolute');
	/* multi 2009/06/11 DELETE START */
	//this.util.setStyle(this.body, 'overflow', 'hidden');
	/* multi 2009/06/11 DELETE END */
	this.util.setStyle(this.body, 'display', 'block');
 
	// 添加监听器
	this.addListener(this.obj, 'mouseover', this.util.bind(this, this.activate), false);
	this.addListener(this.obj, 'mouseout', this.util.bind(this, this.deactivate), false);
	}

5. 对菜单和子菜单分开处理
菜单 (二级菜单) 的位置是相对于窗口的, 而子菜单 (三级或以上菜单) 是的位置是相对于上一级菜单的, 所以必须判断是哪种菜单类型, 并以不同的方法来确定位置. 另外, 两者要显示的位置也不相同, 所以在激活方法内还需要以不同的方式将 top 和 left 位置计算出来.

// 获取当前菜单体的位置 (子菜单)
if(this.sub == 1) {
	var pos = this.util.currentOffset(this.title);
	var left = this.util.getWidth(this.body);
	var top = pos[1];
 
// 获取当前菜单体的位置 (菜单)
} else {
	var pos = this.util.cumulativeOffset(this.title);
	var left = pos[0];
	var top = pos[1] + this.util.getHeight(this.title);
	// 子菜单不需要设置不透明度, 否则会形成多重透明, 效果不好.
	this.util.setStyle(this.body, 'opacity', this.opacity);
}

6. 添加当前菜单的 className
为了更好的表示当前菜单的上级菜单, 在激活菜单的时候为当前菜单加上 className.

// 当前选中菜单加上 class 名为, 以便定义样式
this.title.className += ' current';

并且在解除菜单的时候移除菜单上的 className.

// 离开菜单时取消当前菜单上的 class 名, 恢复原本的样式
this.title.className = this.title.className.replace('current', '');

演示主题:

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css, 添加了文件 js/menu.js

下载主题: default_with_menubar_5.zip

下回预告:

下次讨论点选式菜单, 或者 CSS 实现的菜单, 或者 jQuery 实现的各类菜单.

• WordPress 淡出淡入导航菜单
• WordPress 二级导航菜单
• WordPress 滚动导航菜单
• 在主题中添加 LavaLamp 菜单效果
• jQuery 导航菜单

之前我发过篇题为 "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 主题, 被问得最频繁的莫过于 "怎样将博客的标题换成图片?" 这个问题. 一些朋友使用了 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 需求调查