如何在 WordPress 中编辑 404 页面(自定义指南)| WP爱好者

已发表: 2022-01-07

每个内容创建者和网站管理员都知道小细节很重要,互联网上没有第二印象。 漂亮的配色方案、出色的动画效果或吸引人的 404 页面都是决定用户体验成败的细节。

404 页面是描述未找到页面时的情况的技术表达。 例如,可能是因为用户在浏览器选项卡中输入了错误的 URL,或者该网页不再在线。

在以下段落中,您将学习如何在 WordPress 中编辑 404 页面。 有吸引力的 404 页面是克服尴尬时刻的最佳解决方案。 一个出色的 404 页面不会让网站访问者失望,而是有助于更好地展示您的品牌形象。

什么是 404 页面

您单击链接或在浏览器选项卡中输入 URL 地址。 接下来,浏览器开始从托管您要访问的网站的服务器请求数据。 这是互联网浏览的基本解释。 浏览器和服务器之间的信息交换包括一些状态码。 此外,还有描述网页重定向、客户端或服务器错误或信息目的的状态。

所有带有4XX形式的状态代码都与客户端错误有关。 例如,403 Forbidden 是当服务器理解浏览器的请求但拒绝提供数据时。 到目前为止,404 页面是最著名的状态码。 当您单击损坏的链接、输入错误的 URL 驱动到不存在的网页时,或者您请求的资源不存在时,您会得到一个 404 页面。

即使是重要的网站,如大型杂志新闻或访问量很大的商店,也可能包含 404 页面错误。 当然,这是不可避免的,但你应该知道如何度过尴尬的境地。 因此,如果您尽一切可能为您的网站创建一个好看的 404 错误页面,这将有所帮助。

一个好的 404 页面的剖析

tiktok.com 的 404 页面设计图片作为如何在 WordPress 中编辑 404 页面的示例。
tiktok.com 的 404 页面设计

一些网站通过在具有酷 404 页面的列表中提及来获得反向链接和公众认可。 网站访问者欣赏 404 页面上的优秀设计或幽默信息。 这应该让您相信,美观的 404 错误页面是您的在线业务的首要任务。 这是一个好的 404 页面应该包括的内容:

错误信息——用户应该从他们登陆 404 页面的那一刻起就意识到问题。 说清楚,让每个人都明白。

指向您的内容的链接——您不希望用户放弃您的网站。 为他们提供相关内容的链接。 无论是您最好的内容还是与丢失页面相关的内容,这完全取决于您。 重要的是让它们留在您的网站上。

道歉–让人们知道您对给他们带来的不便感到抱歉。 尽可能使用幽默——这是鼓励他们给您的网站第二次机会的最佳方法。

良好的设计——人们在进入 404 页面时会感到失望并且往往反应过度。 除了引人入胜的内容外,令人惊叹的设计可能会改变他们的想法。 尽力制作出色的 404 页面。

如何在 WordPress 中编辑 404 页面

幸运的是,我们有多种选项可以在 WordPress 中编辑 404 页面。 最有经验的用户可能会去编辑 404.php 文件。 这是负责显示 404 错误页面的文件。 喜欢使用 Elementor 等页面构建器的 Web 管理员可以创建 404 页面。 最后,一些用于制作 404 页面的插件可供缺乏编码技能的人使用。 让我们剖析在 WordPress 中创建和编辑 404 页面的所有方法。

通过 FTP 客户端编辑 404 页面

一个好的经验法则是在编辑代码之前执行站点的备份副本。 永远不要跳过这一步——在大多数情况下,您不需要站点备份,但如果没有做好准备,就会发生坏事。 所以做备份放心!

假设您执行了完整的站点备份,并且准备好深入研究此事。 使用您选择的 FTP 客户端并连接到站点 localhost。 搜索一个名为 404.php 的文件——它是负责显示 404 错误网页的文件。 通常,WordPress 主题有一个专用的 404.php 文件,但有些人可能会错过这个文件。 仔细检查您的主题代码是否包含 404.php 文件。 如果您的主题没有 404.php 文件,您将不得不构建一个。 创建一个新文件并复制以下代码行:

404页面模板

<?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

来源:在 WordPress Codex 上创建错误 404 页面

这是 404 Page of 23 主题背后的代码 - 这是一个适合编辑和用于您的项目的基本页面。 当然,您可以查看其他默认的 WordPress 主题并检查它们的 404 页面。 二十三主题的404页面调用了你网站的页眉和页脚,所以页面符合你网站的风格。 无论您的网站看起来如何,404 错误页面都会有类似的设计。 但是,您必须调整此页面上显示的内容。 在这个阶段,您的内容创建者的才能介入。

或者,您可以编辑 404.php 文件以显示在您的站点上发布的内容。 选项是无穷无尽的,所以让我们看看增强 404 页面错误的一些潜在方式。

  • 显示最近七篇文章的标题——你所要做的就是把这段代码粘贴到 404.php 文件中:
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>
  • 显示随机七个帖子的标题粘贴以下代码以显示七个随机帖子:
 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

添加您的徽标或有趣的图像(猫和狗总是有效),让观众微笑并给您第二次机会。 接下来,在完成编辑工作后测试 404 页面。 要显示您的 404 页面,请在浏览器栏中输入您的站点地址,并在其后添加一个随机的字母字符串。 结果应该是这样的:

 https://example.com/dfdfddfd

