通过构建项目学习-WordPress-主题创建-全-

通过构建项目学习 WordPress 主题创建（全）

原文：zh.annas-archive.org/md5/fee03013415e4cf667ae8ebd04f177fc

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

在本书中，我们将从头到尾构建 5 个不同的 WordPress 主题。我们将探讨构建优秀主题所需的所有基本概念。

为了阅读本书，你应该在 HTML/CSS 和 PHP 方面有一些经验。你还应该对 WordPress 有一个大致的了解——它的安装和 WordPress 网站管理——以及一些编程基础知识的理解，例如数组、变量、循环、语句等。项目主要基于 HTML5、CSS3 和 PHP。

除了这些，本书还将探讨一些其他的技术和概念。这包括 WordPress 帖子循环，这是从数据库抓取 WordPress 的主要循环，钩子/动作，functions.php文件，我们在其中放置我们的 WordPress 主题的动态代码，小工具，WP 查询，以及主题定制器。此外，我们还将使用一系列框架，如 Bootstrap、Foundation 和 W3 CSS，这是一个相对较新的框架。

那么，让我们深入其中，开始构建酷炫的主题。

本书涵盖的内容

第一章，使用 WordPress 创建简单主题，是一个入门项目章节。我们将讨论我们需要为我们的主题创建的文件、语法以及动态片段。

第二章，构建 WordPress 主题，是一个深入的项目章节，使用高级概念构建 WordPress 主题，包括自定义模板和主页、存档页面和帖子格式。

第三章，构建照片画廊的 WordPress 主题，是关于构建照片画廊 WordPress 主题的项目。我们将使用 w3.CSS 框架以及一些简单的动画来构建这个主题。

第四章，构建 Twitter Bootstrap WordPress 主题，是一个解释 Bootstrap 与 WordPress 集成的项目章节。这将是我们使用 Wordstrap 来实现我们的 WordPress 主题的章节。我们还将使用 WP 导航遍历器，这是一个用于下拉菜单的类。

第五章，使用 Foundation 框架构建电子商务主题，是关于使用基础框架构建电子商务主题的内容，这与 Bootstrap 框架类似。

你需要为本书准备的内容

为了完成本书中的项目，你需要以下内容：

HTML5/CSS3
PHP
WordPress
W3.CSS 框架

本书面向的对象

如果你是一位博客作者或 WordPress 用户，想要学习如何创建吸引人、引人注目的 WordPress 主题，这本书就是为你准备的。你只需要对 HTML5、CSS3、PHP 有一定的了解，以及一些创意，就可以开始阅读本书。

术语

在本书中，您将找到多种文本样式，用以区分不同类型的信息。以下是一些这些样式的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名将如下所示：文本中的代码单词将如下所示：“single.html文件将代表单个图像。”

代码块将以如下形式设置：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

当我们希望您注意代码块中的特定部分时，相关的行或项目将以粗体显示：

<!DOCTYPE html>
<html>
<head>
  <title>PhotoGenik</title>
</head>
<body>
</body>
</html>

新术语和重要单词将以粗体显示。屏幕上显示的单词，例如在菜单或对话框中，将以文本中的如下形式出现：“要上传文件，我们将点击选择文件按钮。”

警告或重要提示将以如下框的形式出现。

小贴士和技巧将以如下形式出现。

读者反馈

我们的读者反馈总是受欢迎的。请告诉我们您对本书的看法——您喜欢什么或可能不喜欢什么。读者反馈对我们开发您真正能从中获得最大价值的标题非常重要。

要向我们发送一般反馈，只需发送一封电子邮件到feedback@packtpub.com，并在邮件主题中提及书籍标题。

如果您在某个领域有专业知识，并且对撰写或参与书籍感兴趣，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

现在，您已经成为 Packt 图书的骄傲拥有者，我们有一些事情可以帮助您从您的购买中获得最大收益。

下载示例代码

您可以从www.packtpub.com的账户下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。您可以通过以下步骤下载代码文件：

使用您的电子邮件地址和密码登录或注册我们的网站。
将鼠标指针悬停在顶部的 SUPPORT 标签上。
点击代码下载与勘误。
在搜索框中输入书籍名称。
选择您想要下载代码文件的书籍。
从下拉菜单中选择您购买本书的地方。
点击代码下载。

文件下载后，请确保使用最新版本的软件解压或提取文件夹：

WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux

本书代码包也托管在 GitHub 上，地址为github.com/PacktPublishing/Learn-to-Create-WordPress-Themes-by-Building-5-Projects。我们还有其他来自我们丰富图书和视频目录的代码包可供选择，地址为github.com/PacktPublishing/。请查看它们！

下载本书中的彩色图像

我们还为您提供了一个包含本书中使用的截图/图表的彩色图像的 PDF 文件。彩色图像将帮助您更好地理解输出的变化。您可以从www.packtpub.com/sites/default/files/downloads/LearntoCreateWordPressThemesByBuilding5Projects_ColorImages.pdf下载此文件。

勘误

尽管我们已经尽最大努力确保内容的准确性，但错误仍然可能发生。如果您在我们的书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这一点，我们将不胜感激。通过这样做，您可以避免其他读者的挫败感，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告它们。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站或添加到该标题的勘误部分下的现有勘误列表中。要查看之前提交的勘误，请访问www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将出现在勘误部分下。

盗版

在互联网上盗版受版权保护的材料是一个跨所有媒体的持续问题。在 Packt，我们非常重视保护我们的版权和许可证。如果您在互联网上发现我们作品的任何非法副本，无论形式如何，请立即向我们提供位置地址或网站名称，以便我们可以寻求补救措施。请通过copyright@packtpub.com与我们联系，并提供疑似盗版材料的链接。我们感谢您的帮助，以保护我们的作者和我们为您提供有价值内容的能力。

问题

如果您对本书的任何方面有问题，您可以通过questions@packtpub.com联系我们，我们将尽力解决问题。

第一章：使用 WordPress 创建简单主题

欢迎来到 WordPress 主题项目书！在这本书中，我们将从头开始构建 10 个 WordPress 主题。我们将查看构建优秀主题所需的所有基本知识。

在本章中，我们将创建一个非常简单的项目。我们不会真正专注于创建一个令人惊叹的设计；本章更多的是解释我们需要为我们的主题创建的文件，语法，动态片段以及相关主题。

安装和设置 WordPress

这个项目将与其他项目略有不同，因为它将是一个入门级项目。我们将学习如何安装和设置 WordPress，以便您可以使用一个全新的安装进行工作。我们将创建一个主题，但我们将更多地关注代码以及整体的外观和风格。我们将创建文件和文件夹，添加 PHP 代码以及相关内容。首先，我想让您熟悉 PHP 代码，然后我们可以添加一些简单的样式。

关于环境，有非常多不同的方式可以运行 WordPress。您可能已经设置了您自己的服务器；如果没有，您可以使用类似 AMPPS 的产品，这就是我将要使用的产品。它为您提供了本地机器上的 Apache 服务器、PHP 和 MySQL。您也可以使用 XAMPP，它与 AMPPS 非常相似，或者 WAMP；还有适用于 Mac 的 MAMP。有非常多不同的选择，但如果您想使用 AMPPS，您可以去 ampps.com/ 下载它。它适用于 Windows、Mac 和 Linux，并且设置起来相当简单。

现在，让我们看看如何安装 WordPress。你们大多数人可能已经知道如何做这件事：

前往链接 wordpress.org/download/ 并点击下载 WordPress 按钮：

下载软件包并前往您的服务器根目录，如下所示：

如果您使用 AMPPS，软件包应该在您的 C:\ 驱动器或您的路径驱动器中。在 Ampps 文件夹中，您会找到一个 www 文件夹；这是托管根目录，如前图所示。在大多数情况下，默认文件夹将是 C:\ 驱动器中的 Program Files。

创建一个名为 wpthemes 的文件夹；这就是我们将安装 WordPress 的位置。
前往 Downloads 文件夹并打开 WordPress 软件包。接下来，将所有文件提取到项目文件夹 wpthemes 中。在我们继续之前，我们需要一个数据库，一个 MySQL 数据库。如果您安装了 AMPPS 或者您正在使用 XAMPP 或类似的产品，那么您很可能已经有了 phpMyAdmin，如下所示；这就是我们将要使用的工具。
现在，前往 http://localhost/phpmyadmin：

接下来，转到数据库标签页创建一个名为 wpthemes 的新数据库并点击创建。我们将看到一个空数据库。
我们将回到我们创建的或从 WordPress 包中带来的文件。你会看到 wp-config-sample.php 文件。我们将将其重命名为 wp-config，并去掉 -sample。
使用 Sublime Text 作为编辑器打开 wp-config 文件。你可以使用你感到舒适的任何编辑器。
现在，在这个编辑器中，我们将更改或添加一些信息：

      /** The name of the database for WordPress */
      define('DB_NAME', 'wpthemes');

      /** MySQL database username */
      define('DB_USER', 'root');

      /** MySQL database password */
      define('DB_PASSWORD', '123456');

我们将添加 DB_NAME，如图所示，在这个例子中是 wpthemes，然后是 DB_USER，在这个例子中是 root，然后是 DB_PASSWORD——你需要输入你数据库的密码。其余的可以保持不变。

我们将保存输入的信息，然后我们应该能够访问 localhost/wpthemes：

我们现在可以继续进行安装。如图所示，我们将输入网站标题为 WordpressDEV 和用户名为 admin。接下来，你需要输入密码；我在这里使用了一个非常弱的密码。输入电子邮件地址后，点击安装 WordPress：

你可以看到 WordPress 已经安装了。

现在，点击登录，这将带我们到管理员登录页面。输入你的用户名和密码，然后它会带你到你的后端：

现在，我们可以点击“访问网站”，如图所示。在新标签页中打开，你会看到一个全新的 WordPress 网站：

这就是我们将会工作的内容。

我相信你们中的很多人都有 WordPress 的经验。

在 localhost/wpthemes/wp-admin/ WordPress 页面上，我们有我们的帖子区域，我们可以在这里创建和管理帖子：

我们可以有分类，如图所示：

我们还可以看到页面：

网站页面如“关于我们”或“服务”将放在页面中。如果我们转到外观，并点击主题，它将显示已安装的主题，如图所示：

默认情况下，我们有 Twenty Seventeen、Twenty Fifteen 和 Twenty Sixteen，但我们将在本节中创建一个新的主题。

创建和启用主题

在本节中，我们将看到如何创建我们的主题文件并启用一个主题。我们将使用 Sublime Text 并添加项目文件夹，这样我们就可以轻松访问文件：

前往 C:\Ampps\www\wpthemes。
你想要创建主题的文件夹将是 themes，它位于 wp-content 文件夹内：

你可以看到这里我们已经有 WordPress 已经安装的三个主题，分别是 twentyfifteen、twentyseventeen 和 twentysixteen。

我们将创建一个新的文件夹，命名为simple。这将是我们的主题名称：

你绝对需要两个文件来启用你的主题：一个将是style.css，另一个将是index.php。现在，我们需要style.css的原因是所有我们的声明，比如主题名称和描述，都放在那里。

我们将打开一个注释块并输入字段，如下所示：

你可以参考codex.wordpress.org/Theme_Development上的文档，它显示了你可以使用的所有不同字段。我们不会使用它们的所有，因为它们不是必需的。"主题名称"是必需的，但最好还有一些其他信息。

我们将输入主题名称为Simple。我们还需要有一个作者；如果你愿意，可以把自己的名字填在那里。我们还将有作者 URI。如果你是为客户创建主题，你可能想在那里放你公司的网站。我们可以有一个描述。我们将输入非常简单的 Wordpress 主题，然后输入版本：1.0。让我们保存这个。现在，仅仅有这些信息就允许 WordPress 看到你的主题。
现在，让我们回到我们的localhost/wpthemes/wp-admin/themes.php后端，然后转到外观和主题；你可以看到 Simple 主题，我们实际上可以激活它：

现在，为了让截图在 Simple 主题中显示，我们需要在主题文件夹的根目录中放一个名为screenshot.png的图片：

让我们使用 Photoshop 创建一个示例截图，上面写着 SimpleTheme，并将其放置在我们的theme文件夹中，如前面的截图所示。转到服务器根目录，www\wpthemes\wp-content\themes，然后simple。我们只需将截图粘贴在那里。现在如果我们回到后端并重新加载，你可以看到我们有一个截图，如下所示：

嗯，这其实不是一个截图，但它是一张图片。

现在，如果我们继续激活这个主题，并转到我们的前端并重新加载——我们什么都没有，因为我们还没有添加任何代码：

我们的主题什么都没有，它是完全空白的。

现在，让我们打开index.php文件并输入TEST，然后保存并重新加载；我们可以在前端看到TEST：

基本上，它默认读取我们的index.php文件。

创建 HTML 结构

现在，让我们创建我们的 HTML 结构。我们将放入一些核心 HTML 标签，如下所示：

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <title><?php bloginfo('name'); ?></title>

如您所见，我们有DOCTYPE、html、head、body和title标签。现在，如果您从顶部开始考虑，我们有我们的<html>标签；有时，您想在这里包含一个语言，WordPress 有一个函数，我们可以将其包含在这个文件中使其动态。我们可以添加php language_attributes，这是一个将确定主题要显示的语言的函数。您可能希望使标题动态，或者想添加您的站点名称；为此，我们可以使用php并使用一个名为bloginfo的函数，如前一个代码块所示。这非常有用，因为它包含了许多您可以获取的东西，例如站点名称、描述、字符集、URLs 等等。您实际上可以查看文档以了解它具体包含什么。然而，我们将使用name。

保存后，您可以返回并重新加载页面。您可以看到标题显示为 WordpressDEV，如这里所示：

如果您还记得，这是我们给站点取的名字。

让我们回到我们的head标签并继续。我们需要一个字符集，所以我们将输入meta charset。然后，我们也可以在这里使用bloginfo，只需传递charset：

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>

让我们保存并查看我们的源代码。使用Ctrl + U，您可以查看语言属性；它说我们使用的是英语美国和字符集是 UTF-8，如这里所示：

这些东西现在可以从 WordPress 内部控制。

与样式表一起工作

下一步我们将要做的是包含我们的样式表：

打开style.css文件并输入以下代码：

      body{
          background:#000;
      }

保存并重新加载；由于样式表没有被读取，我们将不会得到黑色背景：

为了让这个样式表被看到，我们将输入以下代码：

      <!DOCTYPE html>
      <html <? php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>
         <link rel="stylesheet" 
 href="<?php bloginfo('stylesheet_url'); ?>">

上述代码将从正确的位置获取样式表。

保存此代码并重新加载。现在我们可以看到黑色背景：

所以我们在样式表中放入的任何内容现在都将被注册。

在`head`标签中添加一个函数

我们接下来将看到如何在<head>标签中输入一个名为wp_head()的函数。这会将所需的所有附加信息放入head标签中。例如，当您安装一个插件并且，比如说，它需要包含一个样式表，或者需要在head中做些事情，为了这样做，我们需要输入以下代码。所以当您创建插件时，您可以让内容直接在head中弹出：

<!DOCTYPE html>
<html <? php language_attributes(); ?>>
<head>
   <meta charset="<?php bloginfo('charset'); ?>">
   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>

在下面的源代码中，我们现在有一堆其他的东西，这些都是从那个wp_head()函数来的：

如果我继续移除wp_head()函数，然后返回并重新加载，它只会给我们index.php文件中的内容。所以我们需要wp_head()函数：

在下一节中，我们将开始构建主体。我们将看到如何获取文章、创建菜单等。

构建 HTML 主体

我们现在将看到如何在主体中添加基本的 HTML 标签：

我们将创建一个 <header> 标签，这是一个 HTML5 标签。我们将输入一个 <h1> 标签，在这个标签中我们将添加网站名称：

      <header>
         <h1><?php bloginfo('name'); ?></h1>
      </header>

我们实际上可以从之前看到的 <title> 标签中获取动态代码，并将其放入 <h1> 中。现在如果我们保存并查看我们的前端，我们得到“WordpressDEV”：

现在，如果我们想更改前端输出，我们可以转到设置，并将网站标题更改为“我的网站”：

保存设置。现在，我们可以看到变化。
除了名称外，我们还可以包括一个标语。为此，我们将输入 <small> 标签，但我们将使用 description 而不是 name，如下面的代码块所示：

      <header>
         <h1><?php bloginfo('name'); ?></h1>
         <small><?php bloginfo('description'); ?></small>
      </header>

当你重新加载时，你可以看到我们得到“这只是另一个 WordPress 网站”：

我们可以在设置中进行更改。我们在标语文本框中输入“史上最佳网站”：

保存更改，并在 span 标签中放入 description，如下面的代码块所示：

      <h1><?php bloginfo('name'); ?></h1>
      <span><?php bloginfo('description'); ?></span>

当我们重新加载时，我们得到这个：

现在，让我们添加更多的 HTML 标签，如下面的代码块所示：

         <header>
            <h1><?php bloginfo('name'); ?></h1>
            <span><?php bloginfo('description'); ?></span>
         </header>

         <div class="main">
 <?php if(have_posts()) : ?>
 post found
 <?php else : ?>
 <?php echo wpautop('Sorry, No posts were found'); ?>
 <?php endif; ?>
 </div>
      </body>
      </html>

在这里，我们进入 <header> 标签并输入 div 类作为 main。我们将获取我们的博客文章；WordPress 使用一种称为循环或主循环的东西，它会获取你所有的博客文章，无论类别或任何其他内容。不指定任何限制，它将获取每一篇文章。所以，我们首先要做的是检查是否有文章。我们将使用一个 if 语句来做这件事，然后使用简写。我们将使用帮助我们快速进入和退出 php 的语法。然后，我们将使用 if(have_posts) 来查看 WordPress 中是否有文章。我们还会在这里放一个 else 语句，这样如果没有任何文章，我们只想让用户知道这一点。现在，我们不再只是输出文本，我们将使用一个函数。我们将说 echo wpautop；这个函数的作用是将双行换行符自动转换为段落。当你只想输出文本时，这是一个很好的函数。我们将说，“抱歉，没有找到文章”。然后，在 if(have_posts) 内部，我们将使用 post found。让我们去重新加载，你可以看到我们得到“文章找到”：

让我们回到我们的后端，转到帖子；你可以看到我们有“Hello world”。我们将将其移动到回收站，如果我们现在返回并重新加载，我们将得到“抱歉，没有找到文章”，如下面的截图所示：

现在让我们转到回收站并恢复它。我们会看到帖子可以再次被看到。我们现在将看到如何显示这些帖子。我们将在 if 语句中的 post found 下删除，我们将使用一个带有 php 标签的 while 循环来完成这个操作。我们将使用 while(have_posts)。现在，在 WordPress 中，我们必须使用一个叫做 the_post() 的东西，所以我们将使用 the_post()，这在语法上有点奇怪。我从未在其他任何地方真正看到过这个，除了 WordPress，但只需知道你也需要这个。然后，我们将使用 endwhile；这又是一个简写语法，所以你也可以只使用花括号。但在这里，当它找到一个帖子时，我们想要获取标题。所以，在一个 <h3> 标签中，我们将使用 <?php the_title(); ?>，这是一个函数：

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
 <h3><?php the_title(); ?></h3>
 <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found.'); ?>
      <?php endif; ?>

让我们去重新加载，现在你可以看到它正在获取“Hello world!”标题：

现在，让我们继续创建一个帖子作为例子。我们将命名为“我的博客帖子”，让我们先获取一些示例文本。我从 www.lipsum.com 网站上取了一些文本：

我们将添加几个段落并发布它。

现在让我们重新加载；你可以看到它给出了“我的博客帖子”：

现在，为了获取实际内容，我们将直接跳到 <h3> 标签并输入 <?php the_content(); ?>。正如你所见，WordPress 在函数名称方面确实非常简单：

      <div class="main">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()): the_post(); ?>
            <h3><?php the_title(); ?></h3>
            <?php the_content(); ?>
        <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, No posts were found'); ?>
      <?php endif; ?>
      </div>

因此，现在，这会从每个博客帖子中获取内容并显示出来：

我们可以用不同的方式显示帖子：日期、作者、分类等等。让我们直接在标题下方添加以下代码块：

         <h3><?php the_title(); ?></h3>
         <div class="meta">
 Created By <?php the_author(); ?>
 </div>
         <?php the_content(); ?>
      <?php endwhile; ?>

在这里，我们添加了“由”以及作者的名字。

当我们重新加载时，我们可以看到以下输出：

在这个情况下，admin 是创建帖子的用户的用户名。

现在，如果你想得到日期，你可以添加以下代码：

      Created By <?php the_author(); ?> on <?php the_date(); ?>

当我们重新加载时，我们得到“由 admin 创建于 2017 年 12 月 12 日”；基本上，它给我们日期：

我们现在将看到如何格式化日期。你可以用很多不同的方式来格式化日期；如果你知道 PHP 并且使用过日期函数，你知道有很多不同的格式化选项。

我们将查看 php.net/manual/en/function.date.php 中的一个这样的例子：

      Created By <?php the_author(); ?> on <?php the_date('l jS \of F
          Y h:i:s A'); ?>

让我们看看这会给我们带来什么。你可以看到以下截图中的格式，包括日期、时间以及上午或下午：

我喜欢做的一件事是使用时间而不是日期：

Created By <?php the_author(); ?> on <?php the_time(); ?>

这只会给你时间；它不会给你日期，但你实际上可以格式化它以显示日期：

Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>

如果我们看一下，它会给我们日期和时间：

所以这完全取决于你，一切都取决于你的喜好。

现在，让我们做一些样式调整。我们将看到如何添加底部的<footer>标签，并添加一个段落使其动态。我们可以放一个版权符号，然后对于年份，我们不仅可以直接输入年份，还可以使用the_date()，然后只需传入参数Y，如下所示：

<footer>
   <p>&copy; <?php the_date('Y'); ?></p>
</footer>

然后，如果我们想获取网站名称，我们只需说bloginfo并传入name：

<footer>
   <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>

所以现在我们有一个动态的页脚。

基础样式

现在，让我们添加一些基础样式。为此，我们将与样式表一起工作。现在，这个项目的整体想法实际上并不是创建一个看起来很棒的主题，我只是想让你熟悉 PHP 代码以及主题是如何设置的。

让我们输入以下代码：

      body{
          font-family: Arial;
          font-size:15px;
          color:#333;
          background:#f4f4f4;
          margin:0;
          padding:0;
          line-height: 1.7em;
      }

      header{
          background: #393939;
          color:#fff;
          padding:20px 10px;
      }

      header h1{
          color:#fff;
          margin:0;
      }

保存代码并重新加载。你会得到以下结果：

你可以看到顶部的空白区域；这是因为我们以管理员身份登录，所以即使在前端它也知道这一点，并且试图显示管理员栏。现在，它没有显示管理员栏，因为我们没有显示它的特殊功能。

让我们转到index.php，在结束body之前，我们将添加<?php wp_footer(); ?>：

        <footer>
           <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
           </p>
        </footer>

        <?php wp_footer(); ?>
     </body>
     </html>

保存此代码并重新加载。你可以看到我们有了管理员栏：

我们将在底部的h1上添加一点填充：

      header h1{
          color:#fff;
          margin:0;
          padding:0;
          padding-bottom: 10px;
      }

我们还将向代码中添加一个container div，如图所示：

      .container{
          width:1020px;
          margin:0 auto;
          overflow: auto;
      }

我们已将width设置为1020 px，margin设置为0 auto，以及overflow设置为auto。

我们现在将转到index.php，到<header>标签，并输入此代码：

      <header>
         <div class ="container">
         <h1><?php bloginfo('name'); ?></h1>
         <span><?php bloginfo('description'); ?></span>
         </div>
      </header>

我们将在main上添加相同的代码：

      <div class="main">
         <div class="container">
      <?php if(have_posts()) : ?>

对于footer，也会一样：

      <footer>
         <div class="container">
            <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
            </p>
         </div>
      </footer>

当你重新加载时，你可以看到所有内容都移动到了中间。
让我们在footer上添加一些样式。只需复制我们在头部中有的样式。我们还将文本对齐到中心：

      footer{
          background: #393939;
          color:#fff;
          padding:10px 10px;
          text-align: center;
      }

接下来，我们将向main div 添加margin：

      .main{
          margin:15px 0;
      }

让我们重新加载，这就是我们得到的结果：

你可以看到我们有我们的头部和主要内容区域，我们在这里遍历帖子并显示它们，以及我们的页脚区域。

现在，WordPress 中的常见做法是将头部和页脚拆分成各自的文件，然后在索引中包含它们。

要做到这一点，我们现在将创建一个新文件，命名为header.php，然后创建一个名为footer.php的新文件。
让我们转到index.php文件，并剪切以下代码块中的部分，如下所示：

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>
         <link rel="stylesheet" 
          href="<?php bloginfo('stylesheet_url'); ?>">
         <?php wp_head(); ?>
      </head>
      <body>
         <header>
            <div class="container">
               <h1><?php bloginfo('name'); ?></h1>
               <span><?php bloginfo('description'); ?></span>
            </div>
         </header>

我们将用php get_header替换高亮显示的部分：

      <?php get_header(); ?>

进入header.php，粘贴之前剪切的代码，并保存。
我们现在将对footer做同样的事情：

        <footer>
           <div class="container">
              <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); 
                 ?>
              </p>
           </div>
        </footer>

        <?php wp_footer(); ?>
      </body>
      </html>

我们将剪切前面代码块中显示的代码，并用php get_footer()替换它，如下所示：

      <?php get_footer(); ?>

将在第 18 步中剪切的footer代码粘贴到footer文件中。输出将看起来完全一样。

接下来，我们将看到点击这些帖子是如何带我们到实际的单独帖子页面的。

单个帖子和小缩略图

现在，我们将查看单篇帖子页面。目前，我们有来自我们网站的帖子滚动条，但仅此而已；我们无法点击它并进入单个帖子，在那里我们会看到评论等。所以让我们继续工作：

