omegaW v2.0

話說才剛做好 omegaW 1.0 不到三天的時間，就火速的跑出來更新版 2.0。原因是，發現 1.0作的太瞎太爛啦...，不但被大家挑了好多毛病，連我自己也愈看愈淒涼，所以就趁著還有動力的時候，依舊以 網站風+日系風 為主題，進行了一次 update。

果然還是要先在 photoshop把版面做好，再轉成HTML，最後丟到PHP，比較不會出錯。上一版就是在photoshop做了直接轉成PHP，所以就沒時間測試各瀏覽器相容了。

以下簡單介紹 omegaW 2.0 幾個比較不一樣的東西!

▼ 這是之前提過，從傅不死FullHouse 那邊下載來的插件，網站風最重要的就是要有最新公告啊! 所以很感謝傅不死有提供這麼美妙的插件。而且還有訂閱功能耶，也太酷了~

公告

▼ 依然是首頁的部分，點選 Recent Articles 會先預覽文章，再點一次才會進入內文。上一版也有作滑鼠移過才會展開文章的效果，不過上次放的是縮圖，這次改全部。另外因為這版多了一個點擊的動作，所以我也寫了一個關閉的功能。
詳細的應用是從這邊學來的，有興趣的朋友可以參考: jquery實現wordpress首頁文章內容展開預覽效果

jquery實現wordpress首頁文章內容展開預覽效果

▼ 這是我覺得比較有趣的功能，進入內文閱讀，如果隨時想要搜尋其他文章，可以點選左邊的搜尋按鈕，就會跳出搜尋框讓你做搜尋囉!

搜尋

接著簡單說一下很夯的HTML5，因為實在很混都沒研究，所以一知半解的先從outline著手。Chrome有個擴充元件: HTML5 Outliner 可以看網頁的大綱，所以我就簡單的設計了一下，依照我的邏輯作區分

▼ 最後首頁長這樣:

▼ 然後這是內文的大綱:

new version: omegaW

所以我親愛的CSS，在這邊容許我跟你說聲抱歉，我不該荒廢你那麼久的.....

那麼，來談談這次的改版吧!!

如果知道我有一個真正的「首頁」的朋友，應該也會發現我的首頁一起改版囉!!!
首頁在這: mukispace.com ，將首頁跟我的blog改成同樣的版型，唯一不同的是首頁有一堆 social network site，我還在思考要不要把 flickr 加入我的profile裏頭，畢竟現在的拍照主力都丟到 flickr 了!!

anyway，因為一直想走回頭路，用個人網站的方式包裝部落格，所以努力往這目標前進。加上自己實在太喜歡日系的簡單風格，所以這是改版走的路線是: 日系風+網站風！

首頁依照個人網站的慣例，放了一個「最新消息」，左邊的最新文章，之後會採用我以往的預覽式給大家觀看。反正現在有 RSS 以及 google search 的幫助，大家也不太會從首頁一篇一篇的點文章閱讀了吧？

其他的小細節有待完善，測試的瀏覽器先草草的使用google chrome, firefox, 以及IE8。其他的IE系列就先省略了 囧!

依照慣例，對於改版有任何的想法或是覺得哪裡需要改進的部分，也希望大家不吝發言唷，謝謝^_____^

而週末這兩天不知道為什麼突然來勁，又重新做了一個板，從打板、切板、寫code，兩天的時間終於完成了。

另外這板的名字是「omegaM Plus」，請原諒我了無新意的版面名稱 ，因為我實在想不到要叫什麼名字XD~，反正他就等於是omegaM v4的進化板啦

這板同樣加入了很多創新的元素，每個小細節我都儘量的去滿足，也許大家看了沒什麼感覺，所以我決定跟大家介紹一下我的心血，這樣大家才可以瞭解我背後的辛酸史嘛

----------

新增功能

新增功能這四個字聽起來很強大，但說穿了也只不過是部落格上大家常見的東西，我只是在這次改版順便加進來而已。(其實上一版就想要替它修改加功能，但終歸一個懶字阿OTZ。)

