面向初学者的WordPress开发：构建主题

导语：根据WordPress Codex的说法：“WordPress主题是文件的集合，这些文件一起工作来产生一个图形界面，并为博客提供统一的底层设计。”简而言之，主题提供了一种给站点“换皮”的方式，允许您修改内容的显示方式。

这是我们面向初学者的五篇系列文章中的第三篇，向您传授WordPress开发的基本概念，以便您可以从修补人员跳到开发人员。到本系列结束时，您将能够创建您自己的基本主题和插件，并使用您自己的特性来充实它们。

在本教程中，我们将直接跳到主题开发。我们将从构成主题的基本文件开始，再到使用模板、模板标记和循环，使您可以在单个页面、归档页面和其他页面上显示帖子。在本文结束时，您将能够组织您自己的主题。

注意：对于本系列，重要的是您已经彻底了解了HTML和CSS，因为这两种语言在使用WordPress时都是必不可少的构建块。

我们开始吧。

错过了我们面向初学者的WordPress开发系列教程？你可以在这里找到全部五篇文章：

开始

到目前为止，您应该已经在您的机器上设置了一个本地主机环境，可以在其中工作和运行WordPress。如果没有，请查看本系列的第二部分，并向下滚动到底部以了解更多信息。

如果你已经准备好继续前进，你需要知道的第一件事是WordPress将主题存储在哪里。主题通常位于您安装的wp-content/Themes目录中。如果您导航到本地主机环境中的该文件夹，您应该已经在其中有几个主题，即默认的WordPress主题。可以使用wp-config.php文件中的命令更改主题的位置，但很少这样做。

让我们创建一个新的主题。要做到这一点，您需要做一些相当简单的事情：

在您安装的“Themes”目录中创建一个新文件夹，并将其命名为一些独特的名称，如my-awawed-heme。

在这个新文件夹中，创建两个文件：style.css和index.php。

打开样式表并粘贴以下代码：

