部落格改版,修改 WordPress 主題的心路歷程

其實一直想為自己的部落格改版,總覺得版面要修,後端的程式碼也要優化,讓載入速度快些。但每次改了點東西,又被別的事耽擱,最主要還是論文研究啊,這個大石頭沒放下,很難做別的事,寫完實驗的程式就不想看佈景主題的程式碼了…

好在現在已經告一段落,終於有時間能靜下心來研究 WordPress 主題,把版面改成我心目中想要的樣式,朝向自己刻主題的目標邁進


主題修改的目標

我之前採用的是 Hemingway 主題,截圖如下,他的介面設計漂亮,可以自由修改的程度高,算是蠻不錯的起手主題。我逛過幾個國外部落格用這個,之前參與研討會認識位朋友,閒聊之餘,發現他的部落格居然也是,可見這個主題滿討喜的呀

jerrynest old - 部落格改版,修改 WordPress 主題的心路歷程

對我來說,我喜歡頁首橫幅中間的黑色框框,往下滑動的時候,會有個漸層消失的效果,很好看,把字體改成 Google Font、稍微修些小細節,我就一直用著這套主題。不過最近覺得是要改變的時候了哈哈,首先,頁首背景圖占比太大了,訪客點文章進來時,文章標題被擠在中央,不太好閱讀,同樣的右方廣告也被往下擠壓,感覺曝光率就會下降

而首頁的文章顯示方式,是傳統部落格排版,大張縮圖搭配文章摘要,一篇一篇往下顯示,下方導覽列只有「上一頁」、「下一頁」兩個按鈕。這對於想要觀看其他文章的訪客來說很不方便,不容易瀏覽有哪些文章,也不能跳頁。

請支持《傑瑞窩在這》原創文章。原文標題:部落格改版,修改 WordPress 主題的心路歷程,原文網址:https://jerrynest.io/wordpress-custom-theme/

所以我在進行修改的時候,訂立了些目標,大概有這幾個:

  • 去除文章頁面上方的背景圖片
  • 修改首頁文章顯示方式、加上數字導覽列
  • 調整行動裝置上的顯示方式
  • 提高 PageSpeed Insights 的分數

開始動工

剛開始我是想把首頁改成三欄的形式,大概就像 INSIDE 硬塞的網路趨勢觀察的首頁那樣,一打開就能看見有哪些文章。於是,我找了同一位作者的 Baskerville 主題來做修改,但發現他用瀑布流套件 Masonry,Grid Layout 又是自己寫,如果我要改成 INSIDE 那樣的固定寬高比,勢必要看掉重練,勞民傷財啊。但我還是試著改了一下…

jerrynest mid - 部落格改版,修改 WordPress 主題的心路歷程

主要是把選單上移,首頁文章變成三欄顯示,想走個日系風格,背景途淡刷的效果,不過好像沒那個感覺啊,科技部落客應該要酷炫一點才對 (吧),總覺得有些違和

另一方面,以前寫的技術文章沒做截圖,以圖為主的顯示方式會讓後面的文章列表一片灰(預設是灰色底),配合著淡刷的橫幅,看起來無精打采的,我又滑了一下 WordPress 主題庫,看看有沒有現成不錯的可以拿來改

嘿嘿,當我看見 Writers 這個主題就愛上她了!類似 Google Material Design 風格,首頁的文章圖片放在左側,滑文章的時候可以配著文字看,算是圖文並重,只要把上頭的橫幅弄小一點就可以,於是我趕緊著手修改…

writers - 部落格改版,修改 WordPress 主題的心路歷程

首先,我把主題內的客製化設定刪掉,不想保留太多用不到的東西。而且套用客製化設定,其實也會產生多餘的程式碼,比如修改顏色的時候,是透過 jQuery 把預設顏色覆蓋,首頁的原始碼會長出一坨醜醜的 code,不太美觀。所以,我動態更動的樣式設定全部合併至 WordPress 主題裡的 style.css 之中。另外,移除不用的 Font-Awesome、改掉 Google Font,把整個 style.css 整理過一次 (實在是麻煩的過程,因為原本寫得很亂…),反正經過一番努力,版型變得像這個樣子

