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

已发表: 2022-05-30

WordPress 主题中的页面模板有助于确定网站内页面的布局。然而，调整这些模板有时可能会令人生畏，尤其是对于初学者而言。幸运的是，通过允许您在主题中创建自定义页面模板，WordPress 在页面模板方面提供了相当大的灵活性。

为您的站点创建自定义页面模板使您能够根据自己的喜好轻松调整站点的布局和设计。它还允许您添加自定义要求，例如为不同页面使用不同的标题。这些更改实际上可以应用于不同的页面或单个页面。

在本文中，我们将研究什么是自定义 WordPress 页面模板、默认页面模板层次结构，以及如何在您的主题中创建自定义 WordPress 页面模板。

什么是自定义 WordPress 页面模板

WordPress 页面模板层次结构

创建自定义页面模板

如何创建全局自定义模板
创建单个页面模板

结论

什么是自定义 WordPress 页面模板

自定义 WordPress 页面模板是一个模板文件，可让您对自己的网站进行单独的设计和感觉。

例如，如果您的站点中有博客主题，您可以为您的站点创建一个自定义模板，该模板不会呈现侧边栏或评论。您还可以为页面创建模板，其中有一个模板呈现盒装布局和另一个全宽布局的内容。您可以创建的页面模板数量没有限制。

页面的呈现由 WordPress 中的 page.php 文件控制。因此，该文件构成了呈现页面内容的默认基础，并且位于主题文件的根目录中，如下图所示。

如果有更多特定的页面模板，那么模板层次结构就会启动。

WordPress 页面模板层次结构

页面模板层次结构确定 WordPress 在显示页面时选择哪个模板文件，具体取决于发出的请求的性质以及它在主题中的存在。

默认的 WordPress 模板层次结构如下：

页面模板：WordPress 检查分配给页面的模板并在页面中使用此模板

page-{slug}.php ：如果没有为页面分配模板，WordPress 然后检查带有 slug 的模板到页面并在找到时应用它。

slug 是页面 URL 中域名之后的一部分，可以编辑。下面是一个示例说明。

page-{id}.php ：如果没有找到带有 slug 的模板，WordPress 将检查是否存在带有要呈现的页面的页面 ID 的页面模板。

page.php ：如果没有找到带有页面 id 的模板，WordPress 将使用标准 page.php 模板来呈现页面。

单数.php ：如果找不到 page.php 文件，WordPress 将使用单数.php 文件，而不管帖子类型如何。

index.php ：如果以上模板都不可用，WordPress 默认使用 index.php 文件呈现页面。

因此，您的 WordPress 环境中的页面呈现可以通过上述任一页面模板来执行。因此，由您决定要设置的优先级。

创建自定义页面模板

在您的主题中创建自定义页面模板非常容易。但是，您需要确定页面模板是用于单个页面还是任何页面。

在本指南中，我们将研究如何在 Stax 主题中手动创建全局页面模板，以及为我们的一个页面创建单个页面模板。

如何创建全局自定义模板

有时您想创建一个可以在您网站内的任何页面上全局使用的页面模板。

为此，您需要首先确定要使用的文本编辑器，例如 Notepad、Notepad ++、sublime text 或您喜欢的任何其他编辑器。

完成后，您可以通过执行以下操作开始创建模板文件：

步骤 1：创建一个新文件并添加以下代码：

 <?php /* Template Name: PageWithNoFooter */ ?>

我们建议使用您网站中可能拥有的任何其他页面模板中未使用的模板名称，以及您可以轻松识别并与您的网站页面相关的名称。

完成后，使用 .php 扩展名保存新页面模板。在我们的例子中，我们将模板文件命名为 pagewithnofooter.php 。您可以使用您喜欢的任何名称，但更建议使用与您的模板名称相似的名称。

第 2 步：将所需的代码添加到文件中

在此步骤中，您可以将首选代码添加到文件中，无论是 PHP 还是 PHP 和 HTML。

出于说明目的，在我们的示例中，我们将使用 pagewithnofooter.php 文件中默认的 right-sidebar.php 文件的内容，但对其进行自定义并添加代码以呈现自定义 HTML 欢迎文本以及禁用页脚。如果您使用的是另一个 WordPress 主题，您还可以复制主题中 page.php 的内容，或者您的主题可能拥有的任何其他主题定义的页面模板。

