WordPress 主题会自带404页面,如果需要替换成自定义的需要修改404.php 页面,这里以腾讯公益404 页面为例介绍下怎样自定义页面,如果大家没有特定的404页面可以设置成公益404页面。
一般在网站根目录下 wp-content/themes/你的主题下,我的主题是 sela,所以具体位置是 wp-content/themes/sela/404.php
腾讯 qq 空间之前上线了公益 404页面,也就是在访问 qzone.qq.com 域名下的不存在页面时会自动跳转到一个寻找失踪儿童的页面。
其实除 qq 空间外,还有很多其他网站也提供了公益404页面,但大都是像我这样的独立博客,影响力没有腾讯这么大。
查看了多个公益404 页面,并进行比较后发现,还是腾讯这个比较好看,所以动手把它扒了过来挂在了我的站点上,大家现在访问代码至上的不存在页面时也会显示寻找失踪儿童的页面了。大家可以试一下,猛戳这里。
增加这个页面其实很简单,只要在 WordPress 后台编辑主题中编辑 404 模板就可以了,在<body>标签中间添加如下代码即可。
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://www.hlwen.com" homePageName="回到新概念博客首页" renderTarget="renderTarget"></script>
2.解决公益404 渲染到 body 里面,把页面整个页面的内容替换了;
使用公益404 页面对页面影响解决方法:
首先在页面合适位置写一个 div,再将 script 标签 renderTarget 的值设置为 div 的 id,这样公益 404 页面内容就只会替换这个 div 里面的内容了,不会对页面其他内容有影响。
<div id="renderTarget"></div> <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://www.hlwen.com" homePageName="回到新概念博客首页" renderTarget="renderTarget"></script>
同时还还提供“返回腾讯网”这个超链接的可定制化能力,修改“homePageUrl”、“homePageName”两个参数即可,如上文所写。
3.除了使用 qq 的 js 外,还有益播公益提供的 iframe 接口来生成公益 404 页面。
益播公益除了寻找失踪儿童外,还有很多其他公益广告的定制功能,功能和可定制性更强大,唯一的缺点就是不够精美。如果你有兴趣也为自己的网站添加公益 404 页面的话,可以根据自己的需要来选择使用哪种方式。
<html> <head> <title>404 公益页面 新概念博客 </title> </head> <body> <div id="container"> <center><h1>新概念博客 404!</h1> <iframe scrolling='no' frameborder='0' src='http://yibo.iyiyun.com/js/yibo404' width='735' height='700' style="display:block;"></iframe> </center> </div> </body> </html>
以上方法不仅适合 WordPress 网站,任何网站都适用,直接加入到对应的 html 页面就可以,网站样式可自定义。