如何创建自定义 404 错误页面 如何添加自定义 404 错误页面

2025-06-10

如何创建自定义 404 错误页面

如何添加自定义 404 错误页面

您好,您需要在您的网站/博客上添加自定义 404 错误页面吗?当用户打开您网站上不存在的页面(例如错误的链接、已被删除的页面或用户输入错误的 URL)时,就会发生 404 错误。

在本教程中,您将学习如何在您的网站/博客上添加自定义 404 错误页面。接下来,我们将介绍如何更改 404 错误页面的标题,并阻止其被 Google 收录。

如何添加自定义 404 错误页面

图片描述
以下是在 WordPress 网站/博客上添加自定义 404 错误页面的步骤 -

1.首先,登录您的 WordPress 仪表盘。2
.前往“外观”>“主题编辑器”。3
.在“主题编辑器”下找到 404.php 选项,然后点击它。4
.现在将以下代码复制并粘贴到页面中。

<?php get_header(); ?>
<img src="https://i.ibb.co/W6tgcKQ/softcodeon.gif">
<title>Page Not Found</title>
<h1 class="error-text">Whoops, We can't seem to find the resource you're looking for.</h1>
<p class="text">Please check that the Web site address is spelled correctly.Or,</p>
<div class="button">
<a class="error" href="#">Go to Homepage</a>
</div>
<style>
*{padding:0;margin:0;background:#f0f0f0;}
img{display: block;
  margin-left: auto;
  margin-right: auto;}
  .button{text-align:center;}
 .text{text-align:center;font-size:20px;margin-bottom:40px;}
 .error-text{text-align:center;padding:20px;  font-family: Cursive;
} .error{font-family: 'Roboto', sans-serif;font-size:1.5rem;text-decoration:none;padding:15px;background:#6200ee;color:#fff;border-radius:10px;}
</style>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Enter fullscreen mode Exit fullscreen mode

最后,点击“更新文件”按钮。

注意:如果您有与我在上面代码中添加的相同的类,请将其更改为您想要的独特类。您还可以通过添加背景颜色、更改图片或动图、修改字体系列以及错误页面的文本来自定义样式。
为了防止 Google 和其他搜索引擎索引您博客的 404 错误页面,请按照本指南了解如何在 Google 搜索中隐藏页面。

想详细阅读官方网站如何创建 404 错误页面?我建议将其他最佳页面链接添加到您的 404 错误页面。

观看DEMO

希望本指南能帮助您自定义网站博客的 404 错误页面。如果您对这个简单的 404 错误页面有任何疑问,请在下方留言。

鏂囩珷鏉ユ簮锛�https://dev.to/softcodeon/how-to-create-custom-404-error-page-2ghb
PREV
成功程序员的 7 个好习惯
NEXT
如何开始使用云、学习部署和无服务器