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

经常有用户问我们是否可以在 WordPress 中创建自定义主页.

默认情况下,WordPress 会在主页上显示您的博客文章.但是,作为商业网站,您可能希望创建更具吸引力的主页,以帮助用户找到他们需要的内容并提高您的销售转化率.

在本文中,我们将向您展示如何在 WordPress 中轻松创建自定义主页.我们将展示多种方法,您可以选择一种对您来说更容易的方法.

Creating a custom homepage in WordPress

什么是主页?

主页是网站的默认介绍页面或首页.这是当有人在浏览器的地址栏中输入您网站的域名时出现的页面.

Homepage example

首页的主要目的是向用户介绍您的网站或业务.理想情况下,它应该为用户提供有关您业务的基本信息,以便他们可以继续浏览您网站上的其他页面.

默认情况下,WordPress 会在主页上显示您最近的博客文章.这并不好,因为它只显示了您当前的一些文章.

如果您经营的是企业网站,则默认主页不会向用户介绍您的企业、产品或服务.它也不为用户提供与您联系的方式.

好消息是 WordPress 已经带有用于创建自定义主页的内置功能.

在 WordPress 中选择要用作主页的自定义页面

WordPress 允许您轻松地将网站上的任何页面用作主页.您只需转到 页面 »在 WordPress 管理区域内添加新页面以创建新页面.

让我们给这个页面一个标题"首页"并发布它.您将使用此页面作为您的自定义主页.

暂时不要担心布局或设计.我们将在本文后面向您展示如何设计您的主页.

现在,如果您想在您的网站上运行博客,那么您需要创建一个单独的博客页面来显示您的帖子.

再次转到页面»添加新页面并创建一个名为"博客"的页面.继续并发布空白页面.

创建页面后,您需要访问设置»在您的 WordPress 管理员中阅读页面.从这里选择"您的主页显示"部分下的"静态页面"选项.

Select home and blog pages

接下来,您需要选择您之前创建的主页和博客页面.

不要忘记点击"保存更改"按钮来存储您的设置.

现在您已经设置了一个用作自定义主页的页面,让我们开始为您的 WordPress 网站设计自定义主页.

方法 1.使用 Gutenberg 在 WordPress 中创建自定义主页

WordPress 于 2018 年 12 月推出了一个名为 Gutenberg 的新的基于块的编辑器.这个新的编辑器允许用户不仅可以编写内容,还可以创建漂亮的布局.

它为每个内容元素使用块,这使您能够组织内容块以创建您喜欢的页面结构.

WordPress 包含可用于设计目的的块,例如封面图像、列、表格、文本和媒体、画廊等.

Editing your custom homepage layout using Gutenberg

每个块都有自己的设置,允许您自定义其外观以满足您的设计要求.

您可以使用 Gutenberg 块插件扩展可用块,以将更多块添加到您的武器库中.这些插件允许您使用高级元素,如推荐、滑块、服务和其他常见的设计功能.

Using advanced block library plugins to make homepage layout

您还可以使用 Gutenberg 就绪的 WordPress 主题,这使您可以更灵活地使用块.

我们推荐使用 Astra,它带有 Gutenberg 网站模板,您可以使用他们的 Astra Starter Sites 插件安装.

导入模板后,您可以使用默认的 WordPress 编辑器对其进行编辑,并为您的网站创建高度专业的主页.

方法 2.使用页面构建器在 WordPress 中创建自定义主页

这种方法非常简单,不需要任何编码或设计技能.对于这种方法,您将使用 WordPress 页面构建器插件.

页面构建器插件允许您使用简单的拖放界面轻松创建自定义页面布局.

我们推荐使用 SeedProd,因为它是市场上对初学者最友好的页面构建器插件.它带有许多模板并提供多种自定义选项.

在本教程中,我们将使用 SeedProd Pro 版本并向您展示各种高级模板和自定义选项.还有一个免费版本可用,但它的模板和功能选择有限.

首先,您必须在您的网站上安装并激活 SeedProd Pro.您可以按照我们关于如何安装 WordPress 插件的分步指南进行操作.

一旦插件处于活动状态,您将被带到 WordPress 管理面板中的 SeedProd 页面,您需要在其中输入许可证密钥.您可以在您的 SeedProd 帐户区域中找到密钥.

Enter your license key

输入密钥后,点击"验证密钥"按钮.

接下来,您可以导航到 SeedProd » Pages 以创建主页.只需单击"添加新着陆页"按钮即可开始.

Creating a new landing page in SeedProd

在下一个屏幕上,您可以从主页模板中进行选择.SeedProd 提供了许多专业设计的模板,您可以根据自己的业务需求进行自定义.

要选择模板,只需将鼠标悬停在模板上并点击橙色勾号按钮即可.

Choose a homepage template

现在将出现一个弹出窗口,您需要在其中输入着陆页模板的名称并编辑其 URL.完成后,继续并单击"保存并开始编辑页面"按钮.

