PageSpeed Insights Deskto
PageSpeed Insights Desktop

WordPress佈景主題

覺得自已的wordpress網站總是很慢嗎?版面設計很醜嗎?調整很困難嗎?新增文章時總是頓頓的嗎?怎麼辨?我們告訴你評估Wordpress theme佈景主題不能錯過的20個最重要的準則,這20個準則,是花了很多時間和金錢所累積出來的,希望幫助使用Wordpress的站長可以優化自已的網站,增加竸爭力。

如果你跟我一樣是用wordpress來建置自已的網站,使用wordpress的原因每個人都不一樣,但總脫離不了這個原因,就是想省下建置和維護網站的成本。

雖然在wordpress這個軟體生態圈有太多的人及公司專門開發佈景主題,不論免費或付費都有,品質參差不齊。所以佈景主題怎麼挑選呢?只看美觀嗎?只看價格嗎?接著來看看這20個評估因素。

評估佈景主題好壞的能力

那麼不論是免費或付費,特別是付費的佈景主題,我們應該怎麼來評估它的好壞呢?不管懂不懂技術,這一篇,讓我們來告訴您,用哪些指標來評斷wordpress的佈景主題?

網站載入速度

別跟我說你不知道網站速度有多重要,從使用者的體驗來看,如果網站太慢,一進去要網友等個3-5秒,通常不會等了,直接離開;再從搜尋引擎優化的角度來看,Google就明確的告訴我們,它是影響SEO排序的因子之一,資料來源;有興趣可以Google一下會找到更多相關資料 。

Site Speed Seo
Google SEO Site Speed

而且Google也提供了一個PageSpeed Insights提供使用者檢測自已的網站

Google PageSpeed Insights
Google PageSpeed Insights

檢測出來後,Google還會提供建議方案,包括如何修正及調整。

Google PageSpeed Insights 1
Google PageSpeed Insights除了檢測網站並提供建議方案

但是還沒買之前,沒裝到我們的wp,怎麼知道這個主題分數是高是低呢?第一個方法是把作者的示範網站拿來測試一下,第二個方法,請繼續往下看~。

圖片優化-殺雞別用牛刀

網站速度最大殺傷力的原凶之一是圖片沒處理好。這裡圖片優化其實包含的層面很廣,但最主要想說明一點就是,照片的呈現千萬別用「牛刀來殺雞」,也就是網頁設計裡常常沒作好的,也常常被大多數人忽略的,直接拿大圖縮小呈現,什麼意思呢?看看下圖。

Theme Image Optimize 1
wordpress佈景主題圖片優化

用大圖來顯示小圖,到底有什麼缺點呢?原本圖片大小只有253×137,現在用比較大的406×220來使用,這時候就產生了問題了

  1. 圖片其實很小,但卻因為沒處理,直接拿比較大的圖來使用,導致要下載容量大的圖來顯示小圖
  2. 圖片容量變大也造成下載時間增加,傳輸成本增加

這兩個都不會帶來好處,只有缺點,因為網站變「慢了」;那一定有人有一個疑問,既然這樣,那是不是可以用小圖來顯示大圖呢?是可以,但會造成顯示出來的圖片品質不佳;所以最佳解決方案是圖片在網頁上的大小是多少就產生一張同樣大小的圖片(thumbnail)來使用。

最近一次更新日期

隨著wordpress版本不斷的更新,功能不斷進步和bug不斷修正,會取消某些功能函數,這時候如果我們使用的主題沒有隨著更新會發生什麼事呢?小則速度變慢(如果debug mode沒打開,看不見錯誤訊息),大則主題無法使用。那麼影響佈景主題作者要不要更不更新的因素有什麼呢?最主要一定是使用者的多寡,因為這跟他的收入有很大關係。所以如果你找到一個版型外觀非常滿意,但最後更新日期是半年前長更久以前,勸你就要三思了,因為可能已經沒有在維護了。

Theme Last Update 1
佈景主題最後更新日期

更新頻率

從更新頻率可以看到佈景主題作者花費多少時間和心力維護,一般而言都會隨著wordpress改版而改版,甚至熱門主題每個月都會更新或只要使用者發現bug,就會即時更新。

Theme Changelogs
佈景主題更新記錄

購買者提問與作者回覆

在這裡,我們可以發現很多佈景主題的秘密,知道作者到底用不用心經營,問了問題,隔了1週才回覆,你受的了嗎?或問了問題,根本沒人回覆?別說你了,我也受不了,這時要慎重考慮,因為遇到問題時,只能自已花很多倍的時間找答案,還不一定找的到,但如果作者願意回復,通常馬上就告訴你解答了;或許你會說我英文不好,應該不關我的事也不想看,但別忘了,現在有Google翻譯啊!只要英文不要太離譜包含關鍵字,老外通常都猜的出意思的,最差的情況就是會回覆你,請針對問題再說詳細一點。

所以如果非常久都沒人問問題或作者都沒回覆的佈景主題,要下單前就要有心理準備了。

Theme Comments
網友問題與作者回覆

支援中文嗎?