1.分享至Facebook、Plurk
我在文章的上下兩方都加上了分享的按鈕連結，如此一來大家就可以快速地將我的文章分享到Plurk以及Facebook囉~，選用這兩個社群網站的原因，是因為我最常用他們，這樣我也可以快速地分享自已的文章了~。

新增Plurk、Facebook等社交網站分享

2.新增相關文章列表
相關文章其實很有用，因為它多少可以增加網站的黏度，我想我就是因為一直沒放，所以網誌退回率才高的嚇人吧 !! 所以這次我決定將「上一篇」、「下一篇」拿掉，改放相關文章，並且將文章標籤也排到裡面，可能大家在點相關文章的時候，多少會有興趣也點點文章標籤囉!!

文章下方新增相關文章列表

3.404頁面完工
這個同樣也是因為懶，所以之前每一版都沒有針對404頁面做好看的優化修正，這次終於一鼓作氣把404頁面給做出來了。當沒有這篇網址，或是找不到搜尋字串的時候，就會跳出該頁面，這邊除了可以建議大家重複搜尋外，還提供了分類以及標籤做選擇唷。有興趣的朋友可以連到這裡看看404效果，或是使用部落格的搜尋功能(我把搜尋放到最下面了~)

終於生出來的404頁面

8/26新增：

4.依照分類不同顯示對應的熱門文章
5.可以選擇文字大小並紀錄

4.依照分類不同顯示對應的熱門文章
會想做這個功能，是因為我的部落格退回率實在太高，所以除了相關文章外，還想藉由熱門文章增加黏度。而我發現會來我部落格的超過70%都是透過搜尋引擎，既然如此，我萌生了一個想法：是否能讓使用者在看A分類的時候，就幫他篩選出A分類的熱門文章呢？ 有了這個想法我開始尋找相關函數以及資料，最後嘗試實作，很開心寫出來了:)。

所以現在只要點到特定的分類，側邊欄就會出現該分類的熱門文章供大家點閱參考喔!!! (在這邊要謝謝SR，幫我簡化了if, elseif 的語法架構，不然依照我土法煉鋼的邏輯，程式碼應該會落落長 )

不同的分類有不同的熱門文章

5.可以選擇文字大小並紀錄
改版之後，一直收到意見回饋說字太小。我自己偏愛小字體，這不是什麼新聞了，所以我做的粄都會以12px左右的字型大小為出發點。本來是不想做更改的，但是為了顯示我廣納民意的決心，還是做了一個功能可以讓大家選擇文章的字體。分別是12px以及15px，在文章上方會看到按鈕可以做選擇，而且他還可以依照cookie紀錄你現在選擇的字體大小是哪一種，以後你瀏覽其他我部落格的文章，就會自動換成該字體大小唷。

文章最上方 可選擇字體大小

但是我只針對文章大小做更換，其他側邊攔、迴響我都不做調整。其實我是一個很頑固、很堅持己見的人，尤其在「我愛的設計」跟「使用者體驗」上，我會毅然選擇前者，畢竟我的部落格不是大眾取向，我也不想要為了討好每個人去做大幅度的妥協。這點任性也請大家包容!!

最後還是要大力感謝SR !!，沒有他這個功能絕對不可能完成，因為我不會寫jQuery cookie的功能OTZ....，而這個調整字型+紀錄的程式碼，是由SR一手包辦的。太感謝他了!!!--

--------

小細節改善

1.用點特效讓Reply更漂亮
其實我一直很想用這個jQuery特效，昨天自己研究寫語法終於給我寫出來了，在這邊也要感謝paddy的幫忙，你是我的jQuery良師啊!! 留言的地方，我一直是採用「點選Reply」回覆留言，因為我不喜歡巢狀把排序整個打亂，雖然我最愛的還是pixnet的版主回覆功能阿，不知道哪天才有這樣的插件可以用 (離題了...)。

咳咳，總之大家可以看到留言列表的地方，每個人的留言右邊都有淡淡的Reply字樣，滑鼠移過之後就會清楚的顯示文字，並且告知你現在要回覆的是誰的留言。我自己還蠻喜歡這個設計的，也希望大家會喜歡。不過到現在還沒想到我要怎麼hightlight我自己的回覆就是了

滑鼠移過後，REPLY會變清楚讓大家辨識

