從零到有 Word Press 架設 到 設計.

Word Press是一個是個自由度相當高,且國內許多知名部落客也非常喜歡使用的內容管理系統。

由於SiaoT小時候曾經也經營過論壇與部落格,當時並沒有充裕的時間持續的經營,再加上是委託他人架設,網站放著似乎對受委託人來說有點說不過去,但SiaoT我個人喜歡分享資訊,尤其是3C這一塊,喜歡將經驗與大家分享,與大家一同學習,所以開始研究WordPress 並了解虛擬空間與簡易的網頁設計。

在架設過程中,申請了 WordPress.com 以及國外知名空間 000webhost.com 還有目前所使用的 yabi.me 等免費空間進行WordPress 的建置,原先打算使用申請的 WordPress.com 直接經營,優點是申請後就直接可以使用不需MySql資料庫等設定,缺點則是控制台內找不到外掛選項,接著使用網友推薦的000webhost.com 進行架設,並開始著手設計佈景樣式,但不料出現重重問題,廣告問題雖然解決了,外掛卻一直無法安裝,最後查證是虛擬空間問題,最後在無奈的收尋下發現了yabi.me 不僅支援中文,免費的還大大提供了10GB的免費空間,每個月還不限流量,自現在成功建置Mks Blog。

架設的前的準備:

首先SiaoT是先看到了「樂在設計」部落格 的作者 Yuxin 分享的 「WordPress 佈景主題開發指南」電子書:
http://fundesigner.net/wordpress-theme-development-guide/

接著收尋關鍵字「WordPress架設」找到了 作者 阿湯 在「就是教不落」分享的使用 000webhost.com 架站教學
http://steachs.com/archives/357

免費空間 Yabi.me
http://yabi.me/index.php

網頁知識補充:

CSS語法教學 : http://www.1keydata.com/css-tutorial/tw/
W3School : http://www.w3school.com.cn/css/index.asp

WordPress資料補充:

WordPress 中文官方網站 : http://tw.wordpress.org
賈斯汀 「簡單的生活」Blog  : 值得推薦使用的wordpress外掛

架設的艱辛過程:

SiaoT 在上方有提到,當時原本打算使用 WordPress.com 提供的部落格服務直接經營,但因為控制台沒有外掛選項導致我不得不放棄,接下來決定要自行架站的SiaoT自行爬文,找到了 阿湯 在 就是教不落 分享 使用 000webhost.com 的架設教學,並成功也成功建置WordPress,最後接著進行佈景的設計,開始翻閱Yuxin無私分享的「WordPress 佈景主題開發指南」電子書。

佈景的設計以Yuxin的教學為主,為了在個人電腦上編輯並更方面的檢視瀏覽編輯效果,所以依本電子書步驟,我們要利用工具 XAMPP工具軟體,XAMPP 是一個結合 Apache、PHP、PERL、MySQL 的軟體,透過使用XAMPP在個人電腦上架設localhost端,可是SiaoT在這裡遇到了問題,Apache 一直無法啟動,具經驗Apache使用的port是80與443,透過關鍵字收尋發現,Skype可能佔用了port 80、443 ,果然在關閉Skype之後Apache 果然成功啟動。

XAMPP  XAMPP2

既然localhost端架設好了,那便要開始coding了,SiaoT 對程式語言並不熟,只是小會一點VB、HTML 以及 CSS ,何況要面對是PHP出生的WordPress,在此使用了作者推薦的Sublime Text 2編輯軟體來進行coding ,然而在開發指南電子書的加持下,也大致上可以理解自己在寫得什麼東西。

ST

一波三折-放棄一念間

經過一番努力,部落格與佈景樣式以從零到有,接下來只需經過編輯CSS就可以來進行美化,但在此時問題又接二連三的來報到,設計到一半的佈景樣式,為了徵求更多朋友的意見,有部分朋友在連結Mks Blog 時每轉換一個頁面就會有廣告跑出來,SiaoT仔細想想,000webhost.com空間不是大家推薦的無廣告免費空間嗎?經調查後,此國外空間風評有好有壞,且有部分網友也提出有廣告的問題,雖然最後以使用 .htaccess 的方式將廣告問題解決了,但 SiaoT 在幫部落格進行外掛安裝時又出現了問題,外掛裝了半天都卡在「正在安裝外掛中…」,然後不時跑出 PHP Magbox 的錯誤訊息,據說要設定PHP.ini這個檔案來修正問題,同樣的在localhost 進行樣式編輯的環境下 以上傳的方式安裝外掛程式,同樣的出現 PHP Error Magbox ,設定了Apache PHP.ini 的上傳最大容量限制後,可以安裝成功,可是同樣的問題在 000webhost 的環境下,並不知道從何設定 PHP.ini , 而然使用控制台內的自動收尋安裝,便會卡死在「正在安裝外掛中…」,求助無 一波三折 同時心力以盡。

經過不斷的嘗試,依然不行,SiaoT 決定在嘗試其他虛擬主機,並放棄 000webhost.com 國外知名空間服務,最後找到yabi.me免費空間,對免費用戶來說 yabi.me 提供了很棒的服務,不僅空間容量大方提供,連PHP、MySql、FTP 也都一併支援,此外還支援繁體中文,很快的SiaoT重新在yabi.me進行WordPress的建置,並測試成功外掛可以安裝並使用,接著高興的SiaoT就繼續著手設計版面樣式。

Yabi.me  cpanel X3

yabi2yabi

繼續版面設計

與現在的排版差異個人目前是比較喜歡現在的樣子,整體看起來流暢,只是沒有藝術天份不知道該如何配色比較好,所以整體來說還是有點小怪,接著有人問,為什麼要用那隻狗狗的照片呢? 這張照片是SiaoT與朋友們環台在墾丁逗留時所拍的,由於蠻喜歡的所以就暫時貼上來,說不定到以後換樣式才會換照片。

原先的樣式圖:

mks

在設計成目前這個樣子,還真的吃了不少苦頭,重新定義排版的位置,怎麼弄也弄不好,也找不到問題,就這樣過了一天,才找到問題點 CSS 排版用的浮動 float:left  迷糊的我 打成 left:left  在 Sublime Text 2 的編輯下,會自動將語法做顏色區別,這等於是給這錯誤的語法保護色,同樣的錯誤還有 制定Div圖層時 <div class=”try”></try>   結尾而非<div> 這個錯誤也是過了好久才發現,想說改了老半天CSS 效果怎麼也出不來。

現在的樣式:

mks2.0

將近一個禮拜 WordPress 的無中生有除了樣式排版暫定之外,內部雖然還有許多未完善的地方,但經歷無數的風波與陷入各種窘境,幸好在毅力的堅持下,算是完成了 WordPress 的架設與樣式的設計,之後希望能有更好的靈感設計出更棒的樣式,然後再與大家分享艱辛歷程…


發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料