让我们转到index.php文件并使标题可点击。我们将给标题添加一个链接。为此，让我们转到以下代码中的<h3>标签；添加一个<a>标签，并将其包裹在<title>标签周围：

      <?php get_header(); ?>
         <div class="main">
            <div class="container">
               <?php if(have_posts()) : ?>
                  <?php while(have_posts()): the_post; ?>
                     <h3>
                     <a href="<?php the_permalink(); ?>">
                        <?php the_title(); ?>
                     </a>
                     </h3>
                     <div class="meta">
                     Created By <?php the_author(); ?> on <?php the_time('F 
                         j, Y g:i a'); ?>
                     </div>
                     <?php the_content(); ?>
                  <?php endwhile; ?>
               <?php else : ?>
                  <?php echo wpautop('Sorry, No posts were found.'); ?>
               <?php endif; ?>
            </div>
         </div>
         <?php get_footer(); ?>

让我们保存并重新加载：

现在你将看到标题上有一个链接。例如，当我们点击我的博客帖子时，它会带我们到帖子。

让我们给链接添加一点样式。我不喜欢链接的颜色；我还想使描述加粗，以便突出显示。将每个帖子包裹在其自己的div中是个好主意。在我们有while的地方，我们将它放在<article>中，如下面的代码所示：

      <?php get_header(); ?>
         <div class="main">
            <div class="container">
               <?php if(have_posts()) : ?>
                  <?php while(have_posts()): the_post(); ?>
                     <article class="post">
                        <h3>
                        <a href="<?php the_permalink(); ?>">
                           <?php the_title(); ?>
                        </a>
                        </h3>
                        <div class="meta">
                        Created By <?php the_author(); ?> on 
                        <?php the_time('F j, Y g:i a'); ?>
                        </div>
                        <?php the_content(); ?>
                     </article>
                  <?php endwhile; ?>
               <?php else : ?>
                  <?php echo wpautop('Sorry, No posts were found'); ?>
               <?php endif; ?>
            </div>
         </div>

然后，在我们的样式表中，让我们添加颜色：

      a{
          color:#333;
      }

颜色将和文本一样。

现在，我们将使用以下代码在底部添加一个边框：

      article.post{
          border-bottom:1px #ccc solid;
      }

当你重新加载时，你可以看到底部的边框：

现在我们有了标题。标题有一个链接，但通常我们还会看到一个“阅读更多”按钮，所以让我们继续添加它。我们只需要添加以下代码块中的代码。我们将说“阅读更多”并给它一个按钮的类：

      Created By <?php the_author(); ?> on <?php the_time(
        'F j, Y g:i a'); ?>
      </div>
      <?php the_content(); ?>
      </article>
      <br>
      <a class="button" href="<?php the_permalink(); ?>">
 Read More
 </a>

现在，我们应该有一个指向Read More的链接。为了做到这一点，我们将添加以下代码块：

      article.post{
          border-bottom:1px #ccc solid;
          overflow:hidden;
      }

      article.post a.button{
          display:inline-block;
          background:#333;
          color:#fff;
          padding:10px 5px;
          margin-bottom: 10px;
          text-decoration: none;
      }

我们现在可以进入单页，如下面的截图所示：

现在，在单页中，我们不希望我的博客帖子是一个链接；这有点愚蠢，所以我们要改变它。还有其他一些我们想要的东西。我们还想有一个评论表单，所以我们需要为单个帖子有一个特殊的页面。
因此，我们将在我们的主题中创建一个新文件，我们将其称为single.php，让我们先叫它TEST。
如果我们回到单页并重新加载，我们会得到 TEST。如果我们回到我们的主网站，也就是我们的主要滚动条，它和之前一样，但如果我们进入一个单页，我们只会得到 TEST，因为它是自动查看single.php文件的。所以我们可以做的是从index.php复制代码，并且我们可以将这段代码作为一个起点。如果我们把它粘贴到single.php并保存，它就会显示相同的结果。现在我们可以在single.php文件中更改我们想要的任何内容，并且它只会对单页生效。
我们可以在代码中移除链接和Read More；显然，我们不会想要这些。所以现在我们有一个单页：

让我们在单页上添加一点样式。为此，我们将使meta，就像这里展示的那样：

      .meta{
          background:#333;
          color:#fff;
          padding:5px;
      }

如你所见，我在帖子的底部也添加了一些填充。

我并不是想要在样式上大做文章，因为正如我所说的，我只是想让你学会编写代码，而不是学习如何创建一个出色的设计；我们会在稍后深入这个话题。

在帖子中添加图片

现在，如果我们转到这里显示的表单来添加一篇帖子，你会在右侧看到没有特色图片框，你可能在其他 WordPress 主题或网站上见过。原因是我们没有包含这个功能：

让我们进入我们的themes文件夹，我们将创建一个文件并保存为functions.php。现在，这就是我们可以放置自定义函数的地方；这是我们可以钩入代码的某些部分、注册小工具和做所有这些的地方——基本上，任何事情都是动态的。
这里，我们将创建一个设置函数。为此，我们将添加以下代码块：

      <?php
      function simple_theme_setup(){
          // Featured Image Support
          add_theme_support('post-thumbnails');
      }
      add_action('after_setup_theme', 'simple_theme_setup');

这里，我们添加了一个注释，Featured Image Support，然后是一个名为add_theme_support的函数。现在，如果我们就这样留下它，这个函数是不会运行的。因此，我们使用了add_action和某些钩子，我们可以将其钩入并运行这个函数。我们想要的钩子是after_setup_theme。然后，第二个参数将是函数的名称。我们将保存它并运行它。

让我们返回并重新加载这个页面：

现在你可以看到底部有一个特色图片框。如果我们点击它，就可以上传文件，就像这里展示的那样：

现在，我会选择一个图片并保存它，这样你就可以看到它已经插入，然后我们可以点击更新：

现在，如果我们去前端并重新加载，我们可能还看不到它，因为我们没有将它添加到我们的index.php文件中。

让我们去index.php文件。你不必在索引中显示图片。如果你想的话，你可以在单页中显示它，但通常你希望它在两个页面上都显示。所以，在index.php中，我们只需在meta下面添加图片，就像这里展示的那样：

      <div class="meta">
      Created By <?php the_author(); ?> on <?php the_time(
        'F j, Y g:i a'); ?>
      </div>
      <?php if(has_post_thumbnail()) : ?>
 <div class="post-thumbnail">
 <?php the_post_thumbnail(); ?>
 </div>
 <?php endif; ?>

起初，它可能看起来不太理想，但我们稍后会修复它。在先前的代码中，我们首先使用if语句检查是否有图片。如果有缩略图，我们将创建一个<div>标签。我们将给它一个post-thumbnail的类，然后添加php the_post_thumbnail，就像先前的代码块中展示的那样。

让我们保存它，返回并重新加载。你会得到以下结果：

现在，它看起来有点不协调，因为它没有覆盖整个页面，但我们实际上会在添加小工具时放一个侧边栏，这样看起来会好很多。然而，我打算在 CSS 中添加一个宽度为100%的样式，在这里我们有这个帖子，class="post-thumbnail"。

让我们进入我们的样式表并添加以下代码块：

      .post-thumbnail img{
          width:100%;
          height:auto;
      }

对于图片，我们希望宽度为 100%，并且可以保持height:auto。

当我们重新加载时，我们可以看到它覆盖了整个页面：

我知道这真的很宽，但就像我说的，我们会在里面放一个侧边栏，这样就会缩小一点。

现在我们还希望在单篇文章页面上显示图片。所以我们将从index.php复制代码并粘贴到single.php文件中，紧挨着meta标签下方：

      <div class="meta">
      Created By <?php the_author(); ?> on <?php the_time(
        'F j, Y g:i a'); ?>
      </div>
      <?php if(has_post_thumbnail()) : ?>
         <div class="post-thumbnail">
            <?php the_post_thumbnail(); ?>
         </div>
      <?php endif; ?>

现在，我们也会在单篇文章页面上显示相同的图片。

如你所见，在索引页面上的文章中，它显示了全部内容，但我们只想显示一部分内容。

要做到这一点，让我们去index.php文件，而不是说the_content，我们实际上可以说the_excerpt，如下面的代码所示：

      <?php the_excerpt(); ?>

这将做到的是，它会将内容截断到大约 55 个单词。你实际上可以自定义这个长度，让它更长或更短，而且这实际上非常简单。

前往functions.php文件并创建一个自定义函数，如下所示：

      <?php
      function simple_theme_setup()>{
          // Featured Image Support
          add_theme_support('post-thumbnails');
      }

      add_action('after_setup_theme', 'simple_theme_setup');

      // Excerpt Length
      function set_excerpt_length(){
          return 25;
      }

      add_filter('excerpt_length', 'set_excerpt_length');

我们只需说set_excerpt_length，我们在这里需要做的只是返回一个数字，比如说我们希望它是25。然后，我们可以做的是，而不是add_action，我们说add_filter，因为add_action通常用于添加或创建某些内容；add_filter通常用于更改某些内容。我们想要钩入的过滤器称为excerpt_length。然后，我们只需输入我们函数的名称，即set_excerpt_length。

如果我们返回并重新加载，我们可以看到它只有 25 个单词长。如果你想让它更长，比如说返回 60 个单词。我只是想让你知道这是可能的。

因此，我们已经设置了索引页面，并且设置了单篇文章页面（除了稍后我们将处理的评论）。然而，在下一节中，我们将看到如何创建菜单，并开始处理页面以及文章。

页面和菜单

在本节中，我们将开始查看页面和菜单。除了在 WordPress 中创建文章外，我们还可以创建页面：

如果我们进入后台点击“页面”，你会看到我们有一个示例页面：

让我们创建一个新的页面，我们将其命名为“关于页面”。然后我们只需抓取一些内容，比如两段文字。让我们点击“发布”：

因此，我们有一个“关于”页面，还有一个“示例页面”。让我们再创建一个，命名为“服务”。现在我们需要某种导航。让我们继续做。
为了使用菜单系统，我们需要编辑functions.php文件，因为现在如果我们转到外观，没有菜单选项。所以让我们打开functions.php并输入以下代码：

      <?php
      function simple_theme_setup(){
          //Featured Image Support
          add_theme_support('post-thumbnails');

          //Menus
 register_nav_menus(array(
 'primary' => __('Primary Menu')
 ));
      }

      add_action('after_setup_theme', 'simple_theme_setup');

在我们创建的simple_theme_setup函数中，我们将添加register_nav_menus。然后我们将传递一个数组，为此，我们将设置主版本和可读版本。我们将使用双下划线函数；虽然这里不需要引号。这是一个本地化函数，它与在主题中使用多种语言有关。所以我们将输入Primary Menu然后保存。

现在，如果我们去后台，重新加载，并转到外观，你会看到我们有这个菜单选项：

如果我们点击创建菜单，现在你可以看到默认情况下它包含了网站上所有的页面，如果你想的话可以移除一些：

如果你想要添加页面，你可以轻松做到；点击添加到菜单。我们在这里保留我们已有的内容，然后我们需要确保选择主菜单，在它说主题位置的地方。我们将保存这个。

现在，如果我们去前端并重新加载，我们什么也看不到，因为我们还没有在我们的头部文件中包含它；这就是我们想要添加菜单的地方，因为我们想要它在每个页面上。
让我们在<header>标签的正下方创建一个<nav>标签，如下所示：

      <!DOCTYPE html>
      <html <?php language_attributes(); ?>>
      <head>
         <meta charset="<?php bloginfo('charset'); ?>">
         <title><?php bloginfo('name'); ?></title>
         <link rel="stylesheet" 
          href="<?php bloginfo('stylesheet_url'); ?>">
         <?php wp_head(); ?>
      </head>
      <body>
         <header>
            <div class="container">
               <h1><?php bloginfo('name'); ?></h1>
               <span><?php bloginfo('description'); ?></span>
            </div>
         </header>
         <nav class="main-nav">
 <div class="container">
 <?php 
 $args = array(
 'theme_location' => 'primary'
 ); 
 ?>
 <?php wp_nav_menu($args); ?>
 </div>
 </nav>

我们将添加一个main-nav类，然后将其包裹在一个容器中。然后，我们只需要打开一些php标签并创建一个名为args的变量。这仅仅是一个将要持有参数数组的变量；我们现在只需要一个，那就是theme_location。我们基本上指定了我们想要放在这里的菜单，那将是primary，这是我们唯一拥有的一个。然后，我们可以调用一个名为wp_nav_menu的函数，并传入那个args变量。让我们保存这个。

前往前端，重新加载，那里是我们的菜单：

菜单包含我们创建的所有页面。

如果我们想删除一个，请转到菜单，选择我们想要删除的Sample Page，保存，重新加载，现在它就消失了：

为了稍微样式化一下，让我们去style.css并添加以下代码：

     .main-nav{
         background:#000;
         color:#fff;
         padding:5px;
     }

     .main-nav ul{
         margin:0;
         padding:0;
     }

     .main-nav li{
         list-style:none;
         float:left;
         padding-right:15px;
     }

     .main-nav a{
         color:#fff;
         text-decoration:none;
     }

我们将添加main-nav并为其设置背景；我们将添加黑色背景和白色文本。为了样式化列表项，我们将添加main-nav li；首先我们想要移除项目符号，所以我们会说list-style: none，然后我们想要将这些菜单浮动到左边。我们还将添加padding-right:15px，然后添加链接；确保它们是白色的，并移除文本装饰。接下来我们将添加ul，我们将移除默认的外边距和填充。然后我们在main-nav上添加一些填充，比如5px。

当我们重新加载时，我们有一个小的导航菜单：

如果我们点击“关于”，它将带我们到“关于”页面，服务也是一样。现在您会注意到，当我们去“关于”时，它已经按照 index.php 页面的方式格式化，就像它是一个帖子一样——但它不是，它是一个页面：

我们将不需要元数据或“阅读更多”链接。所以我们需要做的是在我们的主题中添加另一个页面。

让我们创建一个新文件，并将其保存为 page.php。
现在我如果返回并重新加载，它会变成空白，因为它正在查看空文件。所以我们可以做的是复制 index.php 中的代码，并在 page.php 中使用它。
我们将在代码中做以下几处更改：

      <?php get_header(); ?>
         <div class="main">
            <div class="container">
               <?php if(have_posts()) : ?>
                  <?php while(have_posts()): the_post(); ?>
                     <article class="post">
                        <h3>
                           <?php the_title(); ?>
                        </h3>
                        <?php if(has_post_thumbnail()) : ?>
                           <div class="post-thumbnail">
                              <?php the_post_thumbnail(); ?>
                           </div>
                        <?php endif; ?>
                        <?php the_content(); ?>
                        <br>
                     </article>
                  <?php endwhile; ?>
               <?php else : ?>
                  <?php echo wpautop('Sorry, No posts were found.'); ?>
               <?php endif; ?>
            </div>
         </div>

      <?php get_footer(); ?>

我们首先要做的是从标题中移除链接，因为我们不想去其他地方。此外，我们可以完全删除 Read More。它还有一个摘要，我们不需要；我们想要整个内容，所以我们将它改为 the_content()。然后，在 meta 中，我们可以删除整个 div 并保存它；让我们看看：

现在它看起来更像是一个常规的网页。我们将对服务做同样的事情。这就是您如何创建页面以及如何为目标页面标记的方法。您还可以创建自定义页面和自定义模板；您可以为不同的页面设置不同的布局，但我们将在下一个项目中详细介绍。构建主题还有很多其他内容。还有很多您可以在本项目中做的事情，但我们不会在本项目中涉及，我只是想在本项目中介绍基础知识。我们现在有了页面和菜单。在下一节中，我们将讨论小部件位置，因为我们现在想要能够有一个带有小部件的侧边栏。

小部件位置和评论

现在我将向您展示如何在主题中创建小部件位置。我们将有一个小部件位置，它将在侧边栏中。让我们开始吧！

与小部件一起工作

让我们看看 index.php，在那里我们有一个具有 main 类的 <div> 标签。我们想要做的是在 main 和结束的 </div> 标签之间直接进入。我们将创建一个具有 sidebar 类的 <div> 标签，如下面的代码所示：

      <div class="sidebar">
      TEST
      </div>

我们还在下一行添加了 TEST，它显示如下：

现在我们想要浮动主 <div> 并设置宽度，然后让侧边栏向右浮动。

让我们去样式表，在那里我们有 main 并带有 margin:15px，在顶部和底部都有。让我们将其浮动到左边，并设置宽度为 68%，如下面的代码块所示：

      .main{
          margin:15px 0;
          float:left;
          width:68%;
      }

      footer{
          background:#393939;
          color:#fff;
          padding:10px 10px;
          text-align:center;
      }

让我们看看这会给我们带来什么：

这个看起来真的很奇怪的原因是因为我们没有清除浮动。

所以我们将进入 sidebar div 并输入 <div class="clr">：

      <div class="sidebar">
      TEST
      </div>

      <div class="clr"></div>

现在，我们将进入我们的 CSS，添加一个名为 clr 的类，我们只需说 clear:both;：

      .clr{
          clear:both;
      }

然后让我们添加sidebar类；这将向右浮动，我们将设置宽度为28%，如下面的代码所示：

      .sidebar{
          float:right;
          width:28%;
      }

现在，我们想要在两个文件周围放一个容器——index.php和style.css，因为现在main内部有一个容器，但我们想要移除它，并将其放在main之上，如下面的代码所示：

      <?php get_header(); ?>

      <div class="container">
         <div class="main">

我们将在这里结束：

         <div class="sidebar">
         TEST
         </div>

         <div class="clr"></div>
      </div>
      <?php get_footer(); ?>

现在，让我们运行这个：

因此，现在我们有了主区域和一个侧边栏。
接下来，我们将看到如何添加小部件，为此，我们将进入functions.php。在这里，我们实际上可以使用小部件并定义我们希望小部件允许的位置。我们将文件拉到最底部并创建一个函数，如下面的代码块所示。我们将称之为init_widgets，它将接受id，我们将称之为register_sidebar。现在我们将创建一个侧边栏小部件，但要知道无论你把它放在哪里，register_sidebar都是我们将使用的函数，即使它不是一个侧边栏——如果它在下面，或者在页眉中，或者任何其他地方，这是实际注册小部件位置所使用的。现在，这将接受一个数组，它将接受一个name；让我们将其设置为Sidebar，然后是 ID，通常是相同的，只是小写且没有空格。如果有多个单词，可以使用连字符。然后，我们还可以使用before_widget。我们还可以使用<div class="side-widget">，然后我们可以添加after_widget；这将是一个结束的</div>标签。然后，我们还可以为小部件添加before_title和after_title，如下面的代码块所示。我们想在标题之前有一个<h3>标签。现在，这段代码还没有运行。我们需要执行add_action，我们想要的钩子叫做widgets_init；我们想要输入我们的函数名，即init_widgets：

      //Excerpt Length
      function set_excerpt_length(){
          return 60;
      }

      add_filter('excerpt_length', 'set_excerpt_length');

      //Widget Locations
 function init_widgets($id){
 register_sidebar(array(
 'name' => 'Sidebar',
 'id' => 'sidebar',
 'before_widget' => '<div class="side-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 }

 add_action('widgets_init', 'init_widgets');

现在我们将保存代码。如果我们返回并重新加载，我们会得到以下内容：

我们在侧面有一个小部件项和一个侧边栏位置。

让我们把分类小部件拖动并带到侧边栏。我们还将把最近的文章也拖过来：

保存并转到前端；如果我们现在重新加载，我们什么也看不到，因为我们需要将其添加到我们的模板中。

让我们下滑到index.php文件中侧边栏的位置，我们首先会使用以下代码检查小部件：

      <div class="sidebar">
         <?php if(is_active_sidebar('sidebar')) : ?>
 <?php dynamic_sidebar('sidebar'); ?>
 <?php endif; ?>
      </div>

我们将检查它是否是一个名为is_active_sidebar()的函数，就像我之前说的，即使它不是一个侧边栏，这仍然会起作用。我们还将添加我们的位置，它恰好是侧边栏。我们还将添加一个dynamic_sidebar()函数，然后小部件的 ID 再次是侧边栏。

保存它，重新加载，然后看看它：

我们得到了两个小部件：分类和最近的文章。

现在，记得我们在 function.php 文件中添加了 side-widget 类，这样我们就可以使用 style.css 文件来样式化小工具，如下面的代码块所示：

      .side-widget{
          border:1px #ccc solid;
          padding:10px 10px;
          margin-bottom:20px;
          margin-top:20px;
      }

我们添加了带有 10px 10px 边框和填充的 side-widget。我们添加了 margin-bottom。现在如果我们重新加载，你可以看到它们有边框。因此，我们也会添加 margin-top。我们说 margin-top:20px。

为了使这个看起来更好，我们将使用以下代码：

      .Side-widget li{
          list-style: none;
          line-height:2.2em;
          border-bottom:dotted 1px #ccc;
      }

      .Side-widget a{
          text-decoration: none;
      }

这里，我们已经移除了 text-decoration。

保存并重新加载后，你会得到这个：

所以这个看起来不错。

我们可以看到现在页面会变得混乱：

这是因为在 page.php 中，我们仍然在 main 中有 container 类。

我们要做的就是复制 index.php 中所做的操作：

         <div class="sidebar">
            <?php if(is_active_sidebar('sidebar')) : ?>
               <?php dynamic_sidebar('sidebar'); ?>
            <?php endif; ?>
         </div>

         <div class="clr"></div>
         </div>
      <?php get_footer(); ?>

我们需要在 main 结束后添加侧边栏，然后我们实际上想要将容器移出并放在 main 之上。我们需要确保将结束的 </div> 标签放在外面。

让我们继续检查一下：

所以这个看起来不错。

我们将对 Single.php 重复同样的操作，并将得到以下结果：

所以所有不同的格式和所有不同的页面都已经设置好了；它们实现了侧边栏。当然，如果你不希望在其中一个页面上有侧边栏，你不必有它。如果我们想稍微减少一点代码，我们可以在 footer.php 中放入以下代码：

      <div class="sidebar">
      <?php if(is_active_sidebar('sidebar')) : ?>
         <?php dynamic_sidebar('sidebar'); ?>
      <?php endif; ?>
      </div>

      <div class="clr"></div>
      </div>

我们可以剪切并保存，然后将该代码添加到 footer.php 的顶部，如下所示：

 <div class="sidebar">
 <?php if(is_active_sidebar('sidebar')) : ?>
 <?php dynamic_sidebar('sidebar'); ?>
 <?php endif; ?>
 </div>
      <div class="clr"></div>
      </div>

      <footer>
         <div class="container">
           <p>&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>
           </p>
         </div>
      </footer>

      <?php wp_footer(); ?>
      </body>
      </html>

保存后，从 page.php 和 index.php 中删除以下代码，因为它现在已经在 footer.php 中了：

      <div class="sidebar">
      <?php if(is_active_sidebar('sidebar')) : ?>
         <?php dynamic_sidebar('sidebar'); ?>
      <?php endif; ?>
      </div>

      <div class="clr"></div>
      </div>

我们的前端应该看起来完全一样。所以这是好的，这是小工具。

添加评论功能

现在，剩下的一件事就是评论功能——我们想要添加评论功能。这实际上非常简单；我们只需要去我们的 single.php 文件，看看我们想在哪个位置添加评论，它就在结束的 </div> 标签下面，如下面的代码块所示：

         <?php endif; ?>

         <?php comments_template(); ?>
      </div>

我们可以保存代码并重新加载。以下是输出结果：

现在，我们可以看到评论功能。让我们添加 Great Post! 然后点击发表评论。

这里是我们得到的结果：

我们可以看到它有一个头像、用户名、日期，还有一个回复链接。现在你会意识到这看起来并不是你见过的最好的评论区，但这只是因为它使用了默认设计。
如果我们查看标记，我们可以看到它们将每件事都分开，这样你就可以进行样式化：

这里，我们有ol commentlist；每个<li>都有一个comments类，我们还有作者、vcard和回复周围的类。你可以按你喜欢的方式设置样式。

现在，你实际上可以通过创建一个comments.php文件来替换整个模板；我们稍后会讨论这个问题。我不想在这个章节中做这件事，因为这个只是一个非常基础的入门主题。

由于评论功能已经正常工作，我们不会继续创建自定义评论模板或类似的东西。我认为这就足够了。就像我说的，我们还能做更多；我们可以为存档帖子创建一个单独的模板。

实际上，我想要快速做的，是将作者的名字变成一个链接，这样你可以点击它，查看作者的所有帖子。

让我们转到index.php，找到作者的位置，并输入以下高亮代码：

      Created By
      <a href="<?php get_author_posts_url(
 get_the_author_meta('ID')); ?>">
 <?php the_author(); ?>
 </a>
      on <?php the_time('F j, Y g:i a'); ?>
      </div>
      <?php if(has_post_thumbnail()) : ?>

如此所示，我们只需在那个地方添加一个链接。

让我们重新加载，现在管理员已经是一个链接了；我需要改变它的样式，因为我们看不到它。打开style.css。进入meta并添加以下代码：

      .meta{
          background:#333;
          color:#fff;
          padding:5px;
      }

      .meta a{
          color:#fff;
      }

现在我们可以看到作者的名字是白色的：

如果我现在点击管理员，它会显示管理员的所有帖子，但如果有多位用户——多位作者——这将允许我们查看该特定作者的所有帖子。
我们在这里结束。你可能意识到这并不是你见过的最好的设计，但这个项目的目的是让你熟悉代码，以及主题的结构和包含的文件。正如我们所看到的，我们需要某些文件名，比如page和single.php。

摘要

希望你喜欢这一章。

在这一章中，我们首先安装并设置了 WordPress。然后我们继续创建并启用主题。我们还创建了一个 HTML 结构和主体，并对其应用了一些基本样式。我们处理了单篇文章、缩略图、页面和菜单。后来，我们看到了如何将图片和链接添加到文章中。最后，我们看到了如何在主题中创建小工具位置以及如何将评论功能添加到小工具中。

我们将在这个项目中使用你所学的知识，并将其应用于未来的项目中。随着我们的进行，你还将学到更多。

在下一章中，我们将看到如何构建 WordPress 主题。

第二章：构建 WordPress 主题

在本章中，我们将深入了解并湿脚。在前一章中，我们介绍了基础知识，但现在我们将使用一些更高级的概念来构建 WordPress 主题。以下是我们将涵盖的概念：

自定义模板页面
归档页面
帖子格式
自定义主页

让我们快速看一下这个项目：

在前面的图片中，你可以看到 WordpressDev 主页和一些我们将要实现的组件，例如展示组件。你还可以看到三个框组件。

帖子格式

当你访问博客页面时，你可以看到我们有多种帖子类型：

图库帖子
链接帖子
A 面帖子
普通博客帖子

在下面的屏幕截图中，你可以看到图库帖子以及链接帖子：

这就是 A 面帖子的样子：

这就是一篇普通博客帖子的样子：

当我们点击“阅读更多”时，它会带我们到一个单独的页面，在那里我们有评论表单和定制的评论界面，如下面的图片所示：

我们现在将看到如何创建自定义布局；例如，下面的屏幕截图所示的关于页面，其布局称为公司，其中电话号码显示在div类中：

现在让我们点击帖子或页面，然后点击关于：

你会看到我们有默认模板和公司布局在模板选项中：

现在我们将看到如何为有父级的页面创建子菜单；例如，我们的关于页面有两个子页面，常见问题和我们的团队，如下面的屏幕截图所示：

现在让我们看看归档列表。转到博客页面并点击一个分类，例如技术：

我们可以看到页面显示了所有关于技术的帖子。如果我们点击用户名并点击它，它将显示该作者的帖子，如下面的图片所示，这是归档页面的自定义布局：

让我们继续搜索。我们有一个特殊的主题或布局，正如你在下面的屏幕截图中所看到的：

我们会比第一章更深入地探讨。

使用 HTML 和 CSS 创建设计

让我们看看如何创建我们的主题，但在我们进入 WordPress 之前，我们将首先绘制并使用 HTML 和 CSS 创建设计。

通常，当我们构建 WordPress 主题、Drupal 或 Joomla 主题时，你通常可以使用静态 HTML 和 CSS 首先创建设计。

构建 HTML 主体

如以下截图所示，我们有一个名为advanced-wp-html的空文件夹，我们将在其中创建几个文件。首先，我们将创建一个index.html文件，然后我们将创建我们的样式表，它将只是style.css。

让我们用 Sublime 编辑器打开这两个文件。在index.html文件中，添加我们的核心 HTML 标记，如下面的代码块所示：

<!DOCTYPE html>
<html>
<head>
   <title></title>
</head>
<body>

</body>
</html>

我们将更新代码，如下所示：

<!DOCTYPE html>
<html>
<head>
   <title>Advanced WP Theme</title>
</head>
<body>
   <header>
      <div class="container">
         <h1>Advanced Wordpress Theme</h1>
      </div>
   </header>
</body>
</html>

这里，我们有“高级 WP 主题”作为标题，并添加了一个到我们的样式表的链接，并放置了一个href属性，它将指向style.css。然后在 body 中，我们创建了一个带有标题的标记。由于我们使用 HTML5 语法，我们使用了<header>标签，并创建了一个带有container类的<div>。在container类内部，我们有一个<h1>标签，上面写着“高级 Wordpress 主题”；当然，当我们实际创建 WordPress 主题时，这将动态的，你将能够在管理区域中更改它，但现在我们只是在这里放一些静态文本。

现在，在<h1>标签之后，我们将有一个另一个div类，并给它一个h_right类作为右侧标题。这就是我们的搜索表单将要放置的地方，所以现在我们只是放一个<form>标签和一个<input>标签，如下面的代码块所示。我们将给它一个placeholder，并说“搜索...”：

<div class="h_right">
   <form>
      <input type="text" placeholder="Search...">
   </form>
</div>

现在，让我们在</header>标签下方创建我们的导航，如下面的代码块所示：

<nav class="nav main-nav">
   <div class="container">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="#">Services</a></li>
      </ul>
   </div>
</nav>

如您所见，我们使用了一个带有nav类的<nav>标签，并给它添加了main-nav。接下来，我们添加了一个带有class="container"的<div>，只是为了将所有内容移动到中心。然后，在内部，我们放置了一个带有一些<li>标签和一些链接的<ul>。我们添加了“首页”、“关于”和“服务”。然而，由于我们实际上不会有“服务”页面，我们将有一个“关于”页面，这样我们就可以在内部页面上使用它。所以，“首页”将是博客帖子，“关于”将只是一个普通页面。

接下来，让我们在</nav>标签之后添加以下代码：

<div class="container content">
   <div class="main block">
      <article class="post">
         <p class="meta">Posted at 11:00 on May 9 by admin</p>
      </article>
   </div>

这里，我们添加了一个带有container类和content类的div元素。然后，在内部，我们添加了另一个带有class="main block"的div元素。在这里，block是一个我们可以在整个网站上使用的类，我们也可以用它来设置小工具；它只是会有一些填充和边框。

现在在这个div内部，我们有我们的主要帖子；所以每个帖子都有一个带有post类的<article>标签。我们添加了一个带有meta类的段落。这就是放置诸如帖子日期和作者姓名等内容的区域。当我们实际构建 WordPress 主题时，格式可能会有一些变化；现在我们只是说“发布于 5 月 9 日 11:00，由 admin 发布”。所以它看起来会是这样。

我们还需要一个标题。为此，放一个<h2>标签，并说“博客帖子 1”，如下面的代码所示：

<article class="post">
   <h2>Blog Post 1</h2>
   <p class="meta">Posted at 11:00 on May 9 by admin</p>
</article>

现在，让我们快速添加一些内容。我们将访问www.lipsum.com并点击生成 Lorem Ipsum。

我们将复制并粘贴一些内容，然后添加一些段落标签。接下来，我们需要的是Read More按钮。我们将添加一个链接；我们将给它一个button类，如下面的代码块所示：

   <a class="button" href="#">Read More</a>
</article>

然后，我们将整个文章帖子复制并粘贴两次。如果我们想查看它，请打开index.html文件。

您可以从前面的屏幕截图看到，它看起来还不是很好看。所以，现在我们将添加一个页脚。为此，让我们进入最后一个<div>标签并输入以下代码：

<footer class="main-footer">
   <div class="container">
   <div class="f_left">
      <p>&amp;copy; 2017 - Advanced WP Theme</p>
   </div>
   <div class="f_right">
      <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="#">Services</a></li>
      </ul>
   </div>
   </div>
</footer>

在这里，我们添加了一个带有"main-footer"类的<footer>标签；我们还有一个它的容器。在容器中，我们有页脚的左侧和右侧；所以我们添加了<div class="f_left">和f_right。因此，在左侧，我们将有一个包含版权信息的段落，而在右侧，我们将有一个另一个菜单。为此，我们然后从上面复制了<ul>并将其粘贴。这已经足够了，对于 HTML 的标记。现在让我们重新加载文件：

我们在这里有一个页脚；它看起来很糟糕，这是因为我们没有添加样式。接下来，我们将看到如何添加 CSS。

添加 CSS

现在，我们将看到添加 CSS 如何使我们的页面看起来好很多。我们已经创建了style.css；让我们向其中添加 body，如下面的代码块所示：

body{
    font-family: Arial;
    color: #333;
    margin:0;
    padding:0;
}

在这里，我们只是添加了Arial字体；文字颜色将是深灰色。我们设置了主体边距为0和填充为0。

让我们从无序列表的几个核心样式开始。我想移除边距和填充，使用以下代码：

ul{
    margin:0;
    padding:0;
}

现在，让我们添加链接或a标签，如下面的代码所示：

a{
    color:#009acd;
    text-decoration:none;
}
a:hover{
    color:#333;
}
.container{
    width:960px;
    margin:auto;
    overflow:auto;
}
header{
    background: #f4f4f4;
    padding:10px;
    border-bottom: 3px solid #009acd;
}

在这里，我们添加了浅蓝色，颜色代码为009acd，并将text-decoration设置为none。我们还需要一个悬停颜色；在这种情况下，悬停颜色将是深灰色。接下来，我们有container，它将所有内容都居中。我们设置了宽度为960，并将margin设置为auto。overflow设置为auto。我们有一个带有浅灰色背景的header；我们设置了页眉的填充为10px和border-bottom为3px solid，并且它也是同样的浅蓝色颜色。

现在，让我们添加带有边距和填充为0的header h1：

header h1{
    margin:0;
    padding:0;
    color:#009acd;
    float:left;
}

如您所见，我们还将颜色设置为浅蓝色，并希望将其浮动到左侧。

然后，我们也想让<h1>成为一个链接。为此，我们将进入index.html文件并将它包裹在a标签中，如下面的代码块所示：

<header>
   <div class="container">
      <h1>
         <a href="index.html">Advanced Wordpress Theme</a>
      </h1>

接下来，我们将创建带有浅蓝色颜色的header、h1和a。文本装饰设置为none，如以下代码块所示：

header h1 a{
    color:#009acd;
    text-decoration:none;
}

现在让我们添加一个标语或口号，因为 WordPress 默认有一个这样的选项。所以直接在 <h1> 标签内，我们将一个标语放在一个 <small> 标签中，内容为 Another Wordpress Theme：

<h1>
   <a href="index.html">Advanced Wordpress Theme</a>
   <small>Another Wordpress Theme</small>
</h1>

让我们使用以下代码来设置样式：

header small{
    color:#666;
    margin-left:1px;
    font-size: 13px;
}

我们已经添加了 header small，并给它设置了深灰色。我们将 margin-left 设置为 1px 的边距，并将 font-size 设置为 13px。

现在为页眉的右侧添加以下代码：

header .h_right{
    float:right;
}

我们有 header .h_right，并将它浮动到右侧。

现在，由于它有一个输入，我们将设置输入的样式。为此，我们将输入以下代码：

header .h_right input[type="text"]{
    width:250px;
    padding:5px;
    margin-top:5px;
}

在这里，我们输入了 type="text" 并设置宽度为 250px。我们还设置了 padding 为 5px，以及 margin-top 为 5px。

让我们保存它并看一下：

我们可以看到我们的页眉。

接下来，我们将处理导航。我们想要有一个主要的 nav div 来处理高度、背景颜色和类似的定制；然而，我们确实想要有一个普通的 nav 类来处理浮动，这样我们的页脚菜单就可以将列表项浮动，等等。所以现在我们不会为那个添加任何内容。我们想要做 nav 元素的 li。我们将确保我们有那个。你可以在我们输入的代码中看到，我们有 nav 类和 main-nav。现在，我们将列表项浮动到左侧，并输入 display:inline，并在右侧设置 15px 的填充：

nav.nav li{
    float:left;
    display:inline;
    padding-right:15px;
}

接下来，我们将添加 nav.nav a，并确保将文本装饰设置为 none：

nav.nav a{
    text-decoration:none;
}

现在让我们来做 main-nav：

nav.main-nav{
    height:45px;
    overflow:hidden;
    background:#333;
    color:#fff;
    padding-top:7px;
}

在这里，我们将高度设置为 45px，overflow 设置为 hidden，并将背景设置为深灰色。文字颜色将是白色，padding-top 设置为 7px。

现在我们来添加 main-nav li:

nav.main-nav li{
    height:40px;
    line-height:40px;
}

我们将高度设置为 40px，并将 line-height 设置为 40px。接下来，我们将添加 a 标签：

nav.main-nav a{
    color:#fff;
    text-decoration:none;
    padding:8px;
}

在这里，我们将颜色设置为白色，text-decoration 设置为 none，并将 padding 设置为 8px。

现在我们需要悬停状态：

nav.main-nav a:hover{
    color:#009acd;
}

在这里，我们有 nav.main-nava:hover，并将悬停 color 设置为浅蓝色。

我们将保存这个，并查看我们的导航：

正如你所见，整个高亮区域都有一个 content 类，我们只想把它向下推一点，并设置所有文本的行高：

.content{
    margin-top:30px;
    line-height:1.5em;
}

我们有 .content，margin-top 设置为 30px，line-height 设置为 1.5em。

现在我们将包括一个侧边栏，因为我们之前还没有这样做。为此，让我们打开 index.html 文件并添加以下代码：

<div class="side">
   <div class="block">
   <h3>Sidebar Head</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Nam vel diam hendrerit erat fermentum aliquet sed eget arcu.</p>
   <a class="button">More</a>
   </div>
</div>

我们将侧边栏放在了</div>标签的下方。我们添加了一个带有side类的div class，还添加了一个内部名为block的<div>标签。侧边栏中的每个元素都应该有一个block类。然后我们有一个<h3>标签，上面写着Sidebar Head，我们还放置了一个段落，其中包含我们抓取的一些文本。然后，在这个下面，我们放置了一个按钮，或者一个格式像按钮的链接。现在我们可以看到我们的侧边栏了。

让我们回到style.css文件。在这里，我们将输入.main，并将其左浮动，并为其设置宽度为65%。然后，让我们为侧边栏添加宽度为30%，并将其右浮动。接下来，对于块样式，我们将设置浅灰色边框，为1px实线。我们还将添加一些内边距5px 15px 25px 15px，并将背景设置为非常浅的灰色和overflow设置为hidden。对于块中的h3，我们将设置border-bottom，这将为浅灰色，实线为1px；我们还将设置底部内边距为10px：

.main{
    float:left;
 width:65%;
}

.side{
    width:30%;
    float:right;
}

.block{
    border:#ccc 1px solid;
    padding:5px 15px 25px 15px;
    background:#fcfcfc;
    overflow:hidden;
}

.block h3{
    border-bottom:#ccc solid 1px;
    padding-bottom:10px;
}

让我们看看这个。你可以看到现在我们有了主区域和侧边栏：

接下来，让我们添加文章。我们将放置一个带有post类的article标签，并添加border-bottom、margin-bottom和padding-bottom，如下所示：

article.post{
    border-bottom: #ccc solid 1px;
    margin-bottom:10px;
    padding-bottom:20px;
}

现在，让我们为以下图像中突出显示的元区域设置样式；我们将为其添加蓝色背景：

要做到这一点，让我们输入以下代码：

article.post .meta{
    background:#009acd;
    color:#fff;
    padding:7px;
}

.button{
    background:#009acd;
    color:#fff;
    padding:10px 15px;
    display:inline-block;
}

我们输入了article.post .meta，并设置了内边距为7px。我们还添加了button类，并将内边距设置为10px 15px。我们还将其显示为内联块。现在让我们看看：

这看起来相当不错。

现在，让我们添加页脚。我们将输入footer，给它.main-footer类，并在顶部设置40px的边距。我们将使所有内容居中，并给它一个深灰色背景。我们将设置color为白色，高度为60px，padding-top:10px和overflow为auto。

接下来，我们将添加页脚的左右两侧。为此，我们将进入footer.main-footer .f_left，并使用左浮动，然后对右侧做同样的事情，给它一个右浮动：

footer.main-footer{
    margin-top:40px;
    text-align:center;
    background:#333;
    color:#fff;
    height:60px;
    padding-top:10px;
    overflow:auto;
}

footer.main-footer .f_left{
    float:left;
}

footer.main-footer .f_right{
    float:right;
}

我们现在将转到菜单。我们将使用内联显示的ul，然后我们有li，如下所示：

footer.main-footer li{
    float:left;
    padding-right:10px;
    list-style:none;
}

对于li，我们设置了float:left，将padding-right设置为10px，并将list-style设置为none。

最后，我们将链接的颜色设置为白色。现在，让我们看看：

我们只想将页脚向下推一点。为此，输入以下代码：

footer.main-footer .f_right{
    float:right;
    margin-top:15px;
}

现在，看看它：

这看起来相当不错；这是一个非常简单的设计，我们不想做得太过分，因为这个的主要目的是让你熟悉创建 WordPress 主题的语法，而不是创建一个伟大的设计。所以现在我们完成了 HTML 和 CSS，我们可以继续创建我们的 WordPress 主题。

创建 WordPress 主题

现在我们将把我们的 HTML 模板转换成一个 WordPress 主题。我在这里有一个全新的 WordPress 安装，只有默认的 twentysixteen 主题。我们将进入 WordPress 文件夹，wp-content，然后在themes文件夹中，我们将创建一个新的文件夹并命名为advanced-wp。

这里我们将创建一个style.css文件和一个index.php文件。

现在让我们打开样式表。在这里，我们将首先放置我们的声明，这样 WordPress 就能看到这个主题。我们将设置Theme Name为Advanced WP并为Author输入一个值。接下来我们将添加Author URI、一个描述和一个版本：

/*
    Theme Name: Advanced WP
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Advanced Wordpress Theme
    Version: 1.0
*/

现在我们项目文件中也有一个截图，所以我们将添加那个。

让我们转到C:。由于我使用的是 AMPPS，我将进入我的www文件夹，然后转到wpthemes\content\themes，然后转到advanced-wp。我们将继续粘贴名为screenshot.png的图片到这里。如果我们去 WordPress 的后端，然后转到外观和主题，你可以看到我们有了 AdvancedWP 主题：

我们现在将激活这个功能。如果我们去前端并重新加载，我们只看到一个空白白色页面，就像这里显示的那样：

让我们在这里添加样式。从 HTML 模板中打开style.css文件。我们将复制所有代码并将其直接粘贴到样式表中。

我们将保存这个文件，然后在index.php文件中，我们将从index.html文件中复制所有内容并将其粘贴到index.php中：

保存并重新加载前端。我们会看到所有的 HTML 和静态 HTML：

但是我们看不到样式表，因为我们没有将其放到正确的位置。所以让我们更新代码如下。我们将移除style.css。我们将打开一些php标签，并使用bloginfo，然后我们只需放入stylesheet_url：

<head>
   <title>Advanced WP Theme</title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

让我们保存并重新加载：

你可以看到现在 CSS 正在被读取。我们在这里看到的所有内容只是index.php文件中的静态内容，实际上还不是来自 WordPress。所以让我们在这里做一些事情。

最好的做法是从顶部开始，逐步向下工作。在 HTML 标签中，我们将放置 language_attributes() 函数。我们将使用 php bloginfo 更新 <title> 标签，并在其中放入 name。我们还将添加 meta charset 字符集 <meta> 标签。我们可以使用 bloginfo() 函数，并传递 charset。接下来，我们想要输入 wp_head() 函数，因此我们将添加 <?php wp_head(); ?>。使用 <meta> 标签添加 viewport 函数，其名称为 viewport。我们将设置 content 属性为 width=device-width。然后，我们将 initial-scale 设置为 1.0；这有助于主题的响应性：

<!DOCTYPE html>
<html>
<head>
   <meta charset="<?php bloginfo('charset'); ?>">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
</head>

现在在 <body> 标签中，我们需要 body_class() 函数。

对于标志或标题，我们将移除静态文本并添加 php bloginfo 与名称。接下来，我们将添加标语，使其动态化使用 bloginfo，然后我们可以传递 'description'：

<body <?php body_class(); ?>>
   <header>
      <div class="container">
         <h1>
            <a href="index.html">
            <?php bloginfo('name'); ?>
            </a>
            <small><?php bloginfo('description'); ?></small>
         </h1>
         <div class="h_right">
            <form>
               <input type="text" name="s" placeholder="Search...">
            </form>
         </div>
    </div>
 </header>

现在搜索表单相当简单。我们只需将 <form> 标签添加一些内容。我们将使用 method="get" 更新它，然后是 action，这是提交的地方，我们将输入 php 并使用 esc_url() 函数。然后，我们将传递 home_url 和 /。然后，在输入中，我们将添加一个 name 属性并将其设置为 s：

<h1>
   <a href="index.html">
      <?php bloginfo('name'); ?>
   </a>
   <small><?php bloginfo('description'); ?></small>
</h1>
<div class="h_right">
   <form method="get" action="<?php esc_url(home_url('/')); ?>">
   <input type="text" name="s" placeholder="Search...">
   </form>
</div>

大概就是这样。其余的将由 WordPress 处理。让我们保存并查看到目前为止的情况：

我们有我们的标志，它来自 WordPress，标语也是一样。我们实际上还不能测试搜索功能，因为我们这里没有动态内容。现在你会看到顶部有空白区域；这是因为我们还没有 wp_footer() 函数，它将把管理员菜单放在那里。我们将在下一步添加这个函数。

让我们回到代码中，在 </footer> 标签之后添加 wp_footer()：

      </div>
   </footer>
   <?php wp_footer(); ?>
</body>
</html>

让我们保存并重新加载：

现在你可以看到我们的管理员栏。

让我们回到上面，处理菜单。我们将下滑到我们的 nav 菜单处，移除整个 <ul> 标签和所有的 <li> 标签。我们首先创建一个名为 args 的变量，并将其设置为 array，然后将参数传递给 wp_nav_menu() 函数。目前我们只有一个参数，即菜单的位置。所以我们将输入 theme_location 并将其设置为 primary。接下来，我们将输入 wp_nav_menu 并传递 args：

<nav class="nav main-nav">
   <div class="container">
   <?php
       $args = array(
           'theme_location' => 'primary'
       );
   ?>

   <?php wp_nav_menu($args); ?>
   </div>
</nav>

如果我们去查看，我们会发现它在这里是工作的：

然而，我们想在函数文件中指定主题中不同的菜单位置，我们有两个。所以让我们去创建一个新的文件。我们将将其保存为 functions.php，并设置一个用于主题支持的功能。

我们将定义一个以adv为前缀的函数，然后是_theme_support。我们所有的自定义函数都将有adv前缀。接下来，我们将注册nav menus。我们将传递一个数组并放置我们的不同位置；我们有primary，我们将将其设置为可读的名称，因此我们输入Primary Menu，然后我们将在footer中添加另一个，现在我们先把它放一边：

<?php
    // Theme Support
    function adv_theme_support(){
        // Nav Menus
        register_nav_menus(array(
            'primary' => __('Primary Menu'),
            'footer' => __('Footer Menu')
        ));
    }

现在在函数下面，我们将添加add_action和after_setup_theme，然后我们要运行的函数是adv_theme_support：

add_action('after_setup_theme', 'adv_theme_support');

让我们保存这个并重新加载：

你可以看到我们的菜单现在在这里。如果我们点击它，你会看到 URL 发生变化，但你不会看到任何内容变化，因为所有这些都仍然是静态 HTML，但我们确实有我们的菜单。现在，默认情况下，我们拥有的每个页面都会显示在这里。你的页面可能实际上会有所不同；你可能没有“我们的团队”，因为在这里我之前对这个 WordPress 站点做了一些工作，所以你的链接可能略有不同。现在如果你查看“外观”，你会看到我们没有“菜单”选项。

// Nav Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer'  => __('Footer Menu')
 ));

自从我们在functions文件中添加了register_nav_menus之后，如果我们现在重新加载，你会看到一个“菜单”链接。点击这个链接，你会看到在“主题位置”我们有“主要”和“页脚”，因为我们已经在functions文件中添加了它们。

让我们检查“主要菜单”，在菜单名称中我们只输入“主菜单”，你可以放置你想要的任何页面。我们只保留一个未勾选的，我们保留“我们的团队”未勾选；然后点击“添加到菜单”。然后，点击“保存菜单”：

现在如果我们去前端，你会看到我们只有“关于”和“样本页面”：

现在我将创建几个页面，这样你就有和我一样的页面。所以我们有一个“关于”页面，上面只写着“这是关于页面”。

对于“我们的团队”页面，我们将选择“关于”的父级，并更新它：

现在让我们创建一个名为FAQ的新页面。我们将选择“关于”的父级，你稍后会看到我们为什么要这样做：

然后，我们将创建另一个名为“服务”的页面，这个页面没有父级。接下来让我们按照以下方式将“服务”添加到菜单中。我们暂时不会添加“FAQ”或“我们的团队”。我们将看看我们如何使用子菜单，但我们稍后再做：

我们将保存设置，然后你的菜单应该看起来像这样：

我们已经有了导航栏、页眉、搜索框，以及所有的样式都已经完成。在下一节中，我们将继续前进并开始创建我们的主要博客文章循环。

显示博客文章

我们创建了主题并添加了页眉和导航栏。现在页面上所有的这些内容都是动态的，并且与 WordPress 集成，但这所有的一切都只是静态 HTML。

让我们回到我们的index.php页面，并向下到我们有的container content div，以及不同的博客帖子。我们有三个带有博客帖子的article标签；我们将删除其中的两个。

然后，我们将缩短段落，使其变得更短，这样我们就可以在页面或视图中显示全部内容。我们想在main block div 中编写，并创建我们的帖子循环。

首先，我们必须检查帖子，为此，我们将输入if(have_posts)，然后我们必须在</article>标签结束之后结束它。我们还将添加一个else语句。如果没有帖子，我们将输入php echo，使用wpautop()函数，我们可以在这里放置我们想要的文本。在这种情况下，我们输入'抱歉，没有找到帖子'。然后，我们将创建我们的while循环，然后在</article>标签下面结束这个while循环：

<div class="container content">
   <div class="main block">
      <?php if(have_posts()) : ?>
         <?php while(have_posts()) : the_post(); ?>
            <article class="post">
            <h2><?php the_title(); ?></h2>
            <p class="meta">Posted at 11:00 on May 9 by admin
            </p>
            <?php the_content(); ?>
            <a class="button" href="#">Read More</a>
            </article>
         <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, no posts were found'); ?>
      <?php endif; ?>
 </div>

因此，它将遍历帖子，并为每一个找到的帖子输出这个内容。现在为了使其动态化，我们将使用php the_title()并替换段落为php the_content()，正如前面代码块所示。我们将保存这个文件，并重新加载：

现在我们处于“关于”页面；让我们回到“主页”页面，我们还没有为其创建链接。当我们点击 WPThemes 时，它应该带我们到“主页”页面，但如果我们现在点击它，它会带我们到index.html页面，所以我们需要修复这个问题。

我们将使用以下代码更新index.html文件：

<a href="<?php echo home_url('/'); ?>">
   <?php bloginfo('name'); ?>

现在如果我们重新加载并点击 WPThemes，我们会得到这个：

如果我们查看帖子，我们会得到“博客帖子一”和“博客帖子二”。现在你可能没有这些帖子；你可能有一个“Hello World”；如果它显示出来，那就没问题。如果你想使你的内容与我的相匹配，请继续创建两个帖子，一个作为“博客帖子一”——我只是在里面放了一些示例内容——然后“博客帖子二”类似地：

你也可以创建一些分类，它们实际上并不重要。我们并不是真正处理具体的内容，只是作为一个示例内容：

如您所见，元信息仍然是静态的，阅读更多按钮也是如此。当我们点击这个按钮时，它不会做任何事情。所以让我们在下一个修复它。回到我们的帖子循环中，在<p class="meta">处，我们将进行以下更改以使其看起来更动态：

<p class="meta">
Posted at
<?php the_time(); ?>
by
admin</p>
<?php the_content(); ?>
<a class="button" href="#">Read More</a>

由于我们需要更具体，对于日期和时间我们使用the_time()。如果我们保持这样，让我们看看它会给我们什么：

它只给出了时间，上午 11:55。我想同时显示日期，所以我们将格式化这个日期。然而，我们只想通过添加一些参数来完成这个操作。我们添加了F j，Y，然后对于时间，我们将添加g:i a：

<?php the_time('F j, Y g:i a'); ?>

这涉及到php date函数的参数。

如果你不知道如何格式化时间，你可以访问php.net并搜索date函数，这样应该会给出所有的格式化选项。

现在如果重新加载页面，它会显示日期、月份、日、年和时间：

现在我们还想要获取创建文章的用户名。为此，我们只需在代码中添加<?php the_author(); ?>，如下面的代码块所示：

<?php the_time('F j, Y g:i a'); ?>
by
<?php the_author(); ?></p>
<?php the_content(); ?>

如果我们现在重新加载页面，你可以看到我们仍然得到“admin”，因为那是实际用户的名称。现在我们想要能够点击作者名称，然后链接到该用户所有存档的文章。这也很容易做到。我们只需要添加一个链接，如下所示。在链接内部，我们输入php echo get_author_posts_url()，然后传递get_the_author_meta()和ID：

<a href="<?php echo get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a>

让我们保存这个文件，然后如果重新加载页面，你可以看到现在它已经变成了一个链接。我们因为颜色看不到它——我们需要更改 CSS——但如果我点击它，它会将我们带到地址栏中的用户名，即auth/author/加上用户名；它会显示该用户的所有文章：

让我们快速进入 CSS 看看我们的meta类在哪里。我们将添加article.post .meta到其中，并将color设置为白色，如下所示：

article.post .meta{
    background:#009acd;
    color:#fff;
    padding:7px;
}

article.post .meta a{
   color:#fff;
}

所以现在问题已经解决了。

现在我们也可以获取到文章所属的分类。为此，我们需要回到index.php文件并更新代码，如下面的代码块所示：

</a>
| Posted In 
<?php
    $categories = get_the_category();
    $separator = ", ";
    $output = '';

    if($categories){
        foreach($categories as $category){
            $output .= '<a href="'.get_category_link($category->term_id).'">'.
            $category->cat_name.'</a>'.$separator;
        }
    }

    echo trim($output, $separator);
?>
</p>

在我们刚刚做的作者结束</a>标签的右边，我们将放入一个竖线|字符，然后打开一些php标签。在php标签之前，我们将输入发布在，然后我们可以放置所有类别。为了做到这一点，我们将设置一个categories变量并将其设置为get_the_category()。现在这将给我们一个包含这个帖子所在的所有类别的数组。我们不能直接取这个数组并显示它，所以我们必须遍历它。在我们这样做之前，我们将创建一个名为separator的变量，并用逗号和空格分隔它。然后，我们将初始化一个名为output的变量，并将其暂时设置为空。接下来，我们将检查类别。为此，我们将输入if($categories)，然后我们将使用一个foreach循环，循环($categories as $category)。接下来，我们将向那个output变量追加内容，使用.=。现在为了使每个类别都有一个链接，我们将使用href。为了在这里进行一些连接，我们将使用点，然后添加get_category_link()。我们需要传递一个参数，我们将使用那个$category变量并调用term_id。然后我们将回到我们的字符串双引号之后，再次连接，并输入$category->cat_name，用</a>标签关闭它。我知道连接可能会有些混乱，所以我们需要一个分隔符。然后，在if语句之后，我们将使用echo并将这个包裹在trim()函数中，使其看起来更整洁；然后我们将输入output，第二个参数将是separator。

让我们保存一下，看看我们会得到什么。现在你可以看到它说在商业类别中发布：

这个是发布在“未分类”中的：

现在如果我们点击商业，它会带我们到category/business，你可以看到这里只有这一篇帖子；这是商业类别中的唯一一篇。

所以这工作得非常完美。

现在我们不希望文本太短，并且“阅读更多”按钮能够正常工作。所以我们将转到放置内容的地方，为了使其更短，我们只需将其更改为the_excerpt();，如图所示：

</p>
<?php the_excerpt(); ?>
<a class="button" href="#">Read More</a>

如果我们现在看，文本变得短多了：

现在，默认情况下我认为是 55 个单词，但我们可以更改这个：

让我们转到functions.php文件并添加excerpt_length()函数。我们在这里需要做的只是返回一个数字；让我们说我们想要25。然后我们只需要创建一个过滤器，所以我们会说add_filter；add_action意味着你正在添加一些内容，而add_filter意味着你正在更改一些内容。我们想要excerpt_length，所以我们将添加set_excerpt_length，并且我们也会使用adv前缀：

// Excerpt Length
function adv_set_excerpt_length(){
    return 25;
}

让我们保存并重新加载：

现在你可以看到我们得到了 25 个字符的长度。现在，为了使“阅读更多”按钮正常工作，这相当简单。我们将向下到我们放置链接的地方，并更新代码，如图所示：

</p>
<?php the_excerpt(); ?>

<a class="button" href="<?php the_permalink(); ?>">
Read More</a>

我们将重新加载并点击“阅读更多”。这带我们到那个特定的帖子：

接下来，我们将展示如何添加评论表单以及如何将特色图片添加到我们的帖子中。

创建单个帖子并添加图片

现在，我们将看看如何创建单个帖子。如果我们现在点击“阅读更多”，它将带我们到单个帖子，但这不是我们想要的，我们想要改变这个。此外，我们还想有在帖子中添加特色图片的能力，也称为缩略图。让我们从缩略图开始。我们首先进入 functions.php 文件，并需要启用我们主题的支持。为此，我们将进入 adv_theme_support() 函数并添加一个 Featured Image Support 注释。接下来，我们将进入 add_theme_support() 函数，并传入 post-thumbnails，如下所示：

// Theme Support
function adv_theme_support(){
    // Featured Image Support
    add_theme_support('post-thumbnails');

让我们保存这个，然后转到，比如说 Blog Post One，你会看到我们有了特色图片块：

我们将点击“设置特色图片”并上传一些文件：

你应该有一个名为 _images 的文件夹，里面放了一些图片。

让我们选择 phones.jpg 图片并点击“设置特色图片”，如下面的截图所示：

接下来，我们将将其设置为“技术”类别并点击更新：

现在，让我们转到 Blog Post Two 并点击“设置特色图片”，然后点击“上传”，然后，抓取 surface.jpg 图片。现在让我们点击更新。

如果我们前往前端并重新加载，你将看不到图片；实际上，我们必须将其添加到我们的主题中。

所以让我们去 index.php 并找出你想要放置图片的位置。在这种情况下，我们将在 the_excerpt() 的上方放置它，如下面的代码块所示：

<?php if(has_post_thumbnail()) : ?>
   <div class="post-thumbnail">
      <?php the_post_thumbnail(); ?>
   </div>
<?php endif; ?>
<?php the_excerpt(); ?>

首先，我们将检查图片，为此，我们将添加 <?php if(has_post_thumbnail()) : ?>。然后我们将创建一个带有 post-thumbnail 类的 <div> 标签。然后我们将添加 <?php the_post_thumbnail(); ?>。

让我们保存这个，返回，并重新加载。

现在你可以看到我们有了图片。它们有点太大，所以让我们去我们的 CSS 并编辑代码。我们将进入我们的文章样式部分，并添加 article .post-thumbnail。然后，我们将设置图片的 width 为 100%。现在它占用了 100% 的 div，但比例完全失调。所以我们将添加 height 并将其设置为 auto，如下面的代码块所示：

article .post-thumbnail img{
    width:100%;
    height:auto;
}

重新加载，现在你可以看到它们适合了。

现在看起来不错了！

现在我们想要进入单个文章页面。为此，我们将创建一个新的文件，并将其保存为 single.php。我们只需输入单词 TEST。现在，如果我们回到我们的单个文章并重新加载，你会看到我们得到 TEST，因为现在这个页面已经覆盖了单个文章的 index.php 页面。你还可以看到主页仍然显示，只是在查看单个文章时：

让我们复制 index.php 文件中的所有内容。现在我们将将其拆分为一个头部文件和一个底部文件，因为我们还没有这样做，而且这是你通常想要在 WordPress 主题中做的。所以我们将创建一个新文件，并将其保存为 header.php，然后，我们将创建另一个名为 footer.php 的文件。

在我们的 index.php 文件中，我们将确定我们要将哪些内容带到头文件中。所以，我们想要实际的头部和导航。

让我们从 <nav> 开始，然后向上操作。我们将删除所有内容，并将其粘贴到头文件中。

现在，在 index.php 的底部，我们将从结束的 </html> 标签开始选择，直到 <footer> 开始的地方。我们将剪切这部分，并将其放入我们的底部文件，如图所示：

  <footer class="main-footer">
     <div class="container">
        <div class="f_left">
           <p>&amp;copy; 2017 - Advanced WP Theme</p>
        </div>
        <div class="f_right">
           <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="#">Services</a></li>
           </ul>
        </div>
     </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

现在如果我们将我们的 index.php 文件保存为当前状态，并尝试查看它，你可以看到它全部混乱了：

所以在顶部，我们将说 get_header()：

<?php get_header(); ?>

当然，在底部，我们将添加 get_footer()：

<?php get_footer(); ?>

如果我们现在返回，一切都会恢复正常：

现在，我们将从 index.php 中取出所有内容，包括 get_header() 和 get_footer()，然后将其粘贴到 single.php 中。

我们将保存这个文件，然后如果我们去查看单个文章，我们会得到之前的内容：

让我们更改一些内容。我们想要更改的一件事是，我们想要显示所有内容。所以我们将 the_excerpt() 设置回 the_content()：

<?php endif; ?>
<?php the_content(); ?>

如果我们现在重新加载，我们会得到所有内容。

此外，我们不想显示“阅读更多”链接，所以我们将删除它：

<a class="button" href="<?php the_permalink(); ?>">Read More</a>

现在，重新加载，你会看到链接已经消失了。所以现在我们只剩下一个单独的文章。

现在存档页面应该可以正常工作。如果我们点击“商业”，它会显示所有商业文章；如果我们点击“管理员”，它会显示所有由管理员创建的文章；同样，搜索也应该可以工作。如果我们搜索Lorem，两篇文章应该会显示出来。

现在，所有像搜索、分类和用户存档页面这样的东西都可以实际自定义；我们可以使它们与主文章风格不同。这就是我们接下来要做的。

创建自定义存档页面

让我们创建自定义存档页面。现在如果我们点击其中一个分类，它将带我们到一个分类存档。

如果我们点击管理员，用户名，它将带我们到作者存档。还有其他一些。我们也可以按日期存档，按标签存档，等等。所以让我们进入我们的themes文件夹。我们将创建一个新文件，并将其保存为archive.php，然后打开它。

现在如果我们回到页面并点击一个分类，你会看到它是空的，因为它正在查看archive.php页面。我们将复制index.php页面中的内容，并将其粘贴到archive.php中。

我想这些页面要简单得多。我们不需要元数据，也不需要图片；基本上我们只需要标题和日期。所以让我们去到有<article>标签的地方，并移除整个部分。

我们将用<div>标签替换这部分，并给它一个archive-post类。我们将输入<h4>；然后插入一个链接，它将跳转到the_permalink()，然后我们有the_title()。接下来，我们将放置一个段落，上面写着Posted On: <?php the_time，我们将传递与之前相同的格式化选项：

<?php while(have_posts()) : the_post(); ?>
   <div class="archive-post">
   <h4>
   <a href="<?php the_permalink(); ?>">
      <?php the_title(); ?>
   </a>
   </h4>
   <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
   </div>
<?php endwhile; ?>

现在让我们看看这个：

让我们快速更新一下样式表。我们将添加.archive-post类，并在底部设置浅灰色边框，1px solid，以及padding-bottom:10px。我们还会在margin-bottom上添加10px。然后对于h4和段落，我们将移除边距和填充：

.archive-post{
    border-bottom: #ccc 1px solid;
    padding-bottom:10px;
    margin-bottom:10px;
}

.archive-post h4, .archive-post p{
    margin:0;
    padding:0;
}

现在我们将需要根据存档的类型有不同的标题。所以让我们回到archive.php，并在main block div 下面添加以下代码：

<div class="main block">
   <h1 class="page-header">
      <?php
        if(is_category()){
          single_cat_title();
        } else if(is_author()){
          the_post();
          echo 'Archives By Authors: ' .get_the_author();
          rewind_posts();
        } else if(is_tag()){
          single_tag_title();
        } else if(is_day()){
          echo 'Archives By Day: ' .get_the_date();
        } else if(is_month()){
          echo 'Archives By Month: ' .get_the_date('F Y');
        } else if(is_year()){
          echo 'Archives By Year: ' .get_the_date('Y');
        } else {
          echo 'Archives';
        }

这里，我们将使用一些非常有用的 WordPress 函数。我们使用is_category()，如果是一个分类存档，就会发生这种情况，然后我们只需使用这个single_cat_title()函数，它可以给我们提供分类名称。然后我们查看它是否是一个作者，然后输出Archives By Author: ，作者的名字，和the_post()。我们还会使用rewind_posts()，如果是一个标签，我们实际上可以提供tag_title()；如果是按天，我们可以说'Archives By Day: '然后只说get_the_date()。我们也可以为Month和Year做同样的事情。如果都不是这些，那么它就会简单地显示Archives。让我们保存这个，然后返回并重新加载：

现在你可以看到我们得到了Archives By Author: admin。如果我们回到一个帖子并点击分类，它会给我们分类名称。所以就是这样工作的。我们希望搜索也有同样的视图。

为了搜索某物，我们将创建一个新文件，并将其命名为search.php。

我们将复制archive.php中的内容，并将其粘贴到search.php文件中。我们将移除不需要的部分，然后我们只说Search Results：

<?php get_header(); ?>

<div class="container content">
   <div class="main block">
      <h1 class="page-header">
         Search Results
      </h1>

      <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
         <div class="archive-post">
         <h4>
         <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
         </a>
         </h4>
         <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
         </div>
      <?php endwhile; ?>
      <?php else: ?>
         <?php echo wpautop('Sorry, no posts were found'); ?>
   <?php endif; ?>
</div>

为了确保搜索功能确实工作正常，让我们在Blog Post Two中输入单词Hello：

现在如果我们回到前端并搜索Hello，会出现Blog Post Two：

所以这成功了！

现在我们想在菜单中添加一个指向主页的链接，所以让我们来做这件事。要做到这一点，让我们转到“菜单”，然后是“自定义链接”。对于 URL，我们将添加localhost/wpthemes，然后对于链接文本，我们只说“主页”。点击“添加到菜单”按钮，将其放在这里的最上面，并保存它。

如果我们返回并重新加载，你可以看到一个“主页”链接。

接下来，我们将查看内容类型，以及如何放置像画廊、侧边内容链接这样的内容。

不同的帖子格式

现在我们来看看一些不同的事情。我们将查看帖子类型或帖子格式。目前，如果我们查看我们的主题，我们只有基本一种帖子类型，那就是标准的博客帖子。我们还可以有像画廊、链接、图片和引用状态更新这样的内容，我们可以以不同的方式格式化这些不同类型的帖子。我们现在将看看如何做到这一点，如何将这些添加到我们的主题中。此外，我们还将查看一个名为get_template_part()的函数，它允许我们停止重复自己。例如，如果我们查看我们的首页，我们有while (have_posts())，然后我们只是在输出帖子。我们在存档、search.php等地方观察到相同的情况。所以我们想要一个能阻止我们反复重复的东西。我知道这些文件都有一些小的变化，但我们可以将这些变化实现在一个特定的内容文件中。最好的办法就是直接跳进去给你展示。

让我们去index.php看看while循环里面的所有内容：

<?php while(have_posts()) : the_post(); ?>
   <article class="post">
      <h2><?php the_title(); ?></h2>
      <p class="meta">
      Posted at
      <?php the_time('F j, Y g:i a'); ?>
      by
      <a href="<?php echo get_author_posts_url(
         get_the_author_meta('ID')); ?>">
      <?php the_author(); ?>
      </a> |
      Posted In 
      <?php
         $categories = get_the_category();
         $separator = ", ";
         $output = '';

         if($categories){
             foreach($categories as $category){
                $output .= '<a href="'.
                    get_category_link($category->
                    term_id).'">'.$category->cat_name.
                    '</a>'.$separator;
             }
         }
         echo trim($output, $separator);
      ?>
      </p>
      <?php if(has_post_thumbnail()) : ?>
         <div class="post-thumbnail">
            <?php the_post_thumbnail(); ?>
         </div>
      <?php endif; ?>
      <?php the_excerpt(); ?>

      <a class="button" href="<?php the_permalink();?>">
       Read More</a>
   </article>
<?php endwhile; ?>

我们将抓取post循环中的所有内容；基本上，从<article>标签到结束的</article>标签之间的所有内容。我们将剪切这部分内容，粘贴到一个新文件中，并将其保存为content.php。我们将保存这个文件，回到首页，然后在其位置输入<?php，然后我们将使用get_template_part()。然后我们将传递我们刚刚创建的文件的名称，即content。让我们保存这个文件，并确保content.php也被保存：

<?php if(have_posts()) : ?>
   <?php while(have_posts()) : the_post(); ?>
      <?php get_template_part('content'); ?>
   <?php endwhile; ?>

现在如果我们重新加载，看起来完全一样，这正是我们想要的。

让我们看看archive.php。你可以在存档文件中看到相同的内容。我们的想法是将while循环中的所有内容都放入内容文件中。所以让我们剪切高亮部分：

<?php if(have_posts()) : ?>
   <?php while(have_posts()) : the_post(); ?>
      <div class="archive-post">
 <h4>
 <a href="<?php the_permalink(); ?>">
 <?php the_title(); ?>
 </a>
 </h4>
 <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
 </div>
   <?php endwhile; ?>
<?php else : ?>
   <?php echo wpautop('Sorry, no posts were found'); ?>
<?php endif; ?>

去到content.php。现在这与我们为常规博客帖子所拥有的内容略有不同。所以我们可以做的是使用条件并检查我们是否得到了存档或搜索结果页面。要做到这一点，我们将使用<?php和一个if语句。我们还将使用一个else语句：

<?php if(is_search() || is_archive()) : ?>
   <div class="archive-post">
      <h4>
      <a href="<?php the_permalink(); ?>">
         <?php the_title(); ?>
      </a>
      </h4>
      <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
   </div>
<?php else : ?>

<?php endif; ?>

对于if语句，我们将输入if(is _search())。这意味着如果我们在一个搜索结果页面上，如果我们搜索某个内容并且它出现了，它是在检查我们是否在这个页面上。我们也可以检查它是否在分类或存档中——不仅仅是分类，而是任何类型的存档。所以让我们也输入is_archive()。如果这是真的，那么我们只想输出我们从存档帖子页面复制的代码。接下来，我们将抓取<article>标签中的所有代码，并将其粘贴到else中，如图所示：

<?php if(is_search() || is_archive()) : ?>
   <div class="archive-post">
      <h4>
      <a href="<?php the_permalink(); ?>">
         <?php the_title(); ?>
      </a>
      </h4>
      <p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
   </div>
<?php else : ?>
   <article class="post">
      <h2><?php the_title(); ?></h2>
      <p class="meta">
      Posted at
      <?php the_time('F j, Y g:i a'); ?>
      by
      <a href="<?php echo get_author_posts_url(
         get_the_author_meta('ID')); ?>">
      <?php the_author(); ?>
      </a> |
      Posted In 
      <?php
         $catagories = get_the_catagory();
         $separator = ", ";
         $output = '';

         if($categories){
             foreach($catagories as $catagory){
                $output .= '<a href="'.
                    get_category_link($category->
                    term_id).'">'.$category->cat_name.
                    '</a>'.$separator;
             }
         }
         echo trim($output, $separator);
      ?>
      </p>
      <?php if(has_post_thumbnail()) : ?>
         <div class="post-thumbnail">
            <?php the_post_thumbnail(); ?>
         </div>
      <?php endif; ?>
      <?php the_excerpt(); ?>

      <a class="button" href="<?php the_permalink();?>">
       Read More</a>
   </article>