/*
Theme Name: My Awesome Theme
Theme URI: https://www.wordpressleaf.com
Author: Yezi
Author URI: https://www.wordpressleaf.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

这些详细信息将自动填充WordPress后端的外观>主题屏幕中的主题详细信息部分。主题名称是您必须在注释中包含的唯一行，但最好将所有内容都填写出来。请注意，文本域必须与文件夹的名称完全匹配(在本例中，名称为my-awee-heme)。这是用于翻译的，我们不会在本教程中讨论，但最好遵循惯例。

如果您访问外观>主题部分，您现在应该能够在列表中看到您的主题，甚至可以激活它。这个主题还没有任何代码，所以你只会在前端看到一个白屏–但是我们很快就会改变这一点！

模板的工作原理

WordPress主题使用模板文件工作。这实际上是一种巧妙的方法，因为与常规的旧HTML相比，它极大地减少了网站运行所需的文件数量。如果您有一个HTML站点，那么您发布的每篇文章都需要一个文件。每个文件都将包含站点的页眉、侧边栏和页脚-这些信息对于每个文件都是相同的。不同文件之间唯一不同的是文章本身的内容。

因为PHP是在服务器上处理的，所以只要节省文件空间，我们就可以做得更好。我们可以只使用一个文件，检测我们所在的页面，并要求PHP用文章的实际标题和实际内容替换占位符，而不是所有这些单独的文件。

下面是一些伪代码来说明这是如何工作的：

<!DOCTYPE html>
<html>
<head>
<title>A single post template</title>
</head>
<body>

<div id="site-header">
<h1>Welcome to my site</h1>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
</div>

<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?

></div>
</div>

<div id="site-footer">
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id="copyright">&copy; Daniel Pataki</div>
</div>

</body>
</html>

请注意，您在文章区域中没有看到任何硬编码的内容。没有看到实际的标题，而是有一个函数-the_title()-负责输出标题。这些函数检测当前请求的文章(基于URL)，并在数据库中查找所需的适当信息。

因此，我们为站点上的每一篇文章创建了一个文件，每个文件都有一个文件。包括WordPress在内的许多系统甚至更进一步，将页眉和页脚分开。事实上，管理单个文章的文件看起来更像这样：

<?php get_header() ?>

<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?

></div>
</div>

<?php get_sidebar() ?>

<?php get_footer() ?>

由于我们的网站还将有单页、存档页和404页等，因此我们可能还希望在那里重用页眉和页脚。可重用代码使服务器端编码变得如此有用和高效。

主题的工作原理

我们将在主题中使用一堆模板文件来创建我们的网站。我们需要知道的是，我们需要为哪个页面创建哪些文件。这是由WordPress模板层次结构管理的。让我们来看看我们需要考虑的页面类型：

  • 档案页(类别档案、日期档案、标签档案、作者档案等)。
  • 单页(单页文章、单页页面、单一自定义文章类型)。
  • 首页和索引页。
  • 错误页面。
  • 搜索结果页面。

之所以称其为“层次结构”，是因为WordPress在确定要显示哪个特定文件时会查找一堆不同的文件。

让我们看一个例子。

假设我们正在查看一个作者档案页面，比如我在WordPressLeaf博客上的帖子。WordPress首先检查主题文件夹中是否有名为Author-leaf.php的文件。如果有，则使用该文件。否则，它将转到包含我的作者ID的文件。我不知道我的作者ID是什么，但假设它是882，在这种情况下，使用的文件将是Author-882.php。如果该文件不存在，它使用author.php，然后是archive.php，最后-如果所有其他方法都失败-它使用index.php，这是必需的文件，因此它将存在。

请注意，WordPress从更具体的文件开始，然后转向通用文件。这很有用，因为就像我们在上一节中所做的那样，您可以创建一个文件来处理所有作者-author.php。但是，您可能希望使某个特定作者的配置文件有所不同，在这种情况下，您可以使用Author-leaf.php来实现这一点。

让我们建立一个主题吧！

在构建新主题时，我喜欢从构建工作框架开始。这通常意味着首先创建页眉和页脚部分。

与其通过没完没了的知识段落来倾注，我总是认为最好的办法是马上开始做一些事情，因为熟能生巧。

您应该已经有了一个主题，并用一个空的index.php文件和一个样式表激活了它，所以让我们在此基础上进行构建。

构建框架

我通常首先创建一个屏幕截图，可以在WordPress后端的外观>主题屏幕中显示我的主题。这对于主题的构建阶段一点也不重要，但它会立即给我一些有用的东西，并作为我的主题的灵感。如果你对即将到来的主题有一个设计，那就使用它，或者你也可以使用像Unspash这样的图像库中的漂亮图片。

当我们谈到图片时，如果你要为WordPress主题目录创建一个主题，你必须使用CC0图片。这是“随心所欲”的版权许可，比你想象的要罕见。Unspash上的所有图片都是令人惊叹的美丽和CC0，这使得该网站成为一个非常棒的资源。

一旦你找到了你喜欢的图片，把它剪到880px宽，660px高，把它命名为screenshot.png，放到你的“主题”文件夹中。

下一步是创建主题的HTML框架。这包括加载到所有页面上的代码，如HTML head元素、doctype等。

让我们从创建header.php文件开始。在该文件中，我们将粘贴HTML代码的开头，如下所示：

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

我们将通过创建footer.php文件来结束它，该文件将包含我们的开始元素的结束标记：

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

我应该指出其中的两个重要函数：wp_head()和wp_footer()。在本系列下周的教程中，我们将在探索钩子时讨论小工具和菜单中的这些函数，但现在，您应该记住，无论何时创建主题，都必须将wp_header()放在head元素的结束标记之前，wp_footer()放在结束body标记之前。这些作为标记，帮助WordPress和插件将功能注入到您的主题中。

现在，让我们将注意力转向index.php。如果你在这个阶段访问你的网站，你只会看到一个空屏幕。这是因为index文件是空的，页眉和页脚文件根本没有使用。

让我们改变这一点。将以下内容添加到index文件：

<?php get_header() ?>

My Awesome Theme

<?php get_footer() ?>

如果你现在加载你的页面，你会看到文本“My Awesome Theme”，如果你看一下源代码，你应该会看到更多。如果你已经登录，WordPress还会在页面顶部显示管理栏，还有很多其他你在这个阶段不需要担心的事情。

难题的最后一块是能够添加样式，因为我们的样式表不是自动加载的。在创建HTML网站时，您可能习惯于在标题部分添加样式。你不应该在主题中这样做–你应该让WordPress来处理这件事。

创建一个functions.php文件并添加以下代码：

<?php
add_action( 'wp_enqueue_scripts', 'mat_assets' );
function mat_assets() {
wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() );
}

还记得我提到过WordPress如何向主题注入功能吗？它做这件事的地方之一是wp_head()函数。嗯，我们在函数文件中所做的是告诉WordPress我们的样式表，而WordPress负责在head部分添加适当的代码。最终结果是完全相同的，但此方法允许更大的灵活性，稍后您将看到这一点。

现在，只需将其保存为代码片段以备将来参考-在本系列的后续教程中，您将更多地了解所有这些功能的工作原理。

在这一点上，我们已经准备好了所有最初的小细节。例如，如果您现在在样式表中键入类似body{Background：red}的内容，您将在站点上获得一个漂亮的红色背景。

在继续之前，让我们先创建一个可在其中工作的可视化框架，一个简单的站点标题和一个包含我们的内容的框。我是这么想的：

为此，我向头文件添加了标题，并打开了一个容器。在页脚中，我关闭了容器并添加了页脚版权文本。最后，我向样式表添加了一些样式以使其看起来更美观。嗯，不管怎么说，在这个开发阶段都是很好的。

以下是组成上述网站的三个完整代码文件：

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="site-header">
<h1><?php bloginfo('title') ?></h1>
</div>

<div id='site-content'>

</div> <!-- site content -->

<div id='site-footer'>
<p>&copy; My Awesome Theme</p>
</div>

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

/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

html {
height: 100%;
background:#444;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
}

#site-header {
text-align: center;
}

#site-header h1 {
font-size:32px;
color: #ffffff;
font-weight: 300;
letter-spacing: 1px;
}

#site-content {
max-width:625px;
background: #fff;
margin: 0 auto;
padding: 22px;
border-radius:5px;
}

#site-footer {
color: #fff;
text-align:center;
font-size:12px;
text-transform: uppercase;
}

此外，我在索引文件中添加了一些虚拟内容-没有什么特别的，只有一个标题和几段用<p>标记包装的lorem ipsum填充文本。

现在，您在网站上访问的任何页面看起来都是一样的，因为我们只有一个index.php文件，它是所有页面的后备文件。

了解WordPress循环

循环几乎是WordPress中所有页面的核心。循环包含页面上显示的内容。WordPress知道每个页面应该包含什么，所有这些都是从URL派生出来的。例如，单个文章页面应该包含单个文章，您的主页应该包含10个最近的文章，类别存档页面应该包含任何给定类别中的10个最近的文章，依此类推。

这些信息是自动从数据库中提取的，您所需要做的就是“循环”所有检索到的文章。显示它比解释它容易，所以下面是我如何将它添加到index文件中的方法：

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_content() ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>

一旦你准备好了，PHP、WordPress和Themes的魔力就会显现出来。你会在首页看到一个文章列表，如果你在后端添加一个文章，它就会显示出来。如果你点击标题，它会显示一个页面，上面显示了那个帖子，即使你没有为那个帖子创建特殊的文件。

让我们分析一下代码，看看它是如何工作的。

这一切都是从一条if语句开始的，该语句检查have_posts()函数的值。如果有要显示的文章，此函数将返回true；如果没有要显示的文章，此函数将返回false。从语句的其他部分可以看到，如果没有帖子，我们会显示一条快速消息。

如果有文章，我们将创建一个while循环，只要have_posts()返回true，就会执行该循环。我们使用的第一个函数是the_post()，它为我们设置一些文章数据(目前还不用担心)，并推进内部计数器。如果我们在最后一个文章上，这意味着它将被显示，但是下一次have_posts()将返回false，这就是我们最终退出循环的方式。

在显示文章时，我只添加了标题和完整内容。我使用the_permalink()函数检索帖子的URL，使用the_title()获取标题，使用the_content()显示完整内容。这些类型的函数在WordPress中被称为模板标签，它们可以在循环中使用，并将如预期的那样检测到正确的文章。

从现在开始，以奇特的方式显示文章只需要知道可以使用WordPress中的哪些函数，并使用一些CSS技能即可。这里有一个便捷的WordPress Codex模板标签列表，你可以用它来输出类别、标签、发布日期、作者、特色图片等等。

模板和IF语句

那么，如果您希望在索引页上显示摘录，但在单个页面上显示完整内容，该怎么办呢？您有两个选择：使用条件标签或创建新模板文件。

条件标签可用于检查WordPress中的各种内容，例如，您是否在单个页面上。有关更多信息，请查看WordPress Codex中的条件标签的完整列表。

在is_singular()标记的帮助下，我们可以执行以下操作：

<?php get_header() ?>

<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php if( is_singular() ) : ?>
<?php the_content() ?>
<?php else : ?>
<?php the_excerpt() ?>
<?php endif ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>

<?php get_footer() ?>

另一种方法是使用两个单独的文件：index.php将包含显示摘录的变体，single.php将使用内容。继续创建single.php，并在那里的循环中使用the_content()。

我听到你在问：哪一个更好？这个问题没有很好的答案，因为它实际上取决于你想要实现什么。如果要在单个文件和索引文件之间进行更改的只有一个函数，那么使用if语句可能会更好。

实际上，单个页面和列表页面的差异通常足以保证两个单独的文件，但也有使用这两种技术的很好的主题示例。

许多主题所做的是更进一步，为循环中的内容创建模板。正如您稍后将看到的，这使我们的代码更具可读性和可重用性。

我们来看一个修改后的索引文件：

<?php get_header() ?>

<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
get_template_part( 'template-parts/content', '' );
}
}
else {
get_template_part( 'template-parts/content', 'none' );

}
?>

<?php get_footer() ?>

啊，好多了！首先，我去掉了所有的PHP开始和结束标记，这增加了很多混乱。但更重要的是，我把所有的文章内容都放到了不同的文件中。get_template_part()函数只是从文件中拉入内容，基本上将第二个参数附加到第一个参数-添加破折号-来构建路径。

在else语句中进行第二次调用的情况下，该函数将尝试调用template-parts/content-none.php。在第一个实例中，我将第二个参数留空，这将调用template-parts/content.php。

在single.php中，我将添加相同的代码，但添加single作为get_template_part()函数的第二个参数。

最后，我将创建template-parts文件夹和三个文件：content.php、none.php和content-single.php，并将相关代码片段粘贴到那里。例如，content.php将如下所示：

<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_excerpt() ?>
</div>

继续阅读和学习

我们在本教程中介绍的是创建一系列非常基本的文件来处理WordPress中循环的基本要点。这将允许您按照您的想法和样式显示您的文章。

这只是对即将发生的事情的一瞥！下周回到这里查看我们系列的第四部分：面向初学者的WordPress开发：窗口小部件和菜单。

但是在此期间，您应该回顾一下本系列中上周的文章“面向初学者的WordPress开发：学习PHP”来温习PHP，并再次彻底阅读这篇文章，以便为下周的文章做好准备。

你觉得这个教程有帮助吗？你为什么想学习WordPress开发？你想了解更多关于什么的信息？在下面的评论中让我们知道。

发表评论

邮箱地址不会被公开。 必填项已用*标注