【WordPress】WPtouch手機版免費佈景主題,提升手機用戶體驗

by

【WordPress】WPtouch手機版免費佈景主題,提升手機用戶體驗

by

相信使用Wordpress建站後,大家一定都有過助提選來選去就是沒找到適合的時期,Wordpress 有許多免費佈景主題雖然樣式好看,但當你套用到網站後,用手機一看卻慘不忍睹,偏偏現在是個人人都使用手機上網查資料的時代,有在使用Google analytics分析網站後台數據的人,更是能深深體會到手機版面的重要性。以我過去架設網站的經驗來看,通常手機版用戶會佔訪客的60%,另外30%則是電腦版用戶,剩下10%則是平版用戶

這篇文章要教你如何使用免費的手機版主題外掛 WPtouch,從安裝到樣式設定,WPtouch 不僅可以讓你另外設定你的網站手機版畫面,且不必被原先的主題影響,在我個人用網站實驗過後,確實能有一定程度地提升手機版畫面載入速度,如果你也有手機版界面的困擾,請繼續看下去。


手機版主題外掛 – WPtouch

1.WPtouch介紹

WPtouch themes

WPtouch 專門以製作Wordpress的手機版主題聞名,它在Wordpress外掛介面上下載次數已超過10,000次, WPtouch 會將你的網站資料轉換成適合用手機閱讀的狀態,這麼做的優點除了介面美觀以外,最重要的是能夠提升使用者的體驗,進而優化網站的SEO,我想這是大多數Wordpress建站者最重視的部分,即使你不會撰寫程式語言,也沒有預算雇用一個網站工程師,也可以替你的網站打造出一個很不錯的手機介面。


2.安裝教學

install plugin

WPtouch的安裝如同其他外掛一樣,進入網站的控制台後,點選左邊的功能列,選擇外掛→安裝外掛,接著在右邊的搜尋框搜尋WPtouch。找到後點擊立即安裝→啟用,就可以進入下一步囉。

WPtouch

3.一般設定

settings

完成外掛安裝後,你會看到左邊功能列表出現了WPtouch,點進去畫面會出現外掛的基本設定頁面,這邊使用預設的設定即可,確認一下網站的名稱是否正確,或者有需要更改,可以按右上角的Preview Theme預覽畫面,可以看到目前你的手機版網站畫面。


4.樣式設定

customize

然後我們點開左邊功能列的外觀→自訂,進到網站的樣式設定區,左上角的按鈕「Switch to Desktop/Mobile Version」讓你自由切換當下要調整的是手機版介面,或者是電腦版介面。

這裡的設定不難,唯一困擾就是還沒有中文化,但大家不用害怕!每一個選項都點開來玩一玩就對了,在你調整的同時,右手邊預覽畫面會即時出現更改後的樣式,以及右上角還可以將手機預覽畫面轉成橫向。全部選項都確認過一遍後,記得點選左上角的藍色按鈕「發佈」,將你辛苦完成的手機版主題設定儲存,接著就可以拿出手機欣賞你美麗的成果啦~


5.載入速度比較

前面介紹時提到過Wptouch可以提升整個網站的載入速度以及SEO優化,我自己拿了我個人的網站來做測試,雖然整體評分些微下降,但是在研究資料段落中,可以發現大多數的秒數都有縮短,且預覽的手機畫面出現內容的速度也加快了

雖然並沒有到百分百完美,但我想這樣的效果以一個免費的外掛來說,已經是相當不錯的成績,如果你的網站手機用戶占比例相當高,那麼可以嘗試看看WPtouch外掛。

以下提供你Google Page Speed Insights這個網路工具,不過我要事先提醒,這個網站的分析僅供參考,大家不必因為它顯示出很低的分數或者數字就覺得焦慮或驚慌,我用它測試過Apple.com,行動版分數也是只有49分,但Apple的網站訪客數絕對是數一數二的。

延伸連結:Google Page Speed Insights 測試你的網頁速度


6.付費版本

如果你對於WPtouch有興趣的話,不妨可以參考看看它提供的付費版本,主題價格大約落在美金$15-50上下,對於Wordpress網站的深度使用者來說,它能夠提供更多樣化的手機版樣式以外,還有更多不同的額外功能,以下列出付費版本的優點:

  • AMP for WPtouch:額外WPtouch加速器
  • Basic Ads:自訂手機版的Google Ads廣告
  • Advanced Type:自行安裝要使用的字體
  • jQuery Enhanced:讓jQuery運行更加順暢快速
  • Make Child Theme:額外打造孩童使用介面
  • Mobile Content:設定僅顯示於手機版用戶的內容
  • Multi-Ads:將廣告內容測試並且強化
  • Power Pack:透過網站緩存調整、圖片壓縮、以及CDN支援改善頁面速度
  • Related Posts:在文章下方顯示相關文章列表
  • Web-App Mode:可讓Android用戶及Iphone用戶將你的網站加入到手機主畫面
WPtouch Pro

如果這篇文章有幫助到你,或者是你有任何相關問題,都歡迎你在下方的留言區告訴我,每一個留言都是我寫文章的動力來源,謝謝你的閱讀。:)

相關文章

👋

Hi, I’m LiLing

在紐西蘭任職多媒體設計師,擅於利用Wordpress建立網站,搭配Divi主題,分享各種不必使用程式語法,也可以設計網站的101種方法。

🙌

社團交流

歡迎你加入Divi使用者討論平台,有任何問題都歡迎在上面向我提問:)

👩🏻‍💻

免費領取Divi入門手冊

領取Divi新手設計入門手冊

9 Comments

  1. 時昔子

    真的,我的網站顯示數據也是手機用戶佔大多數,所以優化手機使用者的體驗真的好重要,謝謝分享這麼實用的外掛

    Reply
    • LiLing

      不客氣:)

      Reply
  2. Raymond

    感謝分享!手機用戶比較多,用這個真的可以幫助用戶體驗!

    Reply
    • LiLing

      手機用戶真的超多,我自己也是????

      Reply
  3. Lisa Su

    一直想要增加手機版用戶體驗感受,很實用的文章,謝謝版主分享

    Reply
    • LiLing

      不客氣:)

      Reply
  4. sammy

    謝謝分享,這是我一直在找的東西!

    Reply
    • LiLing

      有幫到你我也很開心~~

      Reply
  5. MonkeyWalker在匈牙利走跳生活

    手機用戶真的佔7成以上,這款外掛很需要。

    我的網站也有使用版大文末讀者優惠的統整表格
    每次用手機瀏覽表格完全擠壓,
    現在來試看看這個外掛,感謝版大

    Reply

Leave a Reply to LiLing 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *