WordPress主题制作教程(五):WordPress的代码规范

WordPress一直致力于帮助用户维护一个统一的代码风格，使代码保持简洁、容易阅读。所以，不论是在编写 WordPress 核心代码、插件还是主题的时候，都请根据WordPress规则并以人类的眼光来审视和编写代码，以下几点是尤其需要注意的。

HTML代码

一般HTML代码语法正确性验证可以在W3C校验。

自闭合标签

自闭合标签的斜杆前应该要有一个空格，如正确的换行符应该是 <br />，<br/> 这是不正确的。

属性和标签

所有属性和标签都应该是英文小写，因为这些内容是给机器解析的，并不需要视觉上的可读性。但其中的数据应该是人性化的，易于人类阅读和理解的。如：

面向机器的代码：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

面向人类的代码：

<a href="http://www.uctheme.com/" title="这里应该有链接描述">uctheme.com</a>

而且属性内容应该用英文单引号或双引号包括起来，如：

正确的属性写法：

<input type="text" name="email" disabled="disabled" />
<input type='text'  name='email' disabled='disabled' />

错误的写法：

<input type=text name=email disabled>

正确的缩进

使用正确的缩进可以有效提高代码的视觉上的可读性，即使是PHP和HTML混写的时候，如：

正确的人类的写法：

<?php if ( ! have_posts() ) : ?>
   <div id="post-1" class="post">
      <h1 class="entry-title">Not Found</h1>
      <div class="entry-content">
         <p>Apologies, but no results were found.</p>
         <?php get_search_form(); ?>
      </div>
   </div>
<?php endif; ?>

错误的写法：

<?php if ( ! have_posts() ) : ?>
   <div id="post-1" class="post">
      <h1 class="entry-title">Not Found</h1>
      <div class="entry-content">
         <p>Apologies, but no results were found.</p>
 <?php get_search_form(); ?>
      </div>
   </div>
<?php endif; ?>

CSS代码

CSS描述性代码，主要规范提现在代码的可读性上，如：

可读性较高的：

#selector-1,
#selector-2,
#selector-3 {
   background: #fff;
   color: #000;
}

欠缺可读性的：

#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }
 
#selector-1 { background: #fff; color: #000; }

还有就是CSS类的命名上，应该避免驼峰式的语法，而是使用 – 作为单词分隔符，而且保证所用单词的具有描述性质，如：

正确的应该像这样#comment-form ，#commentForm 或者 #comment_form 再或者 div#comment_form 都是不好的，类似 #c1-xr 这种更是反人类，类名最好能只看名字就猜得出来是哪个位置的CSS代码。

如果使用属性定位，则需要使用双引号把属性值包括起来，如 input[type="text"] 这样的写法，类似 input[type=text] 的写法是错误的。

在必要的地方使用合理的注释也是极好的编码习惯之一。

引入CSS代码文件时使用 wp_register_style 函数注册文件地址和使用 wp_enqueue_style 函数引入。

JavaScript代码

JavaScript代码需要注意的地方太多了，这里不方便一一例举，只提一个点特别需要注意的。

在WordPress中使用开源框架时，请先检查WordPress有没内置。如 jQuery ，WordPress内置了，我们就可以直接使用 wp_enqueue_script 函数调用，而无需再自行引入，如果需要在代码中使用美元符号，则使用这样的语法：

(function( $ ) {
   // Expressions
})( jQuery );

点击这里查看WordPress内置了哪些开源框架

引入JavaScript代码文件时使用 wp_register_script 函数注册文件地址和使用 wp_enqueue_script 函数引入。

PHP代码

PHP基本语法应该按照PHP手册说的来，但是有几点需要特别提到的：

1. 不要使用短标签 <? 而是使用 <?php
2. 合理使用缩进和空格提高代码可读性
3. 赋值使用的符号（如 = ）前后应该使用空格
4. 使用三元操作符时把变量放在右边
5. 注释总是需要的

使用内置函数

正确使用WordPress函数是WordPress开发中需要得到重视的一点，如在文章循环中获得文章标题应该使用get_the_title() 而不是 $post->post_title ，不仅仅为了代码的统一性和数据处理，最主要的原因是这些封装好的函数里都为了这些内容提供了独一无二的钩子，通过这些钩子可以很方便地修改这些内容，但是如果直接输出数据库查询结果而不是使用函数，这一切就不复存在了。

WordPress函数众多，具体请看函数参考：http://codex.wordpress.org/zh-cn:%E5%87%BD%E6%95%B0%E5%8F%82%E8%80%83

常见的内容查询和更新函数分类：

1. 文章，页面，附件，书签
2. 分类，标签，分类法
3. 用户和作者
4. 供稿(Feed)
5. 评论，通知和引用(Ping,Trackback)
6. 主题相关

需要在某个地方插入执行代码使用动作(Action)函数，需要过滤某个地方的数据使用过滤器(Filter)函数，过滤时使用格式化(Formatting)函数。

AJAX 处理使用 WP_Ajax_Response 类，对象缓存使用 WP_Object_Cache 类（一般缓存直接使用 Transients API 即可），错误处理使用 WP_Error 类，文章查询使用 WP_Query 类，链接重写使用 WP_Rewrite 类，用户角色处理使用 WP_Roles 类，数据库查询使用 wpdb 类（如果需要新建数据表，命名时请使用 $wpdb->prefix 作为前缀）。

还有小工具接口，编辑器接口，定时任务接口等。具体内容在往后的教程逐步添加。

如果本文对你有帮助，你可以扫描右边的二维码打赏，谢谢支持

联系优畅：uctheme#qq.com (#改为@)
微信订阅号：优畅主题（uctheme）
官网淘宝店：http://uctheme.taobao.com
版权声明：版权归 优畅主题 所有，转载请注明出处！
转载请保留链接： https://www.uctheme.com/technical/1174.html

1. 

   沙发！

   one heart 2015-08-09 下午 12:13 [回复]

   这评论框都看不见了~