如何設計與優化 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 的設計方式,同時也從其他部落格汲取經驗,設置懸浮導航列、粉絲專頁外掛、回到頂部按鈕、社群分享與關於作者。

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

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

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

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

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

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

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

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

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

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

3. Google Adsense 廣告放置與優化

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

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

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

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

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

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

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

9 則留言

    • Hi neverland,
      先了解 WordPress 佈景主題的結構再來對照 HTML 會比較清楚,推薦你看這本電子書:
      http://dc.dyu.edu.tw/Tusi/files/wordpress.pdf

      熟悉之後你可以看 class 名稱,然後搜尋 php 檔案找出對應的位置,比如側邊攔有這個標籤 class=”col-4 sidebar” 對應的是 sidebar.php

  1. Hi Jerry ,
    最近也開始進入Wordpress這家庭,
    發現後台的.php程式碼跟在網頁按F12看到的HTML程式碼有蠻大的差異,

    後台的.php精簡好多,好多部分好像被隱藏了,F12看到的程式碼則是清楚很多
    是Wordpress的設定嗎 ?
    還是剛好我選的主題會這樣 ?
    那有什麼解決的方法呢 ?

    先謝過了 ~

    • Hi neverland,

      你會覺得 PHP 原始碼比較精簡大概有兩個原因

      1. WordPress 頁面是由多個 PHP 檔案渲染出來,沒辦法單看一隻檔案就知道全貌。舉例來說,你看到的「文章」頁面,至少就包含了 header.php、single.php、footer.php 這幾個檔案,分別渲染上方的選單、中間的文章、底部的小工具與版權訊息等。

      2. 你看到的 HTML 原始碼通常都是組合不同 WordPress function 渲染出來的。你可以參考 WordPress 的 Function Reference,裏頭有許多範例,喵幾個就會有感覺了
      https://codex.wordpress.org/Function_Reference

      如果有不清楚的地方可以再問~~

  2. Hi Jerry
    我是wordpress新手,想請教首頁的文章旁,要如何讓照片也一起顯示呢?
    而且首頁文章前有一串編碼,該如何消除呢
    謝謝

    • Hi dongdog,

      如果你有安裝 Jetpack 外掛的話,他會提供你一個小工具叫做 “熱門文章與頁面”,使用之後就可以設定有圖片的文章連結

      至於編碼可以再說明一下嗎?我不太清楚你指的是甚麼

發表回應