<?php endif; ?>

让我们保存这个文件，然后在archive.php中，我们还想包含index.php文件中的内容。所以我们将复制并粘贴，如图所示，并保存它：

<?php if(have_posts()) : ?>
   <?php while(have_posts()) : the_post(); ?>
      <?php get_template_part('content'); ?>
   <?php endwhile; ?>

现在如果我们重新加载搜索页面，它应该看起来完全一样。

为了确保它来自内容文件，我们只需输入TEST然后重新加载。让我们现在看看：

它没有给我们 TEST。哦，这是因为我们没有在搜索中放入它。我们只把它放在了存档中，所以让我们先测试一下。

现在如果我们点击分类名称，你可以看到我们得到 TEST。就像我们在存档中做的那样，我们将复制并把它放在search页面中：

<?php if(have_posts()) : ?>
   <?php while(have_posts()) : the_post(); ?>
      <?php get_template_part('content'); ?>
   <?php endwhile; ?>
<?php else : ?>
   <?php echo wpautop('Sorry, no posts were found'); ?>
<?php endif; ?>

这与之前看到的代码完全相同。我们只需将其粘贴进去。然后，如果我们进行搜索，现在我们得到 TEST：

所以我们知道这是从content页面在这个条件中来的。我们将保存这个，一切就绪。

现在我们也可以在single.php文件中实现我们的content.php文件，因为如果我们看看single，我们有很多与index.php文件中相同的内容。我们有一个<article>标签。唯一的不同之处在于我们在博客滚动中使用的是摘要；此外，我们还有一个在single.php文件中没有的Read More链接。所以我们将从<article>标签复制到结束的</article>标签，将其粘贴到get _template_part()中，并保存。现在如果我们去single页面，我们就失去了单篇文章的格式。所以我们将进入content.php页面，并添加一些条件，以便在需要的地方进行不同的处理：

<?php if(is_single()) : ?>
   <?php the_content(); ?>
<?php else : ?>
   <?php the_excerpt(); ?>
<?php endif; ?>

例如，在the_excerpt()中，我们想输入<?php if。我们可以输入if(is_single)；如果是单篇文章，那么我们想使用the_content()，如果不是，那么我们想使用the_excerpt()。所以我们将代码粘贴进去，然后删除旧代码。所以让我们回到单篇文章页面，重新加载，我们看到现在内容已经回来了。

我们还想要去掉Read More链接。所以让我们找到它的位置，实际上我们甚至不需要做另一个条件判断。我们可以直接抓取它并粘贴到the_excerpt()下面，如图中所示代码块：

   <?php else : ?>
      <?php the_excerpt(); ?>
      <a class="button" href="<?php the_permalink(); ?>">Read More</a>
   <?php endif; ?>
</article>

所以Read More链接将不再在单篇文章页面上显示。

你可以看到我们如何避免重复。现在，在archive.php中的while循环内，我们只有这一行：

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

我们在其他页面——search、single和index上看到的是同样的事情。现在我们将进入帖子格式。所以，让我们添加一个画廊类型。

首先，让我们去我们的functions.php文件。我们需要启用我们想要使用的不同格式。

在register_nav_menus()下面，我们可以添加Post Format Support和add _theme_support()。我们还想添加post-formats。然后第二个参数将是我们想要格式的类型数组。我们将选择三种；我们将选择aside、gallery和link：

//Nav Menus
register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer'  => __('Footer Menu')
));
//Post Format Support
add_theme_support('post-formats', array('aside', 'gallery', 'link'));

如果我们查看文档，支持的格式如下截图所示：

我们使用aside、gallery和link，但我们还有图片、引言、状态、音频和聊天。你可能想看看那个。让我们保存这个，因为我们已经把它放那里了，如果我们去我们的帖子并说添加新帖子，你现在会看到我们有一个格式框在旁边，我们可以选择我们想要为帖子选择的格式：

现在按照现在的样子，它不会做任何不同的事情。所以让我们做一些不同的事情。

我们会说“示例旁白”并抓取一些内容。我们只需将此内容复制粘贴过来。

