如何在 WordPress 子主题中制作自定义 404 页面

已发表: 2018-10-23

无论您的网站设计和架构多么出色，用户都会在某个时候遇到 404 页面。 它可以像输入拼写错误的 URL 一样简单。 例如，如果您在 www.website.com/contact 上找到了一个联系页面，并且有人试图登陆 www.website.com/contacts，那么他们很可能会被重定向到 404 页面。 此外，网站内容调整可能并不总是考虑在没有重定向链接的情况下可能已经移动的页面。 希望这种体验不会经常发生在您的用户身上，但是当它发生时，它是一个提供帮助并为您的品牌创造独特事物的机会。

您可能对网络上的 404 页面并不陌生，因此您可能已经有了设计思路。 如果没有，通过谷歌搜索“酷 404 页面”，你会找到各种各样的灵感。 设计可以是从严肃到有趣、文字繁重或极简主义，或介于两者之间的任何东西。

以下是我的一些最爱。 它们是如何在页面设计中使用创造力的很好的例子。

无花果

figma 自定义 404 页面

Figma 是一个简单的 404 页面，但图形与矢量点非常吻合。 我喜欢它的简单和大胆； 这确实是所需要的。

爱彼迎

airbnb 自定义 404 页面

此示例在内容方面提供了更多信息。 说明性的方法宣传幽默元素。 这包括一些主要链接。 如果用户输入了错误的内容，他们可能会在列表中找到他们要查找的内容。

邮件黑猩猩

mailchimp 自定义 404 页面

MailChimp 网站上的设计总是很有趣，尤其是最近的重新设计。 它在文字和插图中都有幽默的元素。

免费获取 Genesis Framework 和 StudioPress 主题！

当您在 Flywheel 上托管您的网站时，您将可以直接从我们令人愉快的仪表板访问 30 多个高级 WordPress 主题（包括 Genesis！）。 价值超过 2,000 美元，您只需每月 15 美元即可开始使用！ 在这里了解更多。

创建自定义 404 页面

首先要做的事情：所有自定义都应该在子主题中完成。 这样，任何修改都不会被常规主题的更新覆盖。 这个 404 页面将是子主题中的一个文件，确切地说是名为404.php的文件。

如何添加 CSS 变量来自定义 WordPress 子主题

CSS 变量，也称为 CSS 自定义属性，允许在 CSS 样式表中轻松重用。 如果您使用过 WordPress 子主题，您可能会发现自己做了很多样式...

另外，请记住在测试环境中执行此操作。 更改主题文件时，总是有可能导致站点关闭的语法错误。

1.新建一个文件

当您拥有子主题时，第一步是创建一个新文件以开始使用。 您需要打开创建子主题的文件夹并添加一个404.php文件。

2. 编辑文件

基本示例

此示例说明包含文本和图像的页面。 这里的设计理念是创建需要插图图形的简单事物。

将以下代码粘贴到404.php页面中。 这是一个基本的开始。 您可以将内容修改为不同的结构以真正使其成为您自己的（即，如果您不想要侧边栏，则可以将其删除）。 

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
带有火车图形的基本 wordpress 自定义子主题 404 页面教程示例

您必须进行一些修改。 一种是更改图像的路径并包含您想要的标题。 不要忘记编写自定义消息，然后保存您的更改。

如果到目前为止您已按照说明进行操作，那么您已经创建了一个包含图像、消息和标准页眉、侧边栏和页脚的自定义模板。 （你可能在其他页面上也有这个。）

小部件方法

这是可选的，但许多设计师更喜欢使用小部件区域。 更容易进行更改并且更易于维护。 例如，小部件是显示最新和流行的博客文章的有效方式。

wordpress仪表板小部件区域基础wordpress自定义子主题404页面教程

添加小部件

要将小部件添加到404.php file中，您需要创建一个新的小部件区域。 子主题需要一个functions.php文件，所以现在是时候仔细检查子主题是否有一个。

在functions.php文件中，需要一个片段来在页面上添加一个新的小部件。 

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

此代码段仅添加小部件。 要真正开始使用它，必须调用此函数。 它将在404.php文件中调用。 请留意您想要此小部件区域的位置。

将以下代码复制并粘贴到您要显示新小部件的位置（例如，在标题和文本之后）： 

<?php dynamic_sidebar( '404' ); ?>

现在您已经确定了在哪里显示新的小部件区域，是时候通过转到Appearance > Widgets添加小部件内容了。 您可以在此处为 404 页面选择 HTML 块、热门帖子或任何其他小部件等内容。

wordpress 仪表板小部件区域插入基本的 wordpress 自定义子主题 404 页面教程示例与火车图形

无论您是创建简单的内容还是包含许多链接的页面，创建自定义 404 页面都非常简单。 通过使用子主题和小部件，有无限的设计可能性。

寻找更多自定义网站的方法？ 查看这些教程：

  • 如何添加 CSS 变量来自定义 WordPress 子主题
  • Genesis子主题的简单自定义
  • 如何在 WordPress 中创建和使用自定义字段