WordPress 默认主题自定义页面模板

天梯梦

浏览: 13634356 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Php / Pear / Mysql / Node.js

有的时候希望在 WordPress 网站上显示一些特殊形式的页面，就需要用到自定义页面模板。本文以 WordPress 内置的 TwentyElven（2011）和 TwentyTen（2010）主题为例做个详细介绍。与 WordPress 官方文档中的介绍不同的是，这里着重介绍 WordPress 默认主题静态页面模板的内部结构，以方便我们在自定义的时候进行修改。

文章先介绍一下 WordPress 主题的大致结构，然后以 WordPress 自带的主题，主要是 2011 主题为例说明页面模板的组成，最后给 3 个制作自定义页面模板的样例。

1. WordPress 主题的大致结构

以 Twenty Eleven（2011）主题为例，其文件夹下的文件组织结构如下所示。其中 // 号后面的内容为我的注释说明。相信即使是刚入门的朋友看了这个也能够对 WordPress 的主题有个较全面地了解，修改主题就比较顺利了。

在看下面的解释之前，需要先了解一个情况，那就是 php 代码的复用。我们看到的网页并不一定是由一个单独的 php 文件生成的，而是可以由一个主文件调用多个别的文件组合而成。这样就方便代码的复用：比如我想在每个网页都显示同样的一段话，那就没必要在每个不同网页对应的不同 php 文件里将这段话重复写一遍，而只需要单独建一个 php 文件来生成这段话，再在主文件中需要的地方引用这个文件就可以了。

WordPress 有个要求，即所有主题的页面模板（主 php 文件，调用它即可形成某个网页页面），或者由它调用的模板中，必须在靠近开头的地方包含 wp_head() （通常放在 header.php 文件中，通过 get_header() 来调用），而在靠近结尾的地方包含 wp_footer()（通常放在 footer.php 文件中，通过 get_footer() 来调用），因为 WordPress 需要在这些地方处理一些数据。所以如果我们打开一个主题中的文件，发现靠近开头有 get_header() 而靠近结尾有 get_footer()，则它必然是一个主 php 文件，用于显示某个/某类网页页面。

为了避免混淆，下面统称一个单独的 php 文件为模板，如果是主文件则又称为页面（或页面模板），生成的我们浏览到的称之为网页。至于 php 文件调用，可以通过自写函数实现，也可以直接使用 php 的 include 或者 require 方法，涉及到 php 编程的问题，这里不再介绍。

twentyelven 文件夹内部文件组织结构图：
// 先介绍重要的
│ index.php // 主题的引导文件，也是默认的首页的模板
│ header.php
// 这个文件包含 HTML 的 <head> 部分（不显示在网页上，但是通过查看网页源文件就能看到）， // 同时还可能包含一部分正文（HTML的 <body> 标签内的东西）； // get_header() 就是调用它的。 // 比如水景一页下面整个浅灰色色背景的部分都是在这个文件中处理的
│ footer.php
// 用于显示页面下面的内容，包含 </body> 标签 // 比如水景一页上面整个黑色背景的部分都是在这个文件中处理的

// 下面 9 个文件都是页面模板，都调用了 get_header() 和 get_footer() // 并且一般都会调用 comments.php 以处理评论列表和评论框
│ 404.php // 用于显示自定义 404 错误网页的页面模板
│ archive.php // 用于显示文章存档网页的页面模板，比如按日期存档等页面
│ author.php // 作者文章存档页面模板（显示该作者所有文章列表网页）
│ category.php // 分类页面模板
│ image.php // 用于显示图片附件，页面模板
│ page.php
 // 用于显示静态页面（page）的页面模板，通过 get_template_part( 'content', 'page' ) 调用了 content-page.php
│ tag.php // 标签页面模板
│ single.php // 单一文章（post）页面，这是标准形式的 post，调用了 content-single.php
│ showcase.php // 特色文章页面模板；用这个模板来做首页其实挺不错的