我们将选择aside作为格式，Business作为类别，然后点击发布。

现在如果我们去我们的前端并重新加载，你可以看到我们有我们的aside，但它和这些帖子没有区别：

这个目的是让它以不同的方式显示。

现在，我们可以通过在index.php这样的地方，也就是我们放置get_template_part()的地方，传递一个get_post_format()的第二个参数来实现这一点，如下面的代码块所示：

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

这是一个函数，它将允许它看到它是哪种类型的帖子格式。我们将用第二个参数替换所有的get_template_part()。我们将去archive.php并粘贴<?php get_template_part('content', get_post_format()); ?>。让我们为search.php和single.php做同样的事情。

现在，对于每种格式，我们将创建一个内容文件。所以让我们说新建文件，并将其保存为content-aside.php。

我们还将创建content-gallery.php和，最后，content-link.php。

现在，有了这些不同的文件，我们可以让我们的格式看起来不同。所以让我们从content-aside.php文件开始。这将非常简单。它将有一个<article>标签。我们将给它一个post类和post-aside。我们不想有任何图片或其他东西。我们只想实际的内容、作者和日期。我们将它放在一个带有well类的<div>标签中，这是一个 bootstrap 类，然后在里面，我们使用一个<small>标签和the_author()。你可以把它想象成像状态更新一样。让我们放一个@符号，然后，<?php the_date(); ?>。然后直接在它下面，我们放the_content()：

<article class="post post-aside">
   <div class="well">
   <small><?php the_author(); ?>@<?php the_date(); ?></small>
   <?php the_content(); ?>
   </div>
</article>

现在我们将保存它。如果我们返回并重新加载，你可以看到帖子已经改变，因为它来自这个 content-aside 文件：

现在我想要让它看起来更好一些。所以我们将进入我们的样式表。我们将向下到我们有的 article 东西，让我们说 article.post-aside。实际上，我们不想做核心元素。我们想要 small，我们只想通过添加 font-weight: bold 来使文本加粗。我们还想格式化 well。此外，我们将背景从灰色改为浅蓝色，通过添加 #e0eefc。我们还想添加一些填充：

article.post-aside small{
    font-weight: bold;
}

article.post-aside .well{
    background:#e0eefc;
    padding:10px;
}

现在你可以看到它格式化得不同：

所以这解决了 aside 的问题。现在让我们来做链接。为此，我们将进入 content-link.php，复制 content-aside 中的内容，并按以下代码块更新代码：

<article class="post post-link">
  <div class="well">
    <a href="<?php echo get_the_content(); ?>"><?php echo   
    the_title();     
    ?></a>
  </div>
</article>

我们将添加链接，并保留 well 类，但这将有所不同！

现在如果我们回到我们的帖子，并点击添加新帖子，这次我们将选择链接作为格式，然后，作为标题，我们将添加 在 Eduonix 获取出色的网络开发课程。然后，在文本区域，我们只想放一个链接就足够了。我们将说发布并返回页面并重新加载。现在你可以看到我们有一个链接，它指向 eduonix.com：

我们希望格式化一下，让它看起来更好一些。所以我们会回到我们的样式表中，并说 .post-link：

article.post-link  .well{
    background: #f4f4f4;
    padding:10px;
}

实际上，我们只想 well。我们将说背景，这将只是浅灰色，然后我们输入 padding:10px。所以现在我们有一个格式化的链接。

我们有常规帖子，我们有旁白内容或状态更新，还有链接。所以我们将最后查看的是相册。为此，让我们转到 content-gallery.php；这实际上将非常简单。我们将说 <article class="post post-gallery"> 并输入 <h2> 标签使用 the_title()，然后，我们只想使用 the_content()；就这样：

<article class="post post-gallery">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>

现在我们将转到添加新帖子。然后我们将转到添加媒体，然后创建相册。

这里有一些图片，但我们还想上传更多，你应该在你的文件中有这些图片。我们将上传一些图片，如下所示：

没问题。我们只需点击所有这些图片，然后点击创建新相册。然后你想要确保所有这些都在里面。为了检查它们，点击插入相册并确保在格式框内选择了相册：

我们会在类别框中选择娱乐，然后点击发布。让我们回到页面并重新加载，这就是我们的相册：

如果我们要编辑它，我们可以返回去，你可以选择铅笔图标来编辑。现在，它们目前链接到附件页面，但我想它们实际上应该链接到媒体文件。所以你可以看到当你点击它们时，它只是会跳转到图片文件：

你可以更改这个。你可以让它跳转到页面，或者如果你想要的话，也可以实现某种类型的轻量级插件，但我们不会深入那个话题。现在，我想去我的style.css文件，并添加一些样式。我们会说article.post-gallery，并添加一个深色背景。我们将color设置为白色。我们还会添加一些填充，比如5px 10px，然后margin-top将是5px：

article.post-gallery{
    background: #333;
    color:#fff;
    padding: 5px 10px;
    margin-top:5px;
}

让我们保存这个并重新加载。

所以，现在我们可以发布一个相册了！

页面、自定义模板和子导航

现在我们将从帖子转移到页面。如果我们访问“关于”页面，你可以看到它的格式就像一个帖子，这绝对不是我们想要的。

我们只想页面有标题，我们不想有元数据、阅读更多，以及类似的东西。所以为了改变所有这些，我们必须创建一个新文件并将其保存为page.php。

现在我如果回到那个页面并重新加载，它就是一个空白的白色页面。它正在查找这个文件来解析它。

首先，我会从index页面抓取我们有的内容，粘贴到page.php中，然后只更改一些内容。我们想要while循环，我们不会使用get_template_part()，所以我们可以去掉它。我们想要一个<article>标签，并给它一个page类。让我们也放一个<h2>标签。这是标题将放置的地方，所以我们会说<?php the_title(); ?>，然后在这个标题下面，我们将放置the_content()：

<?php get_header(); ?>

<div class="container content">
   <div class="main block">
      <?php if(have_posts()): ?>
         <?php while(have_posts()) : the_post(); ?>
            <article class="page">
 <h2><?php the_title(); ?></h2>
 <?php the_content(); ?>
 </article>
        <?php endwhile; ?>
      <?php else : ?>
         <?php echo wpautop('Sorry, no posts found.'); ?>
      <?php endif; ?>
   </div>

   <div class="side">
      <div class="block">
      <h3>Sidebar Head</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
       sed do eiusmod tempor incididunt ut 
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
       nostrud exercitation 
       ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a class="button">More</a>
      </div>
   </div>
</div>

<?php get_footer(); ?>

好的，非常简单，保存它，让我们转到“关于”页面，现在我们有一个非常简单的“关于”页面。

如果我们转到“服务”，我们会发现它使用的是相同的格式；即使是“样本页面”也使用相同的格式。现在我想向你展示我们实际上可以为某些页面创建页面模板。例如，让我们以“关于”页面为例。如果我创建一个新文件，将其保存为page-about.php，然后输入ABOUT并保存并重新加载，我们得到ABOUT：

现在这不会在每个页面上出现；你可以看到“服务”出现了，“样本页面”，它只适用于“关于”页面。所以它使用的是 URL 中向上的 slug。我们也可以说页面services，这也会起作用。你会这样做，当你想在“关于”页面上放置一些你不想在其他任何地方放置的东西时。

现在，我们只需将page.php中的内容复制到page-about.php中，然后在the_content()上方直接放置一个带有well类的<div>标签，然后我们只需输入公司电话：

<article class="page">
<h2><?php the_title(); ?></h2>
<div class="well">Company Phone: 555-555-5555</div>
<?php the_content(); ?>
</article>

现在，回到“关于”页面，你可以看到那里有公司电话：

所以，它不在“服务”上，也不在“样本页面”或其他任何页面上。你可以这样做，但我认为当你想在某些页面上有特定的样式或内容时，更好的做法是使用一个模板。我将删除page-about文件。我只是想向你展示这是可能的。所以，我们删除了它，现在我们将创建一个模板。让我们创建一个新文件，并将其保存为company-template.php。我们将复制page.php文件中的内容，并将其粘贴到company-template.php文件中。

现在在顶部，我们想要添加一个声明或注释。实际上，这需要放在php标签中。接下来，我们将说“模板名称”并命名为“公司布局”。我们在这里想要做的只是直接在the_title()下面放置电话号码；然而，我会把它放在一个带有phone类的段落标签中，我们将放置一个1-800-555-5555号码：

<?php
/*
 Template Name: Company Layout
*/
?>
<?php get_header(); ?>

<div class="container content">
   <div class="main block">
      <?php if(have_posts()): ?>
         <?php while(have_posts()) : the_post(); ?>
            <article class="page">
            <h2><?php the_title(); ?></h2>
            <p class="phone">1-800-555-5555</p>
            <?php the_content(); ?>
            </article>

现在保存这个。让我们快速进入样式表，并为phone类添加一个样式。你可能也会这样做，但只是为了给你一个例子，展示你可以为某些页面定制模板。让我们给它一个背景，border，padding，并使字体加粗：

.phone{
    background:#f4f4f4;
    border: 1px solid #ccc;
    padding:8px;
    font-weight: bold;
}

现在我们已经创建好了，让我们进入我们的页面，点击“关于”，然后在“模板”下选择“公司布局”。我们将更新它，重新加载，现在你可以看到我们有了电话号码：

我实际上想在它前面放一些文字。我们可以说是“联系我们”：

如果我们进入“服务”，你将看不到它，因为我们没有选择那个模板。然而，我实际上确实希望它在“服务”中使用，所以我们将简单地进入“服务”页面并选择“公司布局”。现在，这也应该有电话号码：

所以接下来我想向你展示的是我们如何创建一个子菜单。我的意思是，如果我们有，比如说，“关于”页面，父页面，在其中我们有一个子页面——我在“关于”页面下放了一个常见问题解答页面和我们的团队页面。现在我的目标是让“关于”页面上有子页面的链接，这不仅仅适用于“关于”页面，任何有子页面的页面都适用。为了实现这一点，我们需要做很多事情。让我们进入page.php文件，并将“公司布局”从“关于”页面中移除。所以，它不应该再有电话号码了。

在page.php中，让我们直接在<article>标签下面写上<?php wp_list_pages(); ?>，如下面的代码块所示：

<article class="page">
<?php wp_list_pages(); ?>
<h2><?php the_title(); ?></h2>
<p class="phone">1-800-555-5555</p>
<?php the_content(); ?>
</article>

让我们看看这会做什么：

我们可以看到，它列出了我们 WordPress 网站上所有的页面，这显然不是我们想要的。暂时不要注意样式，因为我们在获得功能之后会处理它。我们只想获取“关于”页面及其子页面。所以我们将去page.php文件，并在wp_list_pages()上方说<?php。我们将创建一个名为args的变量并将其设置为数组。然后我们将说child_of。现在没有核心函数可以获取父级，所以我们将实际创建一个名为get_top_parent()的函数。然后我们还想说title_li并将其设置为空。我稍后会解释这一点，但现在，我们将我们的args变量直接放在wp_list_pages()中：

<article class="page">
<?php
 $args = array(
 'child_of' => get_top_parent(),
 'title_li' => ''
 );
?>
<?php wp_list_pages($args); ?>
<h2><?php the_title(); ?></h2>
<p class="phone">1-800-555-5555</p>
<?php the_content(); ?>
</article>

如果我们继续重新加载，我们会得到一个错误，因为没有名为get_top_parent()的函数。所以让我们进入functions.php文件，在底部创建一个名为get_top_parent()的函数。我们将通过说global $post使post对象对我们可用。然后，我们将说if($post->post_parent)，并创建一个名为$ancestors的变量并将其设置为get_post_ancestors()。然后我们将$post->ID传递进去。现在我们将说return $ancestors，我们想要0索引；然后在if语句下，说return $post->ID：

function get_top_parent(){
    global $post;
    if($post->post_parent){
        $ancestors = get_post_ancestors($post->ID);
        return $ancestors[0];
    }

    return $post->ID;
}

现在保存并重新加载：

现在你可以看到，我们只获取了“关于”页面的子页面，即常见问题解答和我们的团队。现在我们还想让“关于”链接也显示在这里，因为我们可以去常见问题解答，但除非我们使用主菜单，否则我们无法返回“关于”页面。所以让我们回到page.php文件，并在<article>标签内部创建一个<ul>标签。在<ul>标签上方，我们将创建一个<nav>标签，并给它添加nav和sub-nav两个类。现在在<ul>标签下方，我会放置一个<span>标签，并给它添加parent-link类。在里面，我们将放置一个<a>标签，它将跳转到<?php echo get_the_permalink(); ?>。我们将在那里传递get_top_parent()函数。然后，对于链接文本，我们将说<?php echo the_title(); ?>：

<nav class="nav sub-nav">
 <ul>
 <span class="parent-link"><a href="<?php echo 
 get_the_permalink(get_top_parent()); ?>"><?php
 echo get_the_title(get_top_parent()); ?></a>
 </span>
      <?php
          $args = array(
              'child_of' => get_top_parent(),
              'title_li' => ''
          );
      ?>
      <?php wp_list_pages($args); ?>
   </ul>
</nav>

让我们保存并查看：

现在我们只有“关于”这一项。我们可以使用这里的菜单进行导航。然而，如果我们去“示例页面”或任何其他页面，它仍然会有这个链接，即使没有子链接。所以，我们将在functions.php文件中创建另一个简短的功能，并命名为page_is_parent。然后，我们将说global $post并将$pages设置为get_pages()，在这里，我们将说'child_of='并将帖子 ID 连接起来。接下来，我们将说return，然后，我们想要页面的数量，所以我们将count($pages)：

function page_is_parent(){
    global $post;

    $pages = get_pages('child_of='.$post->ID);
    return count($pages);
}

如果页面数量大于零，那么我们知道它是一个父页面。所以让我们回到page.php文件，并在<nav>标签上方放置一个if语句，它将在<nav>标签下方结束。我们将检查它是否是一个父页面page_is_parent()，或者是否有任何子页面$post->post_parent is > 0，然后我们将执行以下操作：

<?php if(page_is_parent() || $post->post_parent > 0): ?>
<nav class="nav sub-nav">
   <ul>
      <span class="parent-link"><a href="<?php echo 
          get_the_permalink(get_top_parent()); ?>"><?php
           echo get_the_title(get_top_parent()); ?></a>
      </span>
      <?php
          $args = array(
              'child_of' => get_top_parent(),
              'title_li' => ''
          );
      ?>
      <?php wp_list_pages($args); ?>
   </ul>
</nav>
<?php endif; ?>

让我们保存它，然后回到样本页面。我们可以看到菜单现在消失了，但如果我们转到“关于”，它仍然存在，因为它有子页面。

因此，一切都在正常工作。

现在我只想调整显示效果；我想让它移动并看起来更好。为此，让我们进入我们的样式表，并说 .sub-nav。然后，我们在顶部添加一些边距，将其浮动到右边，并设置为 300px 宽。然后我们将 ul 浮动到右边。接下来，父链接，在这个例子中是“关于”；我们将这个链接浮动到左边，使其变为黑色、加粗，并在右边添加边框。然后，我们将父链接设置为黑色，并使用 current_page_item，因为无论我们处于哪个页面，我们希望它都是加粗的：

.sub-nav{
  margin-top:10px;
  float:right;
  width:300px;
}

.sub-nav ul{
  float:right;
}

.sub-nav .parent-link{
  font-weight: bold;
  color:#000;
  float:left;
  margin-right:20px;
  padding-right:20px;
  border-right:1px solid #009acd;
}

.sub-nav .parent-link a{
  font-weight: bold;
  color:#000;
}

.sub-nav .current_page_item{
  font-weight: bold;
}

让我们保存并看看效果如何：

您可以看到我们有“关于”，如果我们转到“常见问题”，它仍然保持加粗；如果我们转到“我们的团队”，甚至那个也是加粗的。这看起来要好得多。

接下来，我们将清除浮动。为此，我们将进入 page.php 文件，并在 </nav> 下面添加 <div class="clr">。然后，我们将进入我们的样式表，并添加 .clr 并说 clear:both：

.clr{
    clear:both;
}

因此，现在我们看到它位于页面标题上方：

在本节中，我们做了很多工作。

我们设置了我们的页面，并看到了如何创建自定义页面、自定义模板，以及如何创建子导航。在下一节中，我们将讨论小部件。

与主题小部件一起工作

在本节中，我们将探讨小部件。

目前，我们有一个侧边栏，但这只是我们 php 文件中的静态内容。因此，我们希望这些内容来自小部件系统。此外，我们还应该能够在侧边栏中添加多个小部件。现在，在博客页面和任何其他页面上，这将是除了我们稍后创建的定制主页之外的唯一小部件。然而，我们将在我们的 functions 文件中添加这些位置。

因此，让我们打开 functions.php 文件，并直接在 after_theme_setup 动作下面；这将用于设置小部件位置。我们将创建一个函数，命名为 init_widgets()，它将接受一个 id；然后，我们将说 register_sidebar。尽管这个函数名为 register_sidebar，但它用于所有小部件位置，而不仅仅是侧边栏。它接受一个数组，并需要提供一个 name；这个名称是“侧边栏”，但它可以是任何名称。然后，我们还会说 before_widget 和 after_widget。此外，我们还会说 before_title 和 after_title 的小部件：

add_action('after_setup_theme', 'adv_theme_support');

//Widget Locations
function init_widgets($id){
 register_sidebar(array(
 'name' => 'Sidebar',
 'id' => 'sidebar',
 'before_widget' => '',
 'after_widget' => '',
 'before_title' => '',
 'after_title' => ''
 ));
}

因此，基本上，这些将是我们要用的 HTML 标签。如果我们说 index.php 并查看侧边栏，它有一个带有 block 类的 <div>：

<div class="side">
   <div class="block">
   <h3>Sidebar Head</h3>

现在我不想在 functions.php 中添加这个 div 元素；所以让我们在 index.php 中添加它，并使用 <div class="block">。让我们还添加一个名为 side-widget 的类，并在小部件之后关闭那个 </div> 元素。对于标题，我将使用 <h3>：

'before_widget' => '<div class="block side-widget">',
'after_widget'  => '</div>',
'before_title'  => '<h3>',
'after_title'   => '</h3>'

让我们保存这个，然后进入index.php。我们将从这个side div 元素中移除所有内容，并检查该位置是否有小部件。为此，我们将输入if(is_active_sidebar)，然后传递小部件 ID，即sidebar。然后我们输入<?php dynamic_sidebar(); ?>并传递 ID，sidebar：

<div class="side">
   <?php if(is_active_sidebar('sidebar')) : ?>
 <?php dynamic_sidebar('sidebar'); ?>
 <?php endif; ?>
</div>

如果我们看索引页面，什么都没有，因为我们还没有添加任何小部件：

现在，我们需要替换所有的静态侧边栏代码。让我们复制它；我们从archive.php开始。然后，我们直接粘贴进去。我们转到page.php。当然，你不需要在所有这些页面（search、single和company-template）上都有侧边栏，但我们会的。

现在，我们回到我们的后端，然后进入“外观”：

现在看看，那里没有小部件。我们需要初始化它，所以回到functions.php，然后在init_widgets()下面，我们需要输入add_action()。现在我们想要使用的钩子是widgets_init，然后我们只需要输入我们函数的名称，即init_widgets：

add_action('widgets_init', 'init_widgets');

让我们回到我们的后端，重新加载，现在在“外观”下，你应该能够进入“小部件”：

现在，我们将添加一个自定义文本小部件，我们只输入标题；我们说“我的文本小部件”。然后，我在内容中粘贴一句话或两句话，然后点击保存：

现在回到我们的前端并重新加载：

所以，这个是从文本小部件来的。

我们也在这里添加一个按钮，只是为了看起来更好。我们还要放两个换行符。你可以在自定义文本小部件中放入任何你喜欢的：

现在，我们还可以做的一件事是添加某种动态小部件，比如，比如说，Categories。

让我们把那个分类小部件放入侧边栏，然后保存。我们去看看：

我想让它看起来更好一些，我们可以用 CSS 来实现这一点。让我们去底部，输入.side-widget。我将添加margin-bottom: 20px，这样它会稍微向下移动。然后，为了做列表项，我们输入list-style:none；我们给它line-height为2.1em，并且对于border-bottom，我们使用灰色进行点划线：

.side-widget{
    margin-bottom: 20px;
}

