如何為wordpress創(chuàng)建個(gè)性十足且用戶友好的404頁(yè)
來(lái)源:解決方案AiWeTalk的空間 2012-01-07
404頁(yè)面不僅僅是為了給網(wǎng)站用戶指出問(wèn)題所在，你還需要為他們提供一個(gè)可行的解決方案。
在wordpress的默認(rèn)主題kubrick中，404頁(yè)面做得既簡(jiǎn)單又難看，相信你的也不會(huì)太好。本文將手把手教你制作出一個(gè)優(yōu)秀的404頁(yè)面。
其實(shí)，一個(gè)好404頁(yè)在設(shè)計(jì)上并不復(fù)雜，目的是幫助網(wǎng)站用戶找到他們想要的信息，并繼續(xù)瀏覽你的網(wǎng)站。廢話不多說(shuō)了，我們開始吧!
假設(shè)你是網(wǎng)站的訪問(wèn)者。
假設(shè)你自己是網(wǎng)站的用戶，到達(dá)了404頁(yè)面，肯定是因?yàn)槟阆Ｍ业絼e的什么信息，否則不可能來(lái)到這里。所以，有幾件事情你絕對(duì)不能做：
第一，認(rèn)為人們很可能是點(diǎn)擊網(wǎng)站的某處鏈接才到達(dá)的404錯(cuò)誤頁(yè)。如果真是如此，誰(shuí)該為此事負(fù)責(zé)?他們?不，是你-站長(zhǎng)。
第二，要讓404頁(yè)的設(shè)計(jì)樣式與網(wǎng)站上的其它頁(yè)面保持一致。有些站長(zhǎng)喜歡別出心裁，不考慮用戶的接受能力。例如，有位站長(zhǎng)將此頁(yè)設(shè)計(jì)成了常見(jiàn)的windows藍(lán)屏，結(jié)果卻不太好，人們紛紛逃離他的網(wǎng)站。
第三，如果你打算開個(gè)玩笑，就像上面提到的藍(lán)屏設(shè)計(jì)，最好保證每個(gè)人都能接受它。
讓我們來(lái)設(shè)計(jì)一個(gè)完美的404錯(cuò)誤頁(yè)
Ok，既然知道了不要做什么，你也需要知道用戶到你的網(wǎng)站是想尋找一些特定的內(nèi)容，通常他們是跟隨某個(gè)鏈接來(lái)到這里的。現(xiàn)在，作為站長(zhǎng)的你，需要提供各種方法幫助他們達(dá)到目的。
讓我們看看一些非常棒的404實(shí)例頁(yè)吧：
在上面幾個(gè)404頁(yè)中， conversion rate experts網(wǎng)站的設(shè)計(jì)我最喜歡，同時(shí)它也激發(fā)了我的靈感。
它提供了4個(gè)選項(xiàng)去幫助用戶：
1、重新搜索
2、檢查是否存在鏈接拼寫錯(cuò)誤。
3、在網(wǎng)站地圖里查找。
4、返回到網(wǎng)站首頁(yè)。
apple官網(wǎng)直接將網(wǎng)站地圖呈現(xiàn)給用戶，這個(gè)思路也很不錯(cuò)。你可以根據(jù)喜好來(lái)選擇其中一個(gè)。
我建議你選用conversion rate experts的404解決方案，而且設(shè)計(jì)上也很容易實(shí)現(xiàn)，我就不一一贅述了。這里，我還要增加一項(xiàng)：顯示與用戶輸入的url網(wǎng)址相關(guān)的一些網(wǎng)頁(yè)的列表。為了實(shí)現(xiàn)這個(gè)功能，我們得研究分析下這個(gè)url地址，看看能否發(fā)現(xiàn)點(diǎn)什么：
一個(gè)404錯(cuò)誤頁(yè)能為人們提供什么有用的數(shù)據(jù)?
許多站長(zhǎng)會(huì)認(rèn)為404頁(yè)是個(gè)死角。其實(shí)不然，它能提供許多有用的數(shù)據(jù)可以幫助你了解網(wǎng)站用戶的搜索意圖。讓我們研究下url地址：域名/后面的所有的字符會(huì)提示你用戶想要找什么。
令人高興的是，wordpress系統(tǒng)存儲(chǔ)了這個(gè)信息，你可以通過(guò)變量$wp_query->query_vars['name']找到它。這個(gè)wp_query類函數(shù)存貯的是經(jīng)過(guò)一系列處理后的規(guī)范化的網(wǎng)址，我們可以利用這些信息來(lái)構(gòu)建你的404頁(yè)面。
首先，讓我們檢查下是否存在與$wp_query->query_vars['name']變量中的頁(yè)面名稱直接匹配的頁(yè)面。
$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) );如果上述語(yǔ)句沒(méi)有輸出結(jié)果，你需要使用str_replace()函數(shù)將$s字符串中的“-”用空格去掉，再進(jìn)行一次搜索。當(dāng)我們?cè)俅卫?s變量時(shí)，要把它放在if語(yǔ)句的外面以檢查之前的查詢是否有結(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)的日志，至少，我們認(rèn)為是相關(guān)的，用下面的語(yǔ)句將其以列表的形式顯示出來(lái)：
if (count($posts) > 0) {echo "<p>Were you looking for <strong>one of the following</strong> postsor 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>";}
如果你覺(jué)得這么做實(shí)在太麻煩，可以安裝插件smart 404。它實(shí)現(xiàn)的功能與上面介紹的差不多。
現(xiàn)在一個(gè)非常棒的404頁(yè)就制作完成了，注意如果滿足條件的日志太多，你不必一一把它們顯示出來(lái)，選取一部分即可。另外，404錯(cuò)誤還提供了一個(gè)有用信息就是the referrer(用戶來(lái)路)：如果，有人與你網(wǎng)站做了一個(gè)錯(cuò)誤的網(wǎng)頁(yè)鏈接，或者鏈接到了一個(gè)不再存在的頁(yè)面。所以，你需要做的最后一件事就是：
避免404頁(yè)面的出現(xiàn)
使用google analytics有個(gè)好處就是能查看the referrer信息，這樣你能發(fā)現(xiàn)網(wǎng)站用戶的來(lái)路。它可以幫助你將url指向合適的網(wǎng)頁(yè)，也能發(fā)現(xiàn)那些與你網(wǎng)站做了錯(cuò)誤鏈接的網(wǎng)站，以便及時(shí)通知站長(zhǎng)們修正鏈接地址。
另一個(gè)不錯(cuò)的跟蹤網(wǎng)站404錯(cuò)誤的方法就是使用google站長(zhǎng)工具。在“診斷-抓取錯(cuò)誤”菜單中，google會(huì)將你網(wǎng)站中可能的產(chǎn)生404錯(cuò)誤的地方逐一地標(biāo)示出來(lái)：
本文由hnxiandu.com網(wǎng)絡(luò)推廣整理
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
