如何為wordpress創建個性十足且用戶友好的404頁

來源:解決方案AiWeTalk的空間 2012-01-07

404頁面不僅僅是為了給網站用戶指出問題所在，你還需要為他們提供一個可行的解決方案。

　　在wordpress的默認主題kubrick中，404頁面做得既簡單又難看，相信你的也不會太好。本文將手把手教你制作出一個優秀的404頁面。

　　其實，一個好404頁在設計上并不復雜，目的是幫助網站用戶找到他們想要的信息，并繼續瀏覽你的網站。廢話不多說了，我們開始吧!

　　假設你是網站的訪問者。

　　假設你自己是網站的用戶，到達了404頁面，肯定是因為你希望找到別的什么信息，否則不可能來到這里。所以，有幾件事情你絕對不能做：

　　第一，認為人們很可能是點擊網站的某處鏈接才到達的404錯誤頁。如果真是如此，誰該為此事負責?他們?不，是你-站長。

　　第二，要讓404頁的設計樣式與網站上的其它頁面保持一致。有些站長喜歡別出心裁，不考慮用戶的接受能力。例如，有位站長將此頁設計成了常見的windows藍屏，結果卻不太好，人們紛紛逃離他的網站。

　　第三，如果你打算開個玩笑，就像上面提到的藍屏設計，最好保證每個人都能接受它。

　　讓我們來設計一個完美的404錯誤頁

　　Ok，既然知道了不要做什么，你也需要知道用戶到你的網站是想尋找一些特定的內容，通常他們是跟隨某個鏈接來到這里的。現在，作為站長的你，需要提供各種方法幫助他們達到目的。

　　讓我們看看一些非常棒的404實例頁吧：

　　在上面幾個404頁中， conversion rate experts網站的設計我最喜歡，同時它也激發了我的靈感。

　　它提供了4個選項去幫助用戶：

　　1、重新搜索

　　2、檢查是否存在鏈接拼寫錯誤。

　　3、在網站地圖里查找。

　　4、返回到網站首頁。

　　apple官網直接將網站地圖呈現給用戶，這個思路也很不錯。你可以根據喜好來選擇其中一個。

　　我建議你選用conversion rate experts的404解決方案，而且設計上也很容易實現，我就不一一贅述了。這里，我還要增加一項：顯示與用戶輸入的url網址相關的一些網頁的列表。為了實現這個功能，我們得研究分析下這個url地址，看看能否發現點什么：

　　一個404錯誤頁能為人們提供什么有用的數據?

　　許多站長會認為404頁是個死角。其實不然，它能提供許多有用的數據可以幫助你了解網站用戶的搜索意圖。讓我們研究下url地址：域名/后面的所有的字符會提示你用戶想要找什么。

　　令人高興的是，wordpress系統存儲了這個信息，你可以通過變量$wp_query->query_vars['name']找到它。這個wp_query類函數存貯的是經過一系列處理后的規范化的網址，我們可以利用這些信息來構建你的404頁面。

　　首先，讓我們檢查下是否存在與$wp_query->query_vars['name']變量中的頁面名稱直接匹配的頁面。

 
 $s = $wp_query->query_vars['name'];
 $s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$s);
 $posts = query_posts( array( 'post_type' => 'any', 'name' => $s) );
如果上述語句沒有輸出結果，你需要使用str_replace()函數將$s字符串中的“-”用空格去掉，再進行一次搜索。當我們再次利用$s變量時，要把它放在if語句的外面以檢查之前的查詢是否有結果產生。
 $s = str_replace("-"," ",$s);
 if (count($posts) == 0) {
   $posts = query_posts(array( array('post_type' => 'any', 'name' => $s) );
 }
現在，我們得到了一些輸出結果，它們是一些與用戶之前輸入的網址相關的日志，至少，我們認為是相關的，用下面的語句將其以列表的形式顯示出來：
 if (count($posts) > 0) {
   echo "<p>Were you looking for <strong>one of the following</strong> posts
     or pages?</p>";
   echo "<ul>";
   foreach ($posts as $post) {
     echo '<li>';
     echo '<a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a>';
     echo '</li>';
   }
   echo "</ul>";
 }