如何手动创建 WordPress 自定义模板 - 指南

已发表: 2020-11-20

如果您对网站的设计不满意并且您选择的主题没有提供所需的自定义选项级别，那么可能是时候考虑创建自己的自定义模板了！根据您的需要，此 WordPress 模板可以是自定义帖子模板或页面模板或类别视图。

WordPress 令人兴奋的事情之一是，无论您的 WordPress 网站是如何构建的，您始终可以随时更改布局或设计。这可以通过覆盖预制模板或创建自己的模板来完成。 WordPress 提供了极大的灵活性，让您能够为任何内容创建自己的模板。

尽管创建自己的模板开辟了丰富的设计可能性，但大多数 WordPress 用户可能会回避挑战，因为他们担心创建自己的 WordPress 自定义模板过于复杂。在这两个系列文章中，我们将着眼于对您开放的两个选项。首先，在本文中，我们将了解如何手动编写自定义 WordPress 模板（提供了最大的灵活性），然后我们将研究如何使用流行的页面构建器来承担所需的一些繁重工作创建 WordPress 自定义模板时。

在本文中，我们将研究为页面、帖子甚至帖子类别创建自定义模板的方法。让我们先看看为什么您可能需要自定义模板。

注意：本文假设您具备 HTML、CSS 和 PHP 的工作知识。

您何时需要自定义 WordPress 模板？

也许您还不确定为什么您实际上需要使用 WordPress 自定义模板。解释这一点的最简单方法是举个例子。

假设您有一个网站供您的业务使用。主题“二十二十”已激活，所有必要的页面和帖子都已创建并填充了内容（文本和图像）、摘录和特色图像。

常规设置也已配置，您已通过定制器进行了许多更改（例如链接颜色、封面模板覆盖颜色等）

还创建了一个包含 5 个项目的菜单：主页 - 公司简介 - 服务 - 关于我们 - 联系我们

在服务部分有一个子菜单：服务 1 – 服务 2 – 服务 3。

因此，从 WordPress 开发人员的角度来看，您基本上拥有：

四个标准页面（首页-公司简介-关于我们-联系我们）
一个存档页面（服务）
三个帖子页面（服务 1 – 服务 2 – 服务 3）

默认情况下，所有 3 个服务发布页面将具有相同的布局。您当前必须通过选择通过帖子属性设置提供的三个模板之一来区分这些帖子的单独布局的唯一选项。

如果我们选择每个不同的模板，我们会看到它们看起来像这样：

默认模板

全宽模板

封面模板

如果幸运的话，这些样式中的一种将适合您，您可以选择将它们用于您的网站。但是，如果不是这样，并且您发现自己对某些元素看起来不像“您想要的那样”感到沮丧，那么请不要担心……这就是手动构建您自己的自定义 WordPress 模板的地方。

让我们来看看使用自定义模板可以实现什么。

如何手动创建自定义 WordPress 帖子模板

我们将在下面的教程中做的是创建一个完全个性化的帖子视图，并将在其自己的 PHP 文件中指定。我们还将在帖子属性的下拉模板菜单中添加一个名为“我的自定义帖子模板”的选项，该选项将对应于自定义帖子布局并呈现我们独特的结构。

第一步：将我们的模板介绍给 WordPress

首先，我们需要在您的 WordPress 主题根文件夹中创建一个名为“my-custom-post.php”的 PHP 文件（在我们的示例中，它位于 /themes/twentytwenty/）。

使用您喜欢的文本编辑器（如 Sublime）打开文件并添加以下内容：

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header();

此行* Template Name: My custom post template定义了将在模板下拉菜单中显示的名称。看看下面的截图，你会看到它是如何出现的。

* Template Post Type: post是可选的，它定义了模板将作为选项出现的帖子类型。由于我们已将其定义为“发布”，因此该模板不会出现在页面的模板选项菜单中，如下例所示。

最后一行： get_header(); ?> get_header(); ?>检索标题内容。

此时，如果您选择“我的自定义帖子模板”作为我们的“服务 1”帖子的活动模板，则输出将为空白。这是我们所期望的，因为我们还没有向页面添加任何结构。你会看到这样的东西：

向我们的 WordPress 自定义模板添加结构

虽然完全有可能完全从头开始为我们的页面构建结构，但有时采用我们主题模板中使用的现有帖子结构然后对其进行修改会更容易。

如果我们看一下 WordPress 模板层次结构，我们可以看到，根据主题，单个帖子模板来自位于主题文件夹内的奇异.php 或 single.php 文件。

进一步澄清 - 当帖子和页面使用相同的结构时，使用 single.php 文件，否则（例如在流行的 Astra 主题中）您将看到 single.php、page.php、archive.php 文件，它们是编码分别为帖子、页面和博客布局提供不同的结构。

在本例中，使用 Twenty Twenty 主题，我们可以看到 single.php 文件使用 get_template_part 函数从 template-parts 文件夹中检索请求的布局。

 <main role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content', get_post_type() ); } } ?> </main><!-- #site-content -->

