BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图

现在越来越多人开始用BT宝塔面版做网站的基础环境搭建了,简单实用,很多新手小白建站的首选。但是有时候又发现一个问题,在安装完WordPress程序后,一般都会自带有404错误页面。但是就算页面输入错误,仍旧会回到nginx的404页面,无论后端如何设置都是默认的nginx的404错误页面。下面,虾皮路给大家介绍一下BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程。

一、什么是404页面

404页面是客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面。

简单一句话,访问时找不到这个页面,就返回404。

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(1)

二、为什么要设置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页面是这样的:

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(2)

如果设置了404自定义页面是这样的:

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(3)

这样的

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(4)

还有这样的

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(5)

而且上面带了链接,指向主页。这样是不是感觉好多了,留下来继续访问的欲望增加了?

三、如何设置404自定义页面

一般情况下,我们安装完WordPress,都会自带404自定义页面,这个时候如果找不到页面,可以自动调用该页面显示。但是如果是BT宝塔面版,每次都是返回生硬的NGINX的404页面,这咋回事呢?其实是BT宝塔的后台设置问题。只要修改就行了。

1、进入BT宝塔面版后台

找到网站管理-设置,找到自己的站点,点击右边的设置选项。

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(6)

2、修改配置文件

将默认的代码用#号注释掉,即原来默认是

error_page 404 /404.html;

注释掉后是这样的:

#error_page 404 /404.html;
BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(7)

保存后,网站会自动调用WordPress的默认404错误页面了。比如虾皮路的404页面是这样的

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(8)

那么,如果WordPress自带默认的页面不好看,我们想换一个好看的自定义页面行不行,当然可以。操作如下:

打开自己WordPress相应主题的文件夹

将原来文件夹下的404.php页面里的代码修改成自己想要的改的代码即可。

这里虾皮路提供2个404自定义页面给大家参考,大家可以自行修改代码或者下载图片等。

1、仿win10电脑错误页面效果如下

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(9)

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://www.shopee6.com/" }, 5000);
        </script>
<span class="STYLE12">&nbsp;:(</span>
<p class="STYLE7">   您输入的网址我们没有找到。你可以点击<a href="https://www.shopee6.com">返回首页</a><br />
  5秒后为您跳转到首页,您可以在首页试着找找您所需要的信息。</p>
<p class="STYLE7">  <span class="STYLE9">如果您想了解更多信息,则可以稍后在线搜索此错误: 404 页面未找到</span></p>
</body>
</html>

2、一个好看的404错误页面

BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程插图(10)

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://www.shopee6.com">返回网站首页</a></p>
 
    </div>
 
  </div>
 
</body>
 
</html>
</html>
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

虾皮路版权所有,未经允许不得转载:虾皮路 » BT宝塔面版Nginx安装WordPress后设置404自定义页面图文教程

分享到: 更多 (0)
坚持下去不容易,打个赏呗

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活