jerrynest new - 部落格改版,修改 WordPress 主題的心路歷程

頁首的圖是在粉鳥林拍的,漁港很漂亮喔,原本要放實際圖片,後來想說讓他扁平點,我用 Photoshop 做挖剪圖案。然後私心的廣告位置上移了一格哈哈

點進去文章內頁,移除了橫幅,版面變得簡潔,也參考 INSIDE 的設計方式,文字不用全黑色,而用灰色讓人閱讀的起來比較舒服,滑鼠移動到超連結的位置會出現底線 (我之前只有變色而已,但底線好像比較有點連結的感覺)

jerrynest post - 部落格改版,修改 WordPress 主題的心路歷程

針對手機版面,原先卡片式樣式縮小後,把兩側灰邊切掉,擴增閱讀空間

jerrynest phone - 部落格改版,修改 WordPress 主題的心路歷程


網站速度測試

大致修改好了之後,我就部署上來,跑個 PageSpeed Insights 看看會有幾分 ..

pagespeed 1 - 部落格改版,修改 WordPress 主題的心路歷程

47分,超爛的啊 !! 連 50分都不到… 根據提示,首頁圖片要壓縮、程式碼要壓縮然後做 Cache、伺服器那邊也要做設定…

我依照 Candy 哥的建議,使用 WordPress 的優化套件 Autoptimize 將程式碼壓縮,另外將頁首圖也壓縮一下,再次跑跑看分數

不錯… 提升到 52分,可還是紅字啊 !! 不過至少壓縮 JS/CS/HTML 那部分通過了

後來請 Candy 哥調整伺服器設定,開啟 Gzip 壓縮後,分數提升至 72 分,桌面板的分數更是達到 86 分,獲得綠燈了 (灑花)

pagespeed 2 - 部落格改版,修改 WordPress 主題的心路歷程

最後,就把我改過的原始碼放在 GitHub 與大家分享吧

[Github] WordPress主題 Nest

參考資料

如果您覺得這篇文章有幫助,歡迎按個讚或分享出去唷:

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

12 個回應

  1. Hello Jerry,
    首先謝謝你的分享!有兩個問題想要請教
    1.我自己的WP目前是用Avada主題,但不知為何在手機上瀏覽時,兩側會有過多的留白,可以請問這部分該如何做修改嗎?
    2.首頁我也是希望可以像Inside那樣做Grid Layout,但不知為何,首頁的文章標題跟內文節錄的地方看起來沒有甚麼區別,請問這個部分可以怎麼做調整呢?(附上我的WP網址: http://www.bigbrain-studio.com)

    先謝謝你:))

    • Jerry

      Hi Charlie,

      你說的問題調整一下 CSS 就能解決囉!

      你可以透過 CSS 主題編輯器修改,第一個要改 Padding,第二個則是要從首頁的 layout 下手。因為你要調整的是手機版樣式,所以你要改的應該會是 @media 區塊

  2. 您好,想跟您請教一下!!我有遇到套用WordPress 套件常常會被導到抽獎的惡意連結網站!!想請教大大是否有遇到過?或是否有解法?感恩!

    • Jerry

      Hi YC,
      請問你說的惡意網站是主題本身的,還是廣告呢?如果是廣告的話,建議你到 Google Adsense “允許/封鎖廣告” 裡面封鎖你不想要看到的廣告

  3. 您好,想請問如果換主題樣式,原本的文章有可能會消失嗎?
    要如何保留原本的文章呢?
    謝謝您

    • Jerry

      哈囉 紀蓉
      更換主題文章並不會消失唷,主題只是影響外觀而已,存在資料庫的文章還在

    • Jerry

      Hi 請問你說的圖片是指甚麼圖片呢? CSS 的話,在後台的”外觀”->”編輯CSS” 可以做修改喔

  4. Hi, 今天無意間逛到您的部落格,不管是文章內容、文字大小、排版看起來都很舒服,不會有雜亂的感覺,很棒!

    • Hi WT
      謝謝你喲! 我會繼續努力的😉
      寫部落格真的是個不斷修行的旅程

發表回應