.side-widget li{
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

保存这个。

现在，它看起来好多了：

我们也可以添加，比如说，Recent Posts，并将其更改为3：

我们实际上没有为相册添加标题。所以，我们就叫它“照片相册”：

现在，我将把其余的小部件添加到functions.php中，或者说是其余的小部件位置，尽管我们不会在本节中这样做。在下一节中，我们将使用这些小部件创建一个自定义主页。

我们将直接在init_widgets()下面，复制粘贴四次。所以是“侧边栏”，然后我们将进入“展示”区域并更改类名。然后我们将有“盒子 1”、“盒子 2”和“盒子 3”。这将有一个box和box1的类。我实际上会用box和box1替换这两个。在下一个register_sidebar中，我们将name更改为“盒子 2”，并在最后的register_sidebar中将name更改为3。保存它，现在如果我们回到小部件区域，我们可以看到我们现在有了那些小部件。至少，我们有位置。如果我们现在把它们放进去，什么也不会发生，因为我们没有在模板中设置它们。

自定义主页

现在，我们将创建一个自定义主页，然后添加到我们添加的位置的小部件。

让我们创建一个新文件，并将其保存为front-page.php。如果我们重新加载主页，它会完全变空白，因为它正在查看front-page.php文件。所以我会复制page.php中的内容，并将其粘贴到front-page.php中。

现在，让我们重新加载：

这看起来不太好，因为我们只是用页面格式显示了文章。所以让我们进入页面，创建两个新页面。我们将称其中一个为“主页”；我们只需说“这是主页”，点击发布，然后类似地创建一个名为“博客”的新页面并发布：

现在，我们将进入设置，然后进入阅读：

在“您的首页显示”中，我们将设置一个静态页面；对于“主页”，我们将选择“主页”；对于“文章页面”，我们将选择“博客”，然后保存。

现在，我们将进入外观，然后进入菜单：

让我们勾选“博客”，点击“添加到菜单”。我们将将其放在“关于”和“服务”之间，然后保存。现在如果我们返回并重新加载，我们会得到主页，如果我们点击“博客”，它将带我们到博客：

所以，这就是我们处理它的方法。现在我们想要让它看起来有点不同，我想有一个展示小部件。此外，我想去掉侧边栏，并在这个内容下面有三个盒子以及三个不同的小部件。让我们去front-page.php并去掉高亮显示的以下代码块中的main类，因为那是限制这个宽度的地方：

<div class="container content">
   <div class="main block">
      <?php while(have_posts()) : the_post(); ?>

然后，我们将完全去掉这个side div 元素：

  </div>

  <div class="side">
 <?php if(is_active_sidebar('sidebar')) : ?>
 <?php dynamic_sidebar('sidebar'); ?>
 <?php endif; ?>
 </div>
</div>

<?php get_footer(); ?>

我们现在来看看；没有更多的侧边栏：

让我们创建我们的展示小部件，看看它将去哪里；就在<div class="container content">下面。我将从index.php复制，并抓取以下代码块中显示的代码。我们将粘贴进去，然后我们只想将 ID 从sidebar更改为showcase；我们也会对dynamic_sidebar()做同样的事情。所以，这就处理了展示小部件：

<?php if(is_active_sidebar('showcase')) : ?>
   <?php dynamic_sidebar('showcase'); ?>
<?php endif; ?>

现在，我们还想在我们的三个框中添加一些内容，我们将它们放在最后一个div元素的正上方。所以我会复制三次。这个将是box1、box2和box3。我们将保存这个：

<?php if(is_active_sidebar('box1')) : ?>
   <?php dynamic_sidebar('box1'); ?>
<?php endif; ?>

<?php if(is_active_sidebar('box2')) : ?>
   <?php dynamic_sidebar('box2'); ?>
<?php endif; ?>

<?php if(is_active_sidebar('box2')) : ?>
   <?php dynamic_sidebar('box2'); ?>
<?php endif; ?>
</div>

现在让我们转到后台，到外观，然后是小工具：

我们将文本直接放入展示区，然后在内容文本框中粘贴一些代码；好吧，不是一些代码，而是一些 HTML。我们将保存这个。

现在我们将抓取另一段文本，将其放入 1 号框中，并在其中输入一个标题，比如说1 号框标题。然后我将在其中粘贴一些示例文本。让我们为 2 号框和 3 号框做同样的事情。

让我们做一些不同的事情。我们将抓取最近的文章小工具并将其放入其中，并将标题设置为最新新闻：

我们将保存这个，转到前端，并重新加载。现在我们有了小工具。

它们看起来不太好，我们需要对它们进行样式设计。所以让我们去style.css。我们首先粘贴展示区的样式。我们将给它一个背景，40px的填充和margin-bottom，并将所有内容居中对齐。让我们对h1也做同样的事情：

.showcase{
  background:#e0eefc;
  padding:40px;
  margin-bottom:30px;
  text-align: center;
}

.showcase h1{
  text-align: center;
}

现在对于box类，我们将其设置为32%的宽度，float:left；然后对于h3，我们将其居中，添加背景和一些填充：

.box{
  width:32%;
  float:left;
  padding:0 6px;
}

.box h3{
  text-align: center;
  background:#009acd;
  padding:5px;
  color:#fff;
}

让我们保存并重新加载：

这是我们的主页。你可以看到我们有最新新闻；我们可以点击那里并访问不同的帖子。这里有画廊和博客帖子，为了使这个页面看起来更好，我会去修改我们放置side-widget li的地方，并添加.box li：

.side-widget li, .box li{
    list-style: none;
    line-height: 2.1em;
    border-bottom: 1px dotted #ccc;
}

现在看起来好多了。所以让我们实际上将可显示的文章数量设置为3。

这不是最好的外观，但这个项目的重点不是设计或风格，或者创建一些美丽的东西，而是让你熟悉创建 WordPress 主题的功能。

我们将有一个额外的部分，那就是评论部分，因为现在在我们的博客中，如果我们访问一个常规帖子，没有评论功能。

评论功能

在本节中，我们将添加自定义评论功能。

让我们打开single.php文件，直接在endif下面。我们将输入<?php comments_template(); ?>：

   <?php endif; ?>

   <?php comments_template(); ?>
</div>

让我们保存并重新加载。现在我们有了评论部分：

假设我们点击“精彩帖子”，然后点击“发表评论”，它就起作用了！

现在从功能上讲，这会工作，但它看起来不太好，所以我想要展示如何定制它。

我们将创建一个新页面，或者一个新文件，并将其命名为comments.php。如果我们现在返回并重新加载，你会看到这里没有任何内容，它正在从这个文件中读取；如果我们输入Test并重新加载，我们会得到 Test：

所以，如何定制我们想要的功能取决于我们。

在文档中实际上有一些有用的代码，位于codex.wordpress.org/Function_Reference/wp_list_comments，针对我们的wp_list_comments，这正是我们想要的。

在comments.php文件中输入以下代码：

<?php $args = array(
        'walker'            => null,
        'max_depth'         => '',
        'style'             => 'ul',
        'callback'          => null,
        'end-callback'      => null,
        'type'              => 'all',
        'reply_text'        => 'Reply',
        'page'              => '',
        'per_page'          => '',
        'avatar_size'       => 32,
        'reverse_top_level' => null,
        'reverse_children'  => '',
        'format'            => 'html5', // or 'xhtml' if no 'HTML5' theme 
                                        // support
        'short_ping'        => false,   // @since 3.6
        'echo'              => true     // boolean, default is true
); ?>

<?php wp_list_comments($args, $comments); ?>

让我们先放一个<h2>标签，并说“评论”。

我们可以创建一个参数数组。我会取这个。显然，我们不需要大多数这些东西，但保留它们不会伤害我们；你会看到很多都被设置为 null，以防你以后想更改任何东西。我会将avatar_size改为80，让它稍微大一点。其余的我们可以保留。这些参数现在将被插入到wp_list_comments()函数中。接下来，我们将传递args和comments。这样，我们就处理了评论。现在我们需要表单，它也可以接受一些参数。

从底部我取这段代码，粘贴进去；它只需要一个php标签。我们将设置另一个参数数组，comments_args；实际上让我们称它为form_args，然后更改comments_args为form_args。让我们设置提交按钮的标签，你希望在title_reply字段中输入的内容，评论后，comment_notes_after，然后是comment_field本身；在这种情况下，它们给你一个带有comment-form-comment类的段落作为标签。我认为我们在这里实际上不需要更改任何东西。对于文本区域，我们将添加一些属性；我们将设置cols为45和rows为8：

<?php
$form_args = array(
        // change the title of send button 
        'label_submit'=>'Send',
        // change the title of the reply section
        'title_reply'=>'Write a Reply or Comment',
        // remove "Text or HTML to be displayed after the set of comment 
        // fields"
        'comment_notes_after' => '',
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment">
        <label for="comment">' . _x( 'Comment', 'noun' ) . '</label>
        <br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">
        </textarea></p>',
); ?>

comment_form($form_args);

我们将保存并重新加载。这是好的：

其余的我们将用 CSS 来完成。

我们现在将转到style.css。让我们拉到最底部，粘贴这段代码；这将用于comment-body，我们将给它一个border、margin和padding。我们还想包含元信息，这个区域在这里，头像，然后是日期和所有这些；让我们粘贴进去：

.comment-body{
  border:#ccc 1px solid;
  margin-bottom:10px;
  padding:20px 10px;
}

我们将添加一个深色背景，一些填充，对于图片，我会将其浮动到左边，添加时间和一些边距。接下来，我们将格式化回复链接，使其看起来像一个按钮，然后是表单本身：

.comment-meta{
  background:#333;
  color:#fff;
  padding:10px;
  overflow:auto;
}

.comment-meta img{
  float:left;
  margin-right:10px;
}

.comment-meta time{
  margin-left:12px;
}

对于表单输入和文本区域，我们只需将宽度设置为100%，并添加一些填充、边框等：

.comment-reply-link{
   background:#009acd;
   color:#fff;
   display:inline-block;
   padding:10px 15px;
}

.comment-form input,.comment-form textarea{
   width:100%;
   padding:3px;
   border:#ccc 1px solid;
   margin-bottom:20px;
}

.comment-form input{
   height:30px;
}

让我们保存并重新加载，我们可以看到它看起来好多了：

让我们在这里输入一些内容。如果我们未登录，那么我们还有姓名、电子邮件和网站字段：

我认为这看起来相当不错。它看起来比默认的更好。让我们说“这是一篇很好的文章”，然后点击发送：

由于我们没有登录，它只是说它正在等待审核，这是好的；它工作得很好！

摘要

太棒了！所以基本上就是这样。这个项目的目的并不是构建一个美丽的主题，而是真正让你熟悉我们需要创建语法、不同函数以及类似事物所需的不同文件。

我们看到了不同的文章格式，并使用 HTML 和 CSS 创建了设计。通过学习如何显示博客文章、单篇文章、自定义存档页面和不同的文章格式，我们创建了一个 WordPress 主题。我们还看到了如何将图片添加到文章中，并处理了页面、自定义模板和子导航。我们还围绕主题小工具、自定义主页和评论功能进行了工作。

因此，希望你喜欢这一章。

在我们接下来的章节中，我们将构建一个用于照片画廊的 WordPress 主题。

第三章：为照片图库构建 WordPress 主题

在这一章中，我们将构建一个用于照片图库的 WordPress 主题。我们将仅使用核心 WordPress 帖子系统，我们不需要任何第三方照片图库。以下图片是它将看起来像的样子；它被称为 PhotoGenik。这是我们将要工作的主题：

如前一张截图所示，你可以在主页上看到一些图片。如果我们悬停在它们上面，我们会得到一个很好的效果，如果我们点击其中一个，它会带我们到一个单张图片页面，那里有一个进入的小动画。它还提供了标题、描述，然后我们有一些元信息，如以下截图所示：

在上一张截图的左侧顶部，我们看到了核心分类模块。当我们点击它时，你可以看到它只显示该类别的图片，并且它们有一个漂亮的淡入效果。在顶部右侧，我们还有一个搜索栏。在搜索框中，我们只需输入，比如说图片的一个标题，然后搜索；那个特定的图片就会出现。

对于这个项目，我们将使用 W3.CSS 框架(www.w3schools.com/w3css/default.asp)，它与 Bootstrap 非常相似。它非常容易使用，并且提供了许多漂亮的元素，你可以在 W3.CSS 页面上看到。我们有的动画实际上来自这个框架，还有一些我们将要涉及的 JavaScript 小部件。

在后台（参考以下截图），如果我们查看我们的帖子，你可以看到每张照片都有自己的帖子：

如果我们点击帖子，我们会发现我们使用的是特色图片：

因此，我们只需要上传一个特色图片，给它一个标题、描述，并选择图库格式，它就会出现：

在我们的情况下，我们将有一个自定义的图库帖子格式，你也可以使用标准格式来发布常规帖子。

那就是我们将会做的事情。让我们开始吧。

使用 HTML 和 CSS 创建主页布局

在我们开始构建 WordPress 的照片图库主题之前，我们将使用 HTML 创建布局。正如介绍中解释的，我们将使用 W3.CSS 框架来创建这个布局。为此，首先我们将创建一个新的文件夹，并将其命名为 photogenik_html：

接下来，在文件夹内，我们将创建一些文件和文件夹。我们将创建 index.html、style.css 和 single.html 文件，还有一个名为 images 的文件夹：

single.html 文件将代表单个图片。一旦我们在图库中点击一张图片，它就会带我们进入这个文件夹。

创建 HTML 布局

现在，让我们用 Sublime Text 打开 index.html 文件，或者当然，使用你喜欢的任何编辑器，我们将在编辑器中获得一个基本的 HTML 结构：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
</body>
</html>

现在，在这个 HTML 布局中首先，我们在标题中添加 PhotoGenik：

<!DOCTYPE html>
<html>
<head>
  <title>PhotoGenik</title>
</head>
<body>
</body>
</html>

由于我们使用的是 W3.CSS 框架，我们必须包含样式表。所以我们在这里将使用 CDN。为此，我们将在 HTML 布局中标题旁边添加以下样式表链接：

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

我们还希望包含我们自己的 CSS 文件，如下所示：

<link rel="stylesheet" href="style.css">

所以这就是 style.css。现在，这就是我们在 head 中需要的所有内容。

创建标题

下一步，我们要做的是创建标题。为了创建这个标题，请按照以下步骤操作：

首先，我们将使用 HTML5 <header> 标签，如下所示：

      <!DOCTYPE html>
      <html>
      <head>
        <title>PhotoGenik</title>
        <link rel="stylesheet" 
              href="http://www.w3schools.com/lib/w3.css">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <header>

        </header>
      </body>
      </html>

在我们实际构建 WordPress 主题时，一些 HTML 布局可能会发生变化，以适应 WordPress 的约定。

接下来，我们将给这个标题添加一个类。如果我们查看框架的文档页面（www.w3schools.com/w3css/default.asp）并进入 W3.CSS 容器部分，它应该有标题类，如下所示：

现在为了使标题成为一个类，从容器文档页面（www.w3schools.com/w3css/w3css_containers.asp）复制标题类语法，并将其粘贴到我们的 HTML 标题中，如下所示：

      <body>
        <header class="w3-container w3-teal">
          <h1>Heading</h1>
        </header>
      </body>

让我们确保到目前为止一切都在正常工作。为此，我们将使用 Chrome 打开 index.html 文件，如下面的截图所示，我们会找到我们的 标题：

所以我们有了我们的标题。在下一个子节中，我们将使用网格系统。

添加标题和搜索框

如果你使用过 Bootstrap、Foundation 或其他任何 CSS HTML 框架，那么你就知道网格系统是什么。基本上，网格系统给我们提供了 12 列，我们可以设置某些 div 或某些元素跨越一定数量的列。

如果我们访问我们的文档页面，然后进入 W3.CSS 网格布局页面（www.w3schools.com/w3css/w3css_grid.asp），你会看到我们需要的语法，如下面的截图所示：

复制前面截图中的示例行，并将其粘贴到标题中，如下所示：

<body>
  <header class="w3-container w3-teal">
    <div class="w3-row">
      <div class="w3-col m4 l3">
        <p>12 columns on a small screen, 4  on a medium screen, 
        and 3 on a large screen.</p>
      </div>
      <div class="w3-col m8 l9">
        <p>12 columns on a small screen, 8  on a medium screen, 
        and 9 on a large screen.</p>
      </div>
    </div>
  </header>
</body>

首先，对于第一个 w3-col 类，我们将 l3 改为 l9（这是指大 9）。我们使用 l9 用于大屏幕，m4 用于中屏幕。然而，在这里我们将两者都保持相同——9 列。第二个 w3-col 类将具有 m3 和 l3，如下面的代码所示：

<body>
  <header class="w3-container w3-teal">
    <div class="w3-row">
      <div class="w3-col m9 l9">
        <p>12 columns on a small screen, 4  on a medium screen, 
        and 3 on a large screen.</p>
      </div>
 <div class="w3-col m3 l3">
        <p>12 columns on a small screen, 8  on a medium screen, 
        and 9 on a large screen.</p>
      </div>
    </div>
  </header>
</body>

接下来，我们可以移除 w3-col 类内部的段落，如下所示：

<header class="w3-container w3-teal">
  <div class="w3-row">
    <div class="w3-col m9 l9">

    </div>
    <div class="w3-col m3 l3">

    </div>
  </div>
</header>

在第一个 w3-col 类内部，我们将添加标题，这将是一个 <h1> 并说 PhotoGenik，我们将用 <span> 标签包裹 Photo 这个词，因为我们将会使它有不同的颜色：

<div class="w3-col m9 l9">
  <h1><span>Photo</span>Genik</h1>
</div>

然后在第二个 w3-col 类内部，我们将有我们的输入，并且它将有自己的 w3-input 类。我们将给它一个 type 为 text，然后给它一个占位符——Search...：

<div class="w3-col m3 l3">
  <input class="w3-input" type="text" 
  placeholder="Search...">
</div>

让我们通过重新加载页面来查看这个效果：

移动搜索框

现在，我想将搜索框向下移动。为此，我们将进入我们的 style.css 文件。在 style.css 文件中，我们将添加 header input 并将其 margin-top 设置为 15px：

header input{
  margin-top:15px;
}

现在，重新加载我们的 WordPress 页面，你可以看到我们的标题，如这里所示：

添加侧边栏和主要区域

接下来，我们想要侧边栏和主要区域，因此我们也会使用网格来实现这一点。首先，我们将查看侧边栏，然后进入主要区域。

添加侧边栏

在 index.html 文件中，复制 w3-col 类，并将其放在标题下方，如这里所示：

  </header>
    <div class="w3-row">
      <div class="w3-col m9 l9">
        <h1><span>Photo</span>Genik</h1>
      </div>
      <div class="w3-col m3 l3">
        <input class="w3-input" type="text" 
        placeholder="Search...">
      </div>
    </div>
  </header>
</body>
</html>

因为我们想要侧边栏在左侧，我们将交换列，然后我们可以像这里所示的那样移除内部的内容：

</header>
  <div class="w3-row">
    <div class="w3-col m3 l3">

    </div>
    <div class="w3-col m9 l9">

    </div>
  </div>
</body>
</html>

对于三个列（前述代码中的第一个 w3-col 类），我们将添加一个分类列表。所以让我们添加 <ul> 并给它一个 w3-ul 类：

<div class="w3-col m3 l3">
  <ul class="w3-ul">
  </ul>
</div>

然后在 <ul> 标签内部，我们将有带有链接的 <li> 标签。第一个将显示为 Nature，这些只是分类。同样，我们还会添加 Animals、Objects、People 和 Abstract，如这里所示：

<ul class="w3-ul">
  <li><a href="#">Nature</a></li>
  <li><a href="#">Animals</a></li>
  <li><a href="#">Objects</a></li>
  <li><a href="#">People</a></li>
  <li><a href="#">Abstract</a></li>
</ul>

让我们保存这个文件，查看页面，我们可以看到我们的分类：

更改侧边栏的背景和文本颜色

现在，我们想要背景为黑色，文本为白色，所以让我们进入我们的样式表并添加一些核心样式。首先，我们将添加 body，并给它一个黑色背景和一个白色文本：

body{
  background: #000;
  color: #fff;
}

然后，对于链接，我想去掉下划线，所以我们将添加 text-decoration: none。对于列表项（li），我们不想有任何项目符号，所以我们将添加 list-style: none。对于输入，我们希望文本为深色，所以让我们添加 color: #333，如这里所示：

a{
  text-decoration: none;
}
li{
  list-style: none;
}
input{
  color: #333;
}

让我们保存这个，然后我们可以看到以下变化：

添加主要区域

对于主要区域，我们将在现有的网格内部添加另一个网格。我们将在一行中添加三张图片。在 index.html 文件中，我们将复制带有列的 w3-row 类，并将其粘贴在标题中的第二个 w3-col 类内部：

<div class="w3-col m9 l9">  
  <div class="w3-row">
    <div class="w3-col m9 l9">
      <h1><span>Photo</span>Genik</h1>
    </div>
    <div class="w3-col m3 l3">
      <input class="w3-input" type="text" 
      placeholder="Search...">
    </div>
  </div>
</div>

接下来，我们将移除 <h1> 和 <input> 内容。然后我们将两个列都改为 m4 和 l4，如这里所示：

<div class="w3-col m9 l9">  
  <div class="w3-row">
 <div class="w3-col m4 l4">

    </div>
 <div class="w3-col m4 l4">

    </div>
  </div>
</div>

我们还需要一个额外的列，所以我将复制一个 w3-col 类并将其粘贴在这里，如这里所示：

<div class="w3-col m9 l9">  
  <div class="w3-row">
 <div class="w3-col m4 l4">

    </div>
    <div class="w3-col m4 l4">

    </div>
    <div class="w3-col m4 l4">

 </div>
  </div>
</div>

添加到列中的图片

现在，我们有三个列，因此我们需要在内部添加一个图像，并在图像下方添加文本。至于图像，你应该在项目文件中有这些图像。所以，我添加了一些黑白图像，它们命名为1.jpg到6.jpg，如下所示：

让我们回到我们的代码编辑器，并添加<image>标签。我们将指向每一个，所以添加src，然后它将指向images/1.jpg。我们还将添加一个段落，其中包含一些示例文本，如下所示：

<div class="w3-row">
<div class="w3-col m4 l4">
    <img src="img/1.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>

我们需要为所有列都做同样的事情，如下所示：

<div class="w3-row">
<div class="w3-col m4 l4">
    <img src="img/1.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
  <div class="w3-col m4 l4">
    <img src="img/2.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
  <div class="w3-col m4 l4">
    <img src="img/3.jpg">
    <p>Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit.</p>   
  </div>
</div>

我们将保存它，重新加载我们的页面，并可以看到如下所示的图像：

现在，我们需要将这些图像的宽度设置为容器宽度的 100%，因为如前一个屏幕截图所示，它们正从容器中溢出。所以，在style.css样式表中，我们将添加图像并将width设置为100%：

img{
  width:100%;
}

如果我们去重新加载我们的页面，我们将看到以下内容：

这些都整齐地排列在一起。为了让我们获得更多图像，我们必须添加更多行。在index.html文件中，复制我们定义的三个div，并将其直接放在之前添加的<img>标签下方。然后我们将更改图像源文件名为4.jpg、5.jpg和6.jpg。我们还想将图像下方的文本居中。所以，在每个<div>标签中，我们也将添加一个pic类，这样每个图片div都有自己的类，如下所示：

<div class="w3-col m4 l4 pic">
  <img src="img/4.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>
<div class="w3-col m4 l4 pic">
  <img src="img/5.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>
<div class="w3-col m4 l4 pic">
  <img src="img/6.jpg">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p>   
</div>

现在，在style.css中，我们将添加.pic和text-align: center，如下面的代码所示，这样图像下方的文本看起来就对齐了：

.pic{
  text-align: center;
}

如果我们现在去重新加载我们的页面，我们可以在以下屏幕截图中看到我们有了六张图像，我们的文本是对齐的：

在主区域添加页脚

现在在页面的底部，我们想要一个简单的页脚。为了添加这个页脚，在index.html文件中，我们将紧接在最后一个div之后添加<footer>，然后添加一个段落。我们将添加PhotoGenik和版权符号 2017，如下所示：

  <footer>
    <p>PhotoGenik &copy; 2017</p>
  </footer>
</body>

让我们保存这个文件。在样式表中，添加footer，并将text-align、margin-top和border-top属性设置为适当的值，如下面的代码所示：

footer{
  text-align: center;
  margin-top: 40px;
  border-top: #333 solid 1px;
}

保存并重新加载页面，现在我们有了如下所示的页脚：

在下一节中，我们将实现动画并创建我们的single.html页面。

实现动画和 single.html 页面

在本节中，我们想要实现动画，这将非常简单。我们使用的是具有内置动画的 W3.CSS 框架。

让我们看一下 W3.CSS 动画页面（www.w3schools.com/w3css/w3css_animate.asp），如下面的屏幕截图所示。我们可以看到不同类型的动画：

顶部
底部
左侧
Right
渐显
Zoom
Spin

实现渐显动画

现在我们要使用不同类型的动画，来改变我们 WordPress 主页的主题。首先，我们希望主页上的照片能够渐显。为此，我们需要使用以下截图所示的渐显类：

让我们复制class="w3-animate-opacity"，并转到index.html页面，然后在每个<image>标签上粘贴此内容，如下所示：

<div class="w3-col m9 l9">
  <div class="w3-row">
    <div class="w3-col m4 l4 pic">
      <img src="img/1.jpg" class="w3-animate-opacity">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

让我们刷新主页，你会看到图片正在渐显。

在单页上创建动画

现在，我们将在single.html页面上使用动画。使用 Sublime Text 编辑器打开single.html文件。

接下来，我们将主页上的每张图片链接到single.html页面。这里我们只链接第一张。在index.html页面中，放置一个指向single.html的<a>标签，如下所示代码：

<div class="w3-col m9 l9">
  <div class="w3-row">
    <div class="w3-col m4 l4 pic">
      <a href="single.html">
        <img src="img/1.jpg" class="w3-animate-opacity">
      </a>
    </div>

如果你想为其余的图片放置这个标签，那也行，但这并不重要。这只是 HTML；这不是实际的主题。

刷新主页并点击第一张图片。这将带我们到single.html页面。现在，我们将复制index.html中的代码，并将其放入single.html页面。

接下来，我们将清空 9 列div，其他一切保持不变。在移除 9 列div后，我们的代码在single.html页面中将看起来如下：

    <div class="w3-col m3 l3">
      <ul class="w3-ul">
        <li><a href="#">Nature</a></li>
        <li><a href="#">Animals</a></li>
        <li><a href="#">Objects</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Abstract</a></li>
      </ul>
    </div>
    <div class="w3-col m9 l9">

    </div>
  </div>

  <footer>
    <p>PhotoGenik &copy; 2017</p>
  </footer>
</body>
</html>

为单个图片添加动画

现在，在single.html页面的 9 列div中，我们将放置我们的单张图片。为此，首先我们将放置一个<article>标签，并给它一个post类。然后添加一个带有meta类的段落，如下所示：

<div class="w3-col m9 l9">
  <article class="post">
    <p class="meta">
    </p>
  </article>
</div>

接下来，在meta类中添加Posted at 2:00pm on 03-29-2017 by Brad：

<p class="meta">
Posted at 2:00pm on 03-29-2017 by Brad
</p>

然后，放置<hr />，然后添加实际的图片，添加src="img/1.jpg"。因为我们希望这张图片有动画效果，所以我们将给它一个w3-animate-right类，如下所示：

<div class="w3-col m9 l9">
  <article class="post">
    <p class="meta">
      Posted at 2:00pm on 03-29-2017 by Brad
    </p>
    <hr/>

 <img src="img/1.jpg" class="w3-animate-right">
  </article>
</div>

然后，在这张图片下面，我们将添加另一行，w3-row，和一个w3-col列，宽度为l2；这个列是我们放置Back按钮的地方。然后我们添加一个宽度为l10的列，如下所示：

<div class="w3-row">
  <div class="w3-col l2">

  </div>
  <div class="w3-col l10">

  </div>
</div>

现在，在l2列中，让我们放置一个换行符<br />，然后添加一个链接，该链接将返回到index.html页面。我们将给这个链接添加w3-btn和w3-red类，以将其格式化为按钮，如下所示：

<div class="w3-row">
  <div class="w3-col l2">
    <br />
    <a href="index.html" class="w3-btn w3-red">Back</a>https://epic.packtpub.com/index.php?module=KReports&offset=1&stamp=1490607763044301800&return_module=KReports&action=DetailView&record=1d5f883c-a9a3-ee7f-1d3c-5887f8190664
  </div>

然后，在l10列中，我们将添加Photo Title和描述。在描述中，只需粘贴如下所示的示例文本：

<div class="w3-col l10">
  <h1>Photo Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

让我们保存这段代码，并回到浏览器中的single.html。我们可以看到图片是从右侧进入的：

现在，如前一个截图所示，我们可以发现列太靠近了。你可以看到它们挨在一起。因此，我们将为我们在<article>元素中指定的post类添加一些填充。为此，在style.css文件中添加padding:20px：

.post{
  padding:20px;
}

此外，我们还将添加pic类到主图像，如图所示：

<img src="img/1.jpg" class="pic w3-animate-right">

现在你可以看到照片实际上适合那里，我们并没有紧挨着侧边栏：

因此，我们在主图像上有了标题、描述和返回按钮。在下一节中，我们准备开始创建我们的 WordPress 主题。

添加主题头部和尾部

在上一节中，我们继续完成了 HTML 模板。现在我们准备将这个模板转换为 WordPress 主题。这里有一个全新的 WordPress 安装：

我们将以此作为起点。在编辑器中，打开如图所示的wpthemes文件夹：

在`wpthemes`文件夹内创建主题

我们将从在wp-content文件夹内的themes文件夹中创建一个名为photogenik的主题开始：

添加主题

在photogenik文件夹中，我们将首先创建一个style.css文件。这就是我们将放置所有主题数据的地方。在style.css文件中，我们将放置一个注释并按如下格式进行格式化：

在这个注释中添加一些详细信息。这些是：

主题名称：这将设置为PhotoGenik
作者：你可以在这里填写你的名字
作者 URI：你可以在这里填写任何你想要的内容。这里我们将填写http://eduonix.com
描述：对于描述，我们将添加照片画廊主题
版本：这将设置为1.0.0

/*
    Theme Name: PhotoGenik
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Photo gallery theme
    Version: 1.0.0
*/

此后创建一个index.php文件。保存此文件，我们就可以在管理区域中看到它了。现在让我们重新加载并转到外观 | 主题，如图所示。你可以看到我们有了主题 PhotoGenik：

接下来，我们将上传主题的截图。为此，前往xampp文件夹或你的 WordPress 安装所在之处。

在这里，我们将进入wpthemes\wp-content\themes\photogenik并粘贴。当你想要使用截图时，它应该命名为screenshot.png。重新加载主题页面，你将看到如图所示的小截图：

激活主题

现在，让我们通过点击主题中的激活按钮来激活这个主题。如果我们去前端页面并重新加载，显然我们不会在那里得到任何东西。

在这种情况下，首先要做的是添加样式，即 CSS。我们将从我们的 HTML 模板中打开样式表（style.css），复制其代码，然后将其直接放在我们之前添加的注释下面：

/*
    Theme Name: PhotoGenik
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Photo gallery theme
    Version: 1.0.0
*/

body{
  background: #000;
  color: #fff;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
input{
  color: #333;
}
img{
  width:100%;
}
.post{
  padding:20px;
}
.pic{
  text-align: center;
}
header input{
  margin-top:15px;
}
footer{
  text-align: center;
  margin-top: 40px;
  border-top: #333 solid 1px;
}

如果我们去前端页面并重新加载，它仍然不会在我们的前端页面上产生任何变化，因为我们index.php文件中没有任何内容。

打开 index.php 文件，粘贴我们在 index.html 文件中的所有内容，并保存。在此之后，如果我们去重新加载前端页面，它将显示静态 HTML：

现在，这些静态 HTML 都不是来自 WordPress。我们将逐步将其从静态标记转换为 WordPress。

将静态标记转换为 WordPress

让我们来到 index.php 页面的顶部，首先要做的事情就是在代码中包含正确的样式表：

<!DOCTYPE html>
<html>
<head>
  <title>PhotoGenik</title>
  <link rel="stylesheet" 
        href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

我们将从前面代码中的 href 链接中移除 style.css 并用 php bloginfo(); 替换它。在括号中，我们将添加 stylesheet_url，如下所示：

<head>
  <title>PhotoGenik</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

保存这个，转到前端页面，并重新加载。你现在将看到样式表被包含，如下面的截图所示：

你可能看不到图片，因为路径错误。我们将在后面的部分探讨这个问题。

添加 wp_head 函数

现在我们还想要在头部添加 wp_head 函数。在这里，我们可以添加我们需要的任何头部内容，例如为 WordPress 插件添加额外的样式表。所以我们将添加 <?php wp_head(); ?>，如下所示：

  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>

我们还想要字符集。在头部，我们将添加 <meta charset="<?php bloginfo(); ?>">。然后在括号中，我们将添加 charset，如下所示：

<title>PhotoGenik</title>
<meta charset="<?php bloginfo('charset'); ?>">

现在，我们将使页眉中的 <h1> 标签动态化。我们将添加 <?php bloginfo(''); ?> 并传入 name，如下所示：

<body>
  <header class="w3-container w3-teal">
    <div class="w3-row">
      <div class="w3-col m9 l9">
      <h1><?php bloginfo('name'); ?></h1>
      </div>

让我们保存它，通过重新加载前端页面来看看它给我们带来了什么：

如前一个截图所示，我们的代码将给出网站名称；在我们的例子中，它是 WordPress Themes，我们可以在管理区域中更改它。

添加 body_class 函数

对于主体，我们将包含 body_class 函数：

<body <?php body_class(); ?>>

现在，我们将主要内容保持原样。

添加页脚

我们将在页脚中添加 <?php bloginfo('name'); ?>，就像我们在 <h1> 中做的那样。这将给出博客的名称；在我们的例子中，它是 WordPress Themes：

<footer>
  <p><?php bloginfo('name'); ?> &copy; 2017</p>
</footer>

分割页眉和页脚

现在，我们将 index.php 文件分割成页眉和页脚文件。在 photogenik 文件夹内，我们将创建两个新的文件，分别命名为 header.php 和 footer.php。

让我们弄清楚我们需要在 header.php 文件中放入什么。我们将从 index.php 文件中添加以下代码到 header.php 文件中：

<!DOCTYPE html>
<html>
<head>
  <title>PhotoGenik</title>
  <meta charset="<?php bloginfor('charset'); ?>">
  <link rel="stylesheet" 
  href="http://www.w3schools.com/lib/w3.css">
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header class="w3-container w3-teal">
    <div class="w3-row">
      <div class="w3-col m9 l9">
        <h1><?php bloginfo('name'); ?></h1>
      </div>
      <div class="w3-col m3 l3">
        <input class="w3-input" type="text" placeholder="Search...">
      </div>  
    </div>
  </header>
  <div class="w3-row">
    <div class="w3-col m3 l3">
      <ul class="w3-ul">
        <li><a href="#">Nature</a></li>
        <li><a href="#">Animals</a></li>
        <li><a href="#">Objects</a></li>
        <li><a href="#">People</a></li>
        <li><a href="#">Abstract</a></li>
      </ul>
    </div>
    <div class="w3-col m9 l9">
      <div class="w3-row">

对于页脚，我们将从 index.php 中剪切以下代码，将其放入 footer.php 中，并保存：

      </div>
    </div>
  </div>
  <footer>
    <p><?php bloginfo('name'); ?> &copy; 2017</p>
  </footer>
<body>
</html

在将页眉和页脚代码分割后，index.php 文件内的剩余代码将看起来像这样：

<div class="w3-col m4 l4 pic">
  <a href="single.html"> 
    <img src="img/1.jpg" class="w3-animate-opacity">
  </a>
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p> 
</div>
<div class="w3-col m4 l4 pic">
  <img src="img/2.jpg" class="w3-animate-opacity">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p> 
</div>
<div class="w3-col m4 l4 pic">
  <img src="img/3.jpg" class="w3-animate-opacity">
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p> 
</div>
<div class="w3-col m4 l4 pic">
 <img src="img/4.jpg" class="w3-animate-opacity">
 <p>Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit.</p> 
</div>
<div class="w3-col m4 l4 pic">
 <img src="img/5.jpg" class="w3-animate-opacity">
 <p>Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit.</p> 
</div>
<div class="w3-col m4 l4 pic">
 <img src="img/6.jpg" class="w3-animate-opacity">
 <p>Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit.</p> 
</div>

如果我们现在重新加载，你可以看到如下面的截图所示，我们得到的就是 index.php 文件：

我们需要在index.php文件中包含头部和尾部，所以让我们接下来做这件事。对于头部，我们需要在代码顶部添加<?php get_header(); ?>，如下所示：

<?php get_header(); ?>

<div class="w3-col m4 l4 pic">
  <a href="single.html"> 
    <img src="img/1.jpg" class="w3-animate-opacity">
  </a>
  <p>Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit.</p> 
</div>

然后，我们将对尾部做同样的处理。我们将在代码末尾添加<?php get_footer(); ?>，如下所示：

  <div class="w3-col m4 l4 pic">
   <img src="img/6.jpg" class="w3-animate-opacity">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
  </div>

<?php get_footer(); ?>

如果我们返回并重新加载我们的前端页面，你可以看到它已经恢复正常：

更改站点名称

要更改站点的名称，在后台页面，我们将进入设置部分并选择常规：

在这里，我们将站点标题从Wordpress Themes更改为PhotoGenik并保存更改。当我们重新加载前端页面时，更改应该如下反映：

在下一节中，我们将查看帖子中的内容，因为这是我们希望在索引中显示的内容。好的，那么我们将在下一节中处理这个问题。

帖子循环

在上一节中，我们创建了头部和尾部文件并将它们包含在index.php文件中。在本节中，我们将处理主要帖子区域。到目前为止，我们有一堆静态 HTML 需要更改。我们将有两种类型的帖子：

常规帖子：这将是一个带有标题和段落的标准博客帖子
画廊帖子：这将包含带有下方描述的图片

我们将添加对内容或帖子格式的支持。因此，我们需要做的是在我们photogenik主题内部创建一个functions.php文件。

添加主题支持函数

我们将创建一个函数来设置我们主题的特定支持。例如，为了能够使用特色图片或缩略图。在function.php中，我们将添加一个注释主题支持并声明theme_setup函数，如下所示：

<?php
// Theme Support
function theme_setup(){
}

现在，当我们访问一个帖子，如下面的屏幕截图所示，我们在标签部分下方没有特色图片框。这就是我们将在函数内部添加的内容：

要设置特色图片支持，我们将在theme_setup函数内部添加add_theme_support。然后，在括号内，我们将添加post-thumbnails，如下所示：

<?php
// Theme Support
function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');
}

对于缩略图大小，我们将放置最大图像大小，因为我们将使用 CSS 来缩小图像。接下来，在theme_setup函数中，我们将添加set_post_thumbnail_size，大小为 900 x 600，如下所示：

<?php
// Theme Support
function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(900, 600);
}

接下来，我们将添加我们的画廊帖子格式支持。我们将使用之前使用的相同的add_theme_support函数，除了我们将用post-formats替换post-thumbnails。然后对于第二个参数，我们将放入我们想要包含的格式的数组。我们除了标准格式外，只想包含gallery格式，所以我们将输入gallery，如下所示：

<?php
// Theme Support
function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(900, 600);
  // Post Format Support
 add_theme_support('post-formats', array('gallery'));
}

将函数传递到动作

现在我们有了theme_setup函数，我们需要将这个函数传递到一个动作中。所以让我们添加add_action，动作将是after_setup_theme。第二个参数将是我们要运行的函数，即theme_setup，如下所示：

function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');

  set_post_thumbnail_size(900, 600);

  // Post Format Support
  add_theme_support('post-formats', array('gallery'));
}

add_action('after_setup_theme', 'theme_setup');

现在，让我们保存这段代码并重新加载后端页面。如以下截图所示，你现在将看到在标签部分下有特色图片部分，并且我们也支持相册格式：

现在我们有了标准和相册格式，我们需要为内容创建两个不同的文件。在photogenik文件夹中创建一个内容文件，命名为content.php，另一个为相册，命名为content-gallery.php。

在我们实际处理这些文件之前，我们将简化我们的index.php文件。

在内容帖子中处理 index.php

为了简化index.php文件，在编辑器中打开文件，并移除其中除<?php get_header(); ?>和<?php get_footer(); ?>行之外的所有代码。这就是我们的index.php将看起来像这样：

<?php get_header(); ?>

<?php get_footer(); ?>

然后，我们将检查帖子，如果有帖子，将遍历它们并输出正确的内容文件。现在，我们将添加<?php if(have_posts()) : ?>，然后我们将使用如下的简写语法：

<?php get_header(); ?>
<?php if(have_posts()) : ?>
<?php endif; ?>

添加帖子循环

如果有帖子，我们希望遍历它们。我们可以使用while循环来实现这一点。因此，在if语句内部，我们将添加<?php while(have_posts()) : the_post(); ?>。然后通过添加<?php endwhile; ?>来结束while循环，如下所示：

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>

  <?php endwhile; ?>
<?php endif; ?>

当有帖子时，我们希望输出内容文件，无论是content.php还是content-gallery.php，这取决于我们在帖子中选择的格式。因此，我们将在while循环内部添加<?php get_template_part(); ?>。接下来，传入content作为第一个参数，并将get_post_format()作为第二个参数。这将确定帖子是相册还是标准帖子。以下是我们的代码将如何看起来：

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <?php get_template_part('content', get_post_format()); ?>
  <?php endwhile; ?>
<?php endif; ?>

添加 else 语句

接下来，我们将向已定义的if语句中添加一个else语句，如果没有帖子，它将出现。如果没有帖子，我们将输出一条消息说“抱歉，没有帖子”：

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <?php get_template_part('content', get_post_format()); ?>
  <?php endwhile; ?>
<?php else : ?>
 <?php echo wpautop('Sorry, there are no posts'); ?>
<?php endif; ?>

现在让我们保存index.php文件。对于内容文件，我们将在content.php文件中添加STANDARD CONTENT，如下所示：

在content-gallery.php文件中添加PHOTO，如下所示：

如果我们访问前端页面并重新加载它，我们会得到 STANDARD CONTENT，因为我们看看我们的帖子，我们只有一个帖子，Hello world!：

现在添加另一个名为Test的帖子，为这个帖子选择相册格式，并发布它：

重新加载前端页面，现在你可以看到我们得到了 PHOTO STANDARD CONTENT：

因此，这是我们两个帖子。它们在同一行上，但实际上是两个不同的帖子。我们现在知道我们的代码正在工作。在下一节中，我们将处理照片和标准内容文件，以便我们可以正确输出帖子。

显示帖子内容

在本节中，我们将处理内容页面，包括常规帖子内容和画廊。

添加常规帖子内容

对于添加常规帖子，我们将在编辑器中的content.php文件开始。我们将添加标题、元数据、缩略图，最后是帖子的主要内容。首先，我们将创建一个article标签，并给它一个post类：

<article class="post">
</article>

添加标题到常规帖子内容

接下来，我们需要标题。我们将标题放在<h2></h2>标签内。我们可以通过添加<?php echo the_title(); ?>来获取标题：

<article class="post">
<h2><?php echo the_title(); ?></h2>
</article>

只需刷新主页面，你就可以看到，对于常规内容帖子，我们实际上得到了标题：

添加元数据

接下来，我们将添加元数据。让我们将其放在一个带有meta类的段落中，如下所示：

<p class="meta">

</p>

在meta类中，我们将添加发布于，然后获取日期和时间。为了获取日期和时间，我们将添加<?php the_time(); ?>和<?php the_date(); ?>分别：

<p class="meta">
Posted at <?php the_time(); ?> on
<?php the_date(); ?> by
</p>

接下来，我们想要添加用户的名称，我们将将其放在一个链接中。为此，我们将添加<a href=""> </a>，添加php标签，并输出get_author_posts_url()，如下所示：

<p class="meta">
Posted at <?php the_time(); ?> on
<?php the_date(); ?> by
<a href="<?php echo get_author_posts_url(); ?>"></a>
</p>

现在，我们需要放置作者的 ID，我们可以通过get_the_author_meta()添加，并传入ID。这将给我们作者的 ID。然后对于实际文本，我们将添加<?php the_author(); ?>，如下所示：

<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')) ?>"><?php the_author(); ?></a>

如果我们检查一下，我们将看到页面如下截图所示：

这表明发布于 2017 年 12 月 22 日凌晨 1:55，由管理员发布。

检查内容帖子中的缩略图

接下来，我们将检查是否有缩略图或特色图片。为此，我们将添加一个if语句：

<?php if() : ?>
</article>

在if语句中，添加has_post_thumbnail()，并让我们以如下方式结束if语句：

<?php if(has_post_thumbnail()) : ?>
<?php endif; ?>
</article>

如果有缩略图，我们将创建一个<div>并给它一个post-thumbnail类。在<div>中，我们将添加<?php the_post_thumbnail(); ?>，如下所示：

<?php if(has_post_thumbnail()) : ?>
  <div class="post-thumbnail">
    <?php the_post_thumbnail(); ?>
  </div>
<?php endif; ?>

现在，在if块下添加一个<br />标签，然后我们需要主要内容，这很简单；我们只需添加<?php the_content(); ?>即可，如下所示：

<br/>

<?php the_content(); ?>
</article>

让我们保存并刷新主页，你可以看到，我们有了该帖子的标题、元数据和内容，如下截图所示：

添加画廊帖子

对于画廊帖子，代码将略有不同。我们将从content-gallery.php页面开始。

让我们看看我们在前面部分创建的index.html页面。类似于index.html页面，我们将在content-gallery.php页面中添加一个 4 列<div>。我们将给<div>一个w3-col m4 l4 pic类，如下所示：

<div class="w3-col m4 l4 pic">

</div>

检查画廊帖子中的缩略图

由于我们想要检查缩略图，就像我们在前面的部分做的那样，我们将在content-gallery.php页面中使用相同的代码：

<div class="w3-col m4 l4 pic">
  <?php if(has_post_thumbnail()) : ?>
    <div class="post-thumbnail">
      <?php the_post_thumbnail(); ?>
    </div>
  <?php endif; ?>
</div>

这将不同于常规的内容帖子。我们将删除<?php the_post_thumbnail(); ?>行。删除后，代码应如下所示：

<div class="w3-col m4 l4 pic">
  <?php if(has_post_thumbnail()) : ?>
    <div class="post-thumbnail">

    </div>
  <?php endif; ?>
</div>

缩略图或特色图片意味着相同的事情。

创建属性数组

我们想在content-gallery.php文件中做一些额外的工作。我们将给图片添加一个类，以便我们可以进行动画等操作。为此，我们将创建一个属性数组。在div中，让我们添加以下代码：

<div class="post-thumbnail">
  <?php 
    $attr = array(

    ); 
  ?>
</div>

接下来，在数组中，我们将放入class，并希望它是w3-animate-opacity类。然后，我们还想添加一个悬停效果，我们可以使用w3-hover-opacity：

<div class="post-thumbnail">
  <?php 
    $attr = array(
      'class' => 'w3-animate-opacity w3-hover-opacity'
     ); 
   ?>
</div>

现在，每张图片都将有一个链接围绕它。因此，在属性数组之后，我们将添加<a href="php echo the_permalink()"></a>：

  <a href="<?php echo the_permalink(); ?>">
  </a>
</div>

此链接将带我们到单个帖子。然后，为了显示缩略图，我们将在锚标签中添加<?php echo get_the_post_thumbnail(); ?>，如下所示：

<a href="<?php echo the_permalink(); ?>">
  <?php echo get_the_post_thumbnail(); ?>
</a>

在get_the_post_thumbnail()函数中，我们将传入 ID、大小（将是large），然后是此处显示的属性：

<a href="<?php echo the_permalink(); ?>">
  <?php echo get_the_post_thumbnail($id, 'large', $attr); ?>
</a>

接下来，在endif语句下面，我们将放置内容：

  <?php endif; ?>
  <?php the_content(); ?>
</div>

现在保存代码并重新加载主页。我们不会看到任何东西，因为我们实际上没有添加任何内容到那个照片帖子：

添加新帖子

在添加新帖子之前，删除我们在前面部分创建的帖子。如图所示，在我们的 WordPress 页面中转到“帖子”部分，选择两个帖子，并将它们移动到回收站：

现在，我们将创建一个新的帖子。为此，我们想要确保添加几个部分。这些包括：

标题部分：首先，我们将添加一个标题。让我们称它为“照片一”。
描述部分：添加一小段文字或一些示例内容，这将作为描述：

格式：确保选择画廊作为我们的帖子格式：

分类：我们将创建一些分类。我们将添加“自然”、“物体”、“人物”、“地点”和“抽象”分类。创建分类后，选择“自然”：

特色图片：要添加特色图片，请按照以下步骤操作：

当我们点击“设置特色图片”时，它将带我们到以下页面：

要上传文件，我们将点击“选择文件”按钮。
我们将进入photogenik_html文件夹，然后是images文件夹，并选择第一张图片：

我们可以给图片一个标题Photo One，并添加一个标题和描述，如下面的截图所示：

然后我们点击设置特色图片按钮。
现在，点击发布按钮并查看前端。它应该看起来像这样：

所以这是我们的图片，它淡入，但比例不正确。

添加适当的图片比例

为了调整图片的比例，我们将进入style.css页面，并找到 pic 部分。在我们的例子中，我们想要实际的图片，所以我们将添加.pic img，并将width设置为100%，并使其重要。然后我们将height设置为100%，如下所示：

.pic{
  text-align: center;
}
.pic img{
  width:100% !important;
  height:100% !important;
}

重新加载主页，这次我们应该看到如下内容：

现在，看起来不错！同样，我们将上传photogenik_html\images文件夹中剩余的图片：

我们可以看到，在我们的后端帖子区域有六张图片，如下面的截图所示：

现在我们已经实现了这个功能。在下一节中，我们将处理分类，并希望它成为一个 WordPress 小部件。

添加分类小部件和搜索选项

在本节中，我们将处理以下截图左侧显示的分类小部件。目前，我们只有一个静态的 HTML 无序列表：

添加一个函数以使用分类小部件

为了使用小部件，我们首先必须在functions.php文件中包含初始化代码：

<?php 
// Theme Support
function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(900, 600);

  // Post Format Support
  add_theme_support('post-formats', array('gallery'));
}

add_action('after_setup_theme', 'theme_setup');

指定小部件位置

在function.php文件中，在add_action函数下方，我们将指定位置。为此，我们将添加一个名为init_widgets的函数，传入&id，然后添加register_sidebar，如下所示：

// Widget Locations
function init_widgets($id){
  register_sidebar();
}

register_sidebar函数用于创建任何类型的小部件位置。尽管它说侧边栏，但它不必在侧边栏中；在我们的例子中，它是在侧边栏中，但不必一定在侧边栏中。

接下来，我们将向register_sidebar函数传递一个数组。添加一个名称Sidebar和一个 IDsidebar，如下所示：

  register_sidebar(array(
    'name' => 'Sidebar', 
    'id' => 'sidebar'
  ));
}

然后我们将使用add_action声明动作。我们将使用的钩子是widgets_init，并放入我们刚刚创建的函数init_widgets，如下所示：

add_action('widgets_init', 'init_widgets');

接下来，我们将注册小部件。

注册小部件

让我们现在注册小部件。在这个特定的模板中，我们只有侧边栏。添加一个函数custom_register_widgets，并调用register_widget，如下所示：

// Register Widgets
function custom_register_widgets(){
  register_widget('');
}

在这里，我们将使用分类小部件，但我们将创建一个自定义版本并将其放入themes文件夹中的模板中。因此，在register_widget括号中，我们将添加WP_Widget_Categories_Custom，如下所示：

// Register Widgets 
function custom_register_widgets(){
  register_widget('WP_Widget_Categories_Custom')};
}

然后，我们将使用add_action添加动作，传入widgets_init，因为我们希望它运行，然后添加custom_register_widgets函数，如下所示：

add_action('widgets_init', 'custom_register_widgets');

接下来，我们将对小部件进行样式化。

样式化我们的分类小部件

在本节中，我们将对小部件进行样式化。在我们的photogenik主题文件夹中，我们将创建一个名为widgets的新文件夹。在widgets文件夹内，我们将创建一个名为class-wp-widget-categories.php的新文件。

现在，我们将进入核心widgets文件夹，它位于wp-includes文件夹中。打开名为class-wp-widget-categories.php的分类小部件文件，将其代码复制粘贴到我们创建的文件中：

现在，在前面截图所示的代码中，我们将更改类名。记住，在我们的functions.php文件中，我们称这个类为WP_Widget_Categories_Custom，所以在这里的class-wp-widget-categories.php文件中也是这样：

class WP_Widget_Categories_Custom extends WP_Widget {

现在为了使用这个功能，我们必须在functions.php文件中包含class-wp-widget-categories.php文件。我们包含这个文件是为了按照以下截图所示的风格化小部件：

在functions.php中，我们将添加require_once，然后添加widgets/class-wp-widget-categories.php，如下所示：

<?php 

require_once('widgets/class-wp-widget-categories.php'); 

//Theme Support
function theme_setup(){
  // Featured Image Support
  add_theme_support('post-thumbnails');

  set_post_thumbnail_size(900, 600);

  // Post Format Support
  add_theme_support('post-formats', array('gallery'));
}

add_action('after_setup_theme', 'theme_setup');

让我们保存这个文件，然后进入我们的管理区域。现在你将能够进入外观部分，然后你会看到一个名为小部件的项目，如下所示：

好的，你可以看到我们有了侧边栏。我们将拖放分类到侧边栏，然后点击保存：

将小部件添加到代码中

现在，进入header.php文件，其中包含无序列表：

<div class="w3-row">
  <div class="w3-col m3 l3">
  <ul class="w3-ul">
    <li><a href="#">Nature</a></li>
    <li><a href="#">Animals</a></li>
    <li><a href="#">Objects</a></li>
    <li><a href="#">People</a></li>
    <li><a href="#">Abstract</a></li>
  </ul>
</div>
<div class="w3-col m9 l9">
  <div class="w3-row">

我们将只去掉这个列表，并用以下高亮代码替换它：

<div class="w3-row">
  <div class="w3-col m3 l3">
    <?php if(is_active_sidebar('sidebar')) : ?>
 <?php dynamic_sidebar('sidebar'); ?>
 <?php endif; ?>
  </div>
  <div class="w3-col m9 l9">
   <div class="w3-row">

这就是我们将小部件添加到代码中的方法。我们首先使用is_active_sidebar布尔函数检查sidebar是否激活。如果是激活的，那么我们将调用dynamic_sidebar并传入sidebar位置。这可以是任何你想要的位置，但在我们的案例中我们命名为sidebar。让我们重新加载主页，然后，看那里，就有了分类小部件：

如果我们点击其中一个分类，它将显示该特定分类中的图片。

你可以在前面的截图看到小部件的外观确实发生了变化。这就是为什么我们需要将其放入自己的文件中编辑，因为你永远不想编辑任何其他核心小部件文件。

移除标题

确保它实际上是从当前文件中读取的。让我们做一些更改。我们将移除标题。为此，我们将注释掉这里显示的高亮代码：

$title = apply_filters('widget_title', empty($
    instance['title']) ? _('Categories') : $
    instance['title'], $instance, $this->id_base);

$c = ! empty( $instance['count'] ) ? '1' : '0';
$h = ! empty( $instance['hierarchical'] ) ? '1':'0';
$d = ! empty( $instance['dropdown'] ) ? '1' : '0';

echo $args['before_widget'];
if($title) {
 // echo $args['before_title'] . $title . $args['after_title'];
}

现在重新加载前端，你会看到分类标题已经消失了：

添加类

接下来，我们将添加我们的类。所以我们需要找到 ul 开始的地方：

 <ul>
<?php 
  $cat_args['title_li'] = '';

  /**
   * Filter the arguments for the Categories widget.
   *
   * @since 2.8.0
   *
   * @param array $cat_args An array of Categories widget options.
   */
  wp_list_categories( apply_filters( 
    ' widget_categories_args', $cat_args));

在这一行，我们将添加 class="w3-ul"：

<ul class="w3-ul">

现在，重新加载前端页面，现在它看起来和下面的截图一样：

在小工具顶部添加链接

接下来，我们将在我们的 WordPress 页面顶部的小工具中添加一个链接。这个链接命名为 All Photos，这样我们就可以回到只显示所有照片的状态。

我们将直接在 <ul> 下面放置一个 <li> 标签。然后添加 href 链接并指定文件夹的名称（无论你的文件夹叫什么名字）；在我们的例子中，这是 wpthemes。然后我们将链接命名为 All Photos，如下所示：

<ul class="w3-ul">
<li><a href="/wpthemes">All Photos</a></li>

重新加载页面，现在我们在小工具的顶部有一个 All Photos 链接，如下面的截图所示：

改变页面的顶部边距

我们还想注意的另一件事是标题上方的顶部边距，如下面的截图所示。它之所以是这样的，是因为它为管理栏留出了空间，而目前管理栏没有显示：

为了使管理栏显示，我们必须在 footer.php 文件中调用 wp_footer。所以让我们去那里并添加 <?php wp_footer(); ?>：

</div> 
   </div>
  </div>
  <footer>
    <p><?php bloginfo('name'); ?> &copy; 2017</p>
  </footer>
 <?php wp_footer(); ?>
</body>
</html>

重新加载前端页面，现在你可以看到我们有了管理栏，当然，这只会显示登录为管理员的两个人：

使搜索栏功能化

最后，我们将使搜索栏功能化。现在如果我们在这里的 Search... 框中输入一些内容并按下 Enter，它不会做任何事情。我们知道搜索栏应该在 header.php 文件中，所以让我们打开它：

  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header class="w3-container w3-teal">
    <div class="w3-row">
      <div class="w3-col m9 l9">
        <h1><?php bloginfo('name'); ?></h1>
      </div>
      <div class="w3-col m3 l3">
        <input class="w3-input" type="text" 
 placeholder="Search...">
      </div>
    </div>
  </header>

在前面的代码中，我们现在有一个简单的 <input> 标签。我们将把这个输入转换为表单，所以把它放在 <form> 标签周围：

<form>
  <input class="w3-input" type="text" placeholder="Search...">
</form>

接下来，我们在 <form> 标签中放入一个 get 方法。然后通过添加 action="<?php echo esc_url(); ?>"> 指定一个动作。在 esc_url 括号内，我们将添加 home_url 函数并传入参数 /。我们还应该给这个输入一个名为 s 的名称，用于搜索，如下面的代码所示：

<form method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <input name="s" class="w3-input" type="text" 
  placeholder="Search...">
</form>

重新加载前端页面并搜索 photo two：

如果我们按下 Enter，我们可以看到它显示为 2.jpg，如下所示：

同样，我们可以搜索剩余的照片。在下一节中，我们将处理单个页面。

在处理单个帖子主题

接下来，我们想要做的是单页，这是我们这个主题剩下的部分。当我们点击一张图片时，它会带我们到正确的位置，如下所示，但它看起来不太好：

我们希望这张图片看起来像我们创建的单个 HTML 页面。为此，我们需要遵循以下小节中讨论的步骤。

创建单个 HTML 页面

首先，在我们的photogenik主题文件夹中，我们将创建一个名为single.php的新文件：

接下来，我们将进入index.php文件，复制并粘贴其代码到single.php文件中，如下所示：

<?php get_header(); ?>

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <?php get_template_part('content', get_post_format()); ?>
  <?php endwhile; ?>

<?php else : ?>
  <?php echo wpautop('Sorry, there are no posts'); ?>
<?php endif; ?>

<?php get_footer(); ?>

现在，我们将从这段代码中移除get_template_part：

<?php get_header(); ?>

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>

  <?php endwhile; ?>

<?php else : ?>
  <?php echo wpautop('Sorry, there are no posts'); ?>
<?php endif; ?>

<?php get_footer(); ?>

并且在while循环的位置，我们将放置我们在single.html文件中创建的文章。打开single.html文件，复制整个<article>部分。现在将此代码粘贴到single.php文件中的while循环中，如下所示：

<?php get_header(); ?>

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
    <article class="post">
      <p class="meta">
      Posted at 2:00pm on 03-29-2017 by Brad
      </p>

      <hr/>

      <img src="img/1.jpg" class="pic w3-animate-rigt">
      <div class="w3-row">
        <div class="w3-col l2">
          <br />
          <a href="index.html" class="w3-btn w3-red">Back</a>
        </div>
        <div class="w3-col l10">
        <h1>Photo Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
    </article>

使元数据动态化

现在，我们需要使前面代码中的字段动态化。我们将从顶部的meta类开始。让我们将2:00pm替换为<?php the_time(); ?>，将03-29-2017替换为<?php the_date(); ?>，如下所示：

Posted at <?php the_time(); ?> on <?php the_date(); ?> by Brad

WordPress 最好的事情之一是包括动态内容非常容易。

现在要替换作者名字（在我们的例子中是Brad），我们需要从content.php文件中获取以下代码，并将其添加到Brad的位置：

<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a>

因此，这使得元数据动态化。

更改静态图片

现在，在single.php文件中，我们只有一个静态图片：

<img src="img/1.jpg" class="pic w3-animate-right">

要更改静态图片，让我们复制content-gallery.php文件中的if语句，并将其粘贴到<img>标签的位置，如下所示：

  </p>

  <hr/>
  <?php if(has_post_thumbnail()) : ?>
    <div class="post-thumbnail">
      <?php 
        $attr = array(
          'class' => 'w3-animate-opacity w3-hover-opacity'
        ); 
     ?>
      <a href="<?php echo the_permalink(); ?>">
        <?php echo get_the_post_thumbnail($id, 
        'large', $attr);   ?>
       </a>
    </div>
  <?php endif; ?>
  <?php the content(); ?>
</div>

在这段代码中，我们将把w3-animate-opacity改为w3-animate-right，并移除w3-hover-opacity，如下所示：

 <?php if(has_post_thumbnail()) : ?>
    <div class="post-thumbnail">
      <?php 
        $attr = array(
          'class' => 'w3-animate-right'
        ); 
     ?>

现在，我们不需要有链接，所以我们将移除permalink语句：

<a href="<?php echo the_permalink(); ?>">
  <?php echo get_the_post_thumbnail($id,'large', $attr);  ?>
</a>

移除链接后，代码将看起来如下所示：

<?php if(has_post_thumbnail()) : ?>
  <div class="post-thumbnail">
    <?php 
      $attr = array(
        'class' => 'w3-animate-right'
      ); 
    ?>
    <?php echo get_the_post_thumbnail($id, 'large', $attr); ?>
  </div>
<?php endif; ?>

看起来不错！

更改返回按钮、标题和内容

现在对于Back按钮，我们将index.html改为<?php echo site_url(); ?>，如下所示：

<div class="w3-row">
  <div class="w3-col l2">
    <br />
    <a href="<?php echo site_url(); ?>"
    class="w3-btn w3-red">Back</a>
  </div>

这将带我们返回，对于动态标题，我们可以简单地将Photo Title替换为<?php the_title(); ?>，如下所示：

</div>
<div class="w3-col l10>">
<h1><?php the_title(); ?></h1>
<p>Lorem ipsum dolor sit amet, consectetur adiposcing elit.</p>
</div>

然后对于动态内容，我们可以将段落替换为<?php the_content(); ?>：

</div>
<div class="w3-col l10>">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>

在代码中实现了所有更改后，让我们看看 WordPress 中的图片：

如前一张截图所示，这看起来不错。返回按钮也应该可以正常工作。如果你点击任何一张图片，你可以看到它直接滑入。

我认为这就是我们的主题了。它很简单，但我认为它相当优雅，当然，如果你想在小边栏中添加小工具，你也可以做到；如果你想创建常规帖子，你同样可以做到，不一定要是照片。

摘要

在本章中，我们致力于创建一个用于照片画廊的 WordPress 主题的项目。我们为我们的主页创建了 HTML 和 CSS。接下来，我们使用了内置的 W3.CSS-animation 实现了动画效果。

在此之后，我们将 HTML 模板化为 WordPress 主题，分别创建了头部和尾部文件，并将它们包含在 index.php 文件中。接下来，我们处理了主要帖子区域，并为不同的帖子格式添加了 if 和 while 循环。然后，我们处理了内容页面，包括常规和画廊帖子内容。一旦完成这些，我们就着手制作分类小工具。最后，我们处理了单页的主题。

在下一章中，我们将构建一个 Twitter Bootstrap WordPress 主题。

第四章：构建 Twitter Bootstrap WordPress 主题

在本章中，我们将集成 Bootstrap 与 WordPress。我们之前创建的模板的外观相当简单。我们没有追求一些壮观的设计。这个项目的目标是让你看到我们如何将 Bootstrap 和 WordPress 结合起来，并使用它来构建更多 WordPress 的 Bootstrap 主题。

在本章中，我们将涵盖以下主题：

构建 Bootstrap 主题
处理文章循环
实现导航栏
添加搜索栏和单篇文章页面
探索评论功能

那么，让我们来构建一个 Twitter Bootstrap WordPress 主题。

构建 Bootstrap 主题

在我们之前创建的模板中，我们有一个标准的 Bootstrap 导航栏，你可以看到我们有一个下拉菜单：

我们实现下拉功能的方式是使用 wp-bootstrap-navwalker 类，如以下截图所示：www.github.com/twittem/wp-bootstrap-navwalker：

这是将 Bootstrap 导航栏与下拉功能集成到 WordPress 中最常见且可能也是最容易的方法。让我们来实现它。

如前所述，我们在 WordPress 页面上有搜索框。我们在 header 文件中有一些自定义代码，允许我们使用搜索框并使其正确工作，这对文章和页面都适用。

例如，如果我输入 lorem 并点击搜索按钮，它将返回包含单词 lorem 的所有内容：

如果我们进入后台，我们可以看到我们有一些之前创建的文章：

我们在主页上也有它的特色图片：

这是我们在后台作为特色图片选择的相同图片：

如果我们点击首页上的标题或“阅读更多”按钮，它将带我们到一个包含较大图片的内部页面：

你会看到评论位于页面底部，以及评论表单：

现在在右侧，我们有一个如下所示的侧边栏小部件：

我们实际上对一些核心小部件进行了一些调整，以便我们可以使用 Bootstrap 列表组。我们将调整以下小部件：分类、近期文章和近期评论。这样做是为了使它们与 Bootstrap 主题相匹配。

让我们开始构建我们的 WordPress Bootstrap 主题：

前往 localhost/wpthemes/。

我们可以看到的是一个没有任何文章的默认 WordPress 安装。因此，我们从零开始。

在 Sublime Text 编辑器中，我们有侧边栏，可以查看 WordPress 项目根目录，在themes文件夹中，我们可以看到我们有一些默认主题：

现在在themes文件夹中创建一个新的文件夹，命名为wordstrap：

接下来，我们将为它创建一个style.css文件。此文件也像是一个清单文件。
我们需要添加我们的注释，然后添加一个名为Theme Name的Wordstrap。然后我们需要添加Author名称、Author URI、Description和Version，如下面的代码块所示：

      /*
      Theme Name: Wordstrap
      Author: Brad Traversy
      Author URI: http://eduonix.com
      Description: Simple Bootstrap Theme For Wordpress
      Version: 1.0
      */

保存它，然后让我们创建一个index.php文件。
如果我们转到外观 | 主题，我们可以看到我们现在有了这个 wordstrap 主题：

现在，我们将一个图像文件放在theme文件夹中。你可以从你的项目文件中取任何图像。非常简单，让我们继续重新加载。我们有 wordstrap 主题，它非常简单。
现在，让我们进入index.php并添加一些基本的 HTML 标签：<head>、<title>和<body>。我们将添加Wordstrap作为标题：

      <!DOCTYPE html>
      <html>
      <head>
         <title>Wordstrap</title>
      </head>
      <body>

      </body>
      </html>

接下来，我们需要 Bootstrap。让我们继续前进并获取它。转到getbootstrap.com/并下载它：

打开下载的 ZIP 文件和我们的theme文件夹。
现在，在wordstrap文件夹内创建一个css文件夹。我们将现在将bootstrap.css文件移动过来。
然后，我们将创建一个js文件夹并将bootstrap.js文件移动过来。
现在，让我们回到index.php文件并包含几个<link>标签。为此，我们将添加以下代码：

      <!DOCTYPE html>
      <html>
      <head>
         <title>Wordstrap</title>
         <link rel="stylesheet" href="">
      </head>

现在，我们将进入css文件夹和bootstrap.css。接下来，我们还想确保包含主样式表。为此，Bootstrap 提供了一个我们可以使用的函数。我们将添加stylesheet然后是href。我们还可以添加一些php标签，添加bloginfo，这里我们只想放入stylesheet_url。现在它将带来所有系统样式表：

      <!DOCTYPE html>
      <html>
      <head>
         <title>Wordstrap</title>
         <link rel="stylesheet" href="./css/bootstrap.css">
         <link rel="stylesheet" href="<?php 
            bloginfo('stylesheet_url'); ?>">
      </head>
      <body>

现在，我们想要获取一个导航栏。

因此，在 Bootstrap 网站上，让我们转到组件然后是 navbar：

让我们复制以下截图所示的整个代码示例：

我们将把它粘贴到index.php文件的body部分。
保存它，然后让我们继续激活主题。
现在，让我们转到前端并重新加载：

它看起来像这样是因为它没有看到bootstrap.css文件。

让我们看看源代码。你可以看到前端正在查看/css/bootstrap，但实际上这个文件在themes文件夹中：

为了解决这个问题，我们将回到index.php。让我们更新<link>标签的代码如下：

      <link rel="stylesheet" href="<?php 
         bloginfo('template_directory'); ?>/css/bootstrap.css">
      <link rel="stylesheet" href="<?php 
         bloginfo('stylesheet_url'); ?>">

我们将保存它，返回，并查看它是否工作：

为了稍微改变导航栏，我们将缩进 <nav> 标签。
现在，我们将大量删除代码。首先，我们将删除 fluid；我们希望它只是 container：

      <div class="container">

我们将删除我们不需要的注释。
然后，我们有 navbar-header 类。这个按钮是为了响应式设计。所以当它在移动设备或一般较小的屏幕上时，我们将有一个可以点击的按钮，然后显示菜单，所以我们将保留所有这些内容：

      <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" 
           data-toggle="collapse" data-target="#bs-example-navbar-
           collapse-1" aria-expanded="false">

对于品牌，让我们稍微改变一下代码。我们希望它反映我们在 WordPress 中的网站名称。我们将添加 <?php bloginfo(); ?> 并传递 name。对于 href，我们将添加 <?php bloginfo(); ?> 链接并放入 url：

      <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
       <?php bloginfo('name'); ?></a>

然后，我们有 <ul> 标签，我们将在这里实现 wp-nav-walker 类。为此，我们只需移除整个 <ul>。
然后，我们有我们的表单，即搜索表单。它将几乎完全重做，所以我们将从 <form> 标签中移除所有内容。
然后，我们将移除带有 nav navbar-nav navbar-right 类的整个 <ul>。
这里是整个 nav：

      <nav class="navbar navbar-default">
      <div class="container">

      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 
       data-toggle="collapse" data-target="#bs-example-navbar-
       collapse-1" aria-expanded="false">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
      <?php bloginfo('name'); ?>
      </a>
      </div>

      <div class="collapse navbar-collapse" 
       id="bs-example-navbar-collapse-1">

      <form class="navbar-form navbar-left">

      </form>

      </div>
      </div>
      </nav>

我们现在暂时不处理这个，看看它是什么样子：

如您所见，它非常基础。我们只有我们的品牌，我们稍后会实现 walker-nav 或 nav-walker 类；但让我们继续添加一些基本的 HTML。

我们将在 </nav> 结束标签下方创建一个 <div> 标签，并给它一个类名为 container，同时添加 index。我们还将添加一行，因为我们将使用 Bootstrap 的网格系统。在 row 类内部，我们将使用 col-md-8 添加一个列，这将是一个 8 列的 div，我们还将有一个 4 列的 div，这将是一个侧边栏：

      <div class="container index">
         <div class="row">
            <div class="col-md-8">

            </div>
            <div class="col-md-4">

            </div>
         </div>
      </div>

所以在 8 列的 div 内，我们将使用 class="panel" 和 panel-default 添加一个面板：

      <div class="col-md-8">
        <div class="panel panel-default">

      </div>

接下来，我们将添加 panel-heading，在 panel-heading 中我们将有一个 <h3> 标签。我们将给它一个类名为 panel-title，并且给它标题 Blog Posts：

      <div class="panel panel-default">
         <div class="panel-heading">
 <h3 class="panel-title">Blog Posts</h3>
         </div>
      </div>

现在，在标题 </div> 下方，我们将添加 panel-body div。为此，我们想要一个名为 panel-body 的 div class。然后我们将使用 if(have_posts()) 添加文章循环，并使用以下代码块中显示的简写语法：

         <h3 class="panel-title">Blog Posts</h3>
      </div>
      <div class="panel-body">
 <?php if(have_posts()): ?>

 <?php endif; ?>
      </div>

然后，我们将添加如下代码块所示的 while 循环：

      <?php if(have_posts()): ?>
         <?php while(have_posts()) : the_post(); ?>

 <?php endwhile; ?>
      <?php endif; ?>

接下来，我们将添加两个列，一个用于图片，另一个用于所有数据。所以让我们添加一个名为 row 的类，然后我们将添加一个 div class，其值为 col-md-3。接下来，我们将添加 IMAGE HERE 并使用 col-md-9 添加九列。然后我们将使用 <h2> 添加 the_title()：

<?php while(have_posts()) : the_post(); ?>
   <div class="row">
 <div class="col-md-3">
 IMAGE HERE
 </div>
 <div class="col-md-9">
 <h2><?php echo the_title(); ?></h2>
 </div>

让我们保存一下：

如您所见，我们有一个 3 列的 div 用于放置图片，然后是一个 9 列的内容。我们将回头添加所有内容，但让我们先添加侧边栏代码。

添加侧边栏

这将是一个部件区域，为此，我们首先需要创建一个functions.php文件。我们需要注册我们想要的部件，这将只是侧边栏：

在index.php文件中，紧挨着div class的地方，我们将添加<?php。然后我们将使用if(is_active_sidebar)来检查这里是否有一个活跃的部件，并且如果需要实际的部件位置（这将是一个sidebar）：

      <div class="col-md-4">
         <?php if(is_active_sidebar('sidebar')) : ?>
      </div>

接下来，我们将添加<?php dynamic_sidebar(); ?>。我们还需要位置，这个位置是sidebar。它不必称为sidebar；你可以称它为你想要的任何名字：

      <?php if(is_active_sidebar('sidebar')) : ?>
         <?php dynamic_sidebar('sidebar'); ?>
      <?php endif; ?>

现在让我们保存一下。

添加页脚

现在让我们快速添加页脚：

在container div 下面，我们将创建另一个容器。在这个容器中我们将放置一条水平线以及<footer>标签。在<footer>内部我们将有一个段落和版权信息：

      <div class="container">
         <hr>
         <footer>
            <p>&copy; 2017 WordStrap</p>
         </footer>
      </div>

现在，我们还想包含两个东西：我们想要 jQuery 和 Bootstrap JavaScript 文件。我们将 JavaScript 文件放置在结束的</div>下面，如下面的代码所示。我们将粘贴 jQuery 脚本，它只是CDN（内容分发网络），以及bootstrap.js。我们还将使用<?php bloginfo('template_directory'); ?>，就像我们处理css文件时一样：

         </div>
         <script src="img/jquery-1.12.0.min.js">
         </script>
         <script src="img/bootstrap.js">
         </script>
      </body>
      </html>

让我们保存一下并重新加载：

头部和页脚

现在，让我们将这个分成一个头部文件、一个页脚文件以及index.php：

从index.php文件中，我们将从顶部向下抓取代码，直到</nav>的结尾。
让我们创建一个新的文件，命名为header.php。我们将把之前抓取的代码粘贴到这个头部文件中并保存。
在index.php中的相应位置，我们将使用get_header()打开一组php标签：

 <?php get_header(); ?>
         <div class="container index">

我们的页面看起来将完全一样。

然后，我们将对footer做同样的事情。我们将从这个container开始抓取代码，直到非常底部，从<div class="container">到关闭的</html>标签：

      <div class="container">
         <hr>
         <footer>
            <p>&copy; 2017 WordStrap</p>
         </footer>
     </div>
     <script src="img/jquery-1.12.0.min.js">
     </script>
     <script src="img/bootstrap.js">
     </script>
     </body>
     </html>

创建一个footer文件，粘贴抓取的内容，并保存。

在index.php中，我们将添加get_footer()：

      <?php get_footer(); ?>

好的，现在它应该看起来完全一样。这使事情变得稍微整洁一些。

帖子循环

所以到目前为止，我们继续设置了我们的核心模板，核心主题，包括index、header和footer文件。我们已实现了主要帖子循环，但我们没有其他东西。我们只有标题；我们需要修复这个问题。

但在我们这样做之前，我们需要确保我们实际上可以添加图片到我们的帖子中。

这是因为现在如果我们去尝试添加一个新的帖子，我们没有特色图片区域：

特色图片区域

为了让特色图片区域显示，我们需要创建一个functions.php文件：

让我们创建一个新的文件，并命名为functions.php。然后让我们创建一个名为theme_setup()的函数。现在，让我们添加一个注释特色图片支持，并添加add_theme_support()，其值为post-thumbnails：

      <?php

      function theme_setup(){
          // Featured Image Support
          add_theme_support('post-thumbnails');
      }

在函数声明下方，我们将放置 add_action() 并传递我们想要的钩子，它将是 after_setup_theme。然后我们将放置我们想要使用的函数，即 theme_setup：

      add_action('after_setup_theme', 'theme_setup');

让我们保存并刷新：

现在你可以看到我们有一个特色图片区域。

创建类别

所以让我们先创建几个类别，然后再添加文章。让我们添加“技术”、“食品”、“娱乐”和“商业”类别，如下面的截图所示：

我们现在只选择技术类别，并将标题设置为“博客文章一”。我们将像之前一样从 Lorem Ipsum 网站复制一些文本，并将其粘贴进来：

现在我们需要选择一个特色图片：

我们可以选择任何图片。在这种情况下，我选择了一张微软 Surface 的图片。点击“设置特色图片”然后发布：

返回并刷新页面：

你可以看到文章，但它看起来不太好。所以让我们再加一个。

同样，我们将添加“博客文章二”，粘贴一些文本，让我们选择“食品”类别，然后上传一张图片。我们将选择汉堡图片并点击发布。
我们现在有几篇文章可以工作：

我们在这里遇到了一个问题，因为我们把图片放在了文章的独立列中，而有些文章可能没有图片。例如，Hello world 文章就没有图片。所以我们需要有一种条件语句，如果这篇文章有图片，我们就以某种方式格式化它，然后放置一个 else 语句；如果没有图片，我们将以不同的方式格式化。

格式化文章

让我们进入我们的 index.php 文件。你可以看到我们的循环和行：

      <?php while(have_posts()) : the_post(); ?>
         <div class="row">
            <div class="col-md-3">
               IMAGE HERE
            </div>
            <div class="col-md-9">
               <h2><?php echo the_title(); ?></h2>
            </div>
         </div>
      <?php endwhile; ?>

在 row div 的右边，我们将检查是否有图片使用 if(has_post_thumbnail())，在 </div> 结束的地方添加 <?php else : ?> 和 <?php endif; ?>。

      <div class="row">
         <?php if(has_post_thumbnail()): ?>
         <div class="col-md-3">
            IMAGE HERE
         </div>
         <div class="col-md-9">
            <h2><?php echo the_title(); ?></h2>
         </div>
         <?php else : ?>

         <?php endif; ?>

如果有缩略图，它将显示三列和九列，如果没有缩略图，我们希望它是十二列全宽。为此我们将使用：

      <?php else: ?>
         <div class="col-md-12">
 IMAGE HERE
 </div>
      <?php endif; ?>

我们将从带有缩略图的文章开始。我们将移除文本“此处显示图片”。然后我们创建一个具有 post-thumbnail 类的 div，然后我们可以使用 the_post_thumbnail()：

      <div class="col-md-3">
         <div class="post-thumbnail">
         <?php the_post_thumbnail(); ?>
         </div>

让我们看看到目前为止的情况：

所以它显示了图片，它们非常大，但这没关系，功能是有的。

将文章包裹在 `<article>` 标签中

让我们将文章包裹在 <article> 标签中：

在 while 循环中直接添加 <article>，给它一个 post 类，并在结束 </div> 后结束它：

 <article class="post">
         <div class="row">
            <?php if(has_post_thumbnail()): ?>
               <div class="col-md-3">
                  <div class="post-thumbnail">
                  <?php the_post_thumbnail(); ?>
                  </div>
               </div>
               <div class="col-md-9">
                  <h2><?php echo the_title(); ?></h2>
               </div>
          <?php else : ?>
             <div class="col-md-12">

             </div>
          <?php endif; ?>
      </div>
      </article>

现在，打开 style.css 文件并添加 article.post img。我们将设置 width 为 100%。它将是其容器的 100%。我们还将设置 height 为 auto，并使用 margin-top:30px。

      article.post img{
          width:100%;
          height:auto;
          margin-top:30px;
      }

现在如果我们重新加载页面，我们会得到这个：

看起来好多了。

现在，让我们回到 index.php 文件。我们希望标题是一个链接。让我们直接跳到 <h2> 标签，并使用 echo the_permalink() 放入一个 <a> 标签。这应该是一个链接到那个帖子的链接：

      <h2>
         <a href="<?php echo the_permalink(); ?>">
            <?php echo the_title(); ?>
         </a>
      </h2>

现在，在 <h2> 标签下，我们将放置元数据。我们将在一个段落中添加它，并给它一个 meta 类。然后我们将添加“发布于”并使用 the_time() 函数获取时间。我们将使用“在”然后添加 the_date()。我们将打开一些 <strong> 标签，并使用 the_author() 函数添加作者的名字，这应该是一个函数：

