如何在WordPress中创建自定义页面

2021-01-13
WordPress

您要在WordPress中创建自定义页面吗？

自定义页面使您可以使用与WordPress中常规页面不同的布局。许多WordPress网站都有其销售页面，登录页面，网络研讨会页面等的自定义页面布局。

在本文中，我们将逐步向您展示如何轻松地在WordPress中创建自定义页面。

了解WordPress中的自定义页面

默认情况下，WordPress允许您创建帖子和页面。

WordPress主题使用名为的模板文件控制页面的外观page.php。

此模板文件会影响您在WordPress中创建的所有单个页面。

但是，您已经知道并非所有页面都相同。例如，您可能希望创建一个登陆页面看起来从常规的网页完全不同。

过去，在WordPress中创建自定义页面意味着使用HTML，CSS和PHP编写自己的自定义模板。我们将介绍该方法，但不建议初学者使用。

相反，我们建议使用SeedProd或其他页面构建器插件来创建您的自定义页面。只需使用这些快速链接即可直接跳到不同的方法。

使用SeedProd在WordPress中创建自定义页面（推荐）
使用Beaver Builder在WordPress中创建自定义页面
在WordPress中手动创建自定义页面模板

使用SeedProd在WordPress中创建自定义页面

SeedProd是WordPress的最佳拖放页面构建器。它带有100多个经过专业设计的模板，您可以将其用作页面的基础。

或者，您可以创建一个完全自定义的WordPress页面，而无需使用其拖放生成器编写任何代码。

即使对于初学者，SeedProd的设计也易于使用。但是，它也具有高级选项，可让您构建外观精美的页面以吸引访问者并增加转化。

首先，您需要安装并激活SeedProd插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

注意：还有免费版本的SeedProd插件可用。但是，对于我们的示例，由于它具有许多强大的功能，因此我们将使用Pro版本。

激活后，您应该看到欢迎页面。您需要在此处输入许可证密钥，然后单击“验证密钥”按钮。您可以在SeedProd网站的帐户区域中找到许可证密钥。

接下来，转到WordPress管理员中的SeedProd»页面。然后，只需单击“创建新的着陆页”按钮。

接下来，将提示您选择一个模板。您可以对它们进行过滤，以找到要创建的页面类型的模板。如果您希望从头开始，则只需使用空白模板。

在本教程中，我们将使用“课程销售页面”模板。

系统将提示您为页面命名并设置URL。这样做之后，继续并单击“保存并开始编辑页面”按钮。

您选择的模板现在将加载到SeedProd页面构建器中。

要更改模板中的任何内容，只需单击它。直接在页面构建器本身中更改文本很容易。例如，这里我们正在编辑页面标题。

您可以设置文本格式，更改对齐方式，添加链接等。

使用SeedProd页面构建器编辑图像也很容易。只需单击要更改的图像。

在此示例中，我们将页面顶部的默认图像替换为我们自己的图像。

继续，只需单击即可更改您想要的任何内容。这将打开页面左侧的编辑窗格。

要将新的块（元素）添加到页面，只需单击页面顶部的“设计”选项卡。只需选择任何标准或高级块，然后将其拖放到页面上的适当位置即可。

添加块后，只需单击即可对其进行编辑。在这里，我们在页面上添加了一个列表块。

如果您在任何时候犯了错误或改变了主意，请不要担心。只需单击页面底部的“撤消”按钮即可撤消操作。

您还将在此处找到页面的重做按钮，修订历史记录，布局导航，移动预览和全局设置。

对自定义页面满意之后，就可以预览或发布它了。要发布页面，请首先单击屏幕顶部“保存”按钮旁边的下拉箭头。然后，选择发布选项。

您将看到一条消息，通知您页面已发布。要立即进行检查，只需单击“查看实时页面”按钮。

要在将来的任何时候编辑您的自定义页面，只需在WordPress管理员中转到SeedProd»页面。

您应该在登录页面列表中看到保存的页面。只需单击标题即可对其进行编辑。

与WordPress中的其他任何页面构建器相比，使用SeedProd的好处是不会降低您的网站速度。SeedProd是最快的页面构建器，它使您可以创建与主题设计无关的完全自定义的页面布局，因此可以具有自定义的页眉，页脚等。

