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

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

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

可以先參考之前的文章

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

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

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

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


傑瑞窩換新裝,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 會告訴你可以修改的項目,比如我的 Meta keyword 太多了 (這是 SEO 外掛惹的禍啊),或是網頁標題長度太短等等

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

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

3. Google Adsense 廣告放置與優化

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

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

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

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

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

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


剛脫離研究苦海,目前正在休養生息。平時會觀察網路行銷、雲端運算與資訊安全等議題,曾在趨勢科技擔任實習生、 GCP 專門家擔任技術文章寫手,也擔任過 C、JAVA、雲端運算等課程助教。 歡迎來我的 粉絲專頁 按個讚。