2.以所有文章代替頁碼顯示
在部落格首頁的部分，正常邏輯應該是讓大家選擇文章頁碼進行閱讀，不過我在這邊把它改成用年份做分類的閱讀方法。但其實這是一個小bug啦...，因為我把首頁的文章給分離開來，只有第一篇會顯示摘要，其他都顯示列表。但是我是用query post的方法，所以它沒辦法抓到第二頁之後的文章... (真是自作自受)，不過我目前找不到解決方法，所以只好先把頁碼改成年份分類讓大家做閱讀囉!!!

頁碼改為年份類別

----------

以上大概就是我所能想到的新功能以及小修正，不過這一版我真的花了很多時間在研究，但是又學會了一些code讓我很開心啦!!! 只是還有許多地方還要再做微調，也希望我能保持這種精神，一鼓作氣地給他衝下去

對於新版面的感受如何？有任何意見歡迎回饋給muki唷!!!!

ps.瀏覽器兼容還在調整中，請各家瀏覽器的使用者儘量回報問題給我，感恩!!!

WordPress 架站、管理、經營 簽書分享會

報名資訊

活動名稱： WordPress 架站、管理、經營 簽書分享會
主辦：老貓測3C - 老貓(http://www.iqmore.idv.tw/)
主講人：MUKI space* - MUKI (http://blog.mukispace.com)
內容：
‧ WordPress 架站經營心路歷程
‧ Theme 與 CSS 設計分享
‧ WordPress 架站、管理、經營 簽書會
活動時間：2010年5月2日 (星期日) 14:00 ~ 16:00
活動地點：777 咖啡美饌 (台北地下街美食區7號店，Y23 入口下，市民大道與延平北路交叉口)
店家電話：(02)2558-0958
金額：200元 內
人數：30 人
報名頁面：http://registrano.com/events/muki-wordpress-book
(一律請到報名網站登記，之後變動或通知都以名單優先，到時候會再整理店家地點詳細資訊。)

咳咳，嗯，我想各位朋友應該都知道我出了一本WordPress相關書籍吧！(什麼？不知道？那你現在應該知道了吧!!!)，因為這是我出的第一本書，所以一直很想辦個小型的簽書會，一來透過互相交流，藉由大家的意見回饋讓我知道哪裡需要再改進；二來也是想跟各位見個面，分享一下彼此的WordPress，甚至是CSS的心路歷程。於是就有了這個簽書分享會的誕生，在這邊也要特別謝謝老貓幫我辦活動、找場地

這個簽書分享會的主軸，主要有兩點，一是跟製作WordPress佈景主題，還有CSS的運用。我一直想跟大家分享我是怎麼製作主題的，也希望透過這個分享，可以讓更多人一起瞭解製作主題的樂趣喔。二就是我的簽書會啦，但老實說，我真的很怕到場沒幾個人帶書來，或者是根本沒什麼人買 ，雖然聽出版社說出已經二刷了，不過還是沒什麼信心，總之希望至少可以讓我簽到一本啦~。

簽書分享會的舉辦時間是在5/2(日)，這邊也偷偷預告一下，5/2剛好就是MUKI本人的生日喔!!!所以當天舉辦這個活動，對我來說意義非凡，算是給我的生日做個紀念吧！在此也先謝謝各個支持我的朋友，以及願意來參加活動的朋友。至於中南部會不會舉辦相關活動呢？這邊要跟各位說聲抱歉，因為MUKI是個路痴+媽寶，再加上該活動都是部落客友情贊助以個人名義舉辦的，所以說不太可能到中南部辦這個活動。因此活動僅有一場，能看到MUKI本人也只有那麼一次機會，所以希望大家踴躍參與喔!!!!

最後，我也替活動製作了一個小Banner，各位部落客如果願意替我宣傳該簽書分享會的活動，歡迎你們在部落格的側邊欄放上活動的宣傳連結，感恩。

連結語法：<a href="http://blog.mukispace.com/muki-wordpress-activity/" target="_blank"><img src="http://muki.sr-school.com/photo/albums/mukispace/muki.gif" alt="WordPress 架站、管理、經營 簽書分享會" border="0" /></a>

wordpress theme: omegaB

主題名稱：omegaB
版本需求：WordPress 2.5版以上
主題作者：muki
最近更新時間：2010-02-08(0.9beta測試版)
主題標籤：藍色, 兩欄, 固定寬度
(if you want to see more content in english, please click 繼續閱讀 to read it )

Theme: omegaB
Required WP version: 2.5 or higher
Author: muki
Last Update: 20100208(v0.9 beta)
Tags: blue, two-columns, fixed-width

【更新說明：】
2010-02-08：beta 0.9版釋出。將預設側欄跟widget模組並存，並且微調版面，刪除多餘的程式碼。
2010-01-13：beta 0.8版釋出。

【主題簡介：】
此主題為我之前用的omegaB，將他稍做修改後分享出來給大家使用。這邊要特別跟大家說明，我現在放出來的omegaB是測試版，所以會一直做更新修改的動作。喜歡omegaB的朋友，歡迎你們下載測試版搶先使用，幫我找bug。

【主題特色：】
1.支援widget側邊欄模組，會跟預設的側邊欄並存，如果不想要預設的功能，可以到sidebar.php刪除對應的程式碼。
2.內建WP-PageNavi css語法，有使用此款插件的人可直接看到效果
3.內建連結滑動功能
4.迴響支援reply回覆，管理者發表留言的設計與他人不同。

【使用說明：】
下載主題後，在後台直接套用即可。
目前為beta測試版，在使用上有任何問題都歡迎提出來。如果測試期間沒有太大的問題，就會正式啟用了。

【瀏覽器相容：】
IE: v6(不支援png圖檔). v7. v8
Firefox: v3 ↑version
Google chrome

主題下載：
1.可至wordpress.org進行下載 (還未正式上傳)
2.點選底下圖片進行下載

327 downloads (v0.9 beta)

這次改版的動力,是因為看到某些漂亮的部落格網站(日本的唷~)
剛好很愛他帶給我的簡潔風格,所以就決定跟進,把自己文章與文章之間的間距調大一些,這樣雖然字體小,不過看起來也很清爽!!!
此外因為要配合我自以為的「高質感」,所以決定不管如何我就是不改字體大小啦!!!

這板取名叫做omegaB,理由很簡單,因為全是用Blue(藍)做配色,
我只能說藍色真的是網站百搭款,感覺怎麼搭都好看呢!!

wordpress theme : omegaB v1.0

omegaB算是我這幾個月改版以來,改的最久的一次
以往從製作正式上線,大概只要1天多的時間,
而這次的omegaB居然讓我搞了3天多才完工,多了一倍的時間呀!!
不過也因為這次的作法比較繁複,我從首頁,文章頁,還有迴響都做了psd,所以說花比較多的時間在製作psd,而切版就沒有那麼久了~~

omegaB仍然保持以往的嚴選品質,相容於各大瀏覽器:
IE6.0, IE7.0, IE8.0, Firefox, Google Chrome, 這次更多了opera瀏覽器的測試.
但是呢,要跟IE6的user說聲抱歉,因為我圖片大量用png,所以不支援png透明的IE6 user會看到醜醜的背景.
雖然說可以用java script去控制,但我不想因此多讀取一個js拖速度,所以抱歉啦

另外一個比較棘手的問題,就是我的留言板掛點了,
這是從上一版就出現的意外,真的是要用意外來形容!!!,因為我根本沒改什麼設定,有一天他莫名奇妙就進不去了=___=
我有在wordpress.org論壇上發問,希望可以得到善意的回應.
總之目前留言板是無法進入的,想要留言給我的朋友,可以到關於這裡profile的地方留言,或是寄mail給我唷

這次的改版,如有任何疑問,或是有哪裡跑版的地方,也歡迎大家踴躍告訴我
讓我可以做到最好
感激:)

wordpress theme: omegaG

Theme: omegaG
Required WP version: 2.5 or higher
Author: muki
Last Update: 20090720(v1.1)
Tags: light, white, two-columns, fixed-width, black, green

主題簡介：
omegaG是我之前自己使用的weblog佈景改良版，採用黑&綠做為配色，不過內文的部分還是保有白色底框。

主題特色：
1.支援widget側邊欄模組
2.widget跟sidebar.php自訂側邊欄可並存
3.內建WP-PageNavi css語法，有使用此款插件的人可直接看到效果
4.內建連結滑動功能
5.迴響支援reply回覆，管理者發表留言的圖像邊框和其他人不同

使用說明：
下載主題後，在後台直接套用即可。另外不推薦大家在footer.php編輯內容，因為版面會不好看。如果一定要在頁面尾部加上訊息，必須要修改6個檔案：index.php、404.php、archive.php、single.php、search.php、page.php
在檔案裡的<div class="top">...</div>裡頭添加內容即可。但請勿刪除我的版權訊息，感激:)

