如何构建 WordPress 404 页面:深入指南

虽然大多数网站 URL 可读且易于输入,但没有考虑人为错误.即使是我们中最优秀的人有时也会错误输入 URL,并最终到达我们意想不到的网络位置.WordPress 404 页面可帮助用户了解他们犯了一个错误.不过,它还可以帮助将丢失的用户留在您的网站上,并将他们带到他们需要的页面.

我们将在后面的部分中详细解释 404 是什么以及可以做什么.简而言之,它是一个显示错误代码的页面,但很多网站都意识到这也是向用户展示更多信息的好方法.因此,您会发现这些页面本身就具有独特性和帮助性.

在接下来的几节中,我们将向您展示如何构建 WordPress 404 页面.它将包括来自网络的一些示例、应包含的内容等等.

404 页面是什么(和做什么)

首先,让我们讨论什么是 WordPress 404 页面.对于不知情的人来说,404 是众多 'HTTPS 响应状态代码'.根据他们告诉您的信息,有不同的代码组,我们过去在博客上介绍过很多.例如,500 范围的数字返回服务器错误:

400 范围涵盖客户端错误响应——浏览器端提交错误的次数.例如,413 Request Entity Too Large 错误,429 Too Many Requests 错误,以及(当然)404 错误.

通俗地说,如果您遇到 404 错误,则表示您导航到的 URL 处不存在页面.由于简单的打字错误,这是一个常见的错误.事实上,很多网站都认识到这一点.虽然大多数错误没有专门的页面,但 404 错误就可以了.这让您可以将用户留在网站上,并将他们正确重定向回您的网站.

在下一部分中,我们将看看其他网站如何向用户显示 404 错误,以供您参考.

来自网络的 404 页示例

我们可以从 WPKube 的 404 页面开始.它提供了一个功能性布局,并带有一条快速消息,表明该页面不存在:

有一个搜索框可以帮助用户找到正确的帖子或页面,以及按日期和类别排列的其他文章的集合.这基本上就是让用户回到他们原来的地方所需的全部内容.一些网站更进一步.

例如,互联网电影数据库 (IMDB) 使用电影引述来帮助确定问题,以及返回主页的链接:

这有助于使页面保持品牌形象.Elementor 404 页面还提供了一些品牌上的内容.这一次,以相关文章链接的形式:

我们喜欢这种方法,因为它为您提供了构建您正在查看的页面的指导.这不仅提供了价值.它还提供了 Elementor 可以做什么的证明.

在我们的研究中,很少有网站在以下情况下执行完整的重定向到主页面临404错误.这样做是有充分理由的,我们接下来会介绍.

为什么要构建自定义 WordPress 404 页面

现在,您将了解 WordPress 404 页面可以是一项宝贵的资产.为了给您提供一些细节,这就是您想要将其放在一起的原因:

  • 这是一种以用户为中心的很棒的方式,可以帮助那些导航到陌生页面的人.
  • 您可以保留您的 跳出率低,这将有助于您的搜索引擎优化 (SEO).
  • 说到这里,如果您以正确的方式设计 404 页面,您还可以在一定程度上改善搜索引擎优化.
  • 您甚至可以继续您的品牌推广工作当用户出现在他们不希望出现在您网站上的地方时.

总的来说,WordPress 404 页面可让您在可能会失去用户的情况下为您的网站提供"人性化"元素.因此,不要低估它的心理价值.这可能是退回用户和开发潜在客户之间的区别.

如何构建 WordPress 404 页面

在接下来的几节中,我们将向您展示如何构建 WordPress 404 页面.我们认为,您需要采取三个步骤:

不过,您的首要任务是做出决定.现在让我们更详细地了解一下.

1.决定如何构建 404 页面

如您所料,有多种方法可以创建 WordPress 404 页面.您的方法将基于您的目标和您拥有的技能.以下是您可以使用的不同方法的快速摘要:

  • 您可以使用一个空白的 PHP 文件并从头开始编写 WordPress 404 页面.
  • 每个 WordPress 安装都有一个功能强大的 404 页面模板.您可以在现有代码的基础上开发自己的页面.
  • 大多数页面构建器都有模板来帮助您为网站创建 404 页面.如果您使用页面构建器,例如 GeneratePress、Elementor、Beaver Builder,或其他,这个方法很有意义.
  • 还有一些插件可以帮助您快速构建 404 页面.

在本文中,我们将重点介绍页面构建器和插件方法.这是因为它们将是大多数用户最容易访问的方法.此外,如果您正处于编写 404 页面代码的阶段,那么您已经掌握了大量所需的知识.

使用插件创建 WordPress 404 页面

在我们进入页面构建器方法(本文的主要焦点)之前,值得注意的是插件选项也存在.不过,这里实际上只有一种解决方案需要考虑:404页面:

