「免費的喘息」網站改版,「OutLine」佈景上線

這幾天大家又發現香腸開始懶惰不新增文章,但其實香腸是在為網站改版做準備。這次放了六天的假期,有一半以上的時間都是在寫佈景,總共改了三個網站,一個喘息、一個香腸自己使用的公版,一個藍藍路網站改HTML5,第一次覺得自己這麼有效率的在四天內做了這麼多事情,結果文章一篇也沒寫到,實在是有點愧疚。既然香腸寫了新佈景,就順便拿來當文章發表介紹一下囉!

這次的新佈景「OutLine」,是針對免費的喘息論壇轉型成WordPress所設計的版型,基本上並不適合一般部落格來套用,因為很多東西都屬於客製化的,所以,扣除掉這些客製化的東西,其實「OutLine」真的是outline。雖說看起來很普通,但是越普通的佈景越是難以調整,很多小細節要注意,就算加入個小圖片也要調整超多次,讓網站達到最佳效果。


如果您有關注過這篇文章「論壇,是否逐漸被社群網站吞噬?」,應該不難看出香腸有打算將免費的喘息做一番的改版,因為免費的喘息討論區既然已經失去它的效益,那麼轉型是必然的,選對轉型的方向是一個重要的決策,而喘息本身專注於WordPress與主機討論,故網站轉型則朝著這個方向著手改版。
在改版的過程中,藍藍路提供了很大的協助,除了網站版型美工之外,也提供了關於改版方向的一些想法,於是我們倆就花了兩天的時間將這個網站的版型做完,整個熱血到從早上11點不間段的到隔日凌晨四點,大家都睡了我們還在拼命,目的就是讓WordPress有一個完整的資源中心,讓大家可以更快速的對WordPress上手。

關於免費的喘息改版相關說明,您亦可參考 「免費的喘息」轉型成WordPress資源中心 此篇文章。

OutLine 佈景

為什麼要叫做「OutLine」?其實是直接從Online這詞直接反推變成OutLine,意思就是香腸退伍版。之前提到香腸破百,而現在寫這篇文章已經剩下62天了,距離退伍日子不遠了,所以才叫做OutLine版。本來這詞是想要用到香腸炒魷魚改新版,不過我自己對網站現在這個佈景很滿意,閱讀上也很舒服所以並不打算改版,名稱就優先留給喘息使用囉!

這個佈景是香腸藍藍路花了2~3天改出來的版,謝謝他的美工強力支援….這次我們把圖片拼成一大張,節省伺服器請求。

在此要說明一下,Outline真正的翻譯是「大綱」。如前面提到,扣除了網站內一些客製化的圖示後,其實這版本真的很精簡,單純就CSS畫出來的HTML5網站。

「免費的喘息」網站改版,「OutLine」佈景上線

網站首頁十分精簡,連版權宣告都沒有,只有網站logo以及選單。這個頁面是透過WordPress的自訂文章首頁與自訂模板合併製作,搭配JQuery滑動選單特效以及WordPress自訂選單。

 

「免費的喘息」網站改版,「OutLine」佈景上線

至於文章內頁,不提供留言功能,因為網站的目的主在提供WordPress資訊與技術教學,可以把這個網站當成WordPress的知識庫。右手邊提供社群推薦功能,自用他用兩相宜。在標題前方標示了文章分類,有助於使用者須查詢同分類文章可以直接點擊查閱。

「免費的喘息」網站改版,「OutLine」佈景上線

網站的側邊欄,全部使用圖片,有一種Windows Phone 7的感覺,但點下去並不會轉換頁面,有些連結點下去開新視窗,有些連結點擊則跳出特效框框,請看下一張圖片。

「免費的喘息」網站改版,「OutLine」佈景上線

就是這個,透過JQuery達到的效果。網站內的聯絡我們、搜尋、訂閱文章均採用這種模式。

「免費的喘息」網站改版,「OutLine」佈景上線

這個是分類頁面的效果,因為目前文章有限,只能展示簡陋的畫面。超過一定篇數會有分頁按鈕,分頁按鈕就和香腸炒魷魚一樣囉!畢竟是同一個模組嘛!

「免費的喘息」網站改版,「OutLine」佈景上線

與分類頁面有所區別,搜尋結果頁面會標上分類,同時您可以直接點分類查閱文章,也可以點標題查閱文章。

「免費的喘息」網站改版,「OutLine」佈景上線

這是聯絡我們頁面,表單採用Google表單,只是做了客製化的CSS,提交表單後有不一樣的畫面,在此就先做個保留囉!對了,網站的404錯誤頁面,也有不一樣的感覺,大家可以自行去發掘囉!這邊我們就不卡圖破梗了。

寫到這邊,又是到了收假的時間點,大家下次見囉!

免費的喘息http://sofree.tw