這個可能是大家最在意的了,畢竟閱讀中文比英文來的快很多倍,在這裡可以分成2個部份來說明

佈景主題中文化

大部份國外的佈景主題都不會有中文化,就算有通常也是簡體版本,因為大陸市場大,所以最好是基本英文能力要有,就算沒有,常常接觸也會很熟;但這還不是最重要的,因為熟能生巧,還有更重要的關鍵,往下看。

Theme Support Chinese
wordpress佈景主題中文化

摘要可以處理中文嗎?

什麼意思呢?就是主題內部核心可以處理中文嗎?例如:中文摘要(excerpt)及標題的支援程度,通常這也是最關鍵的,因為英文字數計算方式,通常會用字與字之間的空格來處理;但其他亞洲語系,像中文字就沒有,因此計算方式是需要另外處理的,若沒處理好,就會看見最後一個字出現亂碼囉!

Theme Excerpt English Chinese
wordpress excerpt中英文摘要字數計算
Theme Excerpt Chinese
wordpress excerpt中英文摘要完美支援

購買前先搜尋發問區或問作者

如果從佈景主題介紹中都找不到有支援中文的相關文案,可以先到發問區搜尋「chinese」,看看有沒有人提問過,作者的答案是什麼?這時要留意一下問題的時間點,如果相隔半年一年,還是再問一次吧!接著如果真的都沒有呢?自已發問,通常作者會很誠實的回覆,如果回覆下次更新會有,儘量不要馬上就下單,因為通常下一次更新不知何時了,最好跟作者說,功能有了才會購買,讓作者有更新的動力,畢竟像這樣比較核心的功能,若沒有提供,買了會嘆氣抱怨加內傷的。因為花錢買受。

Ask Theme Support Chinese

照片圖片瀑布流(wordpress waterfall)

通常在我們「長」文件裡面有很多圖片時,會用到的一種網路技術(jquery),讓文章中的圖片在我們滑到時才即時下載顯示出來;聽起來很玄,有什麼優點呢?可以節省文章下載時間,因為只下載目前畫面中的,降低使用者等待時間,增加使用者體驗。這樣的技巧其實普遍的使用在各大網站,特別是行動版本網站及APP,像微信公眾號裡面所發佈的文章就有…。還不懂嗎?看看底下的示範吧!

影片示範

網站示範:WordPress jquery Waterfall Demo

選單支援mega menu

想像一下,如果你的選單只是一般多層次的選單跟一個可以圖文並茂的mega menu選單,哪一個更吸引人呢?答案不用我說,你一定明白

Wordpress Normal Menu
WordPress 傳統多層次選單
Wordpress Megamenu
WordPress Megamenu選單

但是只有支援其實還不夠,為什麼呢?可以呈現mega menu是一回事,但容不容易設置又是另一回事,所以一定要把「好用度」列入標準,不然光設置一個mega menu要K一堆英文花幾個小時才Try出來,誰受的了啊!而且後續有新文章還要手動更新,那就真的找罪受了。最好設置簡單,5分鐘內搞定,後續可以自動化更新。

佈景主題設置好用度

談談佈景主題好用度前,我測試過的佈景主題可能不下百個了,包括免費或者付費的,有些設定複雜難懂,有些設計理念超乎我們理解的範圍,或者設定完成要閱讀英文說明書並花上好幾天,真的很累人,最好是不用看說明文件就可以理解一半,並且已設定完大部份功能,看了以後呢?輕鬆快速的找到我們想要設定功能的章節,把我們想像中的畫面設定到主題中。

因此淺顯易懂的wordpress佈景主題設置介面非常重要,按個鈕可以搞定的事,一定要大費周章的自已打造再調整半天嗎?何不把節省下來的時間和精力,拿來做更重要的事吧!創作文章

Easy Theme Settin
淺顯易懂的wordpress主題設定介面

支援行動版本(Mobile)

能夠支援行動版本,不是單純只有支援自適應(responsive web designs)網站畫面的呈現及選單,應該還要包括的是實際傳輸時,還會根據裝置的大小,傳送適當大小的圖片,這才是真正達到支援行動版本,要不然其實只是表面上支持,但骨子裡都沒變;會造成用手機觀看時網站速度緩慢。

Theme Mobile Friendly
wordpress佈景主題支援行動版本

「必裝」外掛數量越少越好(Less plugins Better)

曾經買過一個佈景主題,要安裝其他的外掛超過20個以上,建置的wordpress記憶體設置為256M,可以想像它是個大怪獸了嗎?就連登入後台編寫文章時也頓頓的,你可以忍受嗎?

內建可以設置常見第三方代碼

其實wp安裝的外掛的數量越多,wordpress的速度通常越慢,而且也越難管理,除了常常要更新,留意更新以後有沒有出問題,甚至有些外掛跟外掛之間彼此還會互相衝突,造成莫名的問題,找都找不出來;因此有些常用的外掛,底下這2個常用的,直接內建不就好了嗎?難道還要為了這個超級小東西裝外掛嗎?

  1. 支援廣告代碼設置
  2. 支援Google Analytics代碼設置

頁尾區容易設計(Footer Design)

