wordpress404_最好的最佳WordPress 404错误页面设计-CSDN博客

本文介绍了最佳的WordPress 404错误页面设计，包括灵感展示、最佳做法和创建404页面的方法。强调了在设计404页面时应结合创意、可用性及持久印象，提供了多个设计实例和代码片段，帮助用户优化网站用户体验。

摘要由CSDN通过智能技术生成

wordpress404

Every single user on the web has landed on at least one 404 page in their entire user surfing experience. The truth is that the number that users land on 404 pages is significantly higher than just one. Often when a user arrive on a 404 page, they end up leaving your site thus increasing your bounce rate. High bounce rate can negatively impact your website by decreasing your revenue from advertisers and more. You can reduce the bounce rate and increase pageviews by simply optimizing your 404 Error Page. In this article, we will highlight best of best WordPress 404 Error Page Designs, and we will give you our insights on creating a beautiful and highly usable 404 page design for your WordPress.

网络上的每个用户在其整个用户浏览体验中都至少登陆了404个页面。事实是，用户在404页上登陆的数量远高于仅一页。通常，当用户到达404页面时，他们最终离开您的网站，从而提高了跳出率。较高的跳出率可能会减少您从广告商那里获得的收入或更多，从而对您的网站产生负面影响。您可以通过简单地优化404错误页面来降低跳出率并提高浏览量。在本文中，我们将重点介绍最佳的WordPress 404错误页面设计，并为您创建有关WordPress的漂亮且高度可用的404页面设计的见解。

灵感展示 (Showcase for Inspiration)

Before we show you how you can design your own 404 page design for WordPress, we will highlight some of the best 404 Error Page Designs being used on WordPress for your inspiration. The criteria we used to pick these designs were creativity and usability. Some designs have both, and some only have one aspect.

在向您展示如何为WordPress设计自己的404页面设计之前，我们将重点介绍一些在WordPress上使用的最佳404错误页面设计，以激发您的灵感。我们用来选择这些设计的标准是创造力和可用性。有些设计兼有，有些只有一个方面。

1. WPBeginner (1. WPBeginner)

2. 催化剂工作室 (2. Catalyst Studios)

3. 杰米·赫斯基森(Jamie Huskisson) (3. Jamie Huskisson)

4. 45royale Inc. (4. 45royale Inc.)

5. 焦化 (5. Carsonified)

6. CSS技巧 (6. CSS Tricks)

7. Techkultura (7. Techkultura)

8. 灵感点 (8. Inspiration Bit)

9. Catswhocode (9. Catswhocode)

10.Ba.pe (10. Ba.pe)

11. 切和味 (11. Cut and Taste)

12. CSS混音 (12. CSS Remix)

13. Ateaseweb (13. Ateaseweb)

14. 科勒媒体 (14. Koller Media)

15. 扩展广播 (15. Expansion Broadcast)

16. 功能 (16. Function)

17. 滞后区 (17. Retard Zone)

18. 基蒙多 (18. Kidmondo)

19. 开发区 (19. Devlounge)

20. 克里斯·詹宁斯 (20. Chris Jennings)

您应该从中学习的最佳做法和经验教训 (Best Practices and Lessons You Should Learn from these)

In the above showcase you probably saw some 404 pages that were very creative, whereas others that were just weird but memorable, and some that were simple yet elegant and usable. When creating a 404 page you need to remember to combine all three elements: creativity, usability, and the ability to leave a lasting impression.

在上面的展示中，您可能看到了404个页面，这些页面非常有创意，而另一些页面却很奇怪但令人难忘，而另一些页面却简单却又优雅且实用。创建404页面时，您需要记住结合所有三个要素：创造力，可用性和留下持久印象的能力。

When creating our 404 page, we actually looked at a lot of these above to get inspiration and combine the best elements from these into one. Most of the time, when people land on the 404 page, they are frustrated. So you need to assist them in finding what they are trying to reach, but in the most creative way possible.

在创建404页面时，我们实际上查看了上面的许多内容，以获得灵感并将这些元素中的最佳元素组合为一个。大多数时候，当人们登陆404页面时，他们会感到沮丧。因此，您需要帮助他们找到他们想要达到的目标，但要尽可能以最有创意的方式。

A good structure that you can follow is:

您可以遵循的良好结构是：

