如何為wordpress創(chuàng)建個性十足且用戶友好的404頁

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

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

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

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

　　假設(shè)你是網(wǎng)站的訪問者。

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

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

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

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

　　讓我們來設(shè)計一個完美的404錯誤頁

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

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

　　在上面幾個404頁中， conversion rate experts網(wǎng)站的設(shè)計我最喜歡，同時它也激發(fā)了我的靈感。

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

　　1、重新搜索

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

　　3、在網(wǎng)站地圖里查找。

　　4、返回到網(wǎng)站首頁。

　　apple官網(wǎng)直接將網(wǎng)站地圖呈現(xiàn)給用戶，這個思路也很不錯。你可以根據(jù)喜好來選擇其中一個。

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

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

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

　　令人高興的是，wordpress系統(tǒng)存儲了這個信息，你可以通過變量$wp_query->query_vars['name']找到它。這個wp_query類函數(shù)存貯的是經(jīng)過一系列處理后的規(guī)范化的網(wǎng)址，我們可以利用這些信息來構(gòu)建你的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) );
如果上述語句沒有輸出結(jié)果，你需要使用str_replace()函數(shù)將$s字符串中的“-”用空格去掉，再進行一次搜索。當我們再次利用$s變量時，要把它放在if語句的外面以檢查之前的查詢是否有結(jié)果產(chǎn)生。
 $s = str_replace("-"," ",$s);
 if (count($posts) == 0) {
   $posts = query_posts(array( array('post_type' => 'any', 'name' => $s) );
 }
現(xiàn)在，我們得到了一些輸出結(jié)果，它們是一些與用戶之前輸入的網(wǎng)址相關(guān)的日志，至少，我們認為是相關(guān)的，用下面的語句將其以列表的形式顯示出來：
 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>";
 }

　　如果你覺得這么做實在太麻煩，可以安裝插件smart 404。它實現(xiàn)的功能與上面介紹的差不多。

　　現(xiàn)在一個非常棒的404頁就制作完成了，注意如果滿足條件的日志太多，你不必一一把它們顯示出來，選取一部分即可。另外，404錯誤還提供了一個有用信息就是the referrer(用戶來路)：如果，有人與你網(wǎng)站做了一個錯誤的網(wǎng)頁鏈接，或者鏈接到了一個不再存在的頁面。所以，你需要做的最后一件事就是：

　　避免404頁面的出現(xiàn)

　　使用google analytics有個好處就是能查看the referrer信息，這樣你能發(fā)現(xiàn)網(wǎng)站用戶的來路。它可以幫助你將url指向合適的網(wǎng)頁，也能發(fā)現(xiàn)那些與你網(wǎng)站做了錯誤鏈接的網(wǎng)站，以便及時通知站長們修正鏈接地址。

　　另一個不錯的跟蹤網(wǎng)站404錯誤的方法就是使用google站長工具。在“診斷-抓取錯誤”菜單中，google會將你網(wǎng)站中可能的產(chǎn)生404錯誤的地方逐一地標示出來：