如何编辑 WordPress 主页(轻松有效)

您想为您的 WordPress 网站创建自定义主页吗?

默认情况下,WordPress 会在主页上显示您的博客文章.但您可能希望网站首页显示一些不同的内容,例如突出显示您的产品、服务等的着陆页.

在本文中,我们将向您展示如何轻松编辑和自定义您的 WordPress 主页.

Editing the WordPress homepage

什么是 WordPress 主页?

您的 WordPress 主页是您网站的"首页".这是用户访问您的域名时显示的第一个页面.例如,如果您在浏览器中输入 www.wpbeginner.com,您登陆的页面就是我们网站的主页:

The WPBeginner homepage

为什么要编辑 WordPress 主页?

如果您决定创建一个博客,那么在主页上只显示您的博客文章是非常有意义的.

但是,如果您使用 WordPress 来构建小型企业网站甚至经营在线商店,该怎么办?然后,您可能希望在首页上突出显示产品或促销活动.

这是一个来自 OptinMonster 的商业网站主页示例.它是目前最好的 WordPress 弹出插件.他们的网站有一个很棒的博客,但这不是他们主页的重点.相反,他们有一个非常明确的行动号召.

The OptinMonster homepage

您想创建一个这样的主页吗?也许您已经尝试将自定义页面设置为 WordPress 的主页,但您正在努力使其看起来正确.

如果是这样,那么您来对地方了.

我们将带您逐步设置主页并对其进行自定义以满足您的需求.这样,您就可以给人留下良好的第一印象,并鼓励访问者采取对您网站使命最重要的行动.

这可能意味着从您那里购买数字产品、注册加入您的会员网站或为您的筹款活动捐款.

我们将介绍几种可用于创建自定义 WordPress 主页的不同方法.

您可以使用这些快速链接直接跳转到教程的不同部分:

  • 在 WordPress 中设置主页
  • 使用主题的内置选项编辑主页
  • 使用块编辑器编辑您的 WordPress 主页
  • 使用 Beaver Builder 编辑您的 WordPress 主页
  • 使用 Divi 编辑您的 WordPress 主页

在 WordPress 中设置主页

默认情况下,WordPress 会在主页上显示您的博客文章.但是,大多数商业网站甚至大多数博客都使用自定义主页并创建单独的博客页面来显示他们的博客文章.

让我们看看如何在 WordPress 中设置单独的主页和博客页面.

首先,您需要通过转到页面»来创建您的页面.添加新.将其命名为"主页",或者您想命名的任何名称,然后发布页面.

Creating a blank homepage

专业提示:您的网站是否已有访问者?然后,您可能希望在设置主页时将站点置于维护模式.或者,您可以设置一个临时站点,您可以在其中创建主页.

现在,让我们重复创建一个页面的过程,您将在其中显示您的博客文章.只需转到 页面 »添加新内容 并将您的新页面命名为"博客".之后,您可以继续发布空白页面.

Blog page

一旦您的页面准备就绪,让我们告诉 WordPress 开始使用这些页面.

您可以通过转到设置»来执行此操作.WordPress 管理区域中的阅读页面.接下来,您需要在"您的主页显示"部分下选择"静态页面"选项.之后,继续选择您的主页和博客页面.

Set your homepage

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

提示:除非您将 WordPress 安装在子目录中,否则您的主页链接就是您的域名.

但是,您的主页仍然是空的.让我们看看在 WordPress 中轻松编辑主页的一些方法.

使用主题的内置选项编辑主页

一些最好的 WordPress 主题将为您创建主页设计,因此您可以轻松地对其进行编辑.

您可以通过访问外观»找到这些选项.在您的 WordPress 仪表板中自定义页面.这将启动 WordPress 主题定制器,并实时预览您的主题.

Using WordPress's theme customizer

主题定制器针对不同的主题有不同的选项.根据您使用的主题,您的预览和可用选项可能看起来不同.

The Hestia theme's default home page in the theme customizer

要编辑主页的任何部分,只需点击旁边的蓝色铅笔图标.在这里,我们正在编辑主页顶部的图像、文本和按钮.

Editing the top section of the homepage in Hestia

注意:一旦您进行编辑,它们就会显示在您网站的预览中.在您发布之前,这些更改不会在您的网站上生效.

如果您想从主页中删除某个部分,您只需点击该部分左上角的蓝眼图标.

您还可以使用定制器的"首页部分"选项卡删除部分并重新添加它们.

Remove a section of the default Hestia homepage

对主页感到满意后,点击"发布"按钮使其生效.

Click the Publish button in the customizer to make your homepage live

以下是我们的主页在网站上的外观:

The finished homepage live on the website

使用主题的内置选项是设置主页的最快方法.但是,某些主题可能没有太多选择,或者您可能对主页的外观不满意.