使用Beaver Builder在WordPress中创建自定义页面

Beaver Builder是适用于WordPress的流行且完善的拖放页面构建器。

您可以使用它轻松地在您的网站或博客上创建自定义页面。我们建议使用完整版的Beaver Builder。还有一个免费版本的Beaver Builder，但功能有限。

首先，您需要安装并激活Beaver Builder插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您将看到Beaver Builder欢迎屏幕。只需单击“许可证”选项卡以输入您的许可证密钥。您可以在Beaver Builder网站的帐户区域中找到此文件。

不要忘记单击“保存许可证密钥”按钮以保存您的许可证密钥。

要使用Beaver Builder，只需在WordPress管理员中转到Pages»Add New即可创建一个新页面。然后，单击“启动Beaver Builder”按钮。

然后将打开Beaver Builder编辑器。您需要添加行和模块来创建页面。只需单击要使用的元素，然后将其拖动到页面上即可。

或者，您可以从模板开始。继续并单击“模板”选项卡，然后选择要使用的模板。

然后，您可以单击模板的任何部分进行更改。例如，您可以更改文本，图像，颜色等。

在这里，我们正在编辑页面的标题。Beaver Builder的编辑过程并不像SeedProd那样流畅，因为您需要在单独的弹出框中键入文本。

完成页面更改后，只需单击右上角的“完成”按钮。然后，您将可以保存或发布您的帖子。

手动创建自定义页面模板

如果您不想使用插件，则可以在WordPress中手动创建自定义页面模板。

编者注：在您的WordPress网站上运行许多插件完全没问题。看看我们的帖子，如果您担心插件太多，应该安装多少WordPress插件。

首先，您需要在计算机上打开一个纯文本编辑器（如记事本）。在空白文件中，在顶部添加以下代码行：

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

此代码仅告诉WordPress这是模板文件，应将其识别为CustomPageT1。您可以随意命名模板，只要它对您有意义。

添加代码后，将文件另存为，custompaget1.php。

继续并使用任何名称保存文件，只需确保它以.php扩展名结尾。

下一步，您需要使用FTP客户端连接到WordPress托管帐户。

连接后，转到您当前的主题或子主题文件夹。您将在/wp-content/themes/目录中找到它。接下来，将您的自定义页面模板文件上传到您的主题。

现在，您需要登录到WordPress管理区域以创建新页面或编辑现有页面。

在页面编辑屏幕上，向下滚动到“页面属性”部分。您会看到一个模板下拉菜单。单击它可以选择刚刚创建的模板。

如果选择新模板并立即访问您站点上的此页面，则将看到一个空白页面。那是因为您的模板是空的，并且不会告诉WordPress显示什么。

不用担心，我们将向您展示如何轻松编辑自定义页面模板。

编辑您的自定义页面模板

您的自定义页面模板与WordPress中的任何其他主题文件一样。您可以在此文件中添加任何HTML，模板标记或PHP代码。

开始使用自定义页面的最简单方法是复制主题提供的现有页面模板。

打开FTP客户端，然后转到主题文件夹。在那里您将找到一个名为的文件page.php。您需要将此文件下载到计算机。

在纯文本编辑器（如记事本）中打开page.php文件，并复制其所有内容（标题部分除外）。

标题部分是文件顶部的注释掉的部分。我们没有复制它，因为我们的自定义页面模板已经有一个。

现在，您需要打开您的自定义页面模板文件，并粘贴最后复制的所有代码。

您的自定义页面文件现在看起来像这样：

<?php /* Template Name: CustomPageT1 */?>
<?php get_header(); ?>
<div id="primary"class="content-area">    <main id="main"class="site-main"role="main">        <?php        // Start the loop.        while( have_posts() ) : the_post();
            // Include the page content template.            get_template_part( 'template-parts/content', 'page');
            // If comments are open or we have at least one comment, load up the comment template.            if( comments_open() || get_comments_number() ) {                comments_template();            }
            // End of the loop.        endwhile;        ?>
    </main>
    <?php get_sidebar( 'content-bottom'); ?>
</div>
<?php get_sidebar(); ?><?php get_footer(); ?>