「Polen」免費中文 WordPress 佈景,乾淨、單欄版面、RWD、Kent Control、列印優化!

1 / 4, 2014 Wordpress , 佈景

這次的佈景,新增了一些過去的佈景從沒有實作過的功能,像是真正的單欄,並把作者介紹擺在最明顯的地方-內文右側,另外還加入了列印優化,列印優化?換句話說就是讓列印時的排版能夠非常非常整齊,不會雜七雜八的亂糟糟。會有這樣的功能其實是因為最近在尋找網路上的演算法文章時,每每要下載卻發現排版整個亂到一個無法形容的地步。於是,就萌生了製作列印優化的 Code。其實,也只是簡單的幾行。這次的佈景應該是到現在做的最好的一次,希望大家會喜歡!

附註:本文同步發表於「樂在設計」,由Yuxin寫作

附註:若想要學習如何製作一個 WordPress 佈景主題,您可參考:免費 WordPress 佈景主題開發指南電子書

這次的佈景有小小嘗試了 Mobile-First,若有不好之處也歡迎回報 🙂

現在之所以要讓佈景盡量輕量化、盡量簡化單欄化的主要原因,我自己是這麼想的:很多部落客總是在自己網站的外觀上浪費的太多時間,或者是選到一個太爛的佈景要一直修修改改,導致時間都沒有花在真正寫文章、創造文章上。(雖然我自己因為高中比賽課業繁忙,沒有時間寫文章 :((。

所以,使用了很簡單的排版是因為希望你能夠把精神投注在文章內容上面,投注更多創造力在文章上面,讓台灣,甚至人類社會更進步!我自己覺得要回到初衷的文章上面 :)) 。

另外也凸顯的作者區塊,也是希望你能夠過文章展現出真正的自己,利用文章讓大家知道你,耶~

關於 Polen

Polen 精選

Responsive Web Design

這次同樣用 PlaceIt 產生三總不同尺寸的預覽圖,整體版面看起來還算乾淨,沒有過多的綴飾。在手機的螢幕寬度下,會將 Navigation 變成寬度 100% 的樣式,然後內文的部分看起來則是還滿舒服的。

placeit

手機上顯示狀況:

fone

作者區塊設計

因為單欄設計,所以在文章的部分右邊會是空空的。有鑑於此,所以在文章的右側就直接將作者資訊顯示出來,讓閱覽者能夠很快地認識你。另外,在作者介紹的下面有幾個連結,分別是作者網站、Google+和 Facebook(Twitter 也有),這些都可以在個人資訊的地方設定。

7

列印優化

這次在列印的樣式上有做了一點優化,讓列印時只讓最重要的作者資訊和文章顯示出來。這樣,可以很方便閱讀文章的人列印你的文章。雖然列印通常只有在比較深入、有價值的文章中才會被使用到,不過也藉此希望大家多寫一些對人類社會有幫助的文章 ^__^

10

Navigation 樣式

這次採用有背景色的樣式,另外有無限層下拉選單。(請注意,在小螢幕上只會顯示最上層。)

1

文章區塊樣式

這次採用相當簡潔的排版,先顯示時間、分類後才顯示斗大的標題。在這部分,標題使用襯線的 Bitter 字型,而中文則不使用正黑體。

2

頁碼樣式

使用類似 Flat UI 的配置樣式,另外一點就是這次的頁碼也把左邊的共 n 頁簡化了。

3

連結、標題樣式

這次在文章中的連結樣式改變很多,在連結下面都會有一個底線,滑鼠移到時則會加深底線。在標題的部分,則同樣用簡單字體大小來顯示,不做太多裝飾。

4

頁面設計

頁面使用單欄設計,右邊的部分則留白。之所以不讓版面占滿的原因有幾種,主要是讓內文的一行文字不要太多,方便閱讀。(單欄的一整行長長的我自己覺得不那麼好閱讀。)

15

搜尋樣式

這次的搜尋樣式沒有太大新奇的地方,不過倒是使用了 HTML5 – placeholder (這也沒什麼)。另外,支援 Google 自定義搜尋,可以在 Kent Control 設定 CX Code。

6

社群分享

這次不採用以往的浮動方式,而是讓社群分享的按鈕直接顯示在文章之後。(這樣的方式有參考免費資源網路社群。)

8

粉絲專頁

這次在文末同樣有一個地方,是特別用來顯示網站粉絲專頁的按讚。可以在 Kent Control 設定粉絲專頁網址。

13

Kent Control

同樣採用了之前自己開發,相當方便的 Kent Control 功能。

16

另外,同樣有提供兩個地方可以放置廣告代碼。

17

還有一點就是,要記得填寫 Facebook 應用程式的相關資訊,這樣按讚的部分才會正常唷。

18

結論

其實結論在文章一開始大概都說過了,所以就來分享一下這次的開發狀況吧~

這次主要是使用 Fire.app 然後利用 SASS 進行開發,並搭配 Susy 超棒的排版型利器來快速開發。整體來說開發時間並不長,不過花了比較多時間在最佳化上。並也使用了從上次佈景就開始採用的 Kent Control,讓佈景選項的調整上更加便利~希望大家能夠喜歡。

最近 Yuxin 因為課業比較多,再加上要準備一些演算法程式設計的比賽等等,正努力的充實自己,所以到了現在才有這麼區區的一篇文章分享給大家。真心的希望大家都能夠朝向自己的夢想前進,並且有能力的話為社會貢獻 ^__^

  • 張庭瑋

    圖掛掉了
    還有佈景下載網站也掛了

  • 卓昱凱

    請問為什麼沒辦法更改文章右側的作者頭像呢._.

    • s3131212

      那個要到 Gravatar 去改, WordPress 是抓 Gravatar 的圖片

      • 卓昱凱

        好的,我先研究看看,感謝回復

  • morefunwp

    allen 想問一下你的

    
    

    是用外掛嗎

    • s3131212

      我的什麼?

      • morefunwp

        pre碼

        • s3131212

          Crayon Syntax Highlighter

  • 智璿 許

    請問Allen大此版型小弟無法順利在首頁出現小圖,只能看見叉燒包請問該如何設定

    • s3131212

      打開shotcut/cutter.php,在126行那個array理加入圖片的網域

      • 智璿 許

        感謝Allen大回復,小弟再試看看

        2014/1/12 Disqus

  • 但這裡作者卻變成 Allen 了 XDDD
    似乎作者欄位錯了?

    • 望了補圖

      • s3131212

        因為Yuxin在電腦故我在沒有帳號,所以是我幫他代發的

        • 原來是這樣~我想說怎麼沒看到 Yuxin 變共筆作者
          科科

          至於ADB,我想應該是無法避免的吧…
          您沒辦法強制他人不用,只能用標語柔性勸說
          過於強硬乾脆直接裝 anti-ADBlock 好了…

          • s3131212

            也對啦XD其實我個人是屬於反Adblock的那一派,畢竟我不希望我廣告被檔,推己及人的也不希望別人廣告被擋,但是我除了柔性勸導以外什麼也不能作,AdBlock太氾濫了啦~

  • 很棒喔 !

    • s3131212

      謝!

  • 很棒!