上面的代码巧妙地检查帖子中是否有内容，如果有，则使用所选模板指定的结构打印内容。这适用于所有情况，无论使用的是帖子、页面还是存档。

现在我们可以看到我们的主题是如何从现有模板中提取布局数据的，我们现在可以开始构建我们自己的模板了。为了定义我们的模板的外观，我们首先需要实际设计它。您可能希望您的帖子页面采用以下格式布局：

一旦您决定了布局设计，您将需要使用 HTML、CSS 和 PHP 对其进行编码。本文假设您具备这些语言的工作知识并且可以创建所需的布局。采用上述设计，我们将编写一些初始代码，将其添加到您的 my-custom-post.php 文件中，如下所示：

 <?php /* * Template Name: My custom post template * Template Post Type: post */ get_header(); ?> <main class="mcpt-post" role="main"> <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); ?> <h2><?php the_title(); ?></h2> <div> <div><?php the_excerpt(); ?></div> <div><?php the_post_thumbnail(); ?></div> </div> <div> <div> <span class="metakey">Author: </span><?php the_author_posts_link(); ?><br> <span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?><br> <span class="metakey">Category: </span><?php the_category(', '); ?> </div> <div><?php the_content(); ?></div> </div> <?php } } ?> </main><!-- #site-content --> <style> .mcpt-post { width: 80%; margin: 0 auto; } h2 { text-align: center; } div#content-top-left { width: 30%; float: left; font-size: 26px; font-family: book antiqua; font-style: italic; padding: 30px; color: grey; } div#content-top-right { width: 70%; float: left; } div#content-main-left { width: 30%; float: left; padding: 30px; font-family: book antiqua; } div#content-main-right { width: 70%; float: left; padding-top: 30px; font-family: tahoma; color: slategray; } span.metakey { color: grey; } </style> <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?> <?php get_footer(); ?>

我们的二十二十主题为发布元数据和我们可能想要发布的其他数据提供了快捷功能。虽然我们将使用默认的 WordPress 功能而不是使用这些功能，以便您的模板适用于任何主题。我们将使用的一个如下：

the_title() – 回显帖子标题
the_excerpt() - 回显帖子摘录
the_post_thumbnail() – 输出默认的帖子缩略图大小。您可以使用 the_post_thumbnail() 选项输出特定的特色图像大小
the_content() – 输出帖子内容

如果我们保存更新并现在查看“服务 1”帖子，我们将看到应用的自定义模板布局。

如何创建 WordPress 自定义帖子类别模板

现在我们已经看到创建我们自己的帖子模板布局是多么容易，我们可以继续并应用类似的原则来创建我们自己的类别视图布局。

一个简单的方法是直接编辑 index.php 文件（位于我们的 /themes/twentytwenty/ 根文件夹中）。虽然直接编辑此文件可用于教程目的，但如果网站是活动的，那么您可能需要使用子主题以确保下次更新主题时不会覆盖任何更新。

如果我们查看 index.php 代码，我们会注意到它主要由 PHP “if”条件填充，这些条件根据内容类型指定可用输出。例如，以下代码检查内容是否包括帖子（它是帖子、页面或存档），或者它是否是搜索结果页面并相应地显示正确的内容。

 if ( have_posts() ) { . . . } elseif ( is_search() ) { . . . }

如果您正在使用 Twenty Twenty 主题学习本教程，请在您的 index.php 文件中找到以下代码：

 $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

在template-parts/content.php中，我们可以看到使用“get_template_part”函数检索内容。

我们不使用这些特定于主题的函数来指定我们的帖子类别页面的布局，而是对每个元素使用默认的 WordPress 函数。这意味着我们将上面的代码更改为以下内容：

 while ( have_posts() ) { the_post(); include 'my-custom-category-view.php'; }

如果你目光敏锐，你会发现我们正在引用一个名为my-custom-category-view.php的文件，我们现在需要创建该文件并将其添加到主题的文件夹中（另一种方法是直接添加此信息到我们的index.php文件中，但是将其保存为单独的文件要整洁得多。

创建一个my-custom-category-view.php文件并添加以下代码：

 <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="intro-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div>

您会看到我们已经能够使用 the_title() 函数的更高级格式来指定帖子标题。使用 get_permalink() 函数生成了指向单个帖子页面的链接。

最后，您现在需要在 style.css 文件中添加一些额外的样式：

 .article { width: 80%; margin: 0 auto; font-family: book antiqua; clear: both; height: 320px; border-bottom: 1px solid darkgrey; } .article:nth-child(odd) .featured-image { float: right; } .featured-image { width: 40%; display: block; padding: 30px; float: left; } .article .content { display: block; padding: 30px; } .post-meta { margin: 0; } .post-meta div { width: 100%; } .article .content h3 { margin: 0; } .article .content h3 a { text-decoration: none; }

让我们看看到目前为止我们已经完成了什么：

好的！

正如您所看到的，尽管图像调整仍然存在一些问题，因为它们的比例不同。我们可以通过在 CSS 中添加更多行来轻松解决此问题，以便居中裁剪图像并提供固定尺寸：

 .featured-image img { width: 350px; height: 250px; object-fit: cover; }

