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 - 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}

 

新建完模板當然要建立實際的單頁，單純模板頁是不能訪問的，那么，當我們得到這個單頁的地址就可以在服務器上設置了，單頁指定的模板如下：

 

服務器端的設置我只講nginx的設置，用Apache的同學相信比我還熟悉我這里就不講了，nginx只要在nginx.conf對應的網上加入如下代碼重啟nginx就可以了：

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

其實，不只是wordpress可以這行做，其他的網站也可以這樣，原理是相同的。