// 下面这一组 11 个以 content 开头的文件，都只是某个页面的一部分，类似于上面的 comments.php 文件 // Twenty Ten 主题中用的是 loop 开头
│ content-aside.php
│ content-featured.php
│ content-gallery.php
│ content-image.php
│ content-intro.php
│ content-link.php
│ content-page.php
│ content-quote.php
│ content-single.php
│ content-status.php
│ content.php
// 以上 11 个文件是用来处理网页主体部分的； // 包含正文内容，包括文章（post）、静态页面（page），也就是我们通常所说的文章内容； // 2011 主题内置了几种文章形式（post format），可针对不同的文章形式使用不同的模板； // 当然如果你乐意，使用同一个模板也没有问题

│ comments.php
// 评论模板；这个不是一个单独的页面，需要在别的页面中调用此模板 // 使用 comments_template( '', true ) 来调用
│ searchform.php // 搜索框模板
│ search.php // “搜索”页面模板，还会调用 searchform.php 来显示搜索框，这是个页面模板
│ sidebar-footer.php
│ sidebar-page.php
│ sidebar.php // get_sidebar() 会调用此文件
// 这三个是用于显示网页上 WordPress 边栏的模板 // sidebar.php 会根据情况调用 sidebar-page.php 或者 sidebar-footer.php 或者同时调用两个
│ functions.php
// 主题自定义的一些功能函数，如果有的话可以覆盖 WordPress 内建函数
│ rtl.css
│ style.css
// 这两个是主题的样式表文件，其中 rtl 只用于显示从右到左写法的语言
│ editor-style-rtl.css
│ editor-style.css
// 这两个是主题提供给后台的编辑器样式文件，一般不修改
│ screenshot.jpg
│ screenshot.png
// 这两个是主题的缩略图
│ readme.txt // 主题的说明文档
│ license.txt // 主题的许可证内容
├─colors // 文件夹，包含选择黑色风格时需要调用的样式文件（省略其下的文件）
│
├─images // 文件夹，包含主题网页上用到的图片（省略其下的文件）
│ │
│ └─headers // 文件夹，包含顶部背景图片（省略其下的文件）
│
├─inc // 文件夹一些内部函数，基本不会自己修改（省略其下的文件）
│ │
│ └─images // 文件夹，包含一些图片（省略其下的文件）
│
├─js // 文件夹，包含主题自己的 JavaScript 文件（省略其下的文件）
│
└─languages // 文件夹，包含语言文件的文件夹（省略其下的文件）

2010 主题与之相差不是太多，不再啰嗦了。

2. 页面模板结构

下面来介绍一个完整的页面模板，仍是以 2011 主题为例。

根据前面的说明我们已经知道，实际上一个完整的页面模板就是 page.php，但是它会调用 header.php 来形成页头，content-page.php 来处理静态页面文章，sidebar.php 来形成边栏，最后是 footer.php 来形成页脚。

其中 header.php、footer.php 和 sidebar.php 是全站一致的，我们一般不做改动，那么剩下的自定义部分就是 page.php + content-page.php 了。

结合 page.php 源代码进行说明，其中红色字体是我的注释。下面是从 2011 主题中直接提出来的源代码：

<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/上面全都是文件中的注释，php 标签内的注释一般用 /* */ 包围，单行可以直接在注释前前用 // 如果要自定义页面模板，需要在这里添加下面的代码（绿色字体），TemplateName 就是模板名称了。 我们在编辑页面的时候，通过旁边的下拉菜单选择模板的时候看到的就是这个名字。
<?php /** * Template Name: TemplateName */ ?>
<div id="primary">
    <div id="content" role="main"> 这两行是 HTML 结构标签

<?php while ( have_posts() ) : the_post(); ?> 开始处理内容

    <?php get_template_part( 'content', 'page' ); ?> 调用 content-page.php，实际上可以将 content-page.php 里的内容全部复制过来替换掉这一行

    <?php comments_template( '', true ); ?> 调用评论 comments.php