别担心,还有很多其他方法可以编辑您的主页并赋予它您想要的外观.

使用块编辑器编辑您的 WordPress 主页

如果您需要从头开始创建主页怎么办? WordPress 块编辑器是一种简单的方法.

要使用块编辑器,只需转到页面屏幕并编辑您之前创建的主页.

Adding a new page in WordPress

现在,您可以开始为您的页面创建内容了.

专业提示:如果您没有经常使用块编辑器,请阅读我们关于掌握 WordPress 内容编辑器的专家提示.我们使用大量屏幕截图清楚地解释了所有内容,以向您展示其工作原理.

在教程的这一部分,我们将使用几个简单的块来创建一个基本的主页.

首先,我们将向页面添加欢迎信息.您只需单击页面即可开始输入.WordPress 会自动为您创建一个段落块.

Adding text in the block editor

如果您想让文本变大,可以在右侧的块设置中轻松实现.只需使用"文本设置"下的"预设大小"下拉菜单.

您还可以在"颜色设置"部分更改此下方文本的颜色.

Changing the text size in the block editor

接下来,我们将向页面添加图像.您可以通过单击 (+) 符号然后选择图像块来执行此操作.您可以在 Common Blocks 部分找到它,也可以使用搜索栏搜索它.

Adding an image block to your homepage

您可以从媒体库中选择一张图片或上传一张新图片.

重要提示:仅使用公共领域或 CC0 许可的图像,或者您自己创建的图像.您还应该针对网络优化您的图片.

接下来,我们添加了另一个段落块,文本为在此处查看我们的最新帖子.

然后,我们添加了一个"最新帖子"块,我们已将其设置为显示帖子摘录和精选图片,以及帖子标题.您可以在我们关于在 WordPress 中显示最近帖子的教程中找到有关"最新帖子"块的更多信息.

Adding a list of your latest posts to the homepage

您可以在主页上添加任意数量的块.如果您的主题有模板,您可能还想为您的页面使用"全角"或"无侧边栏"模板.您可以在页面的文档设置中执行此操作.

我们在此示例中使用 Astra 主题:

Removing the sidebar from the homepage

对主页感到满意后,点击屏幕右上角的"发布"按钮.

Publish your homepage once you're ready

这是我们完成的主页的外观:

The homepage created with the block editor, live on the site

如果您想进一步了解您的主页怎么办?一种选择是尝试一些适用于 WordPress 的最佳阻止插件,以添加新功能,例如联系表单、推荐、评论等.

另一个不错的选择是使用更强大的 WordPress 页面构建器来创建看起来华丽和专业的东西.

在本教程的下一部分中,我们将介绍两种不同的页面构建器:Beaver Builder 和 Divi by Elegant Themes.

使用 Beaver Builder 编辑您的 WordPress 主页

Beaver Builder 是一个流行的页面构建器插件,它是创建主页的好方法.

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

接下来,您可以开始编辑您的主页.只需转到 WordPress 中的"页面"菜单,然后单击即可编辑我们之前创建的主页.

在块编辑器中,最好在 Document » 下切换到空白页或无侧边栏模板.页面属性 »模板.

我们在这部分教程中使用 OceanWP.它带有一个"登陆页面"模板,可以创建一个空白画布,您可以使用页面构建器进行编辑.

Change the page template in WordPress

设置页面模板后,您可以点击屏幕中央的"启动 Beaver Builder"按钮开始使用 Beaver Builder.

Launch Beaver Builder by clicking the button

您将进入 Beaver Builder 编辑器.设计主页的最快方法是使用 Beaver Builder 的预构建模板之一.点击右上角的 + 图标,如果它尚未被选中,则点击 Templates 标签.

Choosing from the Beaver Builder templates

我们将在我们的网站上使用这个"代理"模板.

Selecting the Beaver Builder 'Agency' template

注意:这些模板在 Beaver Builder 的精简版中不可用.

您可以编辑任何您喜欢的模板.只需单击您想要更改的任何内容.将弹出一个小窗口,您可以在其中进行编辑.在这里,我们正在编辑主页的标题(顶部的大文本).

Editing the heading text in Beaver Builder

我们现在更改了页面的标题及其下方按钮上的文本:

The changed text in Beaver Builder

如果您想向页面添加新元素,可以通过添加新模块或全新行来实现.Beaver Builder 中的内容按行排列,然后分成列.

要添加行或模块,请点击屏幕顶部的 + 图标.之后,将您选择的行或模块拖放到该位置.在这里,我们向页面添加了一个新的 1 列行:

The changed text in Beaver Builder

一旦您安排好一行,您就可以向其中添加 1 个或多个模块.我们有一个 1 列的行,所以我们只能添加 1 个模块.我们将通过拖放它到位来使用 Heading 模块:

