WordPress404页面自定义

不知道大家是怎么设计404页面，个性的404可以为网站增色不少，wordpress设置404是在主题里面的404.php页面上，当然比如你用Apache、nginx等服务器，你可以自己建一个单页，内容和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 - ;

 };

 setInterval("count()",);

 </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"></span><span id="font-404-2">，你懂得！</span>&lt;/h1&gt;<br />

 &lt;p&gt;<data id="time-404"></data>秒钟后，自动返回首页！&lt;/p&gt;<br />

 &lt;/body&gt;<br />

 &lt;/html&gt;

 </pre>

 </div>

 <?php get_footer(); ?>

css代码：

/*错误页*/

.page- 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:  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- pre:hover{background:#fafafa}

#font--title{color:#09e;font-size:23px}

#font--{font-size:90px;color:#}

#font--{font-size:30px;color:#}

#time-{color:#}

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

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

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

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

巴特西

WordPress404页面自定义

最新文章

热门文章