[WordPress] 幾個主要版面功能的設定備忘註記

一、側邊欄列出 RSS 訂閱方式 :

跟隨潮流與為了網站訂閱功能的可攜性,所以也申請了 "Google FeedBurner",讓自己的網站有一個唯一 (unique)的訂閱網址。

透過 FeedBurner 訂閱的方式有兩種: 以 Email 訂閱,或直接以 RSS 閱讀器訂閱。

另外我仍提供了 wordpress 預設的 RSS 訂閱方式。兩者的差別好像 (我也不清楚)是後者在遇到 {閱讀全文} 的標籤前,都可以列出本文的內容,而不像 feedburner 需事先設定本文的長度。

我的 RSS 訂閱網址為:
 o FeedBurner: http://feeds.feedburner.com/kenming
 o WordPress: http://www.kenming.idv.tw/feed

實現的效果參考下圖:
Sidebar RSS 訂閱提供

繼續閱讀 »

重新設計本站 WordPress Theme 版面

我在約一年半前從 b2evolution 轉移到 wordpress 平台時,採用的版面是屬於「三欄式」,左邊為內容區 (content)、右邊兩側為 sidebar 側邊欄。而且,左邊的內容區寬度可以隨 browser 水平寬度的調整而變動。

當時頗以為這樣很富有彈性,尤其在 20" 以上的螢幕上觀看瀏覽內容區的視覺效果覺得不錯。但是沒想到當我在外教課從外連回 Blog,透過筆電連接投影機投射出來時的效果才發現到甚差,因為投機影一般最多僅到 1024x768,還有一些是 800x600 的尺寸,結果導致內容區的寬度變得極為狹窄,甚至貼在其內的影像圖片無法完全顯示出來。

這次就不想變甚麼花樣了,乖乖地採用固定式的版面,以 1024x768 為基準,並將其置中。側邊攔 (sidebar)改回一個置於右側,儘量不要放上太過花俏的側邊資訊;左側則是主要內容,構成比較常見的兩欄式版面。

CSS 樣式完全自己來、重新再寫過。不過在整個版面設計的期間,我起碼參考過 10數個以 wordpress 架站的部落格的版面設計。然後又委請 Cathy 的專任美工幫我設計了一個網站 Banner,除了表達出綠意清新的感覺之外,還特別放上一隻以前我網站名字 (矇矇的秘密基地)的黃金鼠卡通主角。

這次整個版面的色調期能表達以 "禪 (Zen)" 的意境為主,背景色以乳白色為底、框線則以土金黃色為線條。儘量能表達出整個網站的簡單、素雅為主。在此也貼個 screenshot 作為紀念。

kenming_wordpress_blog_screenshot_20100727

※ 延伸參考
 o Kenming's 三欄式版面 css template

[系統升級] WordPress to 2.8 and MySQL to 5.0

昨晚靜悄悄地把 WordPress 系統給升級了 (from 2.71 to 2.8) ……

其實,只要在後台單鍵點個選項,Wordpress 就全傻瓜式的自動幫你完成升級。 期間所有的模組 (plugins) 也完全正常運作,沒有相容性的問題;而且許多模組也似乎順應 2.8 的升級,很快地同時釋放出更新版本,所以也是單鍵傻瓜升級即可。 當初選擇轉移到 WordPress 平台是對的,平台的管理與升級,實在輕鬆簡單太多了。 :-)

另外,ISP 這邊,Why3s 前兩個月主動徵詢我的意見,看要不要轉移主機,因新主機效能更佳,MySQL 版本也是較新的 5.0。 這當然好啊,唯一稍稍擔心的是原來是使用 MySQL 4,不知道是否會有資料庫相容性的問題。 不過從 MySQL 4,透過 phpmyadmin Dump Blog 資料,再倒入 MySQL 5,一切完全正常! 不過我的資料檔 (純文字檔) 有 70餘 MB 之大,而 Why3s 這邊的 phpmyadmin 上載 dump 檔最大限制為 50 MB,所以從下載到上傳,改用 phpmyadmin 預設 .gzip 壓縮,整個過程也是相當順利。 (不過注意的是,改用 .zip 卻是不行倒入。)

