sandbox三欄版面佈置完工

本來只是想實驗看看的,結果一動手就停不下來了。
小柯說得沒錯,不用等到聖誕節,我已經完工了。(XD)

先來說說sandbox這個自由度非常高的theme。天佑那邊有篇關於sandbox的詳細介紹,有興趣的朋友可以前去看看。

安裝了這個佈景之後,便會在管理後台的「外觀」區產生這個佈景的控制台,使用者可以自行選擇想要的樣式。這個佈景主題裡面已經包含了單欄、雙欄、三欄式的佈景CSS樣式,全都存放在skins的檔案夾下。當然,這些CSS是非常陽春的。
Photobucket - Video and Image Hosting

上圖便是其中兩個未修改的CSS樣式。我的做法如下︰

決定想用的樣式之後,接下來就是為它穿上衣服了。先大略設計一下想要的主色和主題,將圖片準備好。接著,打開三欄式佈景的CSS (原始檔名為3c-b.css),將它另存新檔。接著便開始為每個部份加上自己想要的樣式了。承如天佑所說,它裡面的標籤處理非常豐富完善,幾乎每個部份都有其單獨的class或ID名。只要懂得CSS,就能控制整個版面,甚至還可以在單篇文章下隱藏部份sidebar。當然啦!額外資訊的部份還有一堆貼紙,依然是我自己手動加上去的。

由於我對許多細節部份都做了處理,所以我完工後的CSS檔非常長。(;p)

在製作自己的CSS時有個地方要注意︰這個佈景有個共用的style.css檔,將它調出來和自己製作的css比對一下,看有沒有重複的地方。我剛開始就是忽略了這點,所以任憑CSS怎麼改,有些地方就是沒有作用。後來才想到要去開那個CSS檔來比對。

另外,就是外掛的部份,特別是spam karma這支外掛。將所有想要的樣式都修改好後,我才發現,為什麼單篇文章底下的trackback跑不出來?竟然說我這篇文章關閉迴響和引用?我查了theme裡面的檔案,都找不到問題發生點。後來想到外掛,便一個一個試,竟然是spam karma這支外掛在搞鬼。幸好將它關閉再重新啟用之後,問題就解決了,不然我還想是否要換另外一個擋spam的外掛了呢。

Photobucket - Video and Image Hosting
完工圖。在Firefox下的樣子。

Photobucket - Video and Image Hosting
以IE6開啟的樣子。左邊欄位怪怪的的。不過沒嚴重跑位就好。我懶得修了。(s)

製作一個CSS之後,往後的就容易了。甚至還可以將CSS另存新檔,修改一下,又可以輕鬆換個樣子嘍!如下圖︰
Photobucket - Video and Image Hosting

趁這次大換膚,也將一些外掛做了更新。之前那個佈景無法使用paged-comment最新版,現在也沒問題了。Archives頁也加入了tag cloud。邊欄的類別及月份匯整改成下拉方式。(方法請看wordpress歡樂正體中文交流所的這篇教學)。

心得︰因為這個佈景,也讓我更加了解CSS的使用和WP的結構,不再只是單純的換換顏色、圖片而已。越玩會越上癮呢!


13 則迴響

  • 小柯

    11/27/2006

    我比較好奇的是
    換了一個全新的布景
    你還是過不了W3C…而且錯誤幾乎一模一樣…

    這是表示..有部分寫法被直接移植了
    還是問題不在布景檔勒… (jiong)(jiong)

  • Dreamy

    11/27/2006

    我也試過了,並且有相同疑問。
    我相信問題不在佈景。我懷疑是出在外掛。
    而且非常有可能是spam karma那支外掛。
    等下班回來再來測試。 :)

  • 小柯

    11/27/2006

    頗有可能
    我拿小橘家去測試
    結果跟你家很像
    她也是用SK2 (=_=) (=_=)

  • Dreamy

    11/28/2006

    我測試過了。不是SK2 (orz)
    真的找不出原因了呀! (t)

    應該不關這個佈景的事才對。因為這個佈景的寫法和之前那個並不一樣啊……

  • Dreamy

    11/28/2006

    我找到原因了。原因出在sidebar上。
    其中一個是之前我在sidebar上貼的「歡樂正體中文交流所」這幾個字沒有轉存成utf-8碼,還是big5。目前已經修正了。
    另外一個是recent-comment。只要我將這個外掛關掉,就可以突破檢查頁面 (ya)
    可是只要我重新啟動這個外掛,就無法通過檢查頁面,會跑出「非utf-8字碼」的錯誤訊息。

    通過檢查頁面後,檢查出25個不合格的地方。其中大約有將近一半是出自flickr的語法。既然如此,我就不改了。
    現在我又將recent-comment外掛打開了。所以又通不過了。 (=_=)

  • 小柯

    11/28/2006

    recent-comment我也在用..應該不會有問題阿… (?) (?)

  • Dreamy

    11/28/2006

    我也不知道為什麼會這樣。
    真的是太謎太神奇了啊! (orz)

  • 小柯

    11/28/2006

    你貼進sidebar那一段語法怎麼寫的阿? (8-0)


    %comment_author%: %comment_excerpt%', false, 'comment'); ?>

    ↑這是我目前用的

  • Dreamy

    11/28/2006

    我是按照程式作者說的那段code,加進sidebar。
    我試過加入你那段,會出現錯誤訊息……
    小柯可以麻煩將你的sidebar.php E給我看一下嗎?
    有東西可以比對,比較容易找出錯誤 (:)) 感謝啦!

  • 小柯

    11/28/2006

    你看我的sidebar.php是沒用的..

    因為…

    我用sidebar module… (:$) (:$)

  • Dreamy

    11/28/2006

    (jiong) (jiong)
    你家的清單上沒有寫到這個外掛啊……
    所以你實際上使用的外掛還要更多?

    好吧,既然已經知道問題在哪裡,有機會再來修好了。
    現在先不管了!(裝死?)

    sidebar module我這次也有裝,不過沒開啟。
    因為還要重新調整CSS。我懶了(XD)

  • 小柯

    11/28/2006

    sidebar module會直接吃原本的css
    應該是不會影響吧?
    不過你是三欄式的 我就不知道會怎樣了

    嚴格來說 我沒有出過外掛清單
    那篇是”更新清單” (XD) (XD)

  • Dreamy

    11/29/2006

    哈哈,我都把那篇當成外掛清單來看了 (XD)

    好吧。今天沒課,再來試試sidebar module好了。
    我發現,來我家的人超過70%還是使用IE來瀏覽。
    既然如此,我還是把IE的版面再修一下好了。 (=_=)

迴響目前關閉。