WordPress404頁面自定義

不知道大家是怎麼設計404頁面，個性的404可以為網站增色不少，wordpress設定404是在主題裡面的404.php頁面上，當然比如你用Apache、nginx等伺服器，你可以自己建一個單頁，内容和404頁面一樣，那麼隻要是輸錯域名都是顯示這個頁面。

本站的404頁面效果如下，大家也可以試一試在位址欄輸入本站的錯誤位址：

那我就貼一下這個單頁模闆的代碼：

1 <?php 
 2 /*
 3 Template Name: page-404
 4 單頁404 Template
 5 */
 6 ?>
 7 <?php get_header(); ?>
 8 <script type="text/javascript">
 9 //錯誤計時
10 function count(){
11 var obj = document.getElementById("time-404");
12 obj.innerHTML = obj.innerHTML - 1;
13 };
14 setInterval("count()",1000);
15 </script>
16 <div id="content" class="page-404">
17 <meta http-equiv="refresh" content="5;url=<?php bloginfo('url'); ?>">
18 <pre>
19 &lt;!DOCTYPE HTML&gt;<br />
20 &lt;head&gt;<br />
21 &lt;title&gt;<span id="font-404-title">zkeyword.com</span>&lt;/title&gt;<br />
22 &lt;/head&gt;<br />
23 &lt;body&gt;<br />
24 &lt;h1&gt;<span id="font-404-1">404</span><span id="font-404-2">，你懂得！</span>&lt;/h1&gt;<br />
25 &lt;p&gt;<data id="time-404">5</data>秒鐘後，自動傳回首頁！&lt;/p&gt;<br />
26 &lt;/body&gt;<br />
27 &lt;/html&gt;
28 </pre>
29 </div>
30 <?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可以這行做，其他的網站也可以這樣，原理是相同的。

轉載于:https://www.cnblogs.com/wordblog/p/6579300.html