事实上,这个插件没有给你创建页面布局的工具,更多的是它让你将你开发的页面设置为你的 404 页面.许多其他插件会将 404 错误重定向到另一个页面.这对 SEO 来说不是最佳选择.该插件也不会创建任何额外的服务器请求,如果 站点性能 对您来说很重要,那就太棒了.

插件的过程是使用标准的 WordPress 块编辑器创建您的 404.这将为您提供创建页面所需的所有工具,同时使布局与网站的其余部分保持"同质化".我们将在后面的部分详细介绍要包含的内容.

完成设计后,您将前往外观> 404 错误页面屏幕:

这将让您从下拉菜单中选择正确的 404 页面,但也包括一些其他选项:

例如,有一个专门的 Advanced 标签,其中包含一些适用于您的 404 页面的有用(且功能强大)的选项:

您可以从各种选项中进行选择,以确保您的 404 错误以正确的方式运行.搜索引擎使用来自服务器的反馈来决定如何索引页面.您可能想要使用 410 Gone 错误代码在某些情况下,使用 404page,您可以选择此选项.

使用页面构建器创建 WordPress 404 页面

大多数网站所有者将使用页面构建器或某种描述的框架,因此,市场上的大多数主要解决方案都包括用于您的 404 页面的模板或块集合:

添加这些应该很简单,至少就像将任何其他元素添加到您的 WordPress 404 页面一样简单.事实上,在这方面,我们几乎不能说这是新的.每个解决方案的流程都将成为整体体验的一部分.

关于您的页面包含的元素还有很多要说的,我们接下来会看看.

2.添加页面的基本元素

如果您查看任何 404 页面——我们鼓励您这样做是为了研究和灵感——您会注意到一些全面的相似之处.

WordPress 404 页面的核心包括以下元素:

  • 向用户发出明确而直接的信息,表明发生了 404 错误.
  • 一种返回站点上现有页面(通常是主页)的方法.

在我们的示例中,我们拥有这两个元素,以及一些由 Elementor Block 模式提供的初始品牌:

不过,如果您查看其他 404 页面示例,它们通常包含在网站上找到正确页面的方法.搜索框是最常见的,我们也可以使用我们的页面构建器添加它:

我们不得不修改一些文字来提及搜索框,而我们在此期间还添加了一些样式.顶部有一个自定义分隔线,用作其余文本的"边界",搜索框提供"圆角"和"3D"外观.

我们使用 Elementor 的样式选项实现了这一点.Border Radius 覆盖了搜索区域的形状,而 Box Shadow 有助于赋予元素一定的深度.我们在没有任何代码字符的情况下完成了所有这一切,但 404 页面的功能和价值却一目了然.

从这里,您几乎可以添加任何您认为有用的其他元素.许多网站使用帖子列表,其他网站会添加联系表格,世界就是您的牡蛎.我们的建议是让用户留在网站上.因此,我们将放弃社交媒体链接,并坚持您的网站所包含的内容.这也将用作伪存档页面,这将有助于您的 SEO.

3.确保您的网站重定向到您的 404 页面

最后一步是确保您的网站使用您的新页面而不是默认模板.如果您使用的是 404page 之类的插件,这很容易.导航到外观> 404 错误页面,并从下拉列表中找到正确的页面:

保存更改后,作业就完成了.对于 Elementor,您需要将页面设置为模板.如果您还没有这样做,请使用箭头展开绿色的发布按钮,然后选择另存为模板:

为模板命名后,就可以开始了.从这里,返回 WordPress 仪表板和 Templates >保存的模板页面:

这里的解决方法有点繁琐,但您应该首先使用添加新按钮创建一个新模板:

在下一个屏幕上,为您的模板命名并选择错误 404 类型:

您会看到一个弹出窗口,您将在其中插入 WordPress 404 页面模板:

这将使您返回到 Elementor 编辑屏幕,当您点击发布时,您将进入一个对话框屏幕,要求您选择一个"条件":

这让您可以指定 404 页面的显示时间和位置.我们可以保持简单并选择Include404 Page:

保存更改后,您的网站将显示您的自定义 WordPress 404 页面.

总结

如果您在一个陌生的大地方需要路线,您通常会寻找地图或路标来寻找您所在位置的线索.WordPress 404 页面几乎等同于"你在这里!"标记.这是一种告诉用户他们输入的 URL 不存在的方法.尽管如此,许多网站并不会停止提供错误.这些页面成为网站品牌的一部分,并帮助用户回到您网站上更熟悉的地方.

在这篇文章中,我们研究了如何构建 WordPress 404 页面.无论您采用哪种方法,这都不太困难.大多数主题都带有功能性 404 页面模板,但如果您将其与专用页面构建器(例如 GeneratePress、Elementor 或 Beaver Builder)结合使用,您就可以制作功能齐全的 404 页面,为您的网站提供价值.

您想构建一个 WordPress 404 页面,这篇文章对您有帮助吗?在下面的评论部分分享您的想法、问题和想法!

13

发表回复