WordPress 主题机制的运行原理

基本思想

PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。

PHP 代码的可以完成功能:显示出 html 的字符串标签的代码。WordPress 的首页 index.php 的 get_header ()、get_sidebar ()、get_footer () 等函数返回的结果用 echo 输出是带有 html 标签的代码段。

主题包各文件说明

  • header.php:这个文件中包含博客的标题(title),描述(description),tag,以及 css 等信息。
  • sidebar.php:这个文件控制你侧边栏中的显示方式。
  • footer.php:控制页面底部的显示,包括 ICP,版权声明等信息。
  • archive.php:被系统调用用于显示用户提交分类,按日期归档,tag 等查询后显示的页面。下面代码显示了 archive.php 内部是如何辨别不同的查询请求的:
<!--条件判断-->
<?php if (is_category()) { ?>
  <div class=”pagetitle”>‘<?php single_cat_title(); ?>’ 分类下的文章</div>
  <!–显示下面是哪个分类下的文章列表,‘ ’ 分别是左右单引号,下同–>
<?php }    
  else if( is_tag() ) 
{ ?>
<div class=”pagetitle”>‘<?php single_tag_title(); ?>’ 标签下的文章</div>
…………
<?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
  <div class=”pagetitle”>日志归档</div>
<?php } ?>
  • search.php:用于显示用户提交搜索后显示的页面。
  • searchform.php:搜索栏表单,被 header.php 调用。
  • single.php:用于全文显示 post 页面。
  • page.php:用于全文显示 page 页面。
  • function.php:存放自定义的函数,被其他文件包含和调用。
  • comments.php:留意评论模板,被 single.php,page.php 等需要评论功能的网页调用。
  • style.css:整个网站布局和显示模式。
  • screenshot.jpg:用于在后台选择主题页面里显示这个主题的截图,wordpress 会自动在主题目录下寻找 screenshot.* 文件。

从源码看主题的调用过程

当浏览器向 apache 发送请求要得到博客主页的 HTML 代码时,./index.php 被调用。./index.php 中的 require (‘./wp-blog-header.php’); 调用./wp-blog-header.php。
而./wp-blog-header.php 做了一些链接数据库包含头文件等处理,其中有两件事情与主题调用有关:
1、有 require_once (dirname (__FILE__) ./wp-includes/functions.php’);
而./wp-includes/functions.php 中包含进了./wp-includes/theme.php,这里定义了 get_home_template ()。

function get_home_template() {//返回所要加载的主题
  $template = ”;
  if ( file_exists(TEMPLATEPATH . “/home.php”) )
    $template = TEMPLATEPATH . “/home.php”;
  elseif ( file_exists(TEMPLATEPATH . “/index.php”) )
    $template = TEMPLATEPATH . “/index.php”;
  return apply_filters(‘home_template’, $template);

其中 apply_filters () 的作用是:将 $template hook 到 tag=’home_template’的 filters 上并返回 $template,也就是主题包的路径。

2、有 require_once (ABSPATH . WPINC . ‘/template-loader.php’);
调用了./wp-includes/template-loader.php(ABSPATH 代表./, WPINC 代表 /wp-includes)。
而./wp-includes/template-loader.php 中有:

} else if ( is_home() && $template = get_home_template() ) {
include($template);
return;

get_home_template () 将 主题包路径返回给 $template,这里的 include ($template); 语句就把./wp-content/themes/ 主题名 /index.php (比如日志现在所用的主题路径就是./wp-content/ade/index.php) 包含进去了。于是开始执到./wp-content/themes/ade/index.php 里面的代码了,接下来就是该主题内部的事情了。

主题被调用后,首页的加载过程

各个页面的加载过程大致相同,下面以首页为例说明。显示首页的时候,Wordpress 只调用 index.php,在 index.php 定义了要加载那些模板以及其加载顺序。一般情况是:header.php-> 页面主要内容(index,page,signle 等页面都有其自己的定义)->sidebar.php->footer.php

其实对于一个能够提供 theme 的程序而言,在程序的构架上必须要实现数据和表现的分离。通常我们所说的 MVC(Model、View、Controller)架构就是这个意思。

在 WordPress 中,是这样来实现数据和实现的分离的。
1. XHTML:用 Div 等用来表现数据,CSS 来描述这些数据的表现形式,用这种方式来实现数据和表现的分离;
2. Template 的方式:页面各个部分单独保存为一个一个.php 文件(如上面的 sidebar.php,footer.php 等),页面加载时候调用所需代码。

比如 <?php comments_template (); ?> 就返回了留言框的所需代码。

在比如 index 中有:
<?php get_footer(); ?>
<?php get_header(); ?>
“get_header” 和”get_footer” 分别用来得到该页的 header 和 footer,其实就是两个 div 块儿。index 的主体同样是一个大的 div(<div id=”content”>),在该 theme 的 CSS 中即可以看到对这个 div 的表现定义,包括字体、背景颜色、边距等等。这里唯一的 id=content 来告诉浏览器,这个标签内的内容显示在 CSS 中定义的 content 部分样式里面。