WordPress主题剖析

已发表: 2015-06-04

这是“启动并运行：WordPress 开发实用指南”中的一章，这是 6 月 16 日推出的 WordPress 开发多媒体指南。完整的软件包包括一本完整的电子书、50 多个主题和插件开发教程视频，以及对 13 位世界上最好的 WordPress 开发人员的代码演练访谈。 立即在 upandrunningwp.com 预订可享受 20% 的折扣！

关键要点：

  • WordPress 主题由一组一致的部分组成。 非子主题的关键部分包括style.css 、 functions.php和几种 PHP 模板文件（例如header.php 、 footer.php和index.php ）。
  • 作为主题的主要 CSS 样式来源， style.css决定了主题的视觉外观。 style.css顶部的注释部分也是注册主题名称、作者等的地方。
  • functions.php是您向主题添加演示功能的地方。 通过functions.php ，您将添加 CSS 样式表、JavaScript 文件、导航菜单、小部件区域和其他功能。
  • 模板文件可以非正式地分为：“总是使用”的模板文件（ header.php和footer.php ，如果适用，还有sidebar.php ）； WordPress 模板层次结构中的文件（例如index.php 、 single.php和page.php ）； 和“模板部分”（从其他模板文件中提取的不完整片段以减少重复）。
  • 主题可以任意大而复杂； 但这些是那里最重要和可预测的部分。

这个简短的章节围绕着一个大图展开。 为什么要等？ 这里是：

WordPress 主题剖析

不要恐慌！ 你很快就会明白这一点。 在本章的其余部分，我们将更深入地解释图表的每个部分。

名字里有什么？

WordPress 根据名称决定如何处理主题文件。

首先要注意的是图中的每个文件都有一个特殊的名称。 functions.php , style.css , index.php ——这些文件都不是偶然命名的，它们的名字也不是随意命名的。

WordPress 根据名称决定如何处理主题文件。 它对functions.php有特殊处理，但对functionz.php根本没有。 因此，如果您将一组指令上传为functions.php ，WordPress 将对其进行解释； 但如果您上传与functionz.php相同的指令，WordPress 将默认完全忽略该文件及其指令。

样式.css

style.css是主题视觉外观的主要来源。

style.css是主题的主要 CSS 样式来源。 因此，它是主题视觉外观的主要来源——从字体和颜色的选择到主题是否在响应式网格上运行。

因此，例如，如果您在主题的style.css中输入以下 CSS：

p {
color: blue;
}

…然后，在运行主题时，段落中的任何内容，站点上的任何位置都会变成蓝色。 真的很酷，对吧？

style.css是您完成大部分工作以使您的主题看起来像您想要的方式的地方。

这种视觉控制意味着style.css中有很多工作要做——您将在其中完成大部分工作以使您的主题看起来像您想要的那样。

style.css 也是您注册主题的方式

style.css还在其标题中包含一个注释部分，这是注册主题数据（主题名称、作者、父主题（如果有）等）的地方。 看起来如下：

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress 阅读这些评论以获取有关您的主题的信息。 所以上面的小评论块 - 没有什么更花哨或更技术性的 - 是导致您的主题出现在您网站的主题列表中的原因 WordPress 管理区域的外观>主题：

主题解剖1

您可以在style.css的第 1 行到第 6 行中看到一个主题真实注册数据的示例，在该大图“WordPress 主题剖析”中。

函数.php

functions.php是您向主题添加自定义功能的地方。 这可能很多，包括：

  • 添加 CSS 样式表（包括style.css本身）和 JavaScript 文件
  • 注册导航菜单区域和小部件区域
  • 定义您希望在您的网站上可用的自定义图像尺寸
  • 过滤您的页面内容

functions.php主要通过 WordPress 钩子（也称为操作和过滤器钩子）与 WordPress 的其余部分“对话”，这让它可以在正确的位置添加功能。 我们在 WordPress 主题的核心概念中更深入地了解了functions.php的工作原理：3. 使用functions.php添加功能，我们更深入地了解了 WordPress 钩子（操作和过滤器）中的钩子：它们的作用和工作方式。

PHP 模板文件

WordPress 站点的模板文件决定了站点的标记。 没有它们，页面上实际上什么都没有。

主题文件的主要部分是其 PHP 模板文件。 如果functions.php是一个主题的大脑， style.css是它的衣服，模板文件是它的实体。

模板文件是 ,code>.php 文件，其中包含 HTML 标记和 PHP 代码的混合。 （检查该图形，您会看到它们的外观。）

模板文件以两种方式创建标记