目前新系統的主要應用伺服器版本為:

  • Apache 2.2.11
  • PHP 5.2.6
  • MySQL 5.0.77 -community
{Blog 系統轉移} b2evolution migrate to wordpress import script.

從某一個應用系統 (或資料庫系統)要把資料轉移到另一個應用系統 (或資料庫系統),這個轉移的過程稱之為 "Migration" (相對地,若是同一系統的版本更新,則稱之為 Upgrade)。

上一個月,要從原來 b2evolution Blog 系統轉移 (migrate)到 wordpress 系統時,就如同當初我從 MT 轉移到 b2evolution 一樣,官方的系統均有提供 import (載入) 的 script 檔。 只是, MT 轉 b2evolution 時,當時因為資料結構比較單純,所以完全不用作任何修正,透過 import 工具程式一下子就轉好了;但是,這兩三年來, b2evolution 系統相當積極,版本更新極快,而每一次大版本的更新,必然會變動到 DB Schema,這使得 wordpress 所提供可以 import from b2evolution 的 script 檔,不可能不作修改就可以順利完成轉移作業。

wordpress 官方所提供對各大 Blog 系統的 import script 檔在此:Importing Content。 不過,我真的挺懶,想說若能找到無痛地可以從我現在 b2 1.10.3 版本 → wordpress 2.71 的網友加持修改版,那就更省事了。 結果呢,花了大半天的時間,是有找到啦,像這篇: Import From B2evolution(2.4.6) to WordPress (2.7)。 只是,要收費耶!! 含售後客服要價 50 USD。 其實啊,這價錢是算便宜的啦,當初我擔任某家公司的 Oracle DBA 時,幫企業客戶作轉檔的話,起碼是 10 數倍以上收費起跳的呢。

不過,想想還是乾脆又自己來動手 DIY 好了。 其實轉檔的原理相當簡單,就是把 Source Schema 對應 (mapping) 到 Target Schema 就對了。 b2evolution 有 31 個表格;wordpress 則只有 10 個 (非常欣賞它的結構簡潔)! 怎麼會差這麼多? 主因就是前者是被設計來服務多個部落格用戶的,而後者僅設定單一的部落格,所以前者儲存了非常多的統計數據,而這些,其實是不用轉移的。

轉移的核心會是什麼? 當然就是本文內容了。 本文就是包含 Post 內文 (content)與迴響 (comment),一篇內文會包含 0 到 多篇迴響,非常典型的 "Master-Detail" 表格結構,一般就是會有兩個表格個別儲存並以 Key (primary-key to foreign key)來關聯了。 所以只要找出含有 "_post" 字串的表格,大部份就是儲存 Post 內文的主表了。 再以此為中心,把一些如類別 (category)、帳號等額外資訊,給一一的加進來即可。

轉檔的寫法百百種,可以利用 stored-procedure、利用 C#/VB.NET、PHP、Perl 等機制來轉寫轉檔程序。 事實上,對資料結構與 SQL 語法精通的真正高手來說,只要寫個 SQL 陳述 (statement)甚至就可以轉移了。 嗯,我那個 partner Ringle 就是精通此道,他對資料庫的掌握度,我仍是沒有看到一個比他更強悍的。 可惜,他可不幫我作這種小事,而他收費可更是不便宜。 所以呢,我還是又繞回來,下載回來 wordpress 官方的 import script 程式,當然是利用 php 撰寫的,再以此作為轉移程式的 "骨架 (skeleton)",然後慢慢地調整 SQL 陳述,修改表格與欄位、資料型態等。 呵呵,比想像得簡單,我採用漸進調整的方式作業,大概反覆轉移了有四、五次之多,至最終轉到我滿意正確的結果,大約也才耗上半天的時間而已。

繼續閱讀 »

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 檔案,其內容如下:
繼續閱讀 »

Page 1 of 180123456789101112...203040...Last »