      </h2>

      <p class="meta">
      Posted At
      <?php the_time(); ?> on 
      <?php the_date(); ?> by 
      <strong><?php the_author(); ?></strong>
      </p>

让我们确保它正常工作：

你可以看到它告诉我们时间、日期，以及作者。此外，这是一个链接，所以如果我点击它，它会带我们到那个页面或帖子。

添加帖子内容

现在我们想要的是摘要或内容，但不是全部。我们将使用 excerpt 类而不是 content，因为那样会截断内容。让我们开始吧！

我们希望仍然在九列的 div 中，所以我们将进入段落标签并添加 <div class="excerpt">。然后我们将添加 <?php echo get_the_excerpt(); ?>：

      </p>

      <div class="excerpt">
      <?php echo get_the_excerpt(); ?>
      </div>

让我们看看它是否有效：

看起来不错！

添加“阅读更多”按钮

现在，我们还需要一个“阅读更多”按钮：

我们将直接在摘要类下面，使用 Bootstrap 类的 btn 和 btn-default。然后我们将使用 href 并将其设置为 the_permalink()。对于文本，我们将说“阅读更多”，对于箭头符号，我们可以使用 »。我们还将在这个类上方添加一个换行符：

      <br>
      <a class="btn btn-default" href="<?php the_permalink(); ?>">
      Read More &raquo;
      </a>

重新加载并看看效果：

处理没有图片的帖子

所以现在我们想要处理那些没有图片的帖子。目前“Hello World”帖子没有图片，它没有显示出来，因为我们还没有在那儿添加任何代码。所以现在让我们检查缩略图：

这个 div 是放置没有图片的帖子代码的地方：

      <div class="col-md-12">
         <h2>
            <a href="<?php echo the_permalink(); ?>">
            <?php echo the_title(); ?>
            </a>
         </h2>

         <p class="meta">
         Posted at
         <?php the_time(); ?> on 
         <?php the_date(); ?> by 
         <strong><?php the_author(); ?></strong>
         </p>

        <div class="excerpt">
        <?php echo get_the_excerpt(); ?>
        </div>
        <br>
        <a class="btn btn-default" href="<?php 
          the_permalink(); ?>">
        Read More &raquo;
        </a>

现在我们可以有没有图片的帖子，而不仅仅是空空间：

如果我们没有使用条件语句，那么这就会在图片应该出现的地方留下一个空空间。

添加一些样式

现在我们将添加一点 CSS 来让帖子看起来更好一些：

让我们去 style.css 文件，并使用 article.post 为每个帖子的底部添加一个边框。边框将是灰色，solid，1px 宽。此外，让我们使用 padding-bottom: 20px 和 margin-bottom: 30px 添加一些内边距：

      article.post{
          border-bottom: #ccc solid 1px;
          padding-bottom: 20px;
          margin-bottom: 30px;
      }

让我们添加最后一个文章或帖子。我们不想为它添加边框。我们将添加article.post并使用last-child来定位最后一个，并将border-bottom设置为none：

      article.post:last-child{
          border-bottom:none;
      }

对于元数据，我们将使用article.post .meta添加一些样式，并给它一个浅灰色背景。我们还将添加一些填充，8px和12px。让我们添加一个颜色；我们将使用深灰色。

让我们保存它并重新加载：

现在看起来好多了。

在下一节中，我们将看到如何使用custom-walker类设置 navbar。

我们现在将看到如何使用wp-bootstrap-navwalker在 WordPress 主题中实现 Bootstrap navbar。这是一个非常流行的脚本，它将集成 navbar，以便你可以创建子项等。

显示菜单

前往www.github.com/twittem/wp-bootstrap-navwalker，我们将直接下载 ZIP 文件。打开 ZIP 文件，你会看到一个包含 PHP 文件的文件夹：

让我们打开我们的项目文件夹。我们将把 PHP 文件复制到我们的文件夹中。
打开functions.php文件，我们想要包含wp_bootstrap_navwalker.php文件，如下所示：

      <?php

      require_once('wp-bootstrap-navwalker.php');

      function theme_setup(){
          // Featured Image Support
          add_theme_support('post-thumbnails');
      }

      add_action('after_setup_theme', 'theme_setup');

正如你所见，我们使用了require_once()与wp_bootstrap_navwalker.php。保存它。

返回 GitHub 页面，我们将处理其用法。我们想在 navbar 中使用wp_nav_menu()函数。为此，让我们复制高亮部分：

进入我们的header文件，其中包含 navbar，进入包含collapse类的div，我们将粘贴以下代码块中的代码：

      <div class="collapse navbar-collapse" 
        id="bs-example-navbar-collapse-1">
         <?php
            wp_nav_menu( array(
            'theme_location' => 'primary',
            'depth' => 2,
            'container' => 'div',
            'container_class' => 'collapse navbar-collapse',
            'container_id' => 'bs-example-navbar-collapse-1',
            'menu_class' => 'nav navbar-nav',
            'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
            'walker' => new WP_Bootstrap_Navwalker(),
          ));
       ?>
       <form class="navbar-form navbar-left">

       </form>
       </div>

这基本上为我们定义了一组选项。我们不需要所有这些。我们将去掉一些东西。以下是更新后的代码：

      wp_nav_menu( array(
          'theme_location' => 'primary',
          'depth'          => 2,
          'container'      => false,
          'menu_class'     => 'nav navbar-nav',
          'fallback_cb'    => 'wp_bootstrap_navwalker::fallback',
          'walker'         => new wp_bootstrap_navwalker())
      );

我们有theme_location，它是primary，depth是2。我们将container设置为false。移除引号，container_class或container_id。现在保存它。

现在回到functions.php。现在让我们通过添加以下代码来注册我们的导航菜单：

 // Nav Menus
 register_nav_menus(array(
 'primary' => __('Primary Menu')
 ));
      }

      add_action('after_setup_theme', 'theme_setup');

在这个theme_setup中，我们有register_nav_menus()，它将接受一个数组，将被命名为primary。然后我们将它设置为__()，然后可读的名称将是Primary Menu。我们将保存它。

让我们回到后台，点击外观。你会看到菜单选项：

现在创建一个名为“关于”的额外页面并点击发布。让我们再创建一个，命名为“我们的团队”：

返回菜单页面，让我们看看这个菜单。让我们创建一个新的菜单并命名为“关于”：

确保你检查了主菜单选项，然后保存它：

前往我们的前端并重新加载。你现在会看到我们有了菜单，并且它工作正常：

现在让我们测试下拉功能。我们只需要选择“示例页面”和“我们的团队”，并将它们放在“关于”下面，如下面的截图所示：

保存菜单，返回，现在我们有一个下拉菜单：

所以你可以看到实现导航栏是多么简单，这绝对是你可以在其他项目中使用的东西，任何 Bootstrap WordPress 主题。

设置侧边栏

现在我们来设置侧边栏，以便我们可以添加侧边栏小工具：

在 add_action() 下的 functions.php 文件中，我们将创建一个名为 init_widgets() 的函数，它将接受一个 id。我们将添加 register_sidebar()，它将接受一个 array。然后我们有一系列选项，所以让我们添加 'name' => 'Sidebar' 和 'id' => 'sidebar'。

      // Widget Locations
      function init_widgets($id){
          register_sidebar(array(
              'name' => 'Sidebar',
              'id'   => 'sidebar'
          ));
      }

我们还可以在这里包含其他内容；例如，我们可以添加 'before_widget'：

      'id' => 'sidebar',
      'before_widget' => '<div class="panel panel-default">'

现在这样做的作用是允许我们在小工具渲染之前插入代码。我们需要这样做，因为我们希望小工具在 Bootstrap 面板内渲染，所以我们需要包含面板类。我们可以看到一个具有 panel 类的 div，还有 panel-default。

然后添加 'after_widget'，它将只是两个结束 div 标签：

'after_widget' => '</div></div>',

我们现在也有能力在标题前后添加内容。

要使用这个功能，我们将使用 'before_title'，这将包含一个具有 panel-heading 类的 div。我们还想包含 <h3> 标签，并给它一个 panel-title 类：

      'before_title' => '<div class="panel-heading">
        <h3 class="panel-title">',

最后，我们将添加 'after_title' 并结束 </h3> 和 </div>，然后我们还想开始 panel-body 类：

      'after_title' => '</h3></div><div class="panel-body">'

现在我们需要添加一个动作，所以我们将放置 add_action()。钩子将是 widgets_init，函数为 init_widgets：

      add_action('widgets_init', 'init_widgets');

保存它。如果我们现在进入后端并重新加载页面，你应该现在在“外观”下有“小工具”选项，也应该看到“侧边栏”：

现在让我们将“分类”包含进来，然后点击保存：

让我们看看这些是否渲染：

所以现在我们有我们的分类，你可以看到现在我们还有围绕它的面板。

让我们也将“最近的文章”包含进来，将显示的文章数改为 3，并将“最近评论”包含进来：

现在我们来看看我们的页面：

现在它们就在那里了！现在我们有一个问题，因为我想要分类以列表组的形式显示，这比这个格式更好。它们去掉了项目符号，添加了一些填充，并添加了一些边框。所以我们需要在我们的theme文件夹内创建这些小部件的自己的版本。

在theme文件夹内，我们将创建另一个名为widgets的文件夹。我们将通过文件管理器进入这个文件夹。现在转到wp-includes | widgets。你将在这里看到所有的核心小部件文件：

