WP笔记

发布WordPress主题前的16项检查

最后更新于 2015 年 8 月 14 日

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条评论

评论已关闭。