在 WordPress 中如何改进 404 页面模板(2 种方法)

前言

当我们设计 WordPress 网站时,最容易被忽视但最关键的元素之一是 404 错误页面。许多网站所有者没有意识到精心设计的 404 页面可以成为用户保留和参与的强大工具。

根据我们的经验,默认的 404 页面是错失的机会。我们已经亲眼目睹了定制的 404 页面如何将潜在的退出点转变为引导访问者返回有价值内容的机会。

在本文中,我们将向您展示 2 种改进 WordPress 404 页面模板的有效方法。

图片[1]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

为什么要改进 WordPress 中的 404 页面模板?
大多数 WordPress 主题都带有基本的 404 模板,包括默认的 WordPress 主题。

例如,在下图中,您可以看到 ThemeIsle Hestia 的 404 页面。

图片[2]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

这些默认模板中的大多数都很简单,不会显示您网站中的任何内容。这意味着任何登陆您的 404 页面的人都更有可能离开您的 WordPress 网站,这将增加您的跳出率。

这对您的 WordPress SEO 来说是个坏消息,可能会影响您的网站在搜索引擎排名中的显示位置。

也就是说,创建一个包含您自己的内容和品牌的 404 页面是个好主意。

图片[3]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

话虽如此,让我们来看看如何改进 WordPress 中的 404 页面模板。您可以使用下面的快速链接直接跳转到您要使用的方法:

改进网站 404 页面的最佳方法是使用 SeedProd。

SeedProd 是 WordPress 的最佳登陆页面构建器。它允许您创建、编辑和自定义您的 WordPress 页面,而无需编写任何代码。

SeedProd 附带超过 300+ 现成的模板,包括大量 404 种设计。这意味着您可以在几分钟内创建专业设计的 404 页面。

您需要做的第一件事是安装 SeedProd 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的分步指南。

激活插件后,SeedProd 将要求您提供许可证密钥。

图片[4]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您可以在 SeedProd 网站上的帐户中找到此信息。输入许可证后,单击“验证密钥”按钮。

完成后,转到 SeedProd » 登陆页面。在“404 页面”部分中,单击“设置 404 页面”。

图片[5]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您现在可以为您的 404 页面选择一个模板。

要预览设计,只需将鼠标悬停在其上,然后单击放大镜即可。

图片[6]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

当您找到喜欢的设计时,只需单击“选择此模板”。

我们在所有图片中都使用“Oh No 404 Page”,但您可以使用任何您想要的设计。

图片[7]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

大多数 404 模板已经有一些块,这些块是所有 SeedProd 设计的核心部分。

要自定义这些块中的任何一个,只需单击以在布局中选择该块。然后,您可以使用左侧菜单中的设置进行更改。

图片[8]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

要将新块添加到您的设计中,只需在左侧菜单中找到该块即可。然后,将其拖到您的布局上。您现在可以按照上述过程自定义块。

首先,您通常需要将您的网站徽标添加到 404 页面,以便访问者知道他们仍在您的网站上。

要将 SeedProd 徽标替换为您自己的品牌,只需单击以选择布局中的占位符徽标即可。然后,将鼠标悬停在左侧菜单中的图像上。

当它出现时,单击“选择图像”按钮。

图片[9]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

这将启动 WordPress 媒体库,您可以在其中选择任何图像或从计算机上传新文件。

许多 404 模板还显示您网站的主导航菜单。如果您有多个菜单,那么您可能更愿意显示不同的菜单。

要进行此更改,只需单击模板中的“导航菜单”块即可。然后,您可以打开“菜单”下拉菜单并从列表中选择任何菜单。

图片[10]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

当访问者登陆您的 404 页面时,他们可能会对他们是如何到达这里以及下一步该做什么感到困惑。话虽如此,最好添加一些文本来解释找不到内容并建议下一步要采取的一些作。

为此,请在您的设计中添加“标题”和“文本”块。然后,您可以在左侧菜单的文本编辑器中输入您的消息。

图片[11]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

接下来,我们将更改“返回主页”按钮,以鼓励人们查看特定帖子,而不是简单地返回主页。

例如,您可以宣传您最近的帖子或显示您评论最多的帖子

要自定义按钮,只需单击以在页面布局中选择它。在“链接”字段中,输入您要改用的网址。

