WordPress部落格架設與經營：站長親授的十堂課

Wordpress這玩意兒終於越來越熱了，中文書、中文官網也有了，做的很漂亮。很開心看到有人為Wordpress中文社群作努力，我想持續經營的話，應該會有不錯的結果。

希望這群人給wordpress的定位，不要是說什麼「五秒架站」之類的，而是要著重於他的功能彈性和客製化的多重可能，這樣我用Wordpress接案子會更有說服力。(哈哈哈)

說起Wordpress，以前Wordpress的中文資源真的少之又少，只有Wordpress歡樂正體交流所而已，但這網站似乎沒有推的很好，SEO也不夠，標題也不夠殺人，所以以前我想找中文資源的時候，常常錯過這邊XD。真是的，為何網址不用和wordpress有關的呢？害得我以前一直覺得很怪。

在google搜尋wordpress，連vinta的文章都在正體所前面。XD

不過VB真的是很好用的討論區，每次用都覺得很舒服(VB似乎要錢，我覺得比phpbb好用)。

不過，這次Wordpress新書似乎都沒提到這個論壇，好像還頗怪的。平常這種書中都會有相關資源列表，如果連目前最大的中文社群都沒講，感覺好像是介紹台灣入口網站卻不提到Yahoo!奇摩一樣。(雖然我自己也很久沒上正體所了)(話說，我也很久沒上Yahoo!奇摩了)

不過因為這本書根本還沒出，沒有人看過，所以搞不好更裡面有提到也說不定。

註：本篇為沒有拿任何好處的廣告文，純粹是幫朋友推薦。不過點最上面的連結買書，每買一本我都可以抽一點零頭。(如果說我的興奇大聯盟還有效用的話XD…因為太久沒用了)

註2：關於主機的優惠，在裕藍官網有公告，對Wordpress有興趣的、想自己架部落格的，都可以來玩噢！

update：據說正體所最近有點荒廢？因為站長太忙。如果真的是這樣，那會滿可惜的。希望能有好的交接，新舊交替啊！

update：小藍做了漂亮的宣傳網頁

開頭是javascript

一開始我是在我的RSS閱讀器看到javascript的效果介紹文章，然後我就連到他的網站，翻看javascript相關文章。因為除了php的Open Source CMS之外，javascript framework似乎也正進行著一疊疊的亂戰呢！

而且，我最喜歡的「核心+外掛」這模式看起來也在javascript framework的世界上演，所以我一直很想努力鑽研這部分。所以就先去翻文章了。

註：核心+外掛的例子：Firefox、Wordpress、Nuendo、Drupal、Joomla都是這樣獲取我芳心，甚至Photoshop的Blush也是

所以開頭是javascript。

JQuery

然後我發現framework裡面，好像JQuery很有名，但是Joomla是用一個叫做mootools的，而Joomla又有許多漂亮效果，所以我就一直找呀找，發現JQuery的外掛不能用在mootools底下(廢話)，才發現這兩個東西原來不能並存！真有趣(哪裡有趣)！

所以目前我的看法是mootools的漸變動態效果比較漂亮，JQuery可能比較輕量吧！總之JQuery應該是比較有名。

然後Joomla內建的是mootools，Drupal內建的是JQuery，真的各有各的風格。

NiceJForms

然後我發現一個需要JQuery的表單美化工具，我對JQuery還非常不懂，所以不知這算不算是JQuery的外掛。總之，這個表單美化工具叫做NiceJForms，他的效果可以到達這樣的地步。

會不會太美了一點。(會有這種讚嘆，還真宅！)

所以從javascript的探索，我找到了NiceJForms。

Drupal Form API

然後我想起來前兩個星期開始學Drupal的Form API，我怎麼用CSS美化，表單都還是普普通通。雖然簡單方便就好，但我突然一股腦很想把javascript應用的技能學起來，所以不管目前Drupal的白老鼠網站的bug多到爆炸，我還是逕自測試起NiceJForm套到Drupal表單的方式。

所以從NiceJForms，我又跑到了Drupal Form API身上。

應該很簡單，按表操課就對了，NiceJForms的說明很簡單易懂，只要插入這些那些這些就好。所以，我打開特別用Drupal為某表單定製的template之後，打入

drupal_add_js(path_to_subtheme() .'/libraries/nicejforms/js/nicejforms.js');
drupal_add_css(path_to_subtheme() .'/libraries/nicejforms/css/niceforms-green.css');