Creative Image
创意形象
List of Popular Posts
热门帖子列表
List of Recent Posts
最近帖子列表
List of Archives
档案清单
Search Bar
搜索栏
Offer more help by giving contact options
通过提供联系方式提供更多帮助

Now you do not need to have all of them, but you should certainly have more than two of these options in your 404 page.

现在，您不需要全部使用它们，但是在404页中，您当然应该拥有两个以上的这些选项。

Analyzing our 404 page, some people say we do not have a search bar. We have our search bar in the sidebar, so there is no reason to display it twice. We are displaying archive by month, by category, and we are displaying the popular tags. Ofcourse the creative image is to make it all look friendly rather than dull.

分析我们的404页面后，有人说我们没有搜索栏。我们在侧边栏中有我们的搜索栏，因此没有必要显示两次。我们按月，按类别显示存档，并显示受欢迎的标签。当然，创造性的形象是使它们看起来友好而不乏味。

Now we understand that not everyone is a great artist and cannot come up with some of the illustrations and cartoons above, but you can see the Devlounge example or Function’s example above to see how simplicity can also work. Devlounge has a very organized 404 page, no image, no nothing, but it is very organized and helpful. Function has a simple icon and other resources, but nothing super graphic.

现在我们了解到，并不是每个人都是伟大的艺术家，不能提出上面的一些插图和卡通，但是您可以在上面看到Devlounge示例或Function的示例，以了解简单性也可以如何工作。 Devlounge的页面非常井井有条，没有任何图像，但没有任何错误，但是它的组织性非常好，而且很有帮助，它的404页面非常有条理。功能具有简单的图标和其他资源，但没有超级图形。

When creating your own 404 page, keep that in mind.

创建自己的404页面时，请记住这一点。

如何在WordPress中创建404页面 (How to Create a 404 Page in WordPress)

In your WordPress theme directory there is a file called 404.php, if you don’t have that file then you might want to create one. You can add any HTML in that file to fit your needs. But it is recommended that you use the default parameters, so the page looks like it is part of the design.

在WordPress主题目录中，有一个名为404.php的文件，如果您没有该文件，则可能要创建一个。您可以在该文件中添加任何HTML以适合您的需求。但是建议您使用默认参数，因此页面看起来像是设计的一部分。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<？php get_header(); ？>
<？php get_sidebar(); ？>
<？php get_footer(); ？>

Now wrap around the styling HTML around it. If you want you can even copy your page.php content in 404.php and just remove the content area and add your customized tags.

现在，在其周围包装样式HTML。如果您愿意，甚至可以将您的page.php内容复制到404.php中，然后删除内容区域并添加自定义标签。

Here are some of the tags that you can use:

以下是一些您可以使用的标签：

Display Archive by Months:

按月显示存档：

<?php wp_get_archives('type=monthly'); ?>

<？php wp_get_archives('type = monthly'); ？>

This code will display archive by months, but it will list all months. So it might become a mess if you have a blog that is three years old. To learn how to limit the count of months displayed check out the tutorial.

该代码将按月显示存档，但将列出所有月。因此，如果您拥有一个成立三年的博客，它可能会变得一团糟。要了解如何限制显示的月份数，请查看本教程。

Display list of Categories

显示类别列表

<?php wp_list_cats(); ?>

<？php wp_list_cats(); ？>

This code will list all categories on your blog. Ofcoures you can style them however using list tags or others.

此代码将列出您博客上的所有类别。当然，您可以使用列表标签或其他样式设置样式。

Display Most used Tags

显示最常用的标签

<?php wp_tag_cloud('smallest=8&largest=12&unit=pt&number=30&format=list&order=RAND'); ?>

<？php wp_tag_cloud('smallest = 8＆largest = 12＆unit = pt＆number = 30＆format = list＆order = RAND'); ？>

This will show the most used tags like how we have on our 404 page.

这将显示最常用的标签，例如我们在404页上的显示方式。

Display Recent Posts

显示最近的帖子

<?php get_archives('postbypost', '17', 'custom', '<li>', '</li>'); ?>

<？php get_archives('postbypost'，'17'，'custom'，'<li>'，'</ li>'); ？>

There are more codes that you can use, you will just have to search the documentation and find it. If you have a specific question feel free to ask us at anytime.

您可以使用更多代码，只需搜索文档并找到它。如果您有特定问题，请随时询问我们。