404 errors are not good for user experience. We showed you how to get 404 错误电子邮件警报 on your site so that you can quickly fix them. In this article, we will show you how to improve your 404 page template in WordPress, so you can create a more useful 404 page that actually help users.
404错误不利于用户体验。 我们向您展示了如何在您的网站上获取关于 404 错误的电子邮件警报，以便您快速修复它们。 在本文中，我们将向您展示如何在WordPress中改进404页面模板，以便您可以创建实际上对用户有帮助的更有用的404页面。
大多数WordPress 404页面的外观如何？ （How Most WordPress 404 Page Looks Like?）
404 页面通常是大多数网站上最容易被忽视的页面。通常很多 WordPress 主题的 404 页面如下所示：
404 页面通常是大多数网站上最容易被忽视的页面。通常，许多 WordPress 主题 404 页面如下所示：
WordPress 中的此 404 页面由名为 404.php 的模板文件处理。
WordPress 中的 404 页面由名为 404.php 的模板文件处理。
如果你的配置真的很混乱，那么 404 页面将如下所示：
如果你的配置真的很混乱，404页面将如下所示：
上面的404页面都没有真正的用处。
上面的404页面没有一个是真正有用的。
当用户登陆 404 页面时，他们已经感到沮丧了。为什么？因为他们找不到他们想要的东西。
当用户登陆 404 页面时，他们已经感到沮丧。为什么？因为他们找不到自己想要的东西。
您需要帮助用户找到正确的页面。您可以通过正确传达错误来帮助改善这种体验，并为他们提供适当的行动方案（即下一步做什么）。
您需要帮助用户找到正确的页面。您可以通过正确传达错误并向他们提供适当的操作（即下一步做什么）来帮助改善这种体验。
这可以通过向他们展示他们可以访问的网站的其他部分、为他们提供联系方式等来完成。
这可以通过向他们展示您可以访问的网站的其他部分、向他们提供联系方式等来完成。
如何在WordPress中创建自定义404页面 （How to Create a Custom 404 Page in WordPress）
我们需要做的第一件事是从创建自定义 404 页面模板开始。这可以通过编辑 WordPress 主题中的 404.php 文件来完成。
首先，我们需要创建一个自定义的 404 页面模板。这可以通过编辑 WordPress 主题中的 404.php 文件来完成。
If you are editing your theme directly, then we would urge you to at least 备份您的 WordPress 主题.
如果您直接编辑主题，那么我们强烈建议您至少备份 WordPress 主题 。
为了使您的 404 页面更有用，我们将向您展示如何添加有用的元素，例如热门帖子、评论最多的帖子、最近的帖子、日期档案、所有类别列表等。
为了使您的 404 页面更有用，我们将向您展示如何添加有用的元素，例如热门帖子、评论最多的帖子、最新帖子、日期档案、所有类别列表等。
这将使新用户能够快速浏览您所提供的产品。
这将使新用户能够快速探索您所提供的功能。
在404页上显示最受欢迎的帖子 （Display Most Popular Posts on 404 Page）
We are going to use one of the 最佳 WordPress 热门帖子插件 to display popular posts on our 404 page.
我们将使用最好的 WordPress 流行帖子插件之一在404页面上显示热门帖子。
First thing you need to do is install and activate the WordPress 热门帖子 plugin on your website. Upon activation, you need to add this template tag into your 404.php file where you want to display the popular posts.
您需要做的第一件事是在您的网站上安装并激活WordPress 热门帖子插件。 激活后，您需要将此模板标记添加到要显示热门帖子的404.php文件中。
<?php wpp_get_mostpopular(); ?>
在404页上显示评论最多的帖子 （Display Most Commented Posts on 404 Page）
评论最多的帖子部分还依赖于我们在上一步中激活的热门帖子插件。只需在您想要显示评论最多的帖子的位置添加此模板标签即可。
“评论最多的帖子”部分还依赖于我们在上一步中激活的“热门帖子”插件。只需将此模板标签添加到您希望显示评论最多的帖子的位置即可。
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
You can also check out our guide on how to display 评论最多的帖子 in WordPress.
您还可以查看我们的指南，了解如何在WordPress中显示评论最多的帖子 。
在404页上显示最近的帖子 （Display Recent Posts on 404 Page）
There are multiple ways to 显示最近的帖子 in WordPress. The easiest way is to add this template tag in your 404 template to display your recent posts.
有多种方法可以展示 WordPress中的最新帖子 。 最简单的方法是在404模板中添加此模板标签，以显示您最近的帖子。
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
在404页上显示随机帖子 （Display Random Posts on 404 Page）
如果您想在 WordPress 中显示随机的帖子列表，那么您只需在 404 模板中添加此代码即可在其中显示站点中的随机帖子列表。
如果您想在 WordPress 中显示随机的帖子列表，只需在 404 模板中添加此代码即可在其中显示网站的随机列表。
<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
foreach($posts as $post) { ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php } ?>
</ul>
使用压缩档案添加每月档案 （Add Monthly Archives with Compact Archives）
If you look at the WPBeginner 404 page, then you will notice that we are displaying our monthly archives listing using a plugin 紧凑档案. Note we have adopted this plugin and are now maintaining it.
如果您查看WPBeginner 404页面，您会注意到我们正在使用插件紧凑档案显示我们的每月存档列表。 请注意，我们已经采用了此插件，并且正在对其进行维护。
安装并激活此插件 Compact Archives 插件。激活插件后，在 404.php 文件中添加以下代码：
安装并激活 Compact Archives 插件。激活插件后，在 404.php 文件中添加以下代码：
<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($style='block'); ?>
</ul>
它将显示您的每月档案，如下所示：
它将显示您的每月档案，如下所示：
WordPress的示例404模板 （A Sample 404 Template for WordPress）
以下是基于默认 WordPress 主题“二十十三”的 404 模板的示例 404.php 文件。
这是基于默认 WordPress 主题 2033 的 404 模板的示例 404.php 文件。
<?php
/**
* The template for displaying 404 pages (Not Found)
*
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" 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(); ?>
<h3>Check out some of our popular content:</h3>
<div class="col1">
<div class="col-header">
<h3>Popular Posts</h3>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
<div class="col2">
<div class="col-header">
<h3>Most Commented</h3>
</div>
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
<div class="col3">
<div class="col-header">
<h3>Recent Posts</h3>
</div>
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
</div><!-- .page-content -->
</div><!-- .page-wrapper -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
将此 404 模板与《二十十三》中的默认模板进行比较。您会注意到，在搜索表单之后，我们添加了自定义代码来显示热门、评论最多和最近的帖子。之后我们添加了一些 CSS 将其分成几列。
将此 404 模板与二十三中的默认模板进行比较。您会注意到，在搜索表单之后，我们添加了自定义代码来显示热门、评论最多和最近的帖子。之后，我们添加了一些 CSS 将其分为几列。
.col1, .col2, .col3 {
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header {
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}
最终结果如下：
最终结果如下所示：
我们希望本文能帮助您改进 WordPress 网站上的 404 页面。请随意使用代码并尝试不同的模板标签来满足您的需求。
我们希望本文能帮助您改进 WordPress 网站上的 404 页面。请随意使用代码并尝试不同的模板标签来满足您的需求。
You can also use this lists for 酷404设计实例 as inspiration.
您还可以使用此列表作为404设计实例的灵感。
If you liked this article, then subscribe to our YouTube 频道 for more WordPress videos. You can also join us on 谷歌+ and 推特.
如果您喜欢这篇文章，请订阅我们的YouTube 频道以获取更多WordPress视频。 您也可以通过谷歌+和推特加入我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-improve-your-404-page-template-in-wordpress/