WordPress高质量主题之路在nettuts+看见一篇名为《16 Vital Checks Before Releasing a WordPress Theme》,感觉说的很有道理,值得一读,自己做主题的时候参考一下,尽力做出高质量的主题。

 

免费发布WordPress主题或许不需要注意太多,但在付费主题就不一样了,比如ThemeForest出售的主题。既然收费,就得专业点,至少得值得人们花钱买。

nettuts总结了16条注意事项,发布主题前应该检查一下,简单记录了一下这16条,以后做主题要多多注意。

1. 密码保护的页面不要直接显示评论

WordPress允许用户为文章设置密码保护,用户必须输入密码才能看到文章的内容,所以没提供密码之前,也不能显示评论,要不就出洋相了。

注意看默认主题的comments.php,开头的那段代码就是防止泄密的

<?php if ( post_password_required() ): ?>  
     <p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view and post comments.' , 'mytheme' ); ?></p>  
</div>  
<?php  
        return;  
      endif;  
?> 

2. 正确显示附件

WordPress模板结构中有一个特殊的文件叫做attachment.php,该文件专门用来显示WordPress的附件,附件可以是图片、音频、视频或者文件。当然,不支持attachment.php不是什么大问题,很多附件可以直接在浏览器中显示。

WordPress默认主题TwentyTen的attachment.php有一段有趣的代码,可以显示附件图片的大小

if ( wp_attachment_is_image() ) {  
        echo ' <span class="meta-sep">|</span>  ';  
        $metadata = wp_get_attachment_metadata();  
        printf( __( 'Full size is %s pixels', 'twentyten'),  
                     sprintf( '<a href="%1$s" title="%2$s">%3$s × %4$s</a>',  
                         wp_get_attachment_url(),  
                         esc_attr( __('Link to full-size image', 'twentyten') ),  
                         $metadata['width'],  
                         $metadata['height']  
                     )  
       );  
}  

TwentyEleven中没有attachment.php,但有一个专门显示图片附件的模板叫image.php,显示附件的功能更加完善,支持gallery方式浏览。

3. 支持Right-To-Left模式

Right-To-Left 也就是平时所说的RTL,指从右到左的阅读习惯,我们都是从左到右阅读,但有些国家是从右到左阅读的,如果你做的是一个通用的WordPress主题,最好支持一下RTL模式。WordPress默认的主题都支持RTL模式,在这些主题目录下有一个文件叫做rtl.css,当开启RTL模式时,该文件中的CSS样式会覆盖掉style.css中的样式。

开启RTL模式只需要在wp-config.php中将语言设置为从右到左阅读的语言,例如阿拉伯语(Arabic)

define('WP_LANG', 'ar')  

在rtl.css中控制方向

body {  
    direction: rtl;  
    unicode-bidi: embed;  
} 

更改阅读方向并不需要重新定义所有的样式,想想一下这个网站的镜像是什么样子。float:left或许要变为float:right,margin和padding也要相应对调。注意更改细节,例如引用(blackquote)段落文字缩进的方向等等。

4. 提供编辑器样式(Editor Style)

WordPress的编辑器TinyMCE有自己默认的样式,与主题在前台的表现通常不一样,为了让用户在编辑内容时就能看到前台的效果,可以在主题目录下放一个文件叫做editor-style.css,在这里设置主题使用的字体、字号,给.mceContentBody class增加width属性控制长度,该效果在WordPress默认主题中表现的很明显。

5. 支持文章分页

这里的分页不是指首页的文章列表分页,而是指浏览单篇文章时,可以通过<!–nextpage–> 标签将文章截成多页。只需要在the_content()后面添加如下代码

wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number'));  

6. 为默认的Widget写样式

自制主题,特别是从头开始写的主题,一定要记得给WordPress默认的Widget写样式,至少要让这些Widget和你的主题融为一体。

例如分类目录小工具,支持下拉列表和无序列表两种显示方式,你的主题应该为两种方式写好样式。还要注意日历工具,日历工具用table布局,确保日期在单元格中居中显示。

作为一个好的开始,可以先为.widget class编写漂亮的样式,因为这个class会应用到所有的widget上。

7. 支持嵌套评论

嵌套评论可以说是WordPress的基本功能,嵌套评论需要js的支持,当你点击回复链接时,这段js会帮助你把位于文章底部的表单搬运到回复按钮下面,在默认主题的header.php中就可以找到这个js文件

<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );
?>

除了这些,还要在CSS上下点功夫,嵌套的评论需要一些margin来区分嵌套关系,嵌套评论的级数是不确定的,不要把margin设置的太大以至于四五级的时候就显示不开了,也不要设置的过小让人无法区分嵌套关系。

在修饰评论表单时也要记得,这个表单可以放置在嵌套评论的框框中,这些框框的宽度会变的。

8. 不要忘记wp_footer和wp_head