瀏覽器相容：
IE: v6. v7. v8
Firefox: v3 ↑version
Google chrome

主題下載：
1.可至wordpress.org進行下載 (還在審核中)
2.點選底下圖片進行下載

328 downloads (v1.1)

備註信息：

20090720：增加上一篇、下一篇連結。修正側邊攔文字顏色。(v1.1)
20090718：修正ie6瀏覽器相容問題(v1.0.2.1)。
20090718：修正頁尾版權(v1.0.2)。
20090718：修正style.css裡頭版權信息連到theme的位置連結(v1.0.1)。

其實我打一開始只是想把weblog v1.0重新整理一下，繼續保持黑&綠的配色，但是不知道為什麼改著改著就變成這個樣子了(汗
這次的版面有參考幾個韓國的psd模板，我只能說韓國的模版真是好用，不用讓我花太多腦力去想要設計什麼樣子。

這次的版面有在以下瀏覽器測試過：ie6，ie7，firefox3，google瀏覽器
其他瀏覽器就麻煩大家幫我測試囉!!! 這次改版也有點趕，如果哪邊突然跑位了也請大家告訴我一聲 3Q啦。

最後要跟有訂閱我網誌的朋友說聲抱歉，接下來我會將網誌訂閱改為「摘要輸出」，也就是說想要觀看全文要連回到我的blog唷，不好意思，請幫muki我衝衝人氣吧

theme: LightWord

今天要推薦的這款佈景，是繼Fusion之後，我個人也很愛的一款，他大量採用灰色漸層的效果，使得佈景主題看起來非常有質感。目前此佈景放在wordpress.org官網的首位，熱門程度位居第六，有興趣的朋友可以載來玩玩看~。

佈景名稱：LightWord
目前版本：v1.5.1
預覽位置：preview LightWord theme
作者網站：http://students.info.uaic.ro/~andrei.luca/
主題簡介：http://students.info.uaic.ro/~andrei.luca/blog/lightword-theme
標籤：theme-options, light, white, black
推薦特色：除了版面帶有高質感的效果外，後台也可以自由定義是否要啟用Cufon渲染效果，還有一些個人化的配置。
特別注意：作者所提供的Cufon效果目前不支援中文，所以如果你的網誌標題多以中文編寫，在後台請不要勾選「Activate Extra Cufon」的選項。 如果你真的很想要用Cufon的效果，可以考慮自己製作一個font.js，不過我自己試用的結果是失敗啦XD~雖然有產生一個font.js檔案，但是覆蓋下去卻沒有效果，所以這部分我無法提供大家諮詢。就請大家自己嘗試看看囉:)
(20090609 update: 關於此問題剛已去詢問作者，靜候佳音吧:P)

此版一開始就打算走黑綠的配色，說到黑綠，近期發現有幾位設計者的版面也往黑綠路線出發，看來黑綠應該是今年流行的趨勢，已經跟好幾位撞色了 噗~

weblog的重點在於偏重「網誌」以及「網站」的結合。未來版面我都希望朝這個趨勢出發，把他搞得更像是個人網站一樣。有興趣的朋友也歡迎一起加入這個行列，讓web+blog可以有更模糊的界定。

版面分為兩塊，首頁以及進入頁面有所不同，同時mukispace.com也換成綠色系了，有興趣的朋友可以點入連結看看:)

目前還剩下版權宣告尚未完成，近期內會努力完工!!

另外版面有任何連結壞死或是跑位的問題，也歡迎大家告知我喔~