Kenming’s 三欄式版面 css template

從 b2evolution 轉移到 wordpress 的過程,吃足最大苦頭的不是轉檔 (migrate),而是版面的 CSS 設計。

這一次我對版面的需求一開始就打算使用三欄式的 Layout 了,原因是我打算提供更多樣化的一些額外附屬資訊,同時現在是流行大螢幕尺寸,1024*768 以上的瀏覽畫面,已經佔絕大部分使用者的比例了。 我的版面構思是右邊兩側為 Sidebar 列,一個稍寬、另一個稍窄 (均可調整寬度),左側就是內容 (content) 主頁了。 然後 Sidebars 是設成固定寬度 (fixed-width),而內容區則可以視瀏覽器寬度的大小而變動 (Liquid-layout)。

當然一開始是透過諸多提供 wordpress 佈景主題 (theme)網站來找尋,結果花了一整天的時間,瀏覽了數百個佈景主題,就是找不到我心中所想的,絕大部分的 CSS Layout 均是採用固定式寬度的設計;再則,我似乎有一些 "潔癖",看到 style.css 編輯得很凌亂,就挺不舒服的。 後來決定了,自己重寫 css layout! 我甚至不是 copy 自 default 的 css 當成樣板,而是僅把它當成參考,然後逐漸地邊嘗試、邊摸索,一點一滴試到可以接受為止。

事實上,我發現到,如果 sidebar 與 content 都是可變動的比例式或為固定寬度,那麼 layout 就挺好設計的。 但是像我這樣的需求,反而比想像得還要困難。 更重要的是,我其實不太會 CSS,我是在這一次為了達成我理想中的版面,才去瞭解一些基礎觀念。 版面 CSS 的設計,最基本的就是對所謂的 "Box Model" 要能有清楚的理解才行。起碼你總要知道 margin 與 padding 的差異、float 與 position 的浮動調整,以及還要注意的是 IE 與 Firefox 兩者瀏覽器(及其版本) 的支援程度才行。 這裡我強烈推薦 網站製作學習誌 這個網站, 版主在其一篇:CSS 排版觀念—Box Model ,寫得非常清楚,是一篇相當棒的教學文。

仍然又是透過我的好朋友 Google,查詢到了能達成我理想中版面的 CSS 解法,起碼有三種方式可以達成。 我這裡也不想去比較各種方式的優劣與否,大致上就是作個整理,有興趣的網友們可以去行參考。

反覆嘗試,我是採用了最後這一個,"The 'Blog Style' 3 column Liquid Layout (Pixel-widths)" 。 這個版面的 CSS Layout 設計可以說是相當古怪 ( 簡單的說,它利用一個 200% 的 parent 區塊再折成只有右側 100% 來包含 content 區塊。)、也最複雜,但相對也是最具彈性,無論你用 IE or Firefox or 其它各類瀏覽器,無論你怎麼伸縮,版面真的是不會跑掉 (如側邊欄掉下問題)。

不過,我有做了一些調整。 如果三欄式的兩個 Sidebar 是放在同一側,那麼,我就把它視為是一個 "大" 的 Sidebar (parent),其內在包兩個左右 "小" 的 Sidebar (child)。 如此我是覺得無論這個大的 sidebar 內部怎麼變化,都是它自己的事,所以也可以任意調整內部甚而再加上 "上與下" 的 sidebar 列了。

怎麼實現最好呢? 就是把 html 與 css 都寫在同一個 html 檔內,然後打開 IE 與 Firefox,同時去測試比較寫出來後的效果。 對了,我強烈建議,一定要安裝 Firefox 的 Plugin: Firebug, 真是太好用了! 如此要能追蹤除錯,相當地方便。

我這裡也列出我原先所寫得這一個 css layout template 檔案:
閱讀全文 »

{wp plugin} 讓舊網址鍊結自動導向到新網址的利器— Redirection

