×
WordPress主题制作教程(五):WordPress的代码规范
优畅主题 Wordpress教程 2014-12-24 16:51 3,459 1 条评论

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 作为前缀)。

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

 

 


WordPress 香港虚拟主机推荐: 衡天主机(完美支持伪静态,100%兼容优畅主题,省去配置烦恼,轻松建站)
如果本文对你有帮助,你可以扫描右边的二维码打赏,谢谢支持
联系优畅:uctheme#qq.com (#改为@)
微信订阅号:优畅主题(uctheme)
官网淘宝店:http://uctheme.taobao.com
版权声明:版权归 优畅主题 所有,转载请注明出处!
转载请保留链接: https://www.uctheme.com/1174.html
谢谢微信打赏

微信钱包扫描赞助

谢谢支付宝打赏

支付宝扫一扫赞助

品牌创立:2012-11-18优畅主题

优畅主题成立于2012年11月18日,专业Wordpress导购主题开发商,拥有多年Wordpress主题设计经验,专门为淘宝客和导购客站长量身打造高端赚钱模板,我们注重细节,有着严谨的开发态度,一切从客户角度出发,如果你也喜欢 WordPress导购主题,欢迎和我们一起交流!

上一篇 WordPress主题制作教程(三):HTML静态模板制作 WordPress全局变量:is_apache 下一篇

6 + 10 = ?

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

    这评论框都看不见了~

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册