这些文件共同决定了站点的标记：浏览器在访问您的站点时显示的实际 HTML。 他们通过两种方式做到这一点。

1. HTML

首先，模板文件会直接将 HTML 打印到浏览器，就像普通的.html文件一样。 <!--?php?-->中没有的任何东西都不是 PHP：它只是直接进入页面的纯 HTML。 因此，如果主题的header.php包含一些 HTML，如下所示： 

<body class="site-body">

这正是浏览器在每个包含header.php的 WordPress 网页上看到的内容，应该是所有这些。

2.PHP

模板文件使用 PHP 真正发挥了它们的魔力，PHP 可以编译为或转换为 HTML。 举个简单的例子，我们同样的header.php文件可以包含以下代码： 

<body class="<?php echo 'site-body'; ?>">

添加的 PHP 只是将字符串site-body直接回显（打印）到页面上。 因此，服务器在其端进行了额外的 PHP 处理，但浏览器仍然看到相同的旧 HTML。

正如您可以想象的那样，主题的模板文件非常重要：没有它们，页面上几乎什么都没有。

“经常使用”的模板文件

header.php和footer.php通常在主题中随处使用，因为大多数网站都希望在不同页面之间使用一致的页眉和页脚。

网站上的每个网页都使用一些模板文件。 主要的例子是header.php和footer.php 。

这些文件经常使用，以至于 WordPress 具有将它们包含在其他模板文件中的特殊功能： get_header()和get_footer() 。 以这种方式调用，不带参数，这些函数只需抓取header.php和footer.php ，并将它们放在调用函数的位置。

为什么这些文件无处不在？ 这是因为大多数网站都希望在不同页面上使用一致的页眉和页脚。 如果一个页面有您公司的徽标和主要导航菜单，那么您肯定希望其他页面也这样做。 页面底部的页脚也是如此。

需要注意的是， sidebar.php也属于这种文件，因为通常情况下，网站上的大多数类型的网页都会共享一个侧边栏——可能除了专门用于显示页面类型的全角页面帖子。 sidebar.php也有自己的函数get_sidebar() 。

WordPress 模板层次结构中的文件

真正令人兴奋的是index.php 、 single.php和page.php等文件。 这些文件规定了不同类型的帖子数据将出现什么标记。

换句话说， WordPress知道哪个页面用于哪种帖子数据。 例如：

  • 如果所请求的网页涉及页面类型的帖子（例如，您的关于页面），WordPress 可能会使用page.php来构建该网页。
  • 如果请求的网页是单独的帖子类型的帖子（例如，您正在查看特定的博客帖子），WordPress 可能会使用single.php来构建它。
  • 如果您正在查看您在 2014 年撰写的所有帖子类型的帖子，WordPress 可能会使用archive.php来构建该网页。

这就是WordPress 模板层次结构的魔力，我们在 WordPress 主题的核心概念中深入介绍： 1. 模板层次结构。

这些模板文件基于循环

这些“in-the-template-hierarchy”模板文件都共享一些非常重要的东西：它们是围绕 The Loop 构建的，这是 WordPress 开发的绝对核心原则之一。

我们深入了解 WordPress 主题核心概念中的循环：2. 使用循环处理帖子。 Loop真的很酷，所以如果你是新手，请抓住你的袜子，这样 Loop 就不会把它们吹掉！

模板零件

假设index.php和page.php的一部分完全相同。 我们是否应该在这两个文件中重复该代码？

实际上，DRY——“不要重复自己！”——是优秀程序员的战斗口号。 重复会导致各种问题。 如果您想更改重复部分的内容怎么办？ 现在你必须在两个地方改变它。 如果您忘记在一个地方更改它，或者在一个文件中出错而在另一个文件中没有出错怎么办？ 现在您的代码不同步并且您的网站有问题。 （现在：如果你重复相同的代码二十次怎么办？你必须重复你所做的每一个更改二十次，并希望你“全部抓住它们。”）

模板部分获取模板文件中可能重复的部分，并将它们移出到新文件中。 这样， index.php和page.php都可以简单地引用同一个模板部分，而不是单独写两次； 如果您想更改该部分，您只需更改一次。

现在你知道了你的主题解剖

这些是真正了解 WordPress 主题的事情。 即使是一个太大的 ThemeForest 主题也将围绕这个核心骨架构建，因此了解这些部分如何相互关联，您将有很大的能力来理解 WordPress 主题。

解剖课结束后，接下来的三章将深入探讨解释主题如何工作的四个关键编程原则：

  1. WordPress 模板层次结构
  2. 循环
  3. 函数.php
  4. WordPress 钩子

向前！