图片[12]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

由于该按钮不再链接到主页,因此您需要替换“返回主页”标签。只需继续并在“按钮文本”框中输入新消息即可。

完成此作后,单击“高级”选项卡。在这里,您可以更改按钮的颜色、大小等。

图片[13]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

这就是创建简单的自定义 404 页面所需的全部内容。但是,还有许多其他功能和内容可以改善访问者体验,保持人们的参与度,甚至帮助您获得更多转化。

话虽如此,让我们看看您可以添加到 404 页面的一些高级功能。

将最受欢迎的帖子添加到您的 WordPress 404 页面

首先,您可能需要显示最受欢迎的帖子列表。由于这些文章很受欢迎,访问者很有可能会找到他们喜欢的内容。

您可以使用 MonsterInsights 插件自动创建此列表。它是 WordPress 的最佳分析解决方案,被超过 300 万个网站使用。

MonsterInsights 可以查看哪些帖子获得最多的访问者,并将它们添加到您的 404 页面。有关更多详细信息,请参阅我们的指南,了解如何在 WordPress 中按视图显示热门帖子。

激活 MonsterInsights 后,您可以通过在 WordPress 中添加短代码来显示最受欢迎的帖子。在SeedProd的左侧菜单中,只需找到“短代码”块并将其拖放到您的布局中即可。

图片[14]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

现在,复制以下短代码:

[monsterinsights_popular_posts_widget theme="beta"]

之后,单击以选择 SeedProd 编辑器中的 Shortcode 块。您现在可以将代码粘贴到左侧菜单中。

图片[15]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

默认情况下,SeedProd 不会在页面编辑器中显示最受欢迎的帖子的预览,因此您需要单击右上角的“预览”按钮才能查看短代码的实际效果。

如果你想在SeedProd编辑器中查看热门帖子列表,只需点击 “显示短代码预览 ”开关。

图片[16]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

在上面的短代码中,我们用于我们的列表,但 MonsterInsights 有几个不同的主题可供您使用。theme=“beta”

要查看不同的主题,请转到 WordPress 仪表板中的 Insights » 热门帖子,然后单击“热门帖子小部件”。

图片[17]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您现在可以单击不同的主题来查看预览。

当您找到喜欢的设计时,只需在 SeedProd 中更新简码即可。例如,如果您想使用“Alpha”主题,则需要输入:

	
[monsterinsights_popular_posts_widget theme="alpha"]

展示您最受欢迎的 WooCommerce 产品

如果您有在线商店,那么您可能希望在 404 页面上展示您最畅销的 WooCommerce 产品。这样,您的自定义 404 页面可以帮助您获得更多销售额。

在左侧菜单中,找到“最畅销产品”块并将其拖到您的布局中。

图片[18]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

SeedProd 会自动显示一些产品。但是,你可以通过在编辑器中选择它,然后使用左侧菜单中的设置来微调此块。

例如,您可以更改块中的列数、添加分页、允许购物者筛选最畅销的产品等等。

图片[19]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

尽管有这个名称,但您可以使用此块来显示其他类型的产品。例如,您可以展示正在打折的商品或评分最高的商品。

要查看不同的选项,请打开“类型”下拉菜单,然后从列表中选择一个选项。

图片[20]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

将联系表单添加到您的 WordPress 404 页面

您可能还想添加一个联系表单,以便访问者在找不到他们想要的内容时可以联系他们。此表单还为人们提供了一种报告 404 错误的简单方法,以便您可以修复这些损坏的链接并改善未来访问者的体验。

有关更多信息,请参阅我们关于如何修复 WordPress 中损坏链接的完整指南。

将联系表单添加到您的网站的最佳方法是使用 WPForms 插件。它是 WordPress 最好的联系表单插件,并带有拖放式表单生成器。

有关更多详细信息,请参阅我们有关如何在 WordPress 中创建联系表单的分步指南。

创建联系表单后,您可以使用“联系表单”块将其添加到您的 404 页面。只需在左侧菜单中找到该块并将其拖到您的设计中即可。

图片[21]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

然后,打开“选择表单”下拉列表并从列表中选择您的联系表单。

页面编辑器现在将显示联系表单的预览。

