最後更新日期：2021 年 5 月 15 日
聯合國在 2019 年提供一個驚人的統計：「全球手機總數突破 80 億，正式超越全球 74 億總人口數」。
生活在行動裝置逐漸取代桌機的年代裡，響應式網頁設計儼然已經成為一種新常態，在過去幾年中主導著網站架設的基礎結構。
響應式是一種網頁設計技術，指的是網站的排版與功能設計皆考量當今市面上各種裝置尺寸，無論訪客從哪一種類型的裝置進入網站，該頁面即會作出「響應」的動作，得以讓同一個網站在大螢幕或小行動螢幕上均能夠完好地呈現。
讓訪客方便查看頁面內容，減少不斷縮放、移動或滾動螢幕視窗的困擾。
設計一個響應式 WordPress 網站並不意味著必須重新建構現有網站的整體設計，有時候只要找對合適的主題並善用第三方外掛程式就能夠為行動裝置訪客提供更優化的體驗。
不僅如此，響應式網頁可以為您的 WordPress 帶來眾多其他的好處，包括 Google 的搜尋引擎排名。
目錄
究竟響應式網站有哪些好處？
試想一下：如果您正在找尋某種資訊或打算網購，點擊進去的某個網站卻無法符合您的手機視窗，導致一下要放大文字閱讀，一下又要縮小看圖，您很可能索性關掉這個網站，反正茫茫網路也不差這一個網站，乾脆轉頭尋找其他網站，對吧？
我們生活在「人手多機」的社會中，您永遠不知道訪客會使用哪種設備來造訪網站。
如果您為了省下轉換為響應式網站的麻煩，卻留不住訪客又損失潛在轉換率，實在得不償失。
RWD 式網站除了旨在增進訪客體驗之外，另一個對於您企業或品牌關鍵的優勢在於：搜尋引擎優化（SEO）。
搜尋引擎龍頭 Google 在 2015年時就已經公開呼籲網站採用響應式頁面設計，並提高針對「行動裝置友善」的網站排名。
白話一點來說就是如果您的網 站能夠使行動裝置用戶看起來舒適，那麼比起沒有響應式設計的網站相比，您網站自然排名會更前面，直接能夠吸引更多訪客流量。
不僅如此，在 2019 年第四季統計機構 Statista 的報告中顯示，有 61％ 的 Google 搜尋是在行動裝置上進行！
因此，Google 把握科技潮流趨勢，並持續軟硬兼施的實施「行動友善」策略，在 2020 年 9 月更推出「行動優先索引（Mobile First）」，意味著 Google 會用手機版網站（以前是桌機版網站）的條件來計算搜尋排名！
說到這裡，是不是讓您已經下定決心好好重整自己的網站，讓響應式網頁設計的功能發揮到淋淋盡致？
好加在 WordPress 是一個靈活多元的開源內容管理系統（Content Management System，CMS），它的彈性足以滿足您對於網站前端的任何需求；
而且由於 WordPress 已是稱霸全球的架站平台，第三方開發人員也不斷推陳出新網站工具給 WP 用戶，因此您肯定能夠找到完成響應式網頁設計的工具。
該如何用響應式 RWD 方法架設 WordPress 網站？
直接套用響應式主題模板
WordPress 背後的開發人員不斷更新進步該系統，自從 2011 年起，所有安裝 WordPress 後的預設主題皆是響應式頁面設計。
如果您當前網站的主題已經使用了一段時間，那最好得檢查一下該主題版本是否是時候該進行更新。
假設您認為當前最新版主題的響應式設計不夠優秀，或是不能夠滿足您的客製化需求，則可以考慮尋找新主題，或乾脆花點功夫從頭建立專屬於自己的主題。
目前在 WordPress 平台上的主題因應市場趨勢，基本上全部都已經提供響應式設計，反而不是響應式的主題少之又少。
在決定套用或花錢購買主題之前，請先使用 Live Demo 檢查一下網站是不是在任何螢幕尺寸上均可以完美呈現。
另外也該考慮該主題所提供的功能、客製化選項，並閱讀相關評論，稍微暸解一下其他使用者的真實經驗談。
延伸閱讀：Astra 佈景主題介紹及教學
安裝專為響應式頁面設計的外掛程式
在 WordPress 這個開源軟體的一萬多種外掛程式裡，當然也少不了幫助網站經營者優化行動裝置頁面的外掛程式。
就像是主題一樣，安裝前也別少了瞭解程式功能、閱讀評論並觀賞 Demo 的部分。
另外，每當您啟動新外掛時，記得快速的針對您的網站進行一番檢查，確保該外掛可以使網站在各個螢幕尺寸上正確縮放，並且功能介面符合您的期待。
延伸閱讀：必裝 WordPress 外掛清單
以下推薦三個好用又大有人氣的WordPress響應式外掛程式。
WPtouch
提及 WordPress 的行動裝置解決方案時，WPtouch 大概是這塊領域中的代名詞。
WPtouch 上線至今擁有超過 600 萬次的下載量，並以操作簡易、快速優化響應式頁面受到 WP 使用者的喜愛。而且，WPtouch 外掛通過了Google Mobile 的測試，好好善用這個外掛很可能直接增加您的網站搜尋排名。
WPtouch 最厲害的地方在於當訪客透過行動裝置造訪您的網站時會自動採用響應式主題向他們顯示您的網站。也就是說，您的網站可以隨時替換兩個版本——桌機版和行動版。
WPtouch 的功能允許使用者自行定義行動版的外觀，使網站看起來完全符合您的期望，而且由於簡單入門，無需修改任何代碼，連網站菜鳥也能快速上手，一旦下載後依照安裝精靈步驟設置功能即可完成。
WPtouch 提供免費版與專業版，免費版給予用戶一個行動裝置主題，專業版則提供 7 個主題任選，並允許使用者客製化更多進階功能。最基本的方案年費 $79 美元（相當於台幣約 NTD 2,370）。
Wptouch 同時提供 23 種語言，所以無論您的訪客從哪裡而來，基本上您的網站都能夠給予他們最佳的體驗。
Max Mega Menu
Max Mega Menu 在 WordPress 上的評價星級為 4.7，至今擁有超過 5 百萬次下載量並應用於超過 40 萬個活躍網站上，這樣的人氣可是大有原因。
在將桌機版轉化為行動版其中一個最令人頭痛的部分是選單，有些主題並沒有將這一點列入考量，因此在安裝主題後，選單的部分客製化程度低，還是令行動裝置的訪客難以使用。
Max Mega Menu 外掛程式的出現解決了這個挑戰，它提供超過100種可客製化的選單配置選項——包含標誌、google字型、顏色設定等，簡簡單單讓使用者根據不同設備尺寸重新設定一個和桌機完全不同的選單樣式。
Max Mega Menu 一樣提供免費版和專業版，專業版的功能更多樣，其中包括搜尋欄、WooCommerce 選單設計和優先支援服務。
年費 $29 美元（台幣約 NTD 870元）可安裝於一個網站，目標是打造明星電商的 WP 用戶可以考慮一下專業版，如此讓您的消費者方便隨走隨購，也許是個 CP 值不錯的投資。
AMP for WP – Accelerated Mobile Pages
AMP for WP 是一個全面提升手機網頁開啟速度的外掛。
AMP (Accelerated Mobile Pages，加速行動版頁面) 這個概念最早就是 Google 在 2015 年為提升行動裝置對網站的存取速度所開發的專案，因此要求「快速」就是AMP網頁最大的特色。
一旦網頁存取速度快，網站更具備 SEO 的優勢，這也是 AMP for WP 發揮最大效益的地方。
這個外掛程式的設置非常全面卻也極為簡單——只需安裝後啟用外掛，接著程式會開始自動為您的網站生成AMP。
最棒的是，AMP for WP 同時提供了設計的選項，讓使用者可以利用預設的 AMP 主題，或是使用其 AMP 主題框架創建屬於自己的版面設計，無論用什麼方法，您都可以自行定義 AMP 輸出的版面外觀。
說真的 AMP for WP 免費版已經很夠用，但進階版又增加了 AMP 緩存、CTA 功能，並支援人氣外掛 WooCommerce、Star Ratings、Advanced Custom Fields 、Contact Form 7、Gravity Forms等。
年費是 $149美金（約台幣 4,470），可用於一個站點，若要使用於多個站點則必須支付年費 $199美金（約台幣5,970）。
主要看您網站的用途來決定是否需要升級為進階版。
設計響應式網頁該注意的關鍵
即便有了優化響應式網頁的合適主題和外掛，在轉換途中時還有一些WP使用者應該考量進去的因素。
性能表現
您的網站性能必須擺在所有設計條件之前，畢竟如果加載龜速，網頁內容再精彩也增加不了流量，而且行動裝置性能表現還是Google搜尋引擎索引的重點。
首先，我們來談談網站上的圖片。根據 Akamai 雲端服務提供商的統計，圖片佔用了現代普遍網站的63％頻寬。
因此，對圖片進行適當的調整是優化性能的關鍵步驟。最簡單初階的辦法就是調整適合各種設備的圖片尺寸大小。
另外，不要太貪心的把所有桌機上的圖示/內容/按鈕等都放進去，有條件地選擇適合行動裝置閱讀的體驗也能夠加速網站性能表現。
適量文字數量，慎選字體尺寸、字型
除了調整網站上的圖片尺寸之外，您應該也要考慮編減文字內容。
訪客在行動裝置的螢幕的空間相當有限，他們基本上不會願意花時間一字一字詳讀，因此最好屏棄一切「裝飾用」文字，專注於更重要的品牌或產品說明，讓訪客更能夠一目瞭然。
結論
響應式網頁設計無庸置疑地可以大幅改善訪客體驗，因而對您的企業品牌產生正面的印象；另外，也因為訪客可以在任何裝置上輕鬆查看您的網站，他們就更有可能在頁面上待得越久，進行更多消費，意味著網站轉換率更高。
在當今行動裝置帶來高流量的世界中，您必須順應這個潮流，品牌在建立形象的時候必須考量來自各種「機型」的訪客，否則只能坐等被時代淘汰。
網路上關於架站資源的資訊相當豐富，想知道自己的網站符不符合行動裝置友善，前往 Google 提供的測試工具頁面，只要輸入您網站的網址，接著 Google 就會分析您的網站是否為行動友善，畫面如下：
從上述的內容中，您已經領悟到響應式網頁設計無論在用戶體驗或搜尋排名上都是重要的指標。
接下來，就回到 WordPress 動手做做看吧！看能不能善用 Google「行動索引優先」快速地把自己的網站排名往上提升！
WordPress 線上課程推薦
阿璋正在籌備 WordPress 線上課程，如果有興趣的人，歡迎點擊下方連結。
從 0 開始建立部落格
站長之路手把手教你如何透過部落格開始賺錢，內容包含 WordPress、部落格經營、網路行銷，帶你成為一個成功的部落格站長！
WordPress 架站推薦
新手架站：【架站教學】專門為WordPress打造的主機？WPWebHost 完整教學！高流量網站：【架站教學】新手快速架站教學，使用Cloudways架設WordPress網站！
新手必看： WordPress 必裝主題與外掛推薦、學習管道、最新優惠統整！
學習更多：查看我是如何透過 WordPress 架設部落格，賺取人生第一桶金！
WordPress 學習書籍推薦
WordPress 無敵架站手冊：架站新手都想擁有:教你打造個人專屬網站
書籍介紹
這本書教你從零開始建立起一個全功能的WordPress網站，從下載與安裝WordPress主軟體開始到連結、媒體、選單、圖像、展示區、管理、用家建檔等等。 甚至還有教你如何開發主題、外掛、小工具，從入門到進階的教學都很完整。推薦原因
這本書原作者是波蘭人，原文是英文，後來經由免費資源網路社群的作者 Pseric 翻譯成中文書。 WordPress 目前的中文書可說是少之又少，這本不僅是中文書，內容又非常完整，絕對是學習WordPress的首選書籍！購買 WordPress 無敵架站手冊
WordPress Plugins百大外掛精選(火力加強版)
書籍介紹
這本書教你從基礎架站、備份保存到各式各樣的外掛主題，讓你想裝什麼就裝什麼，建置專屬自己獨一無二的多功能發佈平台。 作者特別精選了各類型的外掛做介紹，只要你想的到的功能幾乎都在裡面，匯集了讀者們一直喜愛的外掛程式介紹，並且添加了最新的外掛程式，更貼近現在的讀者需求。推薦原因
這本書作者是免費資源網路社群的作者 Pseric，他的網站知名度非常的高，也是透過 WordPress 架設而成，因此對於外掛的理解，絕對是數一數二。購買 WordPress Plugins 百大外掛精選(火力加強版)
支持阿璋的新書《打開網路就有錢》，裡面分享許多自媒體以及投資理財的知識，非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣，可以訂閱此電子報：幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群：Crypto Mind 加密腦
推坑阿璋超愛的商品，歡迎加入團購群：阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢：站長之路
更多相關社群連結：工具王阿璋社群列表
本站有部分連結與商家有合作關係，透過我的連結購買，我會獲得少數佣金，讓我可以持續營運網站，但並不會影響您的任何權益，詳情查看免責聲明。
如果我的文章對你有幫助，歡迎贊助我一杯咖啡！
本站所有內容皆為阿璋個人經驗分享，如有涉及投資請謹慎評估，阿璋不做任何投資建議。
文章引用請來信索取授權，否則將保留法律追訴權。
by Johntool-工具王阿璋