漏写这两个函数会让很多插件无法工作,所以记得在body标签结束前要写上wp_footer(),在head标签结束前要写上wp_head()。

9. 支持缩略图功能

WordPress 从2.9版开始支持缩略图功能或者说特色图像功能(thumbnails or featured images),不用再借助timthumb等脚本实现。只需要在主题的functions.php中加入如下代码就能支持此功能

add_theme_support( 'post-thumbnails' );  

此功能对用户非常有用,最好支持。

10. 支持自定义菜单

WordPress 3.0终于支持了自定义菜单,用户在后台用拖拽的方式就可以放置菜单项,菜单可以是分类、页面、文章、tag等等,功能灵活强大。为了让用户受益于WordPress原生的菜单功能,在主题的functions.php中注册菜单

register_nav_menu( 'main_nav', __( 'Main navigation menu', 'mytheme' ) );  

并在模板文件(例如header.php)中显示注册过的菜单

wp_nav_menu( array( 'theme_location' => 'main_nav' ) );  

此方式比之前任何一种菜单都更加灵活方便,所以不要再使用过去的显示全部页面或者显示全部分类的方式,试试WordPress原生的菜单功能吧。

WordPress的菜单功能支持多级列表,只要主题开发者写上合适的CSS样式,就能做出完美的下拉菜单。

jumbled_menus

如果你的菜单比价特殊,比如只支持两级菜单,为了不让主题出丑,用代码限制菜单最多显示两级

wp_nav_menu( array( 'depth' => 2) );  

11. 支持自定义背景

这也是WordPress 3.0的新功能,我认为是可选的,不一定必须支持。如果你的主题比较一般化,支持一下对用户更友好。只需要在functions.php中放上

add_custom_background();  

WordPress就会自动显示custom background界面。

12. 支持自定义header

和11楼一样,这个也是WordPress 3.0引进的新功能,只是这个用起来更费尽一点,但结果还是不错的,可以显示随机header图片,可以让用户上传自己的图片。

首先,要在functions.php中定义几个常量,将路径和宽度、高度替换成自己需要的

define( 'HEADER_TEXTCOLOR', '000' );  
define( 'HEADER_IMAGE', get_bloginfo( 'stylesheet_directory' ) . 'path/to/your/image' );  
define( 'HEADER_IMAGE_WIDTH', 'yourwidth' );  
define( 'HEADER_IMAGE_HEIGHT', 'yourheight' );

设置好常量以后,还要写一个函数告诉WordPress如何处理header,主要是样式方面怎么表现

<?php  
function mytheme_header_image() {  
?>  
     <style type="css">  
         #header { background: url(<?php header_image(); ?>) no-repeat; }  
    </style>  
<?php  
}  
?> 

还需要创建一个函数,定义后台预览的样式,例如mytheme_admin_preview_header()。

最后,为了开启Appearance->Header选项卡,再添加一行代码

add_custom_image_header( 'mytheme_header_image', 'mytheme_admin_preview_header' );  

13. 用户可见文字多语言化

用WordPress的__()和_e()函数可以将字符串多语言化,用户借助Poedit制作.po文件,从而将WordPress多语言化。

__('Hello', 'mytheme')  
_e('Hello', 'mytheme') // Also prints the translated string.  

通常主题会自带一个.pot文件,用户可以通过这个文件制作翻译文件,通过下面的代码指定翻译文件存放位置

load_theme_textdomain( 'mytheme', TEMPLATEPATH . '/languages'); 

为了让其他人使用方便,也为了国际化,支持多语言并制作.pot文件是制作主题必不可少的内容。

14. 处理custom fields

用户在编辑文章时可以通过custom fields添加一些自定义内容,内容是否显示完全取决于主题如何处理。如果你想让用户直观的看到每篇文章的custom field,下面这个function可以帮忙

the_meta()  

需要在loop中调用。这个不一定有用,更不是发布主题必须做的,但对那些不知道custom fields为何的用户或许有帮助。

15. 注重细节

修饰动态系统困难之处在于有很多边缘的情况,可能考虑不到。比如评论关闭的时的样式,比如正文太短,footer会不会出现奇怪的行为,正文里出现不常见的标签,样式是否控制了。这些都是很细节的地方,能否把细节处理的到位,也是主题质量高低的一个区分点。

16. 使用wordpress.org的主题测试单元

WordPress.org提供了一份测试数据,通过import功能可以导入到WordPress中,测试数据包含一些特殊的文章格式,可以检测主题是否表现良好。

如果想进一步测试,可以按照WordPress.org提供的Theme Unit Test的步骤来。

结语

个人感觉这份列表中所述功能,并非所有都是制作主题必须的,但有很好的指导意义,每次制作主题都能高标准严要求,才能更快的提升水平,保质保量。

4条留言

  1. 留言表示我是多么喜爱你的博客和你~

    1. 谢谢你,我不认识你真是太遗憾了。

    1. 嗯,我也是看着有用才记下来的

评论功能已关闭