這是Drupal內建的API，非常非常方便好用。想在這邊插入css，想在那邊插入javascript，都只需要一行字。

不過接下來，第三步驟是要在Form標籤加上class。聽起來很簡單，但是，Drupal的模板可怕的就是都要用Drupal的寫法，不用他的寫法，就等著死吧！所以直接硬是加個form標籤再加上class，是下下之策，既然都到別人家了，就乖乖用他的方法吧！

然後我寫了這兩種方式

$form['#attributes']['class'] = 'niceform';
$form['#attributes'] = array('class' => 'niceform');

都完全沒屁用，連print_r輸出的內容，都看不到#attributes有多個class，然後我憤怒之下，跑到template.php，找到定義這個表單模板的function

<?php
function phptemplate_buytogether_node_form($form) {
  global $user;
  $vars = array('user' => $user, 'form' => $form);  
  return _phptemplate_callback('buytogether_form', $vars);
}
?>

我先試著在return前面加上$form['#attributes']['class'] = ‘niceform’;，結果行不通，然後我又試著在$vars前面加看看，結果，print_r的#attributes就出現class這個東西了。

問題是，render之後的form仍舊沒有class，這到底是怎麼回事？

所以我就跑來部落格呼喊了。最後我鑽牛角尖的地方變成是Drupal的form到底怎麼插入class，回想到我的初衷，只不過是想用用看NiceJForms嘛！

然後有個心得，就是本文標題，我發現我的學習路徑，都是橫向的，我沒辦法畫出來，但我真的覺得我像毛毛蟲一樣，沒有先把一樣東西學會，就跑去學下一樣東西，一開始我都覺得這樣不太好，但我後來想想，既然只有這種方式能夠讓我有一頭熱的熱情繼續鑽研下去，那就這樣吧！

最後，我想問的是，Open Source為何大家都簡稱OSS？為何有兩個S呢？

對Drupal來說，本來只是個「爛爛的部落格系統」，如果加上CCK，就會變成「超強內容管理系統(CMS)」，所以如果妳裝了Drupal，卻不需要裝CCK這個模組，建議您使用Wordpress會比較好噢！

專案頁面：http://drupal.org/project/cck

好功能

總之，CCK2.0出了，專門給Drupal 6來使用的。有哪些新增的功能呢？

1.介面變成更易用：可以用拖拉的方式排序，並精簡化整個管理介面，還能重新編排各個欄位。

2.顯示方式更多種

3.可以設定觀看權限
4.內容Copy的進化
5.API

支援的模組(3rd party integration)

1.Views 2
2.Advanced help
3.Panels
4.Devel generate
5.Diff
6.Simpletest

左邊是Digg Drupal得獎文的小widget。Drupal連續兩年得到最佳開放原始碼CMS獎，真的太棒了。回顧一下，2006年的Joomla，2007和2008的Drupal，其實都是很不錯的Open Source CMS，不過可能Joomla自己核心的framework比Drupal稍微弱了點，1.5版本發行後又發生一些安全上的重大疏失，以及套件數量一直難以突破舊時代(1.0版本的時候)的榮景，而Drupal從4.7跨到5.x，又跨到6.x，進步的幅度可是非常大的，且社群向心力也比Joomla強，因此雖然使用上比Joomla醜又難懂，還是贏得這個大獎。

真是太棒了！

我有點想做個專門探討CMS的網站，有人有什麼想法，歡迎來跟我交流噢！

公佈獲獎者囉！今天公佈的是「PHP最佳CMS」

再次回顧最後的候選者：
* CMS Made Simple
* Drupal
* eZ Publish
* Joomla!
* XOOPS

結果Drupal第一名，會有2000元，雖然我覺得才2000元有點少，他們社群這麼多人，怎麼分啊？不過好處是能夠讓更多人加入Drupal，讓Drupal的發展更好(希望不要分裂之類的)。然後第二名是Joomla和CMS Made Simple，我沒用過CMS Made Simple，有空也來玩玩！

明天會公佈「最有前景的CMS」，後天公佈「最佳CMS」。

不知後天Drupal會不會打敗其他非PHP的CMS，再度獲得第一名呢？

得獎網頁：http://www.packtpub.com/award
官方消息：Drupal wins 2008 Best PHP Open Source CMS
中文社群：2008年PHP最佳開源CMS