Enter a name for your homepage

接下来,您将进入 SeedProd 拖放页面构建器,您可以在其中按照自己的方式自定义主页.

该插件提供了可以添加到现有模板的不同块.例如,您可以拖放按钮和图像等标准块或使用倒计时、联系表单等高级块.

Add blocks using the drag and drop builder

除此之外,您还可以单击模板中的现有块并对其进行编辑.您可以更改它们的颜色、字体、文本、对齐方式、大小等.

Edit blocks on the template

完成主页自定义后,不要忘记点击"保存"按钮来存储您的更改.

之后,您可以转到"连接"选项卡并集成不同的电子邮件营销服务.SeedProd 支持 Drip、Constant Contact、AWeber 等流行平台.

Connect email marketing services

接下来,您可以转到"页面设置"标签来发布您的自定义主页.只需单击页面状态切换按钮即可将其从草稿更改为发布.

Publish your homepage

"页面设置"标签下有更多选项.例如,您可以更改 SEO 设置、编辑页面标题、添加脚本以及连接自定义域.

更改页面设置后,继续并关闭登录页面构建器.

接下来,您需要导航到设置 »阅读并告诉 WordPress 使用新创建的登录页面作为您网站的主页.

在"您的主页设置"部分下,继续并选择"静态页面"选项.然后从"主页"的下拉菜单中选择您的自定义主页.

Choose static page settings and select your custom homepage

完成后,保存您的更改并访问您的网站以查看正在运行的新自定义主页.

Custom homepage example

方法 3.在 WordPress 中手动创建自定义主页(需要编码)

不建议初学者使用此方法,因为它需要编码.您需要熟悉 WordPress 编码实践、PHP、HTML 和 CSS 才能使用此方法.

让我们看看这是如何工作的.

您的 WordPress 主题由不同的文件组成.其中一些文件称为模板,用于控制网站某些区域的显示.有关更多详细信息,请参阅我们的 WordPress 模板层次结构备忘单.

其中一个模板称为 front-page.php.如果您的主题有此模板,那么 WordPress 将自动使用它来显示您的自定义主页.

front-page.php template

但是,如果您的主题没有它,那么您可以为自己创建一个/

只需创建一个空白文件并将其保存为 front-page.php.之后,您需要使用 FTP 将其上传到 WordPress 托管帐户上的当前主题文件夹.

一旦您上传此文件,WordPress 就会开始使用它来显示您的主页.但是,由于该文件完全为空,您将看到一个空白的白页.

要解决此问题,您可以开始添加 HTML 代码以显示自定义主页的内容.更简单的方法是使用 WordPress 主题中的现有代码和模板.

例如,您可以使用相同的页眉和页脚.WordPress 使包含这些模板变得非常容易.

这是一个示例代码,我们删除了内容和侧边栏,同时保留了主题中的标题和导航模板.

<?php/* 
This page is used to display the static frontpage.
*/

//Fetch theme header template
get_header(); ?>
	<div id="primary" <?php astra_primary_class(); ?>>

	<div class="custom-homepage-container"> 

	You custom homepage code goes here

	</div> 

	</div><!--#primary -->
//Fetch the theme footer template 
<?php get_footer(); ?>

在 WordPress 中制作有效自定义主页的提示

您网站的主页是您网站上最重要的页面.用户查看它以了解有关您的业务、产品和服务的更多信息.

我们建议您的主页设计尽可能简单.在我们自己的网站上,我们了解到我们的用户发现更简单的布局更有帮助.

尽量避免混乱,但不要隐藏用户希望在主页上看到的重要信息.您还需要优先考虑哪些内容首先出现在您的布局中.

在为您的网站制作自定义主页之前,先写下您想要实现的目标.这个练习将帮助你提出一个明确的设计目标.

对于大多数企业和博客而言,首要目标是将网站访问者转化为客户.为此,您需要 OptinMonster.

它是最好的 WordPress 弹出式插件和潜在客户生成软件.它可以帮助您将网站访问者转化为订阅者和付费客户.

接下来,您需要跟踪自定义主页的效果.为此,您需要在您的网站上安装 Google Analytics.它可以帮助您了解用户来自哪里以及他们在您的网站上做了什么.

您还希望让您的用户更轻松地与您联系.为此,您将需要 WPForms 插件,它是市场上最好的 WordPress 表单插件.

您还可以在您的网站上添加点击通话按钮,以便人们可以轻松拨打您的公司电话.

最后,我们建议您环顾您的竞争对手和您所在行业/细分市场中的其他热门网站.我们不是要您复制他们的设计,而是要从他们的最佳实践中学习,然后将其应用于您自己的主页布局.

我们希望本文能帮助您在 WordPress 中轻松创建自定义主页.您可能还想查看我们经过验证的技巧来增加您的博客流量.

4
订阅评论
提醒
0 评论
内联反馈
查看所有评论