其實一直想為自己的部落格改版，總覺得版面要修，後端的程式碼也要優化，讓載入速度快些。但每次改了點東西，又被別的事耽擱，最主要還是論文研究啊，這個大石頭沒放下，很難做別的事，寫完實驗的程式就不想看佈景主題的程式碼了…
好在現在已經告一段落，終於有時間能靜下心來研究 WordPress 主題，把版面改成我心目中想要的樣式，朝向自己刻主題的目標邁進
主題修改的目標
我之前採用的是 Hemingway 主題，截圖如下，他的介面設計漂亮，可以自由修改的程度高，算是蠻不錯的起手主題。我逛過幾個國外部落格用這個，之前參與研討會認識位朋友，閒聊之餘，發現他的部落格居然也是，可見這個主題滿討喜的呀
對我來說，我喜歡頁首橫幅中間的黑色框框，往下滑動的時候，會有個漸層消失的效果，很好看，把字體改成 Google Font、稍微修些小細節，我就一直用著這套主題。不過最近覺得是要改變的時候了哈哈，首先，頁首背景圖占比太大了，訪客點文章進來時，文章標題被擠在中央，不太好閱讀，同樣的右方廣告也被往下擠壓，感覺曝光率就會下降
而首頁的文章顯示方式，是傳統部落格排版，大張縮圖搭配文章摘要，一篇一篇往下顯示，下方導覽列只有「上一頁」、「下一頁」兩個按鈕。這對於想要觀看其他文章的訪客來說很不方便，不容易瀏覽有哪些文章，也不能跳頁。
所以我在進行修改的時候，訂立了些目標，大概有這幾個：
- 去除文章頁面上方的背景圖片
- 修改首頁文章顯示方式、加上數字導覽列
- 調整行動裝置上的顯示方式
- 提高 PageSpeed Insights 的分數
開始動工
剛開始我是想把首頁改成三欄的形式，大概就像 INSIDE 硬塞的網路趨勢觀察的首頁那樣，一打開就能看見有哪些文章。於是，我找了同一位作者的 Baskerville 主題來做修改，但發現他用瀑布流套件 Masonry，Grid Layout 又是自己寫，如果我要改成 INSIDE 那樣的固定寬高比，勢必要看掉重練，勞民傷財啊。但我還是試著改了一下…
主要是把選單上移，首頁文章變成三欄顯示，想走個日系風格，背景途淡刷的效果，不過好像沒那個感覺啊，科技部落客應該要酷炫一點才對 (吧)，總覺得有些違和
另一方面，以前寫的技術文章沒做截圖，以圖為主的顯示方式會讓後面的文章列表一片灰(預設是灰色底)，配合著淡刷的橫幅，看起來無精打采的，我又滑了一下 WordPress 主題庫，看看有沒有現成不錯的可以拿來改
嘿嘿，當我看見 Writers 這個主題就愛上她了！類似 Google Material Design 風格，首頁的文章圖片放在左側，滑文章的時候可以配著文字看，算是圖文並重，只要把上頭的橫幅弄小一點就可以，於是我趕緊著手修改…
首先，我把主題內的客製化設定刪掉，不想保留太多用不到的東西。而且套用客製化設定，其實也會產生多餘的程式碼，比如修改顏色的時候，是透過 jQuery 把預設顏色覆蓋，首頁的原始碼會長出一坨醜醜的 code，不太美觀。所以，我動態更動的樣式設定全部合併至 WordPress 主題裡的 style.css 之中。另外，移除不用的 Font-Awesome、改掉 Google Font，把整個 style.css 整理過一次 (實在是麻煩的過程，因為原本寫得很亂…)，反正經過一番努力，版型變得像這個樣子
頁首的圖是在粉鳥林拍的，漁港很漂亮喔，原本要放實際圖片，後來想說讓他扁平點，我用 Photoshop 做挖剪圖案。然後私心的廣告位置上移了一格哈哈
點進去文章內頁，移除了橫幅，版面變得簡潔，也參考 INSIDE 的設計方式，文字不用全黑色，而用灰色讓人閱讀的起來比較舒服，滑鼠移動到超連結的位置會出現底線 (我之前只有變色而已，但底線好像比較有點連結的感覺)
針對手機版面，原先卡片式樣式縮小後，把兩側灰邊切掉，擴增閱讀空間
網站速度測試
大致修改好了之後，我就部署上來，跑個 PageSpeed Insights 看看會有幾分 ..
47分，超爛的啊 !! 連 50分都不到… 根據提示，首頁圖片要壓縮、程式碼要壓縮然後做 Cache、伺服器那邊也要做設定…
我依照 Candy 哥的建議，使用 WordPress 的優化套件 Autoptimize 將程式碼壓縮，另外將頁首圖也壓縮一下，再次跑跑看分數
不錯… 提升到 52分，可還是紅字啊 !! 不過至少壓縮 JS/CS/HTML 那部分通過了
後來請 Candy 哥調整伺服器設定，開啟 Gzip 壓縮後，分數提升至 72 分，桌面板的分數更是達到 86 分，獲得綠燈了 (灑花)
最後，就把我改過的原始碼放在 GitHub 與大家分享吧
[Github] WordPress主題 Nest
這外掛好厲害！謝謝分享。:)
不客氣唷🤘
Hello Jerry,
首先謝謝你的分享！有兩個問題想要請教
1.我自己的WP目前是用Avada主題，但不知為何在手機上瀏覽時，兩側會有過多的留白，可以請問這部分該如何做修改嗎？
2.首頁我也是希望可以像Inside那樣做Grid Layout，但不知為何，首頁的文章標題跟內文節錄的地方看起來沒有甚麼區別，請問這個部分可以怎麼做調整呢？(附上我的WP網址: http://www.bigbrain-studio.com)
先謝謝你:))
Hi Charlie,
你說的問題調整一下 CSS 就能解決囉！
你可以透過 CSS 主題編輯器修改，第一個要改 Padding，第二個則是要從首頁的 layout 下手。因為你要調整的是手機版樣式，所以你要改的應該會是 @media 區塊
您好，想跟您請教一下！！我有遇到套用WordPress 套件常常會被導到抽獎的惡意連結網站！！想請教大大是否有遇到過？或是否有解法？感恩！
Hi YC,
請問你說的惡意網站是主題本身的，還是廣告呢？如果是廣告的話，建議你到 Google Adsense “允許/封鎖廣告” 裡面封鎖你不想要看到的廣告
覺得你的版面很簡潔，好看。
謝謝妳唷🎉
您好，想請問如果換主題樣式，原本的文章有可能會消失嗎？
要如何保留原本的文章呢？
謝謝您
哈囉 紀蓉
更換主題文章並不會消失唷，主題只是影響外觀而已，存在資料庫的文章還在
請問要修改頁首圖片要怎麼樣修改，改了css也不會變？
Hi 請問你說的圖片是指甚麼圖片呢? CSS 的話，在後台的”外觀”->”編輯CSS” 可以做修改喔
Hi, 今天無意間逛到您的部落格，不管是文章內容、文字大小、排版看起來都很舒服，不會有雜亂的感覺，很棒!
Hi WT
謝謝你喲! 我會繼續努力的😉
寫部落格真的是個不斷修行的旅程