以下分享Privagemsg這個模組，如何在block裡面顯示「我的收件夾 (2)」，
也就是抓出這個使用者收到幾封新信。

以下是我弄的登入後使用者的個人區塊。

<?php
global $user;
$count = db_result(db_query('SELECT COUNT(newmsg) FROM {privatemsg} p WHERE p.newmsg = 1 AND p.recipient = %d', $user->uid));
echo 'Hi!' . $user->name . '
<br />
歡迎登入，你今天想做什麼？
<ul class="menu">
<li class="leaf">'.l('我的收件夾 (' . $count . ')', "privatemsg/inbox", array('title' => '站內信的收信夾')).'</li>
<li class="leaf">'.l('我的個人頁面', "user/$user->uid", array('title' => '看我的個人資料、訂單資料及在這個網站上發表過的內容')).'</li>
<li class="leaf">'.l('編輯個人設定', "user/$user->uid/edit", array('title' => '編輯帳號資料')).'</li>
<li class="leaf">'.l('登出', "logout", array('title' => '登出去')).'</li>
</ul>';
?>

會長類似這樣：

UPDATE:上面的寫法不是很優，請參考這個網址裡面hom的寫法。

反過來學習

所以，在我能夠接受Drupal的難懂和複雜之後，我就慢慢陷進去了，突破心牆，打開模組原始碼來研究已經是很普通的事情(對我這種不會寫程式的人來說，真的是跨出一大步啊！)，然後也是後來才知道，這樣的程式寫作風格是類似JAVA，但我也不知道什麼是JAVA。

總之一切都是相反。

最基本的print_r()

但其實也是有壞處，那就是我最基本的東西很多都不懂。到最後，讓我驚奇連連的關鍵，居然會是最基本的東西。

那就是print_r()。

我在評估一個CMS好不好用的時候，都會很特別注意佈景、模版的彈性，因為能夠完全的客製化，才叫做好的系統嘛！而Drupal的Theming讓我滿痛苦的，原因上次已經抱怨過了(這邊)，不過今天要說的是，print_r()以及db_fetch_object()真的很好用呢！

不論用什麼方式，只要把要的資料搞成一個物件，再用print_r()把這個物件印出來，像是這樣：

