如何設計與優化 WordPress 佈景主題？新主題 Nest2 的實作經驗分享

還記得兩年前傑瑞窩誕生那天，做完 WordPress 基本設定、把外掛裝起來，準備開工寫文章的時候，就覺得渾身不對勁，東喬西喬，預設的佈景主題我越看越不順眼啊！想要找個簡潔好看的版型，最好有響應式設計、客製化選項多。

我在佈景主題庫裡面一直滑，一直滑，搞老半天，沒看見幾個中意的，好不容易找到一個好看的版型，卻發現無法客製化，又或是要花錢。我不想花錢，偷偷去裝海盜版又怕中毒 (請支持正版，真的)，後來總算找到一個滿意的主題 Hemingway ，用著用著也用了一年多。雖然這期間我嘗試著做修改，但是在沒有深入瞭解 WordPress 架構的情況下，其實也就只是改改皮毛，想到什麼設計或功能就東拼西湊的加上去。後來，拿了作者的另套主題進行修改，改完之後，我還是不滿意，便開始學習自己設計主題。

可以先參考之前的文章

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

已經有許多現成資源可以用，主題設計不再那麼困難

萬丈高樓平地起，我以為設計主題是件麻煩的事情，要把 WordPress 的基本架構拿來，然後自己慢慢的刻 HTML、CSS 還有 PHP。翻翻網路上的文章，發現系統化的主題設計教學多半老舊，有些技巧性的應用方式固然不錯，但缺乏彙整，只能看到一個學一個。不過有志竟成嘛，網路上的資源那麼多，學習完畢就能開工了，不怕。

總之我發現滿多好東西，比如現在編寫主題要靠新手包，他已將幫你把基本骨架給拉好，你只需要專心的去做 CSS，有需要的話再回過頭來改程式碼。以下就分享我所使用到的資源，認真看這幾篇就有一定程度的能力啦。

• WordPress Theme Starter 主題新手包 – underscores
• WordPress Codex 語法使用介紹
• WordPress 中文佈景主題開發指南
• CSS3 語法教學 – w3schools

傑瑞窩換新裝，Nest2 的新設計與功能

主題設計除了要好看之外，我希望兼顧到技術層面還有使用者的瀏覽體驗。

首先，網站的載入速度必須要快，需要注意資源的存取順序，避免 Render Blocking，同時要做圖片壓縮，或透過 Lazy Load 降低負擔。接著，需要考量搜尋引擎優化的問題，比如說網頁是否完整地採用 HTML 5 (可能漏掉某些標籤)、是不是有加入結構化資料、麵包屑，有沒有做 404 頁面等等瑣。雖然這些調教，大多能透過 WordPress 外掛完成，但我還是覺得設計者必須要懂這些規則，自己掌握主題才有辦法做更進一步的優化。

再來是廣告的擺放方式，我認為這需要經驗、需要花時間衡量。把廣告塞好塞滿雖然收入提升，但相對的會讓網頁變得不好看、載入時間變長 (廣告會害 PageSpeed 跑分降低)，尤其是那種蓋板或是跟著捲軸滾的廣告，看起來很不舒服。是要網頁整潔、快速，還是賺錢補貼開銷呢？這部分真的是 Trade-off，全看你的經營模式。

以目前來說，傑瑞窩需要些廣告收益 (畢竟還是小咖啊)，但這不會是永久的生存之道。我正在嘗試不同題材，擴大自己的閱讀視野，同時將會慢慢聚焦主題，限縮到我適合的領域內。希望這裡的學習筆記能幫助各位度過難關，也希望能建立起品牌，成為專業的知識型部落客 xdd

有點扯遠了，不過還是要有經營理念才值得改版呀，接著就來介紹新主題有什麼改進啦

1. 網站外觀與響應式設計

當初是以輕量化為目標下去實作，所以不打算使用 Bootstrap、Font Awesome 這類的套件，當然也就是在增添自己的麻煩啦，必須自己刻 CSS，還要顧慮手機版面，下 media query 做調整。後來發現沒什麼差，反正廣告也是會自動載入有的沒的東西，降低套件的用量沒啥用，而且 WordPress 本身會用載入 JQuery，還會造成 Render Blocking，這我也無法修改。

我捨棄掉首頁圖片，希望一切簡單，方便使用者閱讀與操作。部分參考了 Writers 的設計方式，同時也從其他部落格汲取經驗，設置懸浮導航列、粉絲專頁外掛、回到頂部按鈕、社群分享與關於作者。

手機版網頁的選單是半透明的懸浮框，可以直接搜尋或進入其他分類。

2. 處理搜尋引擎優化 (SEO) 細節

流量在走，優化要有，優化帶來更多流量啊！為了提升 SEO 效果，除了使用外掛之外 (可參考之前的整理)，我加入了社群媒體連結、提升文字比例、調整 H1、H2 位置、修正 HTML 5 標籤 (之前有漏掉)，原本想要加入麵包屑，但我現在也就兩層結構，有點多餘就算了。

我是覺得規則不斷的在變，針對細節做優化固然有幫助，但這些設定都調整好之後，還是回歸標題與內容啦，優化這件事情就是邊走邊看邊實作。以下兩個工具可以幫你做簡單分析。

• awoo SEO 成長駭客工具 裡頭的建議都不錯，免費試用 30 天要把握時間
• PageSpeed Insights Google 推出的網站測速工具

awoo SEO 會告訴你可以修改的項目，比如我的 Meta keyword 太多了 (這是 SEO 外掛惹的禍啊)，或是網頁標題長度太短等等

至於 PageSpeed Insights 的優化請參考另一篇文章

提升 PageSpeed Insights 分數，網站效能優化課程學習筆記

3. Google Adsense 廣告放置與優化

對於廣告，我真的又愛又恨啊！架站之前我超討厭廣告，尤其是那種會讓你誤觸的，不小心就會點到，總覺得為什麼要這樣賺錢呢？可是當我自己寫部落格，經營網站的時後，又不得不放些廣告拿點補貼，最好大家多點幾下，好讓我多賺點錢呀。就跟前面說的一樣，需要做個權衡，我不爭氣的放置廣告惹，但是既然放了，我還是要放得好看，放得美觀。

網路上比較少人在討論廣告如何放置、怎麼優化，我想這攸關利益，普通人也不會無私分享出來吧。像我接觸 Google Adsense 沒多久，也還在摸索，不斷的嘗試與調整，不敢亂講話哈哈。所以就我的觀察，大概有三個重點：

• 內文廣告儘量放置在文章前三分之一的位置
• 側邊欄廣告多半會掛 300*600 長型的那顆，並且跟著卷軸滾動
• 盡量使用 Adsense 相關文章廣告、AMP 廣告、網頁層級 (Page-level) 廣告

想要知道更多訊息，我推薦加入臉書社團部落客許願池，是由阿腸網路工作室的金城老師創立，集結著許多優質部落客在這交流討論，不時會談論到接案經驗、網站優化、廣告放置等等問題，也會舉辦實體的交流活動。版規是說三個月沒互動會被踢出啦，可是我加入的時候活動已經報名額滿，沒額滿的我又趕不上 (我要去為國效力嗚嗚)，有新活動我會趕快卡位的哈。

另外金城老師常常會開直播分享，大部分的錄影會公開給大家免費看，可以前往 WordPress 架站百寶箱 逛逛唷，或直接訂閱 YouTube 頻道。

[YouTube頻道] 阿腸網頁設計工作室