因此，我们的代码如下：

 <?php /*Template Name: PageWithNoFooter */ namespace Stax; use Stax\Customizer\Config; stax()->force_main_layout( 'right' ); get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php while ( have_posts() ) : the_post(); ?> <?php if ( 'yes' === stax()->get_option( Config::OPTION_SINGLE_SHOW_TITLE ) ) { stax()->get_template_part( 'template-parts/content/panel', get_post_type() ); } ?> <main class="svq-main-page"> <?php echo ' <H2>Welcome to my custom Template. You can use this template globally within your website</H2>'; ?> <?php stax()->get_template_part( 'template-parts/content/entry', get_post_type() ); ?> </main><!-- #primary --> <?php endwhile; ?> <?php get_sidebar(); ?> </div> </div> <?php //get_footer();

第 3 步：将页面模板上传到您的主题文件。

借助 Filezilla 等 FTP 程序或通过您的主机面板，将您的自定义文件上传到主题文件的根目录。在我们这里的例子中，这将在以下目录路径中：

i) wp-content > 主题 > Stax

ii) 推荐：wp-content > Themes > stax-child

这在您的站点中使用子主题时适用，并且 stax-child 是您的子主题。

我们建议在自定义页面模板或主题中的任何其他文件自定义时使用子主题，以避免在主题更新期间丢失自定义。

第 4 步：创建一个新页面并为其分配“PageWithNoFooter”模板

为此，请导航到 WordPress 仪表板中的页面 > 添加新部分并创建页面。

创建页面后，将“PageWithNoFooter”模板分配给它并保存更改。

下面是一个示例说明：

现在，在前端预览页面后，我们的页面将不会在您的页面中呈现页脚。您还将拥有我们添加的自定义 HTML。

下面是一个截图：

您可以在您希望应用其布局的任何页面或您不打算有页脚的任何页面中使用该模板。

创建单个页面模板

单个页面的自定义页面模板更多地是特定于页面的。如前所述，如果没有将“页面模板”分配给页面，则考虑选择这些模板。

对于这些模板，您可以通过 slug 或页面 ID 来定位页面。在确定是使用 page slug 还是 ID 时，考虑您网站的未来前景也很重要。例如，如果您打算将站点迁移到另一个域，则在创建模板文件时使用页面 ID 是不合适的。相反，使用蛞蝓将被认为是更好的选择。另一方面，如果您的网站由多个人管理，并且您认为他们可能会更改页面 slug，那么在创建页面模板时使用页面 ID 会更好。

在我们的例子中，我们将为我们的联系页面创建一个自定义页面模板并禁用页面的页脚。为了创建这样的模板，您需要执行以下操作：

第一步：复制page.php的内容

在这一步中，您需要首先在主题文件中找到 page.php。

找到文件后，选择对其进行编辑并复制其内容。

第 2 步：为页面创建一个新模板

在主题文件的根目录中，为联系页面创建页面模板。您可以使用 page-{id}.php 或 page-{slug}.php 文件。在我们的例子中，我们将使用 slug，因此我们将模板命名为 page-contact.php，因为“contact”是我们的页面 slug，如下所示：

下面也是文件位置的说明：

第 3 步：粘贴 page.php 文件的内容

您现在需要将我们在上面第 1 步中复制的 page.php 文件的内容粘贴到我们的新 page-contact.php 文件中。执行此操作后，您可以自定义文件以合并所需的代码更改并保存更改。在我们的例子中，我们将禁用联系页面中的页脚，因此我们的最终代码将如下所示：

 <?php namespace Stax; get_header(); ?> <div <?php stax()->main_section_class(); ?>> <div class="svq-site-content"> <?php /** * Renders the single blog post template. * * @hooked stax_show_single - 10 * @includes template-parts/single.php */ do_action( 'stax_single' ); ?> </div> </div> <?php //get_footer();

现在预览您的联系页面时，您将意识到该页面不包含页脚。

下面是页面上最初和应用新模板后的屏幕截图比较。

带页脚的联系页面

没有页脚的联系页面

结论

为您的网站创建自定义页面模板相对容易。在本指南中，我们专门研究了如何在您的 WordPress 主题中手动创建自定义模板。我们在这里使用了免费的 Stax 主题作为用例。但是，您可以在所有其他遵循 WordPress 编码标准的 WordPress 主题中应用相同的技术。但是，您还可以通过其他方式创建自定义页面模板，例如使用 Elementor 等页面构建器。

我们希望本文能够提供有关如何手动创建自定义页面模板的必要见解。如果有任何问题或建议，请随时在下面发表评论。