<?php
$type = 'blog';
$status = 1;
$sql = "SELECT * FROM {node} WHERE type = '%s' AND status = %d";
$result = db_query(db_rewrite_sql($sql), $type, $status);
while ($data = db_fetch_object($result)) {
  $node = node_load($data->nid);
  print_r($node);
?>

*我都找不到好的Hightlight工具，誰能推薦啊？for wordpress的。用了wp-syntax

這樣會跑出像這裡下面那樣的東西。(stdClass Object ( [nid] => 2 [vid] => …..)

這方法是在溫馨的Drupal中文社群裡有位叫hom的大德教我的，真的很感謝。有興趣可以再看看那篇討論：「theme()的問題」。這東西目前是救過我幾次，不過也有人質疑，所以不一定是最好的工具。

順帶一提，在前後加上pre會更好閱讀。像這樣：

print '<pre>'. print_r($variable, TRUE) .'</pre>';

延伸閱讀：

PHP documentation for print_r()
改造CCK節點模板node-front_page.tpl.php
print_r is your friend?
A better print_r for debugging purposes
Use drupal_set_message with print_r to see the view code

因為Theme API的關係，我一度以為Drupal在Theming上面是非常富於彈性的。不過在真的試圖實作之後，發現，他真的，不是那麼好用。

彈性越大、頭越大

當然不能說沒彈性，Drupal在主題(Theme，或說模版、佈景)設計這部分，彈性是非常之足夠的，但問題是，彈性太大，所以變得門檻很高，很容易就搞得頭很大。

比方說，要修改個區塊的output，必須去看這個區塊是哪個模組搞出來的，然後去看那個模組的原始碼，看看生成這個區塊的function是啥，output是哪個theme function，再去找到theme_開頭的function，然後複製到自己的theme資料夾裡的template.php，再做改寫。

這樣算簡易了。但是，如果這個theme原始的內容並不是這麼好懂，你還必須沿著這個function裡面的其他theme function或其他和輸出有關的function(如tapir)去追追追，追到最後，乾脆直接重寫，但是又不知道有哪些變數可以用，一般網頁設計師，也很難去懂得如何用node_load()一類的東西去把一個節點變成物件，步驟之繁瑣，真的是會搞死人。

陡峭的學習曲線

當然，Drupal的學習曲線本來就是陡峭的，就算買了厚厚一本Pro Drupal Development，能夠懂得也不過就是模組寫的規則、核心運作方式而已。真的要把一堆模組交叉應用，把佈景完整客製化，真的是非常不容易的一件事。

Are We Near Theming Nirvana?

所以前天看到這篇簡報，真是有點心有戚戚焉。

照這個簡報講的，到了Drupal 6，應該會好很多吧！真是期待。

還是很愛Drupal

其實小妹摸索Drupal也沒有很久，許多事情都不懂，也許有更快的方式做theming？或是說，習慣就好？總之，目前來講，Drupal還是很棒的。

因為我本身並不是程式設計出身，對PHP、Mysql其實非常不懂，我充其量就是網頁設計，而且還是個連javascript都不太會寫的網頁設計。喜歡玩CMS純粹是覺得這種東西容易有成就感，因為，可以用比一般開發短的時間，做更多的東西。但是，要能靈活運用並做好整合，不一定真的比純手工開發容易，只是苦的是，客戶、業主都會以為「用CMS太容易」所以要求越來越多，真是啞巴吃黃蓮。

1.下載Kirin Lin的中文包、K2本身和ajneok的k2中文語系檔
2.上傳到FTP
3.安裝
4.啟用k2

調整K2

1.在k2資料夾裡有個style資料夾，到裡面新增一個資料夾，取名為你網站的名稱或你自己做的佈景的名稱。像我的是hanamizuki。

2.在這資料夾新增hanamizuki.css，先打入以下資訊

/*
Style Name : Hanamizuki
Style URI : http://hanamitsuki.com/
Comments : only for hanamizuki.tw
*/

3.到後台＞設計＞K2設定裡面，選擇你要雙欄還是三欄，這邊以雙欄為例。然後到下面「風格」的地方，選擇剛剛輸入的Style Name(如Hanamizuki)。

想想看你想設計成怎樣

假設，我要設計成：
1.雙欄
2.總寬度想要950px
3.側邊欄寬度想要220px

找要改的CSS

1.打開剛才新增在style資料夾的css，以及k2根目錄底下的style.css
2.在style.css找尋你要改的css，複製到新的css檔案。

因為我要雙欄，所以找有columns-two字眼又是設寬度(width)的selector。有這些。

.columns-two #page {
width: 780px;
}

因為我要改整個寬度，因此主內容寬度也會改變，找到這個。

#primary {
position: relative;
float: left;
width: 500px;
padding: 10px;
}

因為我要改側邊欄寬度，要找這個。

body.columns-two #primary-wrapper {
float: left;
margin-right: -220px;
width: 100%;
}
body.columns-two #primary {
margin-right: 220px;
}
.secondary {
width: 200px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}

好了，把上面的都複製到新開的css檔裡面吧！

K2很聰明，你的style設定會自動蓋掉style.css的設定，所以不用修改到k2本身的style，只要加個新的css就好。

開始修改CSS

1.總寬度想要變950px

.columns-two #page {
width: 950px;
}

2.主內容寬度也要一起變寬。本來總寬度是780px，主內容是500px。現在總寬度變950px，多了170px，因此主內容也要多170px。

#primary {
position: relative;
float: left;
width: 670px;
padding: 10px;
}

3.側邊欄想要220px。本來是200px，多了20px，以下是要改的地方。

body.columns-two #primary-wrapper {
float: left;
margin-right: -240px;
width: 100%;
}
body.columns-two #primary {
margin-right: 240px;
}
.secondary {
width: 220px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}

然後把沒修改的刪掉，總之變這樣。下面這個貼到新加的hanamizuki.css，就會生效囉！

.columns-two #page {
width: 950px;
}
#primary {
width: 670px;
}
body.columns-two #primary-wrapper {
float: left;
margin-right: -240px;
width: 100%;
}
body.columns-two #primary {
margin-right: 240px;
}
.secondary {
width: 220px;
}

本篇沒有進階教學

這是K2很好修改的原因，因為有許多風格可以選。其他的CSS設定，也只要到原本的style.css裡面找、複製、貼上、修改就好，完全就是Script Kiddie的作風啊！

有其他更進階的作法，等到有空再打囉。這次是剛好要幫公司弄個wordpress部落格，所以順便做筆記。