改版 | omegaM Plus上線




兩、三個月前,腦袋一直浮起想要改板的計畫,做了兩個板,一個做到一半停住了,另外一個更慘,只有打開PhotoShop寫了斗大的「MUKI space*」之後被我打入冷宮。

而週末這兩天不知道為什麼突然來勁,又重新做了一個板,從打板、切板、寫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.瀏覽器兼容還在調整中,請各家瀏覽器的使用者儘量回報問題給我,感恩!!!

引用網址:

FACEBOOKs COMMENT():

EVERYBODYs COMMENT:

  • 1
    shaynez (LV.25) // 2010.08.23 10:58

    哇哈哈哈,改版第一留言速度踩下来~

  • 2
    Paddy (LV.31) // 2010.08.23 11:03

    哇~~muki 姐 的新版型好漂亮喔!!

  • 3
    獨夜 (LV.11) // 2010.08.23 11:11

    用IE8開,看起來跟Chrome 5、Opera 10、FireFox 3.6 一樣...

  • 4
    Channy (LV.9) // 2010.08.23 11:16

    好美好美唷~~ 激起我改版面的慾望了哈哈 :-D 不過我只能美化版面...不像小木還能寫程式..真好!!

  • 5
    香腸 (LV.51) // 2010.08.23 11:59

    這版太棒了,超有活力的.....原來趕稿前都在寫佈景..(筆記)

    那個相關文章顯示很酷喔!

    不過我覺得文章上方和下方都放推到噗浪跟FB好像有點多,

    擇一放置或許會比較好吧?

  • 6
    muki (LV.1145) // 2010.08.23 13:02

    @ shaynez
    你動作也太快了吧XD

    @ Paddy
    你昨天不就搶先看了嗎 :wink:

    @ 獨夜
    謝謝你幫我測試唷~雖然你只是瞄一眼而已,但我還是很感動XD

    @ Channy
    我很期待你的改版唷!!
    趕快改換一個新氣象吧~~
    其實簡單的程式不難啦,我也是一直問估狗大神才懂的

    @ 香腸
    是阿,昨天你敲我msn的時候,我就正在為一些bug所苦惱~~
    我其實也覺得有點多,但是不知道要放上面還是下面比較好耶

  • 7
    大腸麵線阿米GO (LV.2) // 2010.08.23 16:53

    畫面整個變化好大…但是變的很漂亮。我也投…不要autoPLAY背景音樂…雖然我音效都是關的...

  • 8
    Carrie (LV.51) // 2010.08.23 22:00

    喔~這版的主題好清爽喔!喜歡喜歡 :-D

    感覺木子的主題就是和其他人(包括我)做出來的不同,很網站的感覺,還有素材也都好美,不愧是木子出品 :wink:

  • 9
    Lay (LV.8) // 2010.08.24 00:33

    太棒啦的佈景~~!!

    的確很有活力 :-P

    可以考慮示出樣式嗎??哈哈 :!: :!:

  • 10
    藍兒 (LV.114) // 2010.08.24 03:42

    哇,改版了 :-D :-D :-D

  • 11
    仔仔 (LV.28) // 2010.08.24 11:18

    facebook的放在下面會好一點...
    放在上面好像有點覺得是告訴別人已放上去(我的網站人氣有多高!哈哈哈~

  • 12
    muki (LV.1145) // 2010.08.24 12:00

    @ 大腸麵線阿米GO
    對阿,這版算是一個大突破。
    ps.你好可愛,還認真回我的截圖 :-P

    @ Carrie
    可能是因為網站做久了,所以做部落格都會硬塞點網站的元素,加上自己是做設計,會喜歡用一點小icon吧:)
    謝謝Carrie賞臉喔

    @ Lay
    釋出樣式可能很困難
    因為版面沒辦法套用就能直接使用,必須懂點html跟php才能修改。所以...再看看吧!

    @ 藍兒
    :oops:

    @ 仔仔
    我再想想
    謝謝你的意見唷:)

  • 13
    (LV.1) // 2010.08.24 17:20

    變清新多了~
    但是對我這種22吋螢幕的人來說,字體小會有點刺眼 8)

  • 14
    (LV.74) // 2010.08.24 20:08

    Muki好棒
    wp好漂亮
    每次改版都好美喔~~~^@^

  • 15
    mcooo (LV.1) // 2010.08.24 20:53

    字太小了吧!

  • 16
    muki (LV.1145) // 2010.08.25 10:00

    @ 妤
    謝謝 :-P
    我也希望每次都帶給大家不同的感受

  • 17
    WSQ (LV.25) // 2010.08.25 10:59

    十分簡潔,實在為炎炎夏日帶來了一般清涼的感受。
    不過留意到評論部份,如果名稱太長的話
    " REPLY SBD's MESSAGE ",這個按鈕便會往下掉了喔。

  • 18
    白穴公主 (LV.1) // 2010.08.25 21:27

    清澈~簡單~樸實~乾淨~美觀

    不過字真的小了點@@可能我是男生的關係-.-

  • 19
    jereve (LV.1) // 2010.08.28 00:20

    哇~我才幾天沒來怎麼這裡就變了(睛)
    我好喜歡這個新版喔^^
    因為我自己本身不太喜歡太花俏,所以這個版就顯得很棒!!!
    上面看到很多人留言,還有字體大小的問題
    剛開始我覺得還好,不過看久了
    好像是有那麼一點小(我的臉都快貼到螢幕上了><)
    好羨慕你們都那麼厲害,不像我只有撿現成的分:(

  • 20
    winy (LV.1) // 2010.08.28 02:28

    很喜歡這個佈景,簡潔清新

  • 21
    muki (LV.1145) // 2010.08.28 14:57

    @ WSQ
    是阿,我有注意到...但是不管了OTZ

    @ 白穴公主 ,@jereve
    可以調整字體大小

    @ winy
    謝謝唷^^

  • 22
    大陸新娘 (LV.8) // 2010.08.30 16:55

    我的博客也蠻久沒有改版了,想改其他風格啦!有什麼建設唷?

  • 23
    nofx (LV.2) // 2010.08.31 23:16

    <?php
    $limit = get_option('posts_per_page');
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    query_posts('&showposts=' . $limit=40 . '&paged=' . $paged);
    $wp_query->is_archive = true; $wp_query->is_home = false;
    ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    <?php endwhile; endif; ?>
    <div class="pagination"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?></div>
    你試試用這段CODE
    limit=10自己定義
    因該可以達到你要的

  • 24
    muki (LV.1145) // 2010.08.31 23:53

    @nofx
    謝謝你唷!!!
    有空來做修正 :wink:

  • 25
    event (LV.3) // 2010.09.13 19:05

    風格真棒,會設計真好,不像我只能修修修 :cry:

  • 26
    華兒 (LV.1) // 2010.09.16 13:32

    你的部落格超漂亮的!!
    我很喜歡右下方這個可以調整字體大小的小東西
    不知是否可以透露一下如何弄出來的呢?

  • 27
    Jude (LV.2) // 2010.12.26 15:34

    博主的设计很漂亮,但在写代码时能按照XHTML的标准来写吗?很多地方该用class你用了id,列表不用ul或者ol就直接写li了,我改了很久才符合XHTML 1.1的标准

  • 28
    nana (LV.1) // 2011.07.26 16:15

    我好喜歡muki的風格哦~ 我是看到muki的網站後才整個有心來玩wordpress~
    所以也買了架站十堂課這本書~ 好讚哦~
    非常期待能釋出這版哦~~~ 期待期待~

    • muki (LV.1145) // 2011.07.28 09:08

      nana謝謝你呀,你給了我很大的鼓勵跟支持^^
      這一版我也很想釋出給大家用XD,但我每次都改太大,就算釋出也沒辦法全部長的一樣
      但請耐心等待QQ


  • LEAVE YOUR COMMENT:




      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top