我们想要获取分类、最近的评论和最近的帖子。我们将复制（确保不要剪切，而是复制）并将它们粘贴到我们的widgets文件夹中。
现在我们从分类开始。让我们通过 Sublime Text 打开它。在这里我们将更改类名：在前面加上一个_然后是Custom。

      class WP_Widget_Categories_Custom extends WP_Widget {

接下来，我们将更改<ul>和<li>标签的类名。我们将添加 Bootstrap 类。为此，我们将向<ul>标签添加class="list-group"：

      <ul class="list-group">

现在我们还希望列表项具有list-group-item类，但按照这种方式设置，我们无法从内部访问列表项标签。所以我们需要在functions.php文件中进行一些定制。

所以让我们打开function.php文件，到达底部，首先添加一个注释：向分类的 li 添加'list-group-item'，这样我们就能知道它是做什么的。然后我们添加函数add_new_class_list_categories()：

      // Adds 'list-group-item' to categories li
      function add_new_class_list_categories(){

我们将通过添加$list = str_replace()来传递一个变量，然后我们添加cat-item，这是原始的类名，但我们要更改它。现在我们仍然希望它具有cat-item类，因为它需要这个类，但我们还希望添加list-group-item class。然后我们只需要返回列表。

      function add_new_class_list_categories($list){
      $list = str_replace('cat-item', 'cat-item list-group-item', 
        $list);
      return $list;

现在我们将添加add_filter()而不是添加动作。基本上，动作用于添加某些内容，而过滤器用于更改某些内容。所以让我们使用add_filter('wp_list_categories')然后放置我们函数的名称：

      add_filter('wp_list_categories', 
        'add_new_class_list_categories');

我们还没有摆脱这些小部件；我们必须注册它们。所以在做之前，我们需要在顶部包含它们或使用require。所以我们将添加require_once()。它将是widgets文件夹，然后我们只需要包含每个小部件。我们将使用class-wp-widget-categories.php：

      require_once('widgets/class-wp-widget-categories.php');

我们不妨包括所有这些。所以我们将获取最近的帖子以及最近的评论：

      require_once('widgets/class-wp-widget-recent-posts.php');
      require_once('widgets/class-wp-widget-recent-comments.php');

现在我们需要注册。

在底部，我们将添加function wordstrap_register_widgets()。我们还需要类名，所以我们添加'WP_Widget_Recent_Posts_Custom'。下一个将是'WP_Widget_Recent_Comments_Custom'。最后一个将是添加'WP_Widget_Categories_Custom'：

      //Register Widgets
      function wordstrap_register_widgets(){
          register_widget('WP_Widget_Recent_Posts_Custom');
          register_widget('WP_Widget_Recent_Comments_Custom');
          register_widget('WP_Widget_Categories_Custom');
      }

现在我们添加另一个add_action()，这将是'widgets_init'，然后我们只需要函数名：

      add_action('widgets_init', 'wordstrap_register_widgets');

让我们保存并重新加载页面：

我们得到一个错误：无法声明类Recent_Posts。所以让我们验证一下我们的代码：

      class WP_Widgets_Recent_Posts_Customs extends WP_Widget {
      class WP_Widgets_Recent_Comments_Customs extends WP_Widget {

所以这些也应该有_Custom。现在重新加载页面：

所以我们现在已经注册了所有小工具，并且分类现在有了list-item类，看起来不错。我们还想将这些类添加到最近帖子中，以及最近评论，这样我们就不会看到项目符号，而是看起来像分类一样。

所以让我们去我们的class-wp-widget-recent-posts.php小工具文件，并找到<ul>标签。我们只需添加一个list-group类，然后<li>标签将有一个list-group-item类：

 <ul class="list-group">
      <?php foreach ( $r->posts as $recent_post ) : ?>
         <li class="list-group-item">

让我们重新加载页面；看起来不错！

现在，让我们转到class-wp-widget-recent-comments.php。我们将给<ul>添加一个list-group类，然后对于<li>标签，我们将添加一个list-group-item类：

      $output .= '<ul class="list-group" id="recentcomments">';
      if(is_array($comments) && $comments){
      $post_ids = array_unique(wp_list_pluck($comments, 'comment_post_ID'));
      _prime_post_caches($post_ids, strpos(get_option('permalink_structure'), 
      '%category'), false);
      foreach((array) $comments as $comment){
          $output .= '<li class="list-group-item recentcomments">';

保存，重新加载，就这样：

所以现在我们有一些自定义小工具。如果你想，你可以让小工具看起来完全不同，这只会影响当你加载主题时的小工具，这样你就不会编辑任何核心 WordPress 代码。我们已经设置了导航栏以及侧边栏小工具。

添加搜索栏和单个帖子页面

所以让我们开始吧。

处理搜索框

去我们的header文件，找到文件底部的空表单，并给它添加一些内容。我们首先会添加一个方法，这个方法是get。我们实际上可以改变类从左到右。我们还需要添加一个操作。为此，我们将使用php标签并添加echo esc_url()。

这是因为我们想要检查和转义 URL。我们将使用home_url并加上一个/：

<form method="get" class="navbar-form navbar-right" 
 role="search" action="<?php echo esc_url(home_url('/')); ?>">

基本上，我们只是提交到主页 URL。

现在关于字段，我们只想为搜索添加一个字段，但让我们添加一个标签。所以我们将添加<label for="navbar-search"并给它一个sr-only类。接下来，让我们添加<?php _e('Search')，这只是对_e的本地化。然后我们需要textdomain的第二个参数。然后关闭那些php标签，并在</label>标签下添加<div class="form-group">。在 div 类中我们将有一个输入框。我们将给它一个类型为text的类，并给它一个form-control类，这是一个 Bootstrap 类。让我们添加一个名为s的搜索名称，并给它一个id为navbar-search：

      <label for="navbar-search" class="sr-only">
      <?php _e('Search', 'textdomain'); ?></label>
      <div class="form-group">
      <input type="text" class="form-control" name="s" 
        id="navbar-search">
      </div>

然后我们需要提交。所以我们将添加一个类型为submit的按钮，并给它一个btn和btn-default的类：

      <button type="submit" class="btn btn-default">
      <?php _e('Search', 'textdomain'); ?>
      </button>

让我们保存它。

现在，让我们搜索lorem，它给出了这些结果：

你也可以尝试搜索单词one或two。

现在我们有了搜索栏，我们最后需要做的是单个帖子。

处理单个帖子页面

让我们在主题根目录下创建一个文件，并将其保存为single.php。
现在在创建这个文件时，如果我们点击这些博客文章中的任何一个，它将完全为空，因为它会自动查看single.php页面。
现在，我们将复制index.php文件中的所有内容，并将其粘贴到single.php文件中。保存并重新加载页面；它看起来与索引页完全一样：

让我们进去并更改一些内容。首先，让我们删除if(has_post_thumbnail())。现在向下到说 else 的地方，并从那里剪切到实际的if语句。

我们还将删除endif，因为我们将以不依赖于图片是否存在的方式来格式化它。
我们想要图片，所以我们将将其放在下面，直接在结束的</h2>标签下方：

      <?php if(has_post_thumbnail()): ?>
         <div class="post-thumbnail">
            <?php the_post_thumbnail(); ?>
         </div>
      <?php endif; ?>

我们将添加缩略图或特色图片，如果有的话。让我们保存并看看它看起来像什么：

现在我们有了大图片，让我们在它下面也添加一个换行符<br>。

      <?php endif; ?>
      <br>

我们不想要“阅读更多”，我们想要完整的内容而不是摘录。

所以让我们去掉“阅读更多”，而不是使用get_the_excerpt()，我们使用the_content()。我们还将删除echo。让我们也将类更改为content：

      <div class="content">
      <?php the_content(); ?>
      </div>

保存并重新加载：

现在它也渲染了 HTML。所以这就是单页。

接下来，我们还将处理评论功能。

评论功能

我们最后需要做的是在我们的单篇帖子页面添加一些评论功能：

让我们进入single.php并向下。我们想要在面板体中完成，所以它就在那里显示。
让我们创建一个评论模板并添加comments_template()：

         <?php endif; ?>
         <?php comments_template(); ?>
      </div>

我们将保存并创建一个新文件。我们将将其保存为comments.php。

这需要在你的theme文件夹中，然后如果我们在这里输入一些内容，我们将说TEST。

如果我们保存并重新加载，你可以看到我们得到了 TEST：

现在，让我们创建一个带有comments类的div，并添加<?php if(have_comments); ?>。

我们还添加了带有comments_title类的标题<h3>。我们将添加if(get_comments_number() == 1)。我们这样做是因为如果只有一个评论，我们应该得到单数评论，如果有多个，那么它应该说是评论。
因此，我们正在检查是否有一个评论，如果有，那么我们将echo get_comments_number()，然后只是连接单词Comment。然后我们将添加一个else，并在末尾这里添加一个Comments：

      <div class="comments">
      <?php if(have_comments()): ?>
         <h3 class="comments-title">
         <?php
             if(get_comments_number() == 1){
                 echo get_comments_number(). ' Comment';
             } else {
                 echo get_comments_number(). ' Comments';
             }
         ?>
         </h3>

所以那将是标题。

然后在</h3>标签下，我们将有一个<ul>标签，给它一个row和comment-list类。我们将添加wp_list_comments()，这将传递一个数组。我们还将使用头像，所以让我们添加avatar_size并将其设置为90。我们还有一个callback，我们也要创建。

为了这个，我们将添加add_theme_comments，这将放在functions.php文件中。

      <ul class="row comment-list">
      <?php
          wp_list_comments(array(
              'avatar_size' => 90,
              'callback'    => 'add_theme_comments'
          ));
      ?>
      </ul>

现在，我们有几个大块的代码需要使用：

      <?php if(!comments_open() && '0' != get_comments_number() && 
        post_type_supports(get_post_type(), 'comments')) : ?>
         <p class="no-comments"><?php _e('Comments are closed.', 
          'dazzling'); ?>
         </p>
      <?php endif; ?>
      </div>

上述代码将检查评论是否已关闭，如果是，则我们可以留下一个简短的注释。

现在，让我们进入这个div下面，并添加一条水平线。然后我们需要创建我们的评论参数并创建表单：

      <hr>
      <?php
          $comments_args = array(
          // change the title of send button
          'label_submit'=>'Send',
          // change the title of the reply section
          'title_reply'=>'Write a Reply or Comment',
          // remove "Text or HTML to be displayed after the set of comment 
          //fields"
          'comment_notes_after'=>'',
          // redefine your own textarea (the comment body)
          'comment_field'=>'<p class="comment-form-comment">
          <label for="comment">' ._x('Comment', 'noun') . '</label><br/>
          <textarea class="form-control" id="comment" name="comment" 
           aria-required="true">
          </textarea></p>',
          );
      comment_form($comments_args);

我们有一个名为comment_args的变量，它被设置为包含许多不同值的数组。你可以有你的提交按钮标签、回复标题、注释和类似的东西。然后在代码文件中，我们还在调用comment_form()函数并传递这些参数。

保存并重新加载。现在如果我们去检查，你可以看到这里有一个表单。让我们试着添加一些内容：

点击发送：

现在在这里发生的事情是，它正在寻找我们指定的回调。它就在add_theme_comments中，如所示：

      <?php 
          wp_list_comments(array(
              'avatar_size' => 90,
              'callback' => 'add_theme_comments'
          ));
      ?>

它正在寻找回调但找不到。所以让我们进入functions.php并修复它。

我们将按照所示粘贴代码：

      // Add Comments
      function add_theme_comments($comment, $args, $depth){
          $GLOBALS['comment'] = $comment;
          extract($args, EXTR_SKIP);

          if('div' == $args['style']){
              $tag = 'div';
              $add_below = 'comment';
          } else {
              $tag = 'li class="well comment-item"';
              $add_below = 'div-comment';
          }

所以我们有一个名为add_theme_comments()的函数，它应该与你的回调相匹配。然后我们传递comment、args和depth。正如你所见，我们在下面添加了一些标签和类，以便我们可以进行样式化。

现在，我们还会发布一些其他内容。为此，让我们添加以下代码：

      <<?php echo $tag ?>
      <?php comment_class(empty($args['has_children']) ? '' : 'parent') ?> 
        id="comment-<?php comment_ID() ?>">
      <?php if('div' != $args['style']) : ?>
      <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
      <?php endif; ?>

      <div class="col-md-2">
      <div class="comment-author vcard">
      <?php if($args['avatar_size'] != 0) 
        echo get_avatar($comment, $args['avatar_size']); ?>
      <?php printf(__('<cite class="fn">%s</cite>'), 
         get_comment_author_link()); ?>
      </div>
      </div>

      <div class="col-md-10">
      <?php if($comment->comment_approved =='0') : ?>
      <em class="comment-awaiting-moderation">
      <?php _e('Your comment is awaiting moderation.'); ?></em>
      <br/>
      <?php endif; ?>

      <div class="comment-meta commentmetadata">
      <a href="<?php echo htmlspecialchars(get_comment_link
         ($comment->comment_ID)); ?>">
      <?php
         printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()); ?></a>
      <?php edit_comment_link(__('(Edit)'), ' ', ''); ?>
      </div>
      <?php comment_text(); ?>

      <div class="reply">
      <?php comment_reply_link(array_merge($args, array
       ( 'add_below' => $add_below, 'depth' => 
         $depth, 'max_depth' => $args['max_depth'] )));
      ?>
      </div>
      </div>

     <?php if('div' != $args['style']) : ?>
     </div>
     <?php endif; ?>
     <?php
     }

你可以从 WordPress 文档中获取代码（codex.wordpress.org/Function_Reference/wp_list_comments）。

所以这段代码将给你正确的功能。

让我们继续保存代码并看看会发生什么：

现在，让我们打开style.css和名为comment-item的类。所以在代码中我们添加.comment-item并将overflow设置为auto。我们还将添加comment-list并将list-style设置为none和margin设置为0。然后我们将其标记为重要并将padding设置为0：

      .comment-list{
          list-style: none;
          margin:0 !important;
          padding:0 !important;
      }

      .comment-item{
          overflow:auto;
      }

看起来相当不错。我们可以回复并留下评论，这真的很棒。所以这就完成了，我们已经完成。现在我们有一个带有 Bootstrap 的 WordPress 主题，你可以将其用作基础主题来创建其他 Bootstrap 主题。你可以使用navbar-walker，这非常有帮助。

摘要

太棒了！在本章中，我们看到了如何构建一个 Twitter Bootstrap WordPress 主题。我们处理了如分类、最近的文章和最近的评论等小工具，使它们与 Bootstrap 主题相匹配。

我们还处理了帖子循环，并为其包含了元数据。我们了解了如何设置导航栏以及侧边栏小工具。我们还添加了搜索框并构建了单页。我们还处理了评论功能——评论部分和表单。我希望你喜欢这一章。

第五章：基础电子商务主题

在本章中，我们将构建一个电子商务主题或在线商店主题。我们不会有购买产品的完整功能，只是主题，我们将看看如何格式化它，使帖子看起来更像产品页面。

以下截图是我们将要创建的首页。我们有一个页眉（MyShop），一个自定义图片的位置（这将通过主题自定义器提供，因此您可以上传它），页面的右上角是我们的菜单，一个展示小部件（这是位于页眉下方的大矩形空间，MyShop 带有标题——折扣服装，一些文本和阅读更多），我们还可以看到我们实际上可以编辑哪些内容。如果我们滚动页面（在展示小部件矩形下方），我们有主要帖子循环，但我们将其格式化为看起来更像电子商务网站。

最后，我们在页面的右侧有一些侧边小部件：

现在，如果我们点击某个产品的详细信息，例如黑色衬衫，它将带我们到产品页面（如以下截图所示）。它有图片、标题、文本、价格，然后是一个立即购买按钮。此外，我们在立即购买按钮下方有标签，如以下截图所示：

此外，如果我们转到蓝色与白色衬衫，我们可以看到我们有一些图片，因此我们可以包括一个图片库，我们将看到如何做到这一点：

页面本身非常简单。我们只有一个关于页面，包含标题和标题，样本页面也是如此。如果我们进入页面的后端并进入帖子，我们可以看到我们拥有的不同产品。点击粉色衬衫产品；我们包含了文本、价格和按钮。如果我们向下滚动，在右下角我们可以看到我们正在使用特色图片。

对于展示，如果我们前往外观 | 小部件，我们可以在展示中看到展示小部件，这实际上是一个我们创建并将在主题中使用的自定义小部件。我们还有页面的右侧边栏，包含分类和文本小部件。现在对于画廊，如果我们转到蓝色衬衫产品并点击添加媒体，我们可以转到创建画廊并选择一些图片，继续上传该画廊。如果我们点击视觉，您可以看到它，并且我们可以通过点击以下截图中的编辑图标来整体编辑它：

这非常简单。这并不是你见过的最好的在线商店，但它确实有一些非常重要的功能。对于标志，我们可以通过前往外观 | 自定义 | 网站身份来切换它，然后您将看到标志选项，我们可以从那里删除它。我们还可以更改它并更新我们的标题和标语。

电子商务 HTML 模板 – 第一部分

我们首先构建一个直接的 HTML 模板，然后继续集成它，并使其成为一个 WordPress 主题。让我们继续创建一个用于此模板的文件夹，我们将称之为myshop_html。现在让我们从foundation.zurb.com下载 Foundation。点击“下载 Foundation 6”按钮，这将带您到下载页面。现在，点击“完整”下的“下载一切”：

现在，我们将打开下载的 ZIP 文件，将所有内容全部取出，移动到我们的myshop_html文件夹中：

现在如果我们用我们想要的网络浏览器打开index.html，我们将看到我们基本上有一个模板：

CSS 已经实现，JavaScript 也应该实现，所以让我们打开我们的编辑器中的index.html。我们将通过这个index.html的代码，并替换我们需要的内容。让我们打开我们创建的myshop_html文件夹中的CSS文件夹内的 CSS 文件app.css。我们的 CSS 文件中没有内容；唯一的样式是核心基础样式。

我们还有一些需要上传的图片（你将随代码包一起获得这些图片），因此我们将创建一个名为img的新文件夹，并将这些图片粘贴到img文件夹中。如果我们看一下这些图片，我们有logo.jpg和一些衣服。

我们有一堆衬衫和一顶帽子。蓝色衬衫有多个图片，因为我们将实现一个迷你相册，所以这些都是我们需要的所有图片：

让我们回到index.html文件。头部可以保持原样；我们正在链接我们的 CSS 文件，我们的视口已经设置。在<body>标签中，你会看到我们正在使用 XY 网格系统。第一个<div>标签有一个grid-container类。网格将默认为可用空间的全部宽度。为了包含它，我们使用grid-container类。在这下面，我们有一个带有两个类——grid-x和grid-padding-x的<div>标签：

<body>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="large-12 cell">
        <h1>Welcome to Foundation</h1>
      </div>
    </div>

我们将把这个<div>改为<header>，并将large-12的div改为large-6的div，如下面的代码片段所示：

<body>
  <div class="grid-container">
    <header class="grid-x grid-padding-x">
 <div class="large-6 cell">
        <img src="img/logo.jpg">
      </div>
    </header>

重新加载index.html页面，你将看到我们的标志：

接下来，添加第二个<div>标签。这将包含我们的导航菜单：

<header class="grid-x grid-padding-x">
  <div class="large-6 cell">
    <img src="img/logo.jpg">
  </div>
  <div class="large-6 cell">
 <ul class="menu simple main-nav">
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="index.html">Services</a></li>
 </ul>
 </div>
</header>

让我们保存它并重新加载网页：

菜单的样式来自核心基础文件。我们将添加一些其他样式；例如，我们将它向下推，将它推过去，但我们将在 HTML 之后进入 CSS。

接下来，我们将对展示区域进行相当大的改动。我们将向带有grid-x和grid-padding-x类的<div>标签添加showcase类。我们将保持 12 个单元格和callout div 不变，但我们将添加一个名为secondary的类，这将使其变为灰色。移除其中的所有内容。在secondary类 div 内部，我们将有一个h1，上面写着Discount Clothing，然后我们将粘贴一个段落和一个button，如下面的代码所示：

</header>
  <div class="grid-x grid-padding-x showcase">
    <div class="large-12 cell">
      <div class="callout secondary">
        <h1>Discount Clothing</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
           Phasellus id vestibulum nulla. Maecenas ultricies 
           at urna nec pellentesque. 
           Integer pharetra orci in est viverra rutrum. 
           Nunc ullamcorper tincidunt sapien at fringilla</p>
 <button class="button">Start Shopping</button>
 </div>
    </div>
  </div>

现在，你将看到展示区域，它出现在网页中 MyShop 标志下方：

我们将在段落之后添加一些更多样式，所以不用担心。如果我们滚动到我们的编辑器中，我们还有一个带有grid-x grid-padding-x类的 div，这个 div 有一个 8 个单元格的div，这是主要区域：

然后，在底部下方有一个 4 个单元格的div，这是侧边栏：

我们将完全清除这些 div。现在我们有一个清除的 8 个单元格 div 和一个 4 个单元格的侧边栏 div。接下来，对于产品，我们将在 8 个单元格 div 内部添加一个<div>标签，并给它一个名为products的类。

在这个 div 内部，我们将添加 4 个单元格的 div，并给它们一个名为large-4 medium-4 small-12 columns product end的类。我们将添加标题、价格和图片，然后放入一个按钮。这就是我们第一个产品 div 的外观：

<div class="grid-x grid-padding-x">
  <div class="large-8 medium-8 cell">
    <div class="grid-x grid-padding-x">
      <div class="products">
        <div class="large-4 medium-4 small-12 cell product end">
          <h3>Blue Shirt</h3>
          <h4>$9.99</h4>
          <img src="img/shirt_blue_white.jpg">
          <button class="button">Details</button>
        </div>
      </div>
    </div>
  </div>

当我们处理 WordPress 主题时，与 HTML 主题相比，可能会有一些不同，因为我们在放置内容的地方有一些限制。所以请记住，可能会有一些细微的差异。

现在，让我们复制 4 个单元格的 div，多次粘贴它。我们只需稍微改变内容，以添加所有衬衫：

<div class="grid-x grid-padding-x">
  <div class="large-8 medium-8 cell">
    <div class="grid-x grid-padding-x">
      <div class="products">
        <div class="large-4 medium-4 small-12 cell product">
          <h3>Blue Shirt</h3>
          <h4>$9.99</h4>
          <img src="img/shirt_blue_white.jpg">
          <button class="button">Details</button>
        </div>
        <div class="large-4 medium-4 small-12 cell product">
          <h3>Red Shirt</h3>
          <h4>$19.99</h4>
          <img src="img/shirt_red.jpg">
          <button class="button">Details</button>
        </div>
        <div class="large-4 medium-4 small-12 cell product end">
          <h3>Grey Shirt</h3>
          <h4>$11.99</h4>
          <img src="img/shirt_grey.jpg">
          <button class="button">Details</button>
        </div>
        <div class="large-4 medium-4 small-12 cell product end">
          <h3>Orange Shirt</h3>
          <h4>$9.99</h4>
          <img src="img/shirt_orange.jpg">
          <button class="button">Details</button>
        </div>
        <div class="large-4 medium-4 small-12 cell product end">
          <h3>Black Shirt</h3>
          <h4>$9.99</h4>
          <img src="img/shirt_black.jpg">
          <button class="button">Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

现在，重新加载index.html页面：

对于侧边栏，我们将向下移动到 4 个单元格的 div，并添加以下代码：

<div class="large-4 medium-4 cell">
  <div class="callout">
    <h3>Categories</h3>
    <ul class="menu vertical">
      <li><a href="#">Shirts</a></li>
      <li><a href="#">Pants</a></li>
      <li><a href="#">Hats</a></li>
      <li><a href="#">Shoes</a></li>
    </ul>
  </div>
  <br>
  <div class="callout">
    <h5>Sidebar heading</h5>
    <p>A whole kitchen sink of goodies comes with Foundation. 
       Check out the docs to see them all, along with details on 
       making them your own.</p>
    <a href="http://foundation.zurb.com/sites/docs/" class="small button">
    Go to Foundation Docs</a>
  </div>
</div>

我们给这个 div 添加了一个名为callout的类，它提供了边框和一些填充。我们还添加了Categories标题和带有menu和vertical类的<ul>标签。我们将在它下方再添加一个侧边栏小部件，带有标题和一些文本。这就是我们的侧边栏将看起来像的样子：

现在，我们将向下移动到非常底部，紧挨着脚本标签上方，创建我们的页脚。我们的页脚将只是一个段落，我们将放置版权信息。页脚的代码如下：

<footer>
  <p>&copy; 2017, MyShop</p>
</footer>

这就是index.html页面的全部内容！现在我们将继续到详情页面，显然我们将在第二部分修复 index 和详情页的其余部分，在那里我们将进行 CSS 设计。

让我们回到我们的myshop_html文件夹，创建一个名为details.html的新文件。复制index.html的代码并将其粘贴到details.html文件中。现在转到主区域，8 单元格 div。我们将把products类改为single-product，删除所有产品，并将 4 单元格 div 改为 12 单元格 div：

<div class="large-8 medium-8 cell">
  <div class="grid-x grid-padding-x">
    <div class="single-product">
      <div class="large-12 medium-12 small-12 cell product end">

      </div>
    </div>
  </div>
</div>

现在在刚刚更新的 12 单元格 div 内部，我们将再添加两个列。以下是 12 列 div 经过一些更改后的新代码：

<div class="large-8 medium-8 cell">
  <div class="grid-x grid-padding-x">
    <div class="single-product">
      <div class="large-12 medium-12 small-12 cell product end">
        <div class="large-5 medium-5 small-5 cell product end">
 </div>
 <div class="large-7 medium-7 small-7 cell product end">
 </div>
      </div>
    </div>
  </div>
</div>

如前述代码所示，我们有一个 5 单元格的 div，我们将在此添加图片，以及一个 7 单元格的 div，它将包含内容。以下是我们的最终代码将看起来像这样：

<div class="large-8 medium-8 cell">
  <div class="grid-x grid-padding-x">
    <div class="single-product">
      <div class="large-12 medium-12 small-12 cell product end">
        <div class="grid-x grid-padding-x">
          <div class="large-5 medium-5 small-5 cell product end">
            <a href="index.html">Go Back</a>
            <img src="img/shirt_blue_white.jpg">
          </div>
          <div class="large-7 medium-7 small-7 cell product end">
            <h2>Blue & Shirt</h2>
            <h4>Price: $9.99</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               Phasellus id vestibulum nulla. Maecenas ultricies at 
               urna nec pellentesque. Integer pharetra orci in est viverra 
               rutrum. Nunc ullamcorper tincidunt sapien at fringilla</p>
            <button class="button">Buy Now</button>
            <hr>
            <div class="tags"><strong>Tags:</strong>Shirt, Blue Shirt, 
               White Shirt</div>
          </div> 
        </div>
      </div>
    </div>
  </div>

由于我们希望 5 单元格和 7 单元格的 div 在单行中，我们在 12 单元格的 div 中添加了一个具有grid-x和grid-padding-x类的 div。

现在，让我们重新加载details.html页面：

到目前为止，我们的网页看起来还不错。

现在，我们还将创建一个关于页面，只是为了表示一个不是产品页的正常页面。让我们再次回到我们的myshop_html文件夹，并创建一个新文件，我们将命名为about.html。在编辑器中打开它，现在我们将复制details.html文件中的所有内容。然后我们转到主区域，而不是有一个 5 单元格和一个 7 单元格，我们将只有一个 12 单元格的 div。关于部分的代码如下：

<div class="large-12 medium-12 small-12 cell product end">
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
     reprehenderit in voluptate velit esse cillum dolore eu 
     fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est 
     laborum.</p>

  <p>Ex soleat habemus usu, te nec eligendi deserunt vituperata. 
     Natum consulatu vel ea, duo cetero repudiare efficiendi cu. Has at 
     quas nonumy facilisis, enim percipitur mei ad. 
     Mazim possim adipisci sea ei, omnium aeterno platonem mei no. 
     Consectetur adipiscing elit, sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
     ea commodo consequat.</p>  
</div>

让我们去网页的关于部分，我们就可以看到，只有一些文本和标题：

电子商务 HTML 模板 – 第二部分

我们已经完成了 HTML 部分，但还需要处理 CSS 部分。让我们打开app.css文件，如果我们查看模板，我们需要从核心样式开始。

现在我们将注意到，按钮和链接默认是蓝色的。我们实际上想将其改为红色。我们将a标签，写color，这将是一个值为ec2c2f的值，这将给它红色。现在我们还想让按钮有一个红色的背景色。比如说，我们还想给按钮底部加一点边框。所以，我们将使用border-bottom: 3px #333solid;。

现在当我们将鼠标悬停在按钮上时，你会看到它变成了蓝色，链接也是如此：

为了解决这个问题，让我们使用以下代码：

a{
    color: #ec2c2f;
}

a:hover{
    color: #333;
}

.button{
    background:#ec2c2f;
    border-bottom: 3px #333 solid;
}

.button:hover{
    background:#333;
}

让我们保存文件并重新加载页面。现在你会看到按钮和链接即使在悬停时也是红色的：

让我们现在处理主页、关于和服务的链接位置。我们希望它们在页面的右上角。以下是实现此目的并修改一些字体大小的代码：

header .main-nav{
    float:right;
    margin-top: 30px;
    font-size: 18px;
}

header .main-nav li{
    padding-right:20px;
}

让我们重新加载页面并查看更改：

让我们也给底部的页眉留一点边距：

header{
    margin-bottom: 20px;
}

重新加载页面，你应该会看到这样的内容：

接下来，让我们做展示区域。为此，使用以下代码：

.showcase .callout{
    text-align: center;
    padding: 30px;
    margin-bottom: 20px;
}

现在你将看到以下内容：

现在对于产品区域，我们将编写products .columns，我们只是要添加一个margin-bottom，让我们为单数形式的product添加一个text-align到center。让我们看看，对于按钮，我们想在顶部添加一点边距，所以让我们写product .button margin-top并使用10px：

.products .columns{
    margin-bottom: 40px;
}

.product{
    text-align: center;
}

.product .button{
    margin-top: 10px;
}

让我们保存并重新加载页面：

现在对于网页右侧的菜单（分类），我们将为每个列表项下面添加一个边框。然而，我们不想为最后一个列表项添加边框。输入以下代码以执行此操作：

.vertical li{
    border-bottom: 1px #ccc solid;
}

.vertical li:last-child{
    border-bottom: none;
}

保存并重新加载页面：

最后，让我们添加页脚。我们将设置一些属性，并使用以下代码在页面上显示页脚：

footer{
    background: #333;
    color: #fff;
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    height: 70px;
}

保存并重新加载页面：

让我们看看网页上的详细信息页面和关于页面。你会看到详细信息页面看起来不错；然而，关于页面内容是居中对齐的。为了修复这个问题，转到about.html文件并从 12 列的 div 中移除product end。重新加载页面，关于页面应该看起来非常完美。

在下一节中，我们将进入 WordPress，并开始根据这个设计创建 WordPress 主题。

主题设置、标志和导航

现在 HTML 模板已经完成，我们现在可以开始将其转换为 WordPress 主题。

我们有一个默认安装的 WordPress。让我们创建一个新的主题文件夹。我们将进入wp-content | themes并创建一个新的文件夹，MyShop。在MyShop内部，我们将创建一个index.php文件和一个style.css文件。让我们继续在我们的style.css文件中放入我们的声明，如下面的代码片段所示：

/* 
    Theme name: MyShop
    Author: Brad Traversy
    Author URI: http://eduonix.com
    Description: Simple ecommerce theme
    Version: 1.0.0
*/

让我们保存。现在如果我们去网页的后端，进入外观 | 主题，我们将看到如下截图所示的 MyShop：

我们有一个截图，可以将其放置在我们项目文件中的 MyShop 预览图片上方。将此内容粘贴到MyShop文件夹中。现在我们有了 MyShop，让我们继续激活它。显然，如果我们现在去重新加载前端，它将只是空白。

我们将打开MyShop和myshop_html文件夹，这是我们所创建的 HTML 模板，并将css和js文件夹移动到MyShop文件夹中。现在我们 WordPress 网站上有一个style.css文件。我们将从模板中的app.css文件中取出所有内容，将其剪切出来，放入style.css中，并保存。然后我们可以完全删除app.css。

现在，我们将把index.html文件夹中的所有内容放入index.php。让我们保存它，如果我们去我们的网站并重新加载页面，我们可以看到所有的 HTML 都在那里。CSS 还没有连接，所以我们看不到它，但你可以看到 HTML：

让我们去文件的顶部。我们将添加我们的标题并修复样式表声明：

   <title><?php bloginfo('name'); ?></title>
   <link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/foundation.css">
   <link rel="stylesheet" href="<?php echo bloginfo('stylesheet_url'); ?>">
   <?php wp_head(); ?>
</head>

让我们保存它，重新加载我们的网页，现在我们可以看到我们的 CSS 正在生效：

我们将从顶部开始工作。所以接下来是 body！我们还想添加我们的 body 类。所以在我们body标签旁边，让我们添加<?php echo body_class() ?>。

现在对于标志，我们将做一些我们还没有做的事情；我们将实现一个图像，一个从主题定制器上传的标志。为了做到这一点，我们需要创建一个functions.php文件。所以在我们“主题”文件夹中，让我们创建一个名为functions.php的文件，并创建一个名为“主题支持”的函数。以下是functions.php文件内代码的示例：

<?php 
    // Theme Support
    function ms_theme_setup(){
        add_theme_support('custom-logo');
    }

    add_action('after_setup_theme', 'ms_theme_setup');

保存它，现在让我们转到index.php文件。让我们删除<img src="img/logo.jpg">并将其替换为以下代码片段：

<header class="grid-x grid-padding-x">
   <div class="large-6 cell">
      <?php 
        if(function_exists('the_custom_logo')){
          the_custom_logo();
        }
      ?>
   </div>

我们现在转到我们的后端。在“主题”中，我们将点击“定制”，转到“网站标识”，现在你应该可以看到如下截图所示的标志区域：

我们将点击“选择标志”，然后从myshop_html文件夹上传logo.jpg文件，根据你的偏好裁剪图片，然后点击“保存”并发布。现在让我们去我们的前端并重新加载，现在我们有一个标志了：

现在让我们来做菜单。我们将转到functions.php文件，并添加以下代码用于“导航菜单”：

register_nav_menus(array(
    'primary' => __('Primary Menu')
));

接下来，我们将转到index.php，我们有了菜单。我们将完全删除它并添加以下代码：

<div class="large-6 cell">
   <?php wp_nav_menu(array(
     'theme_location' => 'primary',
     'container_class' => 'menu simple main-nav'
   ));
   ?>
</div>

现在让我们转到我们的后端。首先，我们将重新加载，点击“菜单”选项，我们将保持“样本页面”。确保我们勾选了“主菜单”选项：

我们将点击“保存菜单”并重新加载我们的页面。我们可以看到，现在我们有了菜单，如果我们点击它，我们可以看到链接已经改变。你不会在网页的主要区域看到它，因为我们还没有设置这个主题区域；现在它只是静态内容，但菜单是正常工作的，标志也在那里：

在本节中我们想要做的最后一件事是转到index.php文件，并在footer标签下面直接放置wp_footer，如下面的代码片段所示：

<footer>
<p>&copy; 2017, MyShop</p>
</footer>
<?php wp_footer(); ?>

这应该给我们网页顶部的管理员菜单：

在下一节中，我们将处理小工具。我们将看到如何为展示区域创建一个自定义小工具。

自定义展示小工具插件

在本节中，我们将为我们的主题创建一个自定义小部件。我们在网页上有展示区域，我们将创建一个可以接受标题和一些文本的小部件，并将其直接输出到小部件位置。

如果我们查看codex.wordpress.org/Widgets_API的 Widgets API 文档页面，我们基本上需要创建一个扩展WP_Widget的类，并且它将有几个不同的方法。它将有一个构造函数来调用父类的构造函数并设置标题和描述，一个widget方法将输出小部件的内容，一个form方法将输出管理表单，以及一个update方法将负责更新任何字段。

我们将进入wp-content | plugins文件夹，并在那里创建一个新的文件夹，showcase-widget（尽管它是一个插件，但它也是一个小部件）。让我们继续在这个文件夹中创建一个新的文件，showcase-widget.php，然后还有一个文件，它将是类文件，class.showcase-widget.php。showcase-widget.php文件将是主文件，但类文件将是我们将进行大部分功能的地方。

现在，我们将添加一些代码到showcase-widget.php文件中：

<?php
   /*
    * Plugin Name: Showcase Widget
    * Description: Simple showcase area
    * Version: 1.0
    * Author: Brad Traversy
    */

    // Include class
    include('class.showcase-widget.php');

    // Register Widget
    function register_showcase_widget(){
        register_widget('Showcase_Widget');
    }

    add_action('widgets_init', 'register_showcase_widget');

在register_widget('Showcase_Widget');中的Showcase_Widget是我们类的名称。这通常需要是你的类名，无论你选择什么。

现在让我们进入class.showcase-widget.php文件。我们将从文档页面（codex.wordpress.org/Widgets_API）中获取默认用法代码，并将其粘贴到我们的编辑器中，使用php标签。首先，我们必须将类的名称从My_Widget更改为Showcase_Widget，然后让我们看看构造函数并替换那里的代码：

public function __construct() {
    parent::__construct(
        'showcase_widget',
        __('Showcase Widget', 'text_domain'),
        array('description' => __('A widget to display showcase content', 
              'text_domain'),)
        );
    }

小部件方法将显示小部件的前端，所以我们基本上需要以下三个东西：

我们需要小部件的标题
我们需要标题
我们需要一个用于文本的字段

我们将粘贴以下代码：

public function widget( $args, $instance ) {
    $title = apply_filters('widget_title', $instance['title']);
    $heading = $instance['heading'];
    $text = $instance['text'];
 }

我们将保持在同一个方法中，并粘贴一些其他内容：

public function widget( $args, $instance ) {
    $title = apply_filters('widget_title', $instance['title']);
    $heading = $instance['heading'];
    $text = $instance['text'];

    echo $args['before_title'];
    if(!empty($title))
      echo $args['before_title'] . $title . $args['after_title'];

    //Display Content
    echo $this->getContent($heading, $text);
    echo $args['after_widget'];
}

在我们继续之前，让我们创建getContent，它接受标题和文本。让我们使用以下代码片段：

public function getContent($heading, $text){
  $output = '<h1>'.$heading.'</h1><p>'
            .$text.'</p><button class="button">
            Start Shopping</button>';

   return $output;
 }

现在，我们有一个名为output的变量，我们将它发送到一个带有h1和文本的模板中。然后我们有一个按钮，我们返回输出。所以这个getContent实际上将显示内容的echo $this->getContent($headng, $text);，我们在那里调用它。

接下来，让我们滚动到function form。这代表后端表单，我们可以实际上放置标题和文本等。我们将在此函数中粘贴以下代码：

public function form( $instance ) {
    if(isset($instance['title'])){
       $title = $instance['title'];
    }
    else{
       $title = __('Showcase Widget', 'text_domain');
    }
 }

我们检查是否有标题，如果有，我们将将其设置为实例中的变量。如果没有，我们就将其设置为 Showcase_Widget。然后我们还需要获取标题和文本，这些也是从实例中获取的：

public function form( $instance ) {
    if(isset($instance['title'])){
       $title = $instance['title'];
    }
    else{
       $title = __('Showcase Widget', 'text_domain');
    }
    $heading = $instance['heading'];
    $text = $instance['text'];
}

现在实际的后端表单有很多 HTML。我们将在 $text = $instance 后结束 php 标签，并在下一行开始 php 标签。然后我们将所有 HTML 代码放在这些开闭 php 标签之间。让我们粘贴以下 HTML 代码：

<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
   <?php _e('Title:'); ?>
</label>
<input class="widefat" id="<?php echo $this->
  get_field_id('title'); ?>" name="<?php echo $this->
  get_field_name('title'); ?>" type="text" 
  value="<?php echo esc_attr($title); ?>">
 </p>

<p>
<label for="<?php echo $this->get_field_id('heading'); ?>">
   <?php _e('Heading:'); ?>
</label>
<input class="widefat" id="<?php echo $this->
   get_field_id('heading'); ?>" name="<?php echo $this->
   get_field_name('heading'); ?>" type="text" 
   value="<?php echo esc_attr($heading); ?>">
</p>

<p>
<label for="<?php echo $this->get_field_id('text'); ?>">
   <?php _e('Text:'); ?>
</label>
<input class="widefat" id="<?php echo $this->
   get_field_id('text'); ?>" name="<?php echo $this->
   get_field_name('text'); ?>" type="text" 
   value="<?php echo esc_attr($text); ?>">
</p>

基本上，我们有一些段落，每个字段都有一个标签和相应的输入。我们可以看到对于标签，我们可以输出 $this->get_field_id，然后我们想要的是标题。对于输入，我们有 id、get_field_id 和字段的名称，即标题。对于名称，我们有 get_field_name( 'title' )，对于值，我们将使用标题变量。我们将使用 escape_attr 属性来转义它。我们将对标题和文本做同样的事情。尽管看起来代码很多，但实际上非常简单。

接下来，我们想要进入 update 方法，当我们在后端添加标题和文本并点击保存时，update 方法就是用来保存它的。让我们抓取一些代码：

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = (!empty($new_instance['title'])) ? 
        strip_tags($new_instance['title']) : '';
    $instance['heading'] = (!empty($new_instance['heading'])) ? 
        strip_tags($new_instance['heading']) : '';
    $instance['text'] = (!empty($new_instance[$text])) ? 
        strip_tags($new_instance['text']) : '';

    return $instance;
 }

我们有一个实例，它等于一个空数组。我们将说 instance['title'] 等于新实例中保存的标题内容。标题也是一样，我们将它设置为新的实例标题，文本也是如此，然后我们将返回这个实例。这将更新我们在后端小部件表单中输入的字段。

我们确保两个文件都已保存，然后进入后端并重新加载网页。转到插件，在下面的屏幕截图中我们可以看到 Showcase 小部件选项；它有描述、版本和名称，我们将点击激活。

让我们通过进入 themes 文件夹中的 functions.php 来设置小部件位置。我们将设置我们的小部件位置。所以我们将滚动到文件底部并粘贴以下代码：

// Widget Locations
function ms_init_widgets($id){
    register_sidebar(array(
    'name' => 'Sidebar',
    'id' => 'sidebar',
    'before_widget' => '<div class="callout">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
));

register_sidebar(array(
    'name' => 'Showcase',
    'id' => 'showcase',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' =>''
));
}

add_action('widgets_init', 'ms_init_widgets');

因此，我们有一个名为 ms_init_widgets 的函数，我们想在两个地方放置小部件：一个是在侧边栏，另一个是在我们刚刚创建的小部件的展示区域。在我们的侧边栏中，我们想要 div class="callout" 包裹整个小部件，我们想要标题是 h3。最后，我们将在 widgets_init 上调用我们的动作并输入我们函数的名称，ms_init_widgets。

让我们保存它，回到后端，并重新加载。现在在“外观”下，我们可以看到小部件。如果我们点击它，我们可以看到我们有侧边栏和展示区域可用，并且如果我们滚动到同一页面的底部，我们可以看到我们的 Showcase 小部件，这是我们刚刚创建的插件：

所以让我们继续将展示小工具添加到展示区域。这里，我们有我们的标题，我们将把它去掉。对于标题，我们将输入Discount Clothing，对于文本，我们将放入一些随机文本。保存，返回。实际上，前端不会改变，因为我们没有在模板中实现它，但我们可以看到内容已经保存。

现在我们需要做的是进入我们的index.php文件，并向下滚动到我们展示区域的位置。在我们实际展示之前，我们想要检查确保它已经启用。所以我们将修改并放置以下代码：

<?php if(is_active_sidebar('showcase')) : ?> 
   <div class="grid-x grid-padding-x showcase">
      <div class="large-12 cell">
         <div class="callout secondary">
            <?php dynamic_sidebar('showcase'); ?>
         </div>
      </div>
   </div>
<?php endif; ?>

保存后，让我们去检查前端，我们看到网页上有“Discount Clothing”，这是我们的标题。为了确保它实际上在读取我们的小工具，让我们去更改标题为Discount Clothings并保存。转到前端，重新加载，我们得到Discount Clothings。所以你知道这是来自我们的自定义插件。

我们创建了一个插件，我们不仅可以在本主题中使用它，还可以在任何地方使用它。好吧，所以接下来我们将处理侧边栏小工具。我们希望分类部分实际上来自 WordPress 分类。

侧边栏小工具设置

在最后一节中，我们为展示区域制作了一个自定义小工具插件。我们现在将实现侧边栏。

我们已经完成了一半的工作。如果我们查看functions.php文件，我们已经注册了我们的侧边栏区域。

所以我们现在需要做的是去index.php文件，并向下滚动到我们的侧边栏位置。在我去掉它之前，让我们确保我们创建了我们的小工具。

因此，我们已经有了一个分类；我们不必太担心这一点。但让我们创建一个侧边栏标题：

好吧，如果我们去后台，我们有分类，我们可以将其拖到右侧的侧边栏，输入标题为“分类”并保存。然后我们还想在窗口的左下角显示自定义文本；我们将它放在“分类”下面。粘贴我们的标题，“侧边栏标题”，然后是我们的文本和代码中的按钮。我们将保存，现在我们可以继续替换这些内容。我们移除两个callout div。

然后，我们将检查侧边栏是否激活，所以我们将放置if(is_active_sidebar)，位置也称为侧边栏：

<div class="large-4 medium-4 cell">
   <?php if(is_active_sidebar('sidebar')) : ?>
      <?php dynamic_sidebar('sidebar'); ?>
   <?php endif; ?>
</div>

在前面的代码中，我们将输入php dynamic_sidebar并保存。让我们转到前端并重新加载。所以这些是我们的小工具，它们来自后端：

现在对于分类，让我们创建一些。默认情况下，它只会显示包含帖子的分类：

现在这些小工具根本不是我们想要的。所以我们将去掉这些，然后添加衬衫、帽子和鞋子：

如果我们去重新加载，你仍然看不到它们，因为我们没有在它们里面放任何东西。

现在只是为了确保分类会显示出来，我们将这个Hello world添加到所有分类中，并重新加载它们：

现在你可以看到它们正在显示。这看起来不太好，所以我们希望它使用一些自定义类，即 Foundation 类。我们将在themes文件夹中创建一个widgets文件夹，然后让我们获取widgets文件夹。我们将进入wp-includes | widgets，并获取class-wp-widget-categories.php文件，所以我们将复制它，然后将其带到themes文件夹中的widgets文件夹。

然后，我们可以在 Sublime Text 中打开它。我们将把Custom添加到类名末尾，并搜索ul标签。我们将添加一些类。好的，所以class="menu vertical"并保存它。然后我们必须在functions.php文件中包含该文件。我们将去到顶部，输入require_once，然后传递widgets/class-wp-widget-categories.php。

require_once('widgets/class-wp-widget-categories.php');

现在我们将包含该文件。现在我们必须注册它。所以，让我们向下到底部创建一个名为ms_register_widgets的函数。我们将传递类名，WP_Widget_Categories_Custom。然后我们将添加一个动作：

//Register Widgets
function ms_register_widgets(){
    register_widget('WP_Widget_Categories_Custom');
}

add_action('widgets_init', 'ms_register_widgets');

保存它，现在让我们去看看前端。你可以看到分类已经改变，看起来好一些：

现在我们接下来要做的最重要的事情是主要内容区域。我们将在下一节中做这件事，但在我们前往那里之前，我们只想将index.php文件拆分成我们的头部和尾部文件。所以我们将从文件的顶部到header标签的末尾。我们将剪切代码，并在其位置输入<?php get_header(); ?>。然后我们将创建一个名为header.php的文件，并将它粘贴进去。我们应该看不到任何变化。

所以我们将对页脚做同样的事情。所以在index.php中，我们将从底部向上到，看看，直到footer标签，剪切出来，然后我们将在其中放入get_footer。然后我们将创建一个名为footer的文件，并将它粘贴进去，回到前端，重新加载，一切正常。

主要产品帖子页面

在本节中，我们将处理这个主要内容区域，即帖子显示的区域。现在它只是一堆静态 HTML，所以我们将继续修复它。

所以让我们进入主题文件夹中MyShop文件夹的index.php文件。让我们去到div class="products"，这里有 4 列的 div 来表示每个产品。我们将在这个productsdiv 上添加一个row类，然后去掉除了一个之外的所有 4 列 div。我们将保留带有黑色衬衫详情的div标签，去掉所有div标签，然后在 4 列 div 中，在其上方创建我们的while循环。

在我们做while循环之前，让我们确保有一些帖子。所以我们将说if(have_posts)然后结束它。另外，如果有帖子，我们想要我们的while循环：

<div class="grid-x grid-padding-x products">
   <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
         <div class="large-4 medium-4 cell product end">
            <h3><?php the_title(); ?></h3>
            <?php if(has_post_thumbnail()) : ?>
               <?php the_post_thumbnail(); ?>
            <?php endif; ?>

            <a class="button" href="<?php echo 
               the_permalink(); ?>">Details</a>
         </div>
      <?php endwhile; ?>
   <?php endif; ?>
</div>

因此，我们将输入 php while，然后输入 while(have_posts)，然后我们必须添加 _post。然后，我们将在这个 div 的底部做 endwhile。所以我们将输入 php endwhile。现在在 div 标签内，我们将有一个 h3，这将作为标题。所以我们可以输入 php the_title。我们还将有缩略图，所以让我们先检查缩略图。我们将输入 if(has_post_thumbnail)。如果有缩略图，那么我们将输入 php the_post_thumbnail。然后，我们将直接在 endif 下方，我们需要我们的按钮，所以它实际上将是一个格式化为按钮的链接。我们将给它一个 button 类，然后这将转到 php echo the_permalink。文本将只说 Details。所以让我们保存并查看一下：

我们在这里看不到除了“Hello world”之外的内容，因为这是我们唯一的一篇帖子。所以我们将进去创建一些帖子。让我们快速重新登录。我们将转到所有帖子，你可以看到我们只有“Hello world”。所以让我们点击添加新帖子：

现在请注意，这里没有特色图片的区域，所以我们必须在 functions.php 文件中做出更改：

function ms_theme_setup(){
    add_theme_support('custom-logo');

    // Featured Image Support
    add_theme_support('post-thumbnails');

    // Nav Menus
    register_nav_menus(array(
        'primary' => __('Primary Menu')
    ));
}

此外，让我们转到 functions.php 文件并进入 ms_theme_setup 函数。我们将输入 add_theme_support，并希望有 post-thumbnails。现在让我们检查输出。

你现在可以看到底右角的特色图片框。所以让我们点击特色图片框并上传一个文件。

我们有所有这些衬衫。我们将选择蓝色和白色的那一个，并将其设置为特色图片。让我们称这个为“蓝白衬衫”。对于描述，我们将快速获取一些示例文本：

我们将复制一些随机的句子作为描述并粘贴进去。我们还需要价格。所以我们将它放在一个 h3 中，并说 $9.99。我们还想有按钮，所以我们将给它一个 button 类，并简单地说“立即购买”。它不会具有实际的电子商务功能。所以这基本上就是我们的所有产品描述的样子。让我们复制这个，然后选择衬衫分类。我们可以添加一些标签；我们将输入 blue shirt、white shirt 和 clothes。我们添加了这些，看起来不错，所以让我们发布它。

我们将回到主页，那里是我们的衬衫。我们将通过将“Hello world”帖子移动到回收站来禁用它。对于黑色衬衫，我们将上传图片。我们将获取 shirt_black.jpg 图片文件，输入Black Shirt，然后粘贴我们之前的内容：

我们将发布它并继续添加其余的。我们添加了其余的产品。让我们转到前端并重新加载，看那里！它开始看起来像真正的购物车：

现在如果我们点击一个“详情”按钮，它将带我们到正确的位置，到正确的产品，但这不是我们想要的设置。我们想要描述看起来像真正的购物车页面。

如果我们访问一个普通页面而不是帖子，比如说是关于页面，那么它将以与主要帖子页面相同的方式格式化。所以我们也不想要这样。所以在下一个小节中，我们将处理这个问题，并确保这些页面看起来正确。

单个产品和单页

到目前为止，我们做得相当不错。我们已经完成了主要帖子页面或主页，但如果我点击其中一个，我们进入单个产品页面，它看起来不太好。我们还缺少很多信息。

因此，我们现在将在MyShop主题文件夹内创建一个新文件，并将其保存为single.php。在创建此文件后，如果我们返回到单页视图并重新加载，它将是空的，因为它正在查看单个文件。所以我们将复制index页面上的所有内容。

因此，我们将抓取所有内容，将其粘贴进去，并删除showcase部分，因为我们不想要它。我们只想在主页上显示showcase。我们将在其中添加一个hr标签。

我们将像上一节那样检查帖子并遍历帖子，即使它只有一个帖子。但我们将删除while循环中的所有内容：

<?php while(have_posts()) : the_post(); ?>
   <div class="row single-product">
      <div class="large-5 columns">
         <a href="#">Go Back</a>
         <br>
         <?php if(has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(); ?>
         <?php endif; ?>
      </div>
</div>
<?php endwhile; ?>

我们将只删除这些内容，然后创建一个新的带有类的div。让我们创建一个带有row和single-product类的div。在这个div内部，我们将有一个Go Back链接，并添加一个换行符。然后我们将检查特色图片或缩略图。所以我们将从index.php文件中复制内容。我们只想检查它是否存在，如果存在，则显示它。然后 5 列div的内容应该就结束了。所以这只是一个图片。

之后，我们将有一个 7 列的div。这将包含标题，我们将将其放入一个h2中。所以我们将说php the_title，在其下方，我们将放置the_content。然后我们将放置一个hr标签。我们想要标签和随后的代码片段。我们只是在检查标签，看看函数是否存在，然后将其输出：

<div class="large-7 columns">
   <h2><?php the_title(); ?></h2>
   <?php the_content(); ?>
   <hr>
   <?php if(the_tags()): ?>
      <?php if(function_exist('the_tags')) { ?>
         <strong>Tags: </strong>
         <?php the_content_tags('', ',',''); ?><br/><?php } ?>
      <?php endif; ?>
</div>

让我们保存这个。我们将返回到我们的页面并重新加载，现在我们有一个产品页面：

对于“返回”来说，现在它不会做任何事情。让我们让它回到主页。我们将说php，我们应该能够说echo site_url：

<div class="row single-product">
   <div class="large-5 columns">
   <a href="<?php echo site_url(); ?>">Go Back</a>
   <br>

点击“返回”，它将带我们回到主页。所以看起来不错。

添加多个图片

现在我们还希望在这里能够有多个图片。让我们进入后端的“文章”部分，然后点击“蓝色与白色衬衫”。点击“添加媒体”然后创建相册。我们将上传更多文件。文件夹中如以下截图所示有文件。我们将使用这些文件并创建一个新的相册：

对于链接，我们只需说“媒体文件”并插入相册。让我们更新，回到前端，重新加载，现在我们为该产品添加了一些图片。这看起来几乎就像一个标准的购物车详情页面！

我们正在接近目标！现在对于常规页面，比如“关于”页面，我们显然不希望出现这种情况。我们将进入我们的文件夹并创建一个新的文件，page.php。然后如果我们返回并重新加载，它将是一片空白。让我们抓取我们在index页面上的内容，直接粘贴进去，然后我们想要找到post循环的位置。

让我们只从while循环内部移除所有内容，创建一个div，这将是一个 12 列的div，large-12 columns。然后我们添加一个h3，它将包含the_title。在the_title下添加整个缩略图部分。我们将从single.php中获取它。如果有图片，它将显示出来，然后我们只需要the_content：

<?php while(have_posts()) : the_post(); ?>
   <div class="large-12 columns"></h3>
      <h3><?php the_title(); ?></h3>
      <?php if(has_post_thumbnail()): ?>
         <?php the_post_thumbnail(); ?>
      <?php endif; ?>

      <?php the_content(); ?>
   </div>
<?php endwhile; ?>

让我们保存它，回到“关于”页面，现在我们有一个带有标题和正文的普通页面。对于“示例页面”也是如此。目前看起来相当不错：

现在如果你想在你产品或文章页面上添加评论，你可以这样做。我们可以进入single.php，在div标签之后添加，然后输入php comments_template并保存。返回，重新加载，现在我们有了评论：

<?php comments_template(); ?>

假设这是测试评论This is a test comment。它将留下以下评论：

你可以像我们之前做的那样，让你的评论模板看起来更好。

你甚至可以将其重新命名为“评论”（产品评论）。

摘要

在这个项目中，我们介绍了 WordPress 主题开发的一些新方面，比如创建自己的插件小工具，实现图片、标志和自定义器等。

结论

这本书就到这里结束了，我们创建了五个令人惊叹的基于 WordPress 的主题。我们希望你喜欢这本书带你走过的旅程，去创建它们。我们祝愿你一切顺利，并希望你能继续改进你的 WordPress 主题。

posted @ 2025-09-09 11:32 绝不原创的飞龙阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

龙哥盟

掠夺·扩张·投机·博弈

通过构建项目学习-WordPress-主题创建-全-

通过构建项目学习 WordPress 主题创建（全）

前言

本书涵盖的内容

你需要为本书准备的内容

本书面向的对象

术语

读者反馈

客户支持

下载示例代码

下载本书中的彩色图像

勘误

盗版

问题

第一章：使用 WordPress 创建简单主题

安装和设置 WordPress

创建和启用主题

创建 HTML 结构

与样式表一起工作

在head标签中添加一个函数

构建 HTML 主体

基础样式

单个帖子和小缩略图

在帖子中添加图片

页面和菜单

小部件位置和评论

与小部件一起工作

添加评论功能

摘要

第二章：构建 WordPress 主题

帖子格式

使用 HTML 和 CSS 创建设计

构建 HTML 主体

添加 CSS

创建 WordPress 主题

显示博客文章

创建单个帖子并添加图片

创建自定义存档页面

不同的帖子格式

页面、自定义模板和子导航

与主题小部件一起工作

自定义主页

评论功能

摘要

第三章：为照片图库构建 WordPress 主题

使用 HTML 和 CSS 创建主页布局

创建 HTML 布局

创建标题

添加标题和搜索框

移动搜索框

添加侧边栏和主要区域

添加侧边栏

更改侧边栏的背景和文本颜色

添加主要区域

添加到列中的图片

在主区域添加页脚

实现动画和 single.html 页面

实现渐显动画

在单页上创建动画

为单个图片添加动画

添加主题头部和尾部

在wpthemes文件夹内创建主题

添加主题

激活主题

将静态标记转换为 WordPress

添加 wp_head 函数

添加 body_class 函数

添加页脚

分割页眉和页脚

更改站点名称

帖子循环

添加主题支持函数

将函数传递到动作

在内容帖子中处理 index.php

添加帖子循环

添加 else 语句

显示帖子内容

添加常规帖子内容

在`head`标签中添加一个函数

在`wpthemes`文件夹内创建主题

将文章包裹在 `<article>` 标签中