虾皮路
现在越来越多人开始用BT宝塔面版做网站的基础环境搭建了，简单实用，很多新手小白建站的首选。但是有时候又发现一个问题，在安装完WordPress程序后，一般都会自带有404错误页面。但是就算页面输入错误，仍旧会回到nginx的404页面，无论后端如何设置都是默认的nginx的404错误页面。下面，虾皮路给大家介绍一下BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程。
一、什么是404页面
404页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。
简单一句话，访问时找不到这个页面，就返回404。
二、为什么要设置404自定义页面
设置404页面的作用如下：
1.避免出现死链接
网站设置404页面后，如果网站出现死链接，搜索引擎蜘蛛爬行这类网址得到“404”状态回应时，即知道该URL已经失效，便不再索引该网页，并向数据中心反馈将该URL表示的网页从索引数据库中删除。避免因为死链接影响网站收录。
2.提升用户体验
404页面通常为用户访问了网站上不存在或已删除的页面，服务器返回404错误页面，告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开，消除用户的挫败感。
3.避免信任度下降
搜索引擎通过HTTP状态码来识别网页的状态。当搜索引擎获得了一个错误链接时，网站应该返回404状态码，告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码，搜索引擎就会为该链接建立索引，这导致大量不同的链接指向了相同的网页内容。结果是，搜索引擎对该网站的信任度大幅降低。很多网站存在这个问题：404页面返回的是200或302状态码而不是404状态码。
4.避免被惩罚
有些网站由于应用了一些错误的服务器配置，导致返回的是200状态码或是302状态码，虽然这些状态码对访问网站的用户没有影响，但是却会误导搜索引擎，使搜索引擎认为该页面是有效页面，从而抓取下来。如果404页面过多，就造成了大量的重复页面，很有可能被搜索引擎认为是作弊而遭到惩罚。
总结为一段话：404页面意味着找不到相应的页面了，接下来访客是直接离开，还是继续留下来访问其他页面？
比如，生硬的默认的404页面是这样的:
如果设置了404自定义页面是这样的：
这样的
还有这样的
而且上面带了链接，指向主页。这样是不是感觉好多了，留下来继续访问的欲望增加了？
三、如何设置404自定义页面
一般情况下，我们安装完WordPress，都会自带404自定义页面，这个时候如果找不到页面，可以自动调用该页面显示。但是如果是BT宝塔面版，每次都是返回生硬的NGINX的404页面，这咋回事呢？其实是BT宝塔的后台设置问题。只要修改就行了。
1、进入BT宝塔面版后台
找到网站管理-设置，找到自己的站点，点击右边的设置选项。
2、修改配置文件
将默认的代码用#号注释掉，即原来默认是
error_page 404 /404.html;注释掉后是这样的：
#error_page 404 /404.html;
保存后，网站会自动调用WordPress的默认404错误页面了。比如虾皮路的404页面是这样的
那么，如果WordPress自带默认的页面不好看，我们想换一个好看的自定义页面行不行，当然可以。操作如下：
打开自己WordPress相应主题的文件夹
将原来文件夹下的404.php页面里的代码修改成自己想要的改的代码即可。
这里虾皮路提供2个404自定义页面给大家参考，大家可以自行修改代码或者下载图片等。
1、仿win10电脑错误页面效果如下
404页面代码如下：
/2、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404 页面未找到</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #0099CC;
}
.STYLE7 {
font-size: 24px;
font-family: "微软雅黑";
}
.STYLE9 {font-size: 16px}
.STYLE12 {
font-size: 100px;
font-family: "微软雅黑";
}
-->
</style></head>
<body>
<script language="javascript" type="text/javascript">
setTimeout(function () { this.location.href = "https://shopee6.flxzz.com/" }, 5000);
</script>
<span class="STYLE12"> :(</span>
<p class="STYLE7"> 您输入的网址我们没有找到。你可以点击<a href="https://shopee6.flxzz.com">返回首页</a><br />
5秒后为您跳转到首页，您可以在首页试着找找您所需要的信息。</p>
<p class="STYLE7"> <span class="STYLE9">如果您想了解更多信息，则可以稍后在线搜索此错误: 404 页面未找到</span></p>
</body>
</html>2、一个好看的404错误页面
404页面代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404-对不起！您访问的页面不存在</title>
<style type="text/css">
.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://shopee6.flxzz.com/404/head404.png) no-repeat; }
.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://shopee6.flxzz.com/404/txtbg404.png) no-repeat;}
.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}
.txtbg404 .txtbox .paddingbox { padding-top:15px;}
.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}
.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
</style>
</head>
<body bgcolor="#494949">
<div class="head404"></div>
<div class="txtbg404">
<div class="txtbox">
<p>对不起，您请求的页面不存在、或已被删除、或暂时不可用</p>
<p class="paddingbox">请点击以下链接继续浏览网页</p>
<p>》<a style="cursor:pointer" οnclick="history.back()">返回上一页面</a></p>
<p>》<a href="https://shopee6.flxzz.com">返回网站首页</a></p>
</div>
</div>
</body>
</html>
</html>
评论前必须登录！
立即登录 注册