從零到有 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。

目錄
Toggle

架設的前的準備：
網頁知識補充：
WordPress資料補充：
架設的艱辛過程：
一波三折-放棄一念間
Yabi.me cpanel X3
繼續版面設計
原先的樣式圖：
現在的樣式：

架設的前的準備：

首先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 ，然而在開發指南電子書的加持下，也大致上可以理解自己在寫得什麼東西。

一波三折-放棄一念間

經過一番努力，部落格與佈景樣式以從零到有，接下來只需經過編輯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

yabi2 yabi

繼續版面設計

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

原先的樣式圖：

mks

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