之前曾經買過一個破萬購買量的超級人氣的主題,但它的頁尾區就沒有提供範本使用,變成要自已設計,花了很多時間,只為了修改字型大小、顏色和配置,時間成本划算嗎?

Theme Footer Demo
wordpress頁尾設計範本demo

而且自已設計通常會遇到幾個問題,與色系、排版有關係的,越會讓沒有學過設計的人困擾

  1. 版面如何配置
  2. 背景顏色、字型大小…等
  3. 到底要放什麼內容合適

如果現在佈景主題可以提供範本讓我們可以快速的按一按就做完了,你還要土法練鋼嗎?你會選哪一種方法?

Theme Footer Template
wordpress主題頁尾範本

子佈景主題(child theme)

先說說用處在哪裡?當我們安裝了一個佈景主題以後,如果我們針對裡面的某些小地方客製化修改了程式以後,隨著wordpress更新版本後,接著主題會跟著更新,這時候如果我們從後台看見佈景主題可以更新,我們就按下去更新,這時候佈景主題會發生什麼事呢?之前修改的就全部不見了,因為被更新的新程式覆蓋掉了,要再花大把時間再更改一次囉!

現在只要有了子佈景主題,就可以避免這個情況的發生了,因為修改的是子佈景主題裡面的程式,通常而言大部份的佈景主題作者都會提供子佈景主題,不放心就先仔細查閱看看。

價格及保固

國外的佈景主題,通常有一定品質而且提供免費更新的,大部份單一個都要59美金左右,有些一次買幾10個幾百個的例外,以Themeforest wordpress theme銷售平台為例,提供只要花一次的錢,永久保固更新,只要作者仍在維護,所以就長期來說,是很划算的。

要特別提醒一下,如果在Themeforest購買了任何軟體,一定要馬上下載,千萬不要想說買下來放著,因為要是買了沒即時下載,如果商品發生問題被下架,就無法再下載也無法退款囉!這時求救無門,只能認賠,我曾經遇過一次。難過想哭

Themeforest wordpress 主題銷售排行榜

支援加速器(cache)

可以「正常」的支援wordpress前幾大快取加速器。

Top WordPress Cache Plugins
wordpress Top Cache plugins

支援搜尋引擎優化SEO外掛

這一個部份,通常都會採用外掛來使用,可以在wordpress外掛搜尋SEO目看到許多相關的外掛,選一個使用人數多而且有支援最新wordpress版本的。

Wordpress Seo Plugins 1
WordPress SEO Plugins

那到底這個外掛在幫我們做什麼事呢?自動針對文章、頁面產生Google搜尋引擎爬蟲需要的資料像meta description或在臉書貼上網址提供給臉書的資料像og:image og:description等…

Yoast SEO Plugin
Yoast SEO Plugin

支援woocommerce

要不要使用電子商務的功能是一回事,提不提供又是另外一回事,所謂支援就是主題可以整合woocommerce,提供更好的整合性。

Woocommerce Wp Plugins
wordpress 電子商務外掛

支援bbpress

這個留言版外掛程式算是wordpress外掛同類型排行榜中的前三名了,如果沒有支援,主題也太遜了一點吧!

open source

最後呢?是個人觀點,wordpress平台是用php寫的,因此有些佈景主題作者或公司為了保護外掛或主題會用Zend Guard or ionCube將php程式加密,這時候加密以後的程式就算我們打開來只也能看到一堆亂碼,當然在使用上完全沒有問題;但是如果發現有小地方想要修改或中文支持的bug時,就無法自行修改囉!

結論

這一篇是傑克老師原創文章,為使用多年的經驗分享,僅供參考。

ps.未經同意禁止全文轉載或轉貼,部份轉載請附上來源網址。社群等網站分享不受限。

前一篇文章Facebook臉書社群網路行銷課程
下一篇文章不可不看,Facebook臉書影片中毒完全解毒及防範手冊
學經歷 淡江大學資訊管理研究所 諸銘科技軟體發開部經理與教育事業部總監 專長 網路創業、網路行銷、創業貸款、個資保護、資訊安全、程式設計(ASP.NET VB.NET MVC C# Core 6) 資安與個資證照:CompTia Security+ , ISO 27701。 演講與課程經歷 工研院講師 勞動部微型創業鳳凰貸款顧問 台北市社會局 衛福部中央健保署 新北市政府勞工局 管科會 中國生產力中心 中衛中心 中山管理教育基金會 中華軟協 南科產協 青創會 青創會內訓 臺北青年職涯發展中心 經濟部樂活創業人才班 中小企業總會 外貿協會 高雄醫學大學 雲林科技大學 台北醫學大學 銘傳大學 明新科大 中台科大 台灣科技大學 師範大學 大葉大學 台北城市大學 聖約翰科技大學 萬能科技大學 輔英科大 明新科大 美和科大 嘉南藥理大學 東南科大 亞太創意技術學院 格致商工 霧峰農工 三重商工 新店戒護所 台南就業處 台灣知識庫 台北景福扶輪社 富邦人壽 台北國際書展

回覆留言

Please enter your comment!
Please enter your name here