Add a heading module to Beaver Builder

您可以通过单击模块的"样式"选项卡来更改字体及其大小:

Changing the Style settings for a Beaver Builder module

如果您想从页面中删除一行或模块,只需将鼠标光标悬停在其上并单击出现在左侧的 X.

此处,灰色图标可让您编辑或删除整行,蓝色图标可让您编辑或删除单个模块:

Removing a module in Beaver Builder

您可以根据需要继续添加和更改页面的行和模块.如果您对它的外观感到满意,请点击右上角的"完成".

The Done button in Beaver Builder

然后您可以选择保存或发布您的页面.

Save or Publish your page in Beaver Builder

以下是我们的页面在我们网站上的显示方式:

The Beaver Builder homepage live on the site

使用 Divi 编辑您的 WordPress 主页

Divi 是另一个流行的 WordPress 页面构建器插件.它带有一个 WordPress 主题和一个页面构建器插件,其中包含数十个华丽的模板.

您可以将 Divi 页面构建器用于任何主题.在本教程中,我们将在 Divi 主题中使用它.

首先,您需要从 Elegant Themes 下载、安装并激活 Divi 主题.这包括 Divi builder,因此您无需单独安装它.

注意:您需要在 Divi » 下输入您的用户名和 API 密钥.主题选项 &raqu; WordPress 仪表板中的更新.否则,您将无法访问布局包.

如果您在安装插件方面需要帮助,请查看我们关于如何安装 WordPress 插件的分步指南.

一旦您启动并运行了 Divi 主题和页面构建器,您就可以设置主页.首先,转到 WordPress 仪表板中的"页面"菜单,然后编辑我们之前创建的主页.

在开始编辑主页之前,最好切换到 Document » 下的空白页面模板.页面属性 »模板.这样,您的主页将不会有侧边栏、标题、菜单或任何其他默认元素.

Selecting the Blank Page template in the Divi theme

接下来,您可以点击屏幕顶部的"使用 Divi Builder"按钮.

Click the purple button at the top of the screen to start using the Divi Builder

现在,您需要点击屏幕中央的"使用 Divi Builder"按钮.

Click the Use Divi Builder button in the center of the screen

您可能会在屏幕顶部看到一个提示,询问您是否要离开该站点.点击"离开"进入 Divi 构建器.

The prompt asking if you want to leave your site (click Leave to open the Divi builder)

接下来,您会看到一系列可用于创建页面的选项.我们建议使用预制布局作为主页的基础.这让您可以快速轻松地设置主页.

Choose the premade layout option in Divi

Divi 有多种不同的布局可供选择.有 163 种不同的布局包,每一种都有几种不同的页面布局,包括主页.

您可以通过输入搜索词来搜索这些内容,也可以选中复选框以仅查看适合特定类别的布局.

Just a few of the layout packs available in Divi

我们将使用"旅行博客"布局包来创建我们的主页.首先,点击您要使用的包:

The Travel Blog layout pack in Divi

接下来,您将看到布局包的说明,以及可用的不同页面布局.您可能希望使用主页或登陆页面作为您的主页.我们将选择"主页"选项.

选择布局后,点击"使用此布局"按钮.

Choose the layout you want to use in Divi

Divi 会自动为您导入布局.然后,您会在您的页面上看到它,就像它在您的网站上显示的一样.要编辑它的任何部分,只需单击它.

与 Beaver Builder 一样,Divi 使用行系统(拆分为列)和模块来创建您的页面.使用文本模块,您可以点击文本并直接在屏幕上输入您想要的任何内容.

在这里,我们更改了标题及其下方的文本:

Editing the header text using Divi

对于其他模块,您可以将鼠标光标放在它们上,然后单击"模块设置"图标进行编辑.在这里,我们正在编辑一个数字计数器:

Changing the settings for a module in the Divi builder

您可以使用垃圾桶图标以同样的方式删除模块和行.

您可能希望在主页上使用自己的图片.您可以通过编辑模块设置来更改这些.

请注意,顶部的图像被设置为全角标题模块的背景,因此您需要在 Content » 下更改它.该模块的背景:

Editing the background image of the Fullwidth Header module

对页面所做的更改感到满意后,您可以点击屏幕底部的"保存草稿"或"发布".

The Save Draft and Publish buttons in Divi

提示:如果您看不到这些按钮,请单击紫色的"..."按钮将其打开.

This button lets you expand the Divi controls along the bottom of the screen

以下是我们的页面在网站上的显示效果:

The finished website homepage

就是这样!您已经在 WordPress 中创建了一个漂亮的主页并成功设置了它.

我们希望本教程能帮助您学习如何编辑 WordPress 主页.您可能还想查看我们关于必须拥有 WordPress 插件的指南以及我们关于如何改进 WordPress SEO 的提示.

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