如果它不起作用,那是因为服务器找不到您的自定义 404.php 文件。 在这种情况下,您应该转到站点 .htaccess 文件并粘贴以下代码行:

错误文档 404 /index.php?error=404

重要提示:如果您编辑新的或最近启动的网站,它可能没有 .htaccess 文件。 这不是一个大问题 - 更改您网站的永久链接并保存您的操作。 然后,在此之后立即恢复为您首选的永久链接格式。 这样,您将生成 .htaccess 文件。

通过主题编辑器编辑 404 页面(不推荐)

如何使用主题编辑器在 WordPress 中编辑 404 页面的图像。
通过主题编辑器编辑 404 页面

大量与在 WordPress 中编辑 404 页面相关的文章提到主题编辑器是一种可行的解决方案。 它不是! 虽然直接从 WordPress 管理仪表板编辑站点代码既方便又直接,但它很危险,最终可能会失败。 更不用说,在网站在线并且每个人都可以访问时编辑网站一点也不专业。 此外,一旦您更新主题,您的编辑就会消失(除非您使用子主题)。

通过页面构建器编辑 404 页面

这种方法安全、简单、有效。 您可能熟悉 Elementor、Divi Builder、Beaver Builder、SeedProd 或 Themify Builder 等页面构建器。 你选择哪个无关紧要,只要你能很好地掌握它。 这些构建器让您无需编写任何代码即可创建出色的 404 页面。 如果您担心将代码片段粘贴到您的站点文件中,这是最好的解决方案。

查看您最喜欢的页面构建器的博客和文档,您很可能会找到解释如何创建 404 页面的教程。 此外,一些页面构建器有专门的 404 页面模板。 选择一个模板并对其进行个性化以匹配您的品牌。

404页WordPress插件

您没有太多选择来使用专用插件创建 404 页面。 但是,一些插件值得您关注。 他们的资本优势是您不必编写代码来创建和编辑 404 页面。 这些插件简单、有效且轻量级。

404页 

WP Repository 中的 404page 插件
WP Repository 中的 404page 插件

您可能会认为您必须是一名编码人员才能创建一个好的 404 错误页面。 多亏了这个插件,每个人都可以构思一个有吸引力的 404 错误页面。 此外,404page 插件并不像页面构建器那样复杂。 你专注于你的最终产品——一个好的 404 错误页面。

安装并激活插件。 接下来,创建一个 404 页面,就像您在网站上创建其他页面一样。 在您的 WordPress 管理仪表板中,转到外观 > 404 错误页面,然后选择您刚刚构建的页面作为您的站点自定义 404 错误页面。

该插件不允许重定向网页; 它只是告诉搜索机器人该网页丢失了。 404page是一个开发者的个人项目,所以这个插件背后没有代理。 考虑到该插件有 100,000 次活跃安装和几乎完美的评分 - 4.9 星(满分 5 星)。在这种情况下,插件开发人员值得我们赞赏!

所有 404 重定向到主页和损坏的图像重定向 

WP Repository 中的所有 404 重定向插件
WP Repository 中的所有 404 重定向插件

该插件的名称不是很令人印象深刻,但它具有很强的暗示性。 该插件处理 404 页面错误的方式与之前的替代方式不同。 这个插件不是用精心设计的 404 页面来取悦访问者,而是将所有 404 错误重定向到主页或其他网页。 该插件的最大优势是您可以控制网站上的损坏链接。 此外,您可以使用此插件重定向用户。 例如,不要让人们访问未更新的博客文章,而是使用此插件将他们驱动到更新的版本。

Colorlib 404 定制器 

WP Repository 中的 Colorlib 404 Customizer 插件
WP Repository 中的 Colorlib 404 Customizer 插件

该插件使用简单,真正帮助您创建引人入胜的 404 页面。 它带有专业制作的 404 模板,您可以根据自己的需要进行自定义。 Colorlib 404 Customizer 插件允许插入社交媒体按钮、更改背景颜色或图像以及配置文本标题。 更高级的用户可以添加自定义 CSS 代码。 该插件是开源的,因此您可以为改进插件做出贡献。

使用页面构建器或通过您的主题进行。

如果您已经使用页面构建器,则您已经可以选择通过它自定义 404。 几乎每个页面构建器都允许您编辑 404 页面。 以下是我们确信您可以使用的插件列表:

● 微风

● 元素

● 海狸生成器

● Divi Builder

● 网站来源

如果您使用的是 OceanWP、GeneratePress 或 Astra 等主题,您可以通过它们的主题选项来实现。 如果您导入演示内容,您将获得一个外观精美的 404 页面。 导入演示内容和使用预先构建的设计的唯一缺点是您的网站或多或少看起来与演示完全相同。 以这个网站和 Astra 演示为例。 浏览过 Astra 的初始网站库的每个人都会很快意识到网站所有者并不是自己创建的。 这可能会损害用户对您网站的信任程度。

从好的方面来说,Astra、OceanWP 和其他拥有 500.000 多用户的主题每个月都会扩展他们的初始站点库。

交给你

您现在对如何在 WordPress 中编辑 404 页面有了清晰的认识。 有很多解决方案可以做到这一点,您应该选择适合您的技能和需求的一种。 重要的是有一个令人兴奋的 404 错误页面来取悦您的观众。 您用于设计和实施该 404 页面的方法和工具与您的客户无关。 您没有任何借口缺少出色的 404 错误页面! 转到绘图板并开始构建自定义错误页面!