为wordpress添加个性的404页面

作者:norion时间:2012年8月4日评论次数:2 条

不知道大家是怎么设计404页面,个性的404可以为网站增色不少,wordpress设置404是在主题里面的404.php页面上,当然比如你用Apache、nginx等服务器,你可以自己建一个单页,内容和404页面一样,那么只要是输错域名都是显示这个页面。

本站的404页面效果如下,大家也可以试一试在地址栏输入本站的错误地址:

404页面

那我就贴一下这个单页模板的代码:

<?php 
/*
Template Name: page-404
单页404 Template
*/
?>
<?php get_header(); ?>
<script type="text/javascript">
//错误计时
function count(){
var obj = document.getElementById("time-404");
obj.innerHTML = obj.innerHTML - 1;
};
setInterval("count()",1000);
</script>
<div id="content" class="page-404">
<meta http-equiv="refresh" content="5;url=<?php bloginfo('url'); ?>">
<pre>
&lt;!DOCTYPE HTML&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;<span id="font-404-title">zkeyword.com</span>&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h1&gt;<span id="font-404-1">404</span><span id="font-404-2">,你懂得!</span>&lt;/h1&gt;<br />
&lt;p&gt;<data id="time-404">5</data>秒钟后,自动返回首页!&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;
</pre>
</div>
<?php get_footer(); ?>

css代码:

/*错误页*/
.page-404 pre{background:#fff;margin:30px auto;font:18px/1.1 '\5fae\8f6f\96c5\9ed1','\9ed1\4f53';-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:0 0 5px #ddd;-moz-border-radius-topleft:90px;-moz-border-radius-bottomright:90px;-webkit-border-top-left-radius:90px;-webkit-border-bottom-right-radius:90px;border-top-left-radius:90px;border-bottom-right-radius:90px;border:1px solid #eee;padding:30px 20px;}
.page-404 pre:hover{background:#fafafa}
#font-404-title{color:#09e;font-size:23px}
#font-404-1{font-size:90px;color:#900}
#font-404-2{font-size:30px;color:#900}
#time-404{color:#900}

新建完模板当然要建立实际的单页,单纯模板页是不能访问的,那么,当我们得到这个单页的地址就可以在服务器上设置了,单页指定的模板如下:

为wordpress添加个性的404页面

服务器端的设置我只讲nginx的设置,用Apache的同学相信比我还熟悉我这里就不讲了,nginx只要在nginx.conf对应的网上加入如下代码重启nginx就可以了:

error_page 404 http://zkeyword.com/error;

其实,不只是wordpress可以这行做,其他的网站也可以这样,原理是相同的。

标签:

上一篇: wordpress获取文章中的第一张图片

下一篇:用div做select multiple左右添加和删除功能

相关文章

评论

  1. 张飞日记
    十二月 20, 2012 20:57:20 #1

    返回首页不利于搜索引擎!

    @回复
    • 伤心的笔
      一月 30, 2013 10:36:10

      搜索引擎不会索引404页面的!(确保你的404页面返回的是404)

      @回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注