当然，这样一来，我们仍然使用原始图像，从性能角度来看，这不一定是最佳的。这里的最佳做法是使用 WordPress 图像大小。如果您想让您的新页面布局具有响应性，那么还请查看此详尽指南以获取更多信息。

就是这样，干得好！您现在已经成功地为帖子类别视图创建了您自己的个性化布局和设计。

如何创建 WordPress 自定义页面模板

到目前为止，我们已经为我们的帖子页面创建了一个自定义布局，还为类别结果创建了一个自定义布局。您将能够应用在为页面创建自定义模板时使用的方法以及完全相同的原则。

不过，在结束本文之前，让我们快速浏览一个稍微复杂一点的页面模板。在这个例子中，我们将把我们的帖子页面拉到我们的模板中，这样我们就可以以它们在类别页面中的外观方式显示它们，但具有页面（而不是类别页面）提供的可编辑性的额外好处.

我们的目标是创建一个概述“服务”页面，其中列出了我们的三个业务服务（在本示例中，服务 1、服务 2 和服务 3）。无需手动将它们添加到我们的页面，而是将它们动态地拉到页面上。虽然在实践中您可能不需要担心这一点，但编码原则对于理解和进一步展示 WordPress 提供的灵活性很有用。

首先，在您的主题文件夹中创建一个新文件，并将其命名为my-services-template.php 。完成此操作后，我们现在将添加一些必要的声明注释，就像我们之前使用单个帖子模板所做的那样。我们还将使用 get_template_part() 函数。

 <?php /* * Template Name: My post category template * Template Post Type: page */ get_header(); ?> <div class="clear"></div> </header> <!-- / END HOME SECTION --> <div class="site-content"> <div class="container"> <div class="content-left-wrap col-md-9"> <div class="content-area"> <main class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); // standard WordPress loop. ?> <?php get_template_part( 'template-parts/content', 'cat_services' ); // loading our custom file. ?> <?php endwhile; // end of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div> <div class="sidebar-wrap col-md-3 content-left-wrap"> <?php get_sidebar(); ?> </div> </div><!-- .container --> <?php get_footer(); ?>

get_template_part() 函数基本上是一种允许我们加载可重用代码片段的机制。在这种情况下，它将获取template-parts/content-cat_services.php 。在这个文件中，我们将插入一些代码来输出“服务”类别的帖子。

总之，这个文件中的代码将做的是：

给分类页面一个标题。
从数据库中查询指定类别的帖子。
循环浏览帖子并显示每个帖子的布局。

 <h1 align="center"><?php the_title(); ?></h1><!-- category page title --> <?php $args = array( 'cat'=>4, 'orderby' => 'title' ); $cat_query = new WP_Query( $args ); //Query the specified category's posts if($cat_query->have_posts()) { while( $cat_query->have_posts() ) { $cat_query->the_post(); //Loop through the posts ?> <div class="article"> <div class="featured-image"><!-- FEATURED IMAGE --> <?php the_post_thumbnail(); ?> </div> <div class="content"><!-- ARTICLE HEADER --> <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?> <div class="excerpt-text"><?php the_excerpt(); ?></div> <div class="post-meta"> <div><span class="metakey">Author: </span><?php the_author_posts_link(); ?></div> <div><span class="metakey">Publish Date: </span><?php the_time('F jS, Y'); ?></div> <div><span class="metakey">Category: </span><?php the_category(', '); ?></div> </div> </div> </div> <?php wp_reset_postdata(); } } ?>

我们将在以后的文章中更彻底地检查查询。就本文而言，您需要了解的是$args = array( 'cat'=>4, 'orderby' => 'title' ); 正在检索 ID 编号为 4 (ID=4) 的帖子类别。此类别编号与我们的“服务”类别相关。

那么，如何查看每个类别的 ID？其实很简单。转到菜单帖子>类别并打开任何类别进行编辑。 ID在分类编辑页面的URL中，如下图：

要查看我们的新模板，我们需要转到 Pages 并创建一个新页面。在页面编辑区域，您无需输入任何内容。相反，只需选择页面属性下拉模板菜单下的“我的帖子类别模板”选项。

最后，转到菜单并为我们的新页面添加一个“服务”项以替换当前的服务类别项。菜单现在应该是这样的

让我们看看我们做了什么：

上面的方法展示了如何创建一个引入特定类别的 WordPress 自定义页面模板（在本例中为我们的“服务”）。如果您为另一个类别页面选择相同的模板，您将再次看到服务类别帖子，因为我们特别要求使用类别 ID (ID=4)。因此，如果您想要一个引入不同类别的新页面模板，您需要创建一个单独的模板文件来执行此操作（并相应地更新类别 ID）。

结论

能够为您的 WordPress 网站创建自己的自定义模板可以让您最终控制网站的外观。为您的帖子类型创建单个或类别视图的自定义模板非常值得。当然，它不仅可以完全控制您网站的设计元素，还可以让您快速复制未来页面的特定布局。

也可以看看

如何使用页面构建器创建 WordPress 自定义模板 - 指南