<?php endwhile; // end of the loop. ?> 内容处理结束

    </div><!-- #content -->封闭 id="content" 那个 div
</div><!-- #primary -->封闭 id="primary" 那个 div
可以在这里加上 <?php get_sidebar() ?> 那么页面就有了边栏了，不过就需要调整样式了（style.css）
<?php get_footer(); ?>

3. 三种自定义页面模板方式

实际上是 4 种吧，最后的 C 也可以象前面的 A 和 B 那么分的

A. 简单的页面模板 – 包含页面内容

如果只是想简单地在该页面中增加一些别的东西，比如放个 Google 地图什么的，或者将新浪微博嵌入进页面，同时还保留页面其它东西不变，我们就可以直接将自己的代码或内容挑个适当的地方插入进去就行了。

看了上面的注释，应该很容易找到自己要放东西的位置了吧？比如我的 Buzz 页面（该页面评论被我关闭了，所以看不到评论和评论框），现在就是在

<?php get_template_part( 'content', 'page' ); ?>

和

<?php comments_template( '', true ); ?>

之间插入了新浪微博的小工具代码（新浪微博 ——> 顶部工具条的帐号 ——> 我的工具中）。

B. 简单的页面模板 – 不包含页面内容

很多时候我们的自定义页面模板中都不会用到页面内容，也就是说，我们新建了这个模板，然后编辑该页面内容的时候都让内容留空了。我们只希望它显示适用于这个页面的自定义内容，比如水景一页网站上的链接和购物通道页面。这样的话就可以将上面标记为蓝色字体的代码全都替换成自己的自定义内容。

C. 复杂的页面模板

可是，很多主题会针对文章（post）和静态页面（page）的内容来设计样式（style.css）。为了让自定义内容样式与网站上其它页面的样式一致，我们就需要用到 content-page.php 文件中的代码了。将其中的代码（注释就不要了吧）复制过来替换掉上面

<?php get_template_part( 'content', 'page' ); ?>

这一行代码，形成：

<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/上面全都是文件中的注释，php 标签内的注释一般用 /* */ 包围，单行可以直接在注释前前用 // 如果要自定义页面模板，需要在这里添加下面的代码（绿色字体），TemplateName 就是模板名称了。 我们在编辑页面的时候，通过旁边的下拉菜单选择模板的时候看到的就是这个名字。
<?php /** * Template Name: TemplateName */ ?>
<div id="primary">
    <div id="content" role="main"> 这两行是 HTML 结构标签

<?php while ( have_posts() ) : the_post(); ?> 开始处理内容

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header --> 这 3 行是内容标题，不想要就删除

<div class="entry-content">
<?php the_content(); ?> 这 1 行是内容，不想要就删除
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> 这 1 行是……我也不知道是什么东西，不想要就删除
</div><!-- .entry-content -->

<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->这 3 行是那个“编辑”按钮，不想要就删除
</article><!-- #post-<?php the_ID(); ?> -->

    <?php comments_template( '', true ); ?> 调用评论 comments.php

<?php endwhile; // end of the loop. ?> 内容处理结束

    </div><!-- #content -->封闭 id="content" 那个 div
</div><!-- #primary -->封闭 id="primary" 那个 div
可以在这里加上 <?php get_sidebar() ?> 那么页面就有了边栏了，不过就需要调整样式了（style.css）
<?php get_footer(); ?>

然后我们可以将代码放在

<?php the_content(); ?>

本文发表于水景一页。永久链接：<http://cnzhx.net/blog/wordpress-default-theme-page-template/>。转载请保留此信息及相应链接。

分享到：

Linux Shell脚本的10个有用的“面试问题和 ... | ubuntu下中文输入法的安装--fcitx

2014-05-27 05:34
浏览 7172
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论