图片[22]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您可能需要添加一些文字来介绍您的联系表单或鼓励访问者取得联系。

为此,只需在联系表单上方添加“标题”或“文本”块,然后输入您要使用的文本。

图片[23]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

如何发布 404 页面

当您对 404 页面的外观感到满意时,就该发布它了。

只需单击“保存”旁边的下拉箭头,然后选择“另存为模板”。

图片[24]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

当系统询问时,请继续输入模板的名称。这仅供您参考,因此您可以使用任何您想要的东西。

之后,单击“保存模板”。

图片[25]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

在下一个弹出窗口中,单击“返回页面编辑器”。然后,你可以点击右上角的 “X” 按钮关闭SeedProd页面编辑器。

此时,您可能会看到一个弹出窗口,询问您是否要发布您的 404 设计。如果您愿意继续,请单击“是,激活”。

图片[26]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

如果您现在不想发布模板,请单击“否,关闭”。

之后,您可以随时通过转到 SeedProd » 页面发布设计。在这里,单击“404 页面”部分中的开关,使其显示“活动”。

图片[27]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

要查看您的 404 页面的实际效果,只需将 /404 添加到域名末尾即可。

发布自定义 404 页面后,最好跟踪人们如何与该页面互动。这使您可以查看哪些有效,哪些无效,以便您可以微调 404 设计以获得更多转化和参与度。

方法 2:使用完整站点编辑器创建 404 页面(仅限块主题)


如果您使用的是启用块的 WordPress 主题,那么您可以在完整的站点编辑器中编辑站点的 404 页面。

要开始使用,请前往 WordPress 仪表板中的外观 » 编辑器。

图片[28]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

默认情况下,完整站点编辑器会显示主题的主页模板。

要编辑 404 页面,请继续并单击“模板”。

图片[29]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您现在将看到构成基于块的主题的所有模板的列表,例如您的博客页面和存档页面。

只需继续并单击“404”。

图片[30]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

WordPress 现在将显示当前 404 设计的预览。

要继续编辑此模板,请单击小铅笔图标。

图片[31]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

全站编辑器的工作原理类似于标准 WordPress 内容编辑器。

要将块添加到设计中,请单击“+”按钮。

图片[32]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您现在可以键入要添加到 404 页面的块。

例如,您可能想要显示最近的帖子。为此,只需输入“最新帖子”,然后将块拖到您的设计上。

图片[33]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

添加块后,您可能需要对其进行自定义。

您可以继续并单击以在预览中选择块。然后右侧菜单将显示可用于更改块内容和外观的所有设置。

图片[34]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

您看到的选项可能会有所不同,具体取决于您选择的块。但是,您通常能够更改背景颜色、文本颜色和更改字体大小。

如果需要,您甚至可能希望将最近的帖子显示为下拉菜单。

您现在可以继续将块添加到您的设计中,并按照上述相同的过程对其进行微调。您可能还想将 WordPress 小部件排列在列中或使用 WordPress 块模式更快地创建自定义 404 页面。

当您对 404 页面的外观感到满意时,请单击“保存”使其上线。

图片[35]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客

现在,如果您在网站域名的末尾添加 /404,您将看到自定义 404 页面正在运行。

什么时候应该重定向 404 页面?

404 错误的最常见原因之一是访问者在输入 URL 时确实犯了错误。

在这种情况下,通常不需要将用户重定向到另一个页面。但我们建议遵循我们向您展示的最佳实践,以使它们重回正轨。

也就是说,如果您没有时间创建自定义 404 页面模板,您可能希望同时将用户重定向到主页。这样,您仍然可以将用户留在您的网站上。

除此之外,我们还强烈建议跟踪和重定向 404 错误。这样做可以让您找到用户无法访问的链接,并且可以将他们重定向到最相关的页面。

因此,您可以最大限度地增加页面浏览量和降低跳出率的机会。此外,您可以保留已链接到这些页面的反向链接,以维护您的域权限。

结束

多合一 SEO 插件具有方便的 404 错误日志和重定向功能,您可以使用。您不需要任何技术知识即可正确使用它,因为它开箱即用,非常用户友好。

图片[36]-在 WordPress 中如何改进 404 页面模板(2 种方法)-ZB博客
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 共7条

请登录后发表评论