當初考慮從 b2evolution 轉移到 wordpress 系統時,其中一個讓我猶豫遲未轉移的主要原因是,包括 Google 等搜尋網站與其它諸多網站均有指向我諸多文章的固定鍊結 (permalink),一旦轉移後,自然地原有這些文章的鍊結就會失連了。 除了對支持貼上我文章鍊結的網友們感到抱歉外,同時也會影響到所謂的 SEO (Search Engine Optimization)。

不過衡量諸多利弊得失後,還是長痛不如短痛,咬著牙給轉移到 wordpress 系統來了。 結果有一個驚喜是,發現到 wordpress 可以自行設定可讀性較高的固定鍊結 (permalink)格式,所以從 b2evolution 轉檔的時候,我就有個想法,可以把原來舊文章的固定鍊結給寫入到 wp_posts Table 的 Post_name 欄位內,它其實對應的就是文章所謂的 Slug,文章標題的代稱 (Alias)。 原來是打算當在 wordpress 設定固定網址的格式為 %postname% 時,就會在網址列 (url)顯示這個 Slug 內的鍊結名稱,這樣的話舊有的文章鍊結就可以保存了。 但是事與願違,儲存在 Slug 欄位的舊文章鍊結格式例如為這樣:

am_ac_acce_fa_mc_a_fc_a_af_ac_acc

當你設固定鍊結格式為 %postname% 時,該篇文章的完整 URL 鍊結為:

http://www.kenming.idv.tw/am_ac_acce_fa_mc_a_fc_a_af_ac_acc

但其實其它網站所指向本站舊文章的 URL 鍊結為:

http://www.kenming.idv.tw/index.php?title=am_ac_acce_fa_mc_a_fc_a_af_ac_acc&more=1&c=1&tb=1&pb=1

多了 “title=” 以及 “&more=1&c=1&tb=1&pb=1″。 所以除非我當初在轉檔時是轉成這樣的格式並儲存在 Slug 欄位才可以。

再繼續爬文研究,才瞭解到舊網址鍊結是可以經過一些設定後,給重新導向 (redirect)到新網址的鍊結來的。 主要的原理就在於所謂的 301 條款,可以參考 Wikipedia 這一篇的說明: URL redirection。 簡單的說就是將舊網址的鍊結,透過 HTTP 301 的永久轉移 (moved permanently),而可以重新導向到新的網誌鍊結。 在 Apache 的具體作法就是更改 .htaccess 檔案,例如,當你在 wordpress 後台將固定網址 (permalink)設定為自訂結構 (如 %postname%)後,在 wordpress 根目錄下就會自動產生一個 .htaccess 檔案,其內容如下:
閱讀全文 »

{Hack} this day plugin of wordpress

我想要能在讀者閱讀某一篇文章時,在文章區的底部能提供其他相關文章的額外資訊,諸如 延伸閱讀、歷史上的今天等。

延伸閱讀 我採用了 Yet Another Related Posts Plugin (YARPP),功能應該是同類型的外掛中最強的。 它可以依據 標題、本文、標籤(Tag)、類別(Category) 等來找出在部落格內的其它相關連的文章。 大陸網友有寫了篇該插件(plugin)的使用說明,相當詳細。 可惜,透過 “標題” 來找出相關連的文章,對於中文字詞並沒有什麼效果。 反之,透過 “標籤(Tag)” 效果是最好也是最簡單的方式了,但是,前提就是每一篇的文章在下標籤關鍵字時要多更用心些才可。

歷史上的今天,我則是採用了 This Day Plugin,非常簡單,只有一支 PHP 程式而已,就是可以顯示同一部落格內同一日但不同年份的其它文章。

插件啟動後,就會直接把其它年份的 “This Day” 列表在本文內容的底部。 這我可不喜歡,我比較傾向上述這些算是 “額外的資訊”,我是會把這些給獨立放在另一個區塊的,再以 CSS 來調整 layout。 但是,稍稍可惜的是,原作者就是直接內建這個插件功能,並沒有提供可以直接呼叫的函數(function),這就不同於那個 YARPP 插件,可直接將其函數任意放在你想要的 template 位置上。

