DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論:WordPress博客導航設計技巧
設計理論:WordPress博客導航設計技巧
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:博客主要是以內容為主,所以導航的作用就不止是分類了。使用分類的導航方式,訪客可以快速到達一個分類。

我的博客的導航的內容主要分為以下幾種:博客分類導航(即放在頁面頂部或者左側/右側的導航)、標題、翻頁/分頁導航、其他導航(文章內鏈接、關鍵字、友情鏈接、文章內容導航等)。

博客分類導航

1、導航的放置位置會影響到訪客對博客內容的關注度和二次點擊。在設計博客導航之初,只有頁面的導航,而且習慣性地放在了頭部(header.php)。後來我發現,網頁訪客統計裡有很多訪客在點擊頂部的頁面(page),點擊數大大超過了訪問量最多的單篇文章的點擊量,所以我在頭部的導航裡又加入了博客文章分類的導航,設計的時候考慮到要突出主導航條,考慮過下拉或彈出式的分類導航,但是對用戶來說並不方便,即使它看起來很cool。越簡單,越直接的東西給訪客的體驗也越好。為了突出下邊的分類導航,我加了淺藍色的底來突出這部分。我的博客以白色調為主,頭部(header.php)的留白使導航看起來不那麼別扭。


2、博客主要是以內容為主,所以導航的作用就不止是分類了。使用分類的導航方式,訪客可以快速到達一個分類。但問題是,訪客打開了這個分類,是否就看到了他感興趣的內容呢?其實在博客的第一頁面上,大部分的的內容我們不會去點擊的—也就是說,導航僅僅是吸引訪客尋找他感興趣的內容的工具而已。對於網站設計者來說,設計導航的目的也在於此,如何幫助訪客找到他感興趣的內容,如何吸引訪客的二次點擊。


3、根據訪客行為的數據分析,可以確定導航放在哪裡會更好點。我的博客導航在右邊,有兩個原因:一是內容放在左邊易閱讀,右邊的側邊欄作為導航的一部分是輔助內容,次要的內容就讓他呆在次要的位置上;二個是根據搜索引擎抓取文章的順序和優化的需要安排導航的放置位置,搜索引擎抓取某個頁面是以從上到下,從左到右的路線來抓取的。把博客內容放置在左邊就必須保證標題和內容以及顯示在首頁面的TAG部分(具體見我的博客布局)有充足的關鍵字,這樣要比僅僅把側邊導航放在左邊更有利。


4、側邊欄部分。我博客現在的右邊部分。關於側邊欄應該怎麼放,有人寫了很多,都很有道理。你可以到http://blogunion.org/blogging-tips/optimize-your-sidebar.html去獲得更多了解。


5、導航的title描述。我的博客大部分導航性的語言都是用了英文,這是因為我覺得英文顯示起來更美觀,於是在對英文導航的title描述中,我盡可能地用了中文描述,這樣不至於“趕走”英文不好的訪客。


標題導航
1、如上文所說,文章的標題也是一個重要的導航部分,它可以盡可能地引導訪客找到他感興趣的內容,所以,文章標題應盡量包含關鍵詞,標題是一篇文章的核心,搜索引擎也比較看重一篇文章的標題,標題的關鍵字導航也會利於提升文章的排名。


2、在浏覽器標題欄顯示的Title也是一種導航,關於Wordpress的Title優化設計,可參考這篇文章。


3、由於wordpress中中文標題顯示為網址的時候文章的“文章縮略名(Post Slug)”會包含一大串%XX的字符串,很不美觀,月光博客做過一個插件,可以將中文標題轉化為拼音

翻頁/分頁導航

其他導航
1、文章內鏈接。這個在我的博客裡做的不多,好像可以用插件實現站內關鍵字鏈接。


2、tag(標簽、關鍵字)導航。在主頁面(index.php)每篇文章下顯示tag起到導航的作用。另外像xw說的,我覺得我也有必要把TAG雲圖放在側邊來,但是考慮到側邊過長的問題,放棄了這個想法。


3、友情鏈接。這部分我在前面的《wordpress主題設計與訪客體驗(上)》中也有提到。我個人覺得博客的友情鏈接放在首頁會更好,如果你做的友鏈的質量很高,一方面可以提升博客的排名,另一方面能給訪客一個好的印象,誰能保證訪客離開你的博客不會再回來呢?


4、文章內容導航。從搜索引擎抓取頁面來看,搜索引擎和人看文章一樣,會從第一段看到最後一段,而第一段的內容就是被搜索引擎認為是這篇文字的主要內容,就是顯示在搜索引擎的快照裡的內容。所以這個地方也是比較關鍵的部分,對博客內容和訪客需要都比較關鍵的部分。


5、RSS導航。有很多用戶經常在使用閱讀器或者聚合訂閱工具浏覽博客的。所以,在側欄的導航中我盡可能地列出了訪客容易訂閱的FEED。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved