在 WordPress 主题中创建自定义页面模板

WordPress 最重要的卖点之一是主题理念。 单一主题为网站的设计和功能增加了巨大的价值。 但是，有些网站在不同的页面上有不同的设计。

不幸的是，几个 WordPress 主题限制用户更改层次结构中不同页面的布局和功能。 WordPress 自定义页面模板允许用户集成自定义要求，例如特定页面上的右侧/左侧边栏、附加的号召性用语功能或特定登录页面的唯一标题。 让我们进一步深入了解 WordPress 自定义页面模板如何显示不同类型的内容。

自定义 WordPress 页面模板可用于多种用途。 一些想法包括：

• 显示每个类别的最近帖子
• 嵌入谷歌地图或任何脚本
• 所有作者的名单。
• 最近上传的图片
• 投资组合的自定义设计页面
• 联系页面

在 WordPress 网站上创建的所有页面和帖子的外观由名为page.php的模板文件处理。 在 WordPress 中创建或编辑自定义页面模板需要 HTML、CSS 和 PHP 的基本知识。

只需打开任何文本编辑器并将以下代码粘贴到其中即可。

 <?php /* 模板名称：PageWithoutSidebar */ ?>

上面这行代码告诉 WordPress 这是一个名为PageWithoutSidebar的模板文件。 您可以使用任何您想要的名称。 现在将此文件保存为PageWithoutSidebar.php 。 同样，您可以为该文件使用任何其他名称。 但不要忘记将扩展名保留为.php

现在，我们将测试我们新创建的模板文件。

登录到您的主机面板。 在这个例子中，我使用的是 Cloudways——一个最快的托管 WordPress 主机。 Cloudways 通过 AWS、DigitalOcean、GCP、Linode 和 Vultr 的提供商选项支持 WordPress 应用程序。 导航到/wp-content/themes文件夹。 打开您当前的主题文件夹并在那里上传PageWithoutSidebar.php文件。

转到WordPress管理面板 > 页面 > 添加新的。 您可以在右侧看到新的自定义页面模板。

创建一个新页面并将其模板设置为PageWithoutSidebar。 完成后，发布它。

打开新创建的页面。 由于模板中还没有设计元素，因此会显示如下图所示的空白页面。

这表明WordPress中的自定义页面模板已成功实现，因此您可以创建自定义响应式WordPress主题

现在是添加几行代码来显示页面内容的时候了。

在这个演示中，我将讨论如何自定义默认的 26 页面模板。

页面的默认外观由位于/wp-contents/themes/YOUR THEME/文件夹中的page.php文件生成。 打开page.php并复制此代码。

 <?php get_header(); ?>

<div class="content-area">
                <main class="site-main" role="main">
                                <?php
                                // 开始循环。
                                while ( have_posts() ) : the_post();

                                                // 包含页面内容模板。
                                                get_template_part('模板部分/内容', '页面');

                                                // 如果评论已打开或我们至少有一条评论，请加载评论模板。
                                                if ( comments_open() || get_comments_number() ) {
                                                                评论模板（）；
                                                }

                                                // 循环结束。
                                终了；
                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar('content-bottom'); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

将此代码粘贴到这行代码下方的PageWithoutSidebar.php中。

 <?php /* 模板名称：PageWithoutSidebar */ ?>

保存！

您完整的PageWithoutSidebar.php文件将如下所示。

 <?php /* 模板名称：PageWithoutSidebar */ ?>

<?php get_header(); ?>

<div class="content-area">

                <main class="site-main" role="main">

                                <?php

                                // 开始循环。
                                while ( have_posts() ) : the_post();

                                                // 包含页面内容模板。
                                                get_template_part('模板部分/内容', '页面');

                                                // 如果评论已打开或我们至少有一条评论，请加载评论模板。
                                                if ( comments_open() || get_comments_number() ) {

                                                                评论模板（）；

                                                }

                                                // 循环结束。
                                终了；

                                ?>

                </main><!-- .site-main -->

                <?php get_sidebar('content-bottom'); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

返回您的页面并刷新它。 您会观察到一切都在按照默认的 WordPress 26 岁主题的方式工作。

现在让我们自定义它。 如您所见，右侧有一个侧边栏。 我只会从这个页面中删除它。 所有其他页面将具有二十六主题的默认外观。

打开文件PageWithoutSidebar.php文件。 向下滚动到文件末尾并删除：

 <?php get_sidebar(); ?>

这是获取页面侧边栏的代码行。 删除该行后，保存它。 打开页面的 URL，侧边栏就没有了！

如您所见，侧边栏已成功从此页面中删除。 但是，文本对齐并不好。 右侧有一个空白区域。 解决方法是调整和扩展文本以填充屏幕。

返回PageWithoutSidebar.php并找到：

 <div class="content-area">

只需将“ content-area ”更改为“ site-content-fullwidth ”即可完成。 刷新页面，内容全宽。

仍然好奇为什么我可以轻松编辑page.php文件时创建自定义页面模板？ 很明显，如果编辑page.php文件，整个网站的所有页面都会显示更改。 为了在特定页面上应用自定义外观，WordPress 中的自定义页面模板派上用场。 您还可以在 WordPress 中定义自定义用户角色，以便为用户分配不同的权限。

如果您有任何疑问，请随时通过在下面的评论部分发帖来提问。