所以,追蹤了該支 PHP 程式,在最下面有一行把它給註解(comment)掉:

//add_filter('the_content', 'ddtd_generate');

這一行的功能就是屬於對本文內容的 “rendering”,對其本文後面再加上 This Day 的相關資訊而已。

再來,找到 ddtd_show_posts() 函數,在最底下的一行:

return $the_output;

改為:

echo $the_output;

然後,在你所使用的 theme template 目錄下 (wp-content/themes/XXX),利用文字編輯器(如 notepad++) 打開 single.php 檔案,在你想要顯示的位置上插入:

<?php ddtd_show_posts(); ?>

像我,就是把上述兩個額外的相關文章資訊,放在底部(foot)的下一個區塊,並利用 table 給排列成左右兩欄各別的參考資訊。

<div id="extra-info">		<!-- 延伸參考資訊 -->
  <table width= "98%">
    <tr valign="top" align="left">
      <td width= "50%"><?php related_posts(); ?></td>
      <td width= "50%"><?php ddtd_show_posts(); ?></td>
    </tr>
  </table>
</div>

至於為何使用 Table 而不使用 CSS float 來設定呢? 只能說,這比想像得還要難,只要放大縮小瀏覽器視窗,經常就會跑掉排列位置,不勝其擾。而使用 Table 排一版只花兩分鍾即可,所以在這種小地方,也就不想太講究、多花這些無謂的研究功夫了。

WordPress 新系統上線 (from b2evolution migrate-to wordpress)

整整花了有一個月的時間在新系統的建置上!

因為原來所使用的 b2evolution 系統,在去年七月升級失敗後,且越來越有感於 b2evolution 的越來越難以維護。或者說,一開始就是被開發設計用來適用於多人部落格的該系統並不太適合我,再則越來越傾向選擇自由度較高、較簡潔、有眾多 plugin 外掛支援的 wordpress 系統。 於是今年過年後 (原來是打算過年期間動工的,但出外旅遊貪玩而延宕),約二月底開始著手系統移轉的作業。

原來天真的以為,大約一個星期、最晚不會超過兩個星期的移轉工作,沒想到整整拖延了一個月有餘,可以說是陷入泥沼,太多的細節要調整了,包括舊系統 (b2evolution)的資料移轉 (migration)、新系統的建置等。 尤以後者,花在佈景 (theme) 的 CSS 設計,根本就是從無到有、一點一滴全部自己來動手架成的,主因是看了上百個佈景樣式,竟然沒有一個滿意的,沒有我預想的 layout 與 style;再則我思考過,轉移到 wordpress 系統後,原則上我希望就沿著該系統的版本一直更新即可,希望能用上 10 年之久! 所以乾脆花個時間來學 CSS 設計,以方便爾後自由地更改 style 與 layout。

整個移轉的過程,從 b2evolution 的系統,改寫 migrate.php 至 wordpress 新系統、CSS 設計、wordpress 系統建置設定等工作,完全沒有問過任何一個人、發問過任何一個問題,全部都是透過 google 查詢。經常是為了一個小小的設定問題,瀏覽了國內外數十頁網站淂來的。 這也算是印證,幾乎這些 How-to 的設定問題,都是可以透過 google 找得到答案的 (只是還挺辛苦的)。

許許多多關於上述如移轉問題、系統架設與建置設定、CSS 的一些竅門 …等,趁著我還有記憶時,近日內也會逐漸地發表安裝設定備忘錄。 對了,原來其它網站有貼了我舊系統的文章鍊結 (permalink),也不用調整更改,仍然是可以連結得上的。 這也算是我頗值得欣慰的地方。

目前完成的進度約有十之八九吧,還有一些小細節等需要調整。當然,也應該會有一些 Bug 或介面操作等問題,這些可能就麻煩有瀏覽我網站的讀者們多多包涵、也希望能留言或來信給予建議指教了。

※ 舊系統 b2evolution 的 screenshot。
http://www.flickr.com/photos/kenming_wang/tags/b2evolution/

認真考慮改架設 WordPress Blog 系統

自從上次升級 b2Evolution 失敗後,請參考:【系統升級】b2evolution 失敗的升級 (from 1.10.3 to 2.4.2)。 到目前為止,官方最新版本為 2.4.5(2008/11/19),與我現在所使用的版本已差上一個大版,又感現在執行升級等程序已越來越困難,原因在於我個人似乎 “Hack” 了許多的功能設定,老實說,若沒有自己動手 DIY “Hack”,可以參考其它利用 b2Evolution 架設的 Blog 平台,看起來好像就是那個樣子,似乎單調了些。

早在很早以前,從 MT 系統要改為當時更為開放的 php-based 的 Blog 平台,其實就是拿 b2evolution and wordpress 來比較。 後來選擇 b2evolution 的原因就在於那個時候的版本已經有支援 UTF-8,而 wordpress 則否。 為了中文編碼的問題,我才選擇了國內甚少人使用的 b2evolution。

前幾天與那個可愛漂亮的花小妹聊天,她蠻推崇 WordPress 平台的,又介紹說最近出了一本:「 WordPress部落格架設與經營:站長親授的十堂課」,她還註文推薦呢,所以我也從網路書局訂購了一本來瞧瞧(還沒寄來)。 看來 WordPress 國內挺多用戶使用它的,各類功能的 plugin 模組聽說有上千種之多呢,這使得我現在真的認真考慮要轉移 Blog 平台了。

最大的兩個問題,一為我的文章有很多參考自己其它文章的超鏈結,整個要改掉;另一個就是似乎有許多其他的網站,也有參考我許多文章的鏈結,這些就都一定會失效了。 至於資料的轉檔問題,因為蠻久以前,在我擔任 Oracle DBA 的時期,做的事情也有包括到轉檔的工作,我想應該還不至於陌生的。

第一個問題很傷腦筋,好像沒有一個明確的規則,很可能要一篇一篇的過濾,手動來編輯鏈結的變更。只是喔,我的文章累積起來可能也快有 2000 篇了,這種 “粗重” 一篇一篇改的笨功夫,不知道要花上多少時間? (若是花上個兩、三天,我是還可以接受的啦。)

第二個問題呢,就不知道影響會有多廣了? 我也無法推測! 這其中也必然會牽連到包括 Google 等搜索引擎的查詢。

是還有另外一個折衷的方法,就是原來我的 b2evolution 系統全部不動,也停止更新,然後架設一個新的 wordpress 平台,除了把舊的文章轉移(migrate)過去外,爾後新發表的文章就是在 wordpress 平台上了。 這個是衍生出兩個問題,一個就是新的平台最好是申請另一個新的網域(domain),例如, http://www.kenming.tw (我現在用的是 http://www.kenming.idv.tw/ ; 另一個問題就是,虛擬主機那邊還要多花錢來申請一個子網域,同時也要承擔到流量的負載問題。

那一種方法比較好? 我還在思考中,但是 Blog 平台的轉移,我是傾向要動工,而且是打算轉移到 wordpress 後,起碼有五年以上的時間,不會再考慮其它的平台的。

不過,嗯,這可真的是大功夫,包括上述的問題要克服外,架站還有 CSS Layout等都要重新設計的,這可要花上不少的時間呢。

若是要動工的話,應該就是利用春節的期間,窩在家裡專注地來作這些 “粗重” 的工作囉。

軟體思維顧問

專職軟體輔導與教育訓練的獨立顧問。輔導企業資訊單位如何有效組織系統開發與維護;輔導開發人員達成有效的專業分工。傳授如何把軟體作軟 (Keeping Software Soft)的技能,得以提昇系統的彈性/延展,並進而創造系統的再利用價值。

Personal