眾所周知，適合移動設備的 WordPress 網站已成為新常態，但盡管它們看起來很常見，但創建一個美觀、響應迅速的網站仍需要一些工作。本指南將幫助您了解擁有適合移動設備的網站為何如此重要、如何在 WordPress 上構建這樣的網站，并向您介紹創建響應迅速的網站的最佳工具。

1. 為什么移動友好型網站很重要？

2019 年第四季度，61% 的 Google 搜索是在移動設備上進行的。這意味著超過一半的人口正在轉向使用手機和平板電腦而不是傳統的臺式設備，因此為了跟上他們的步伐，您的網站需要準備好在任何屏幕尺寸上顯示。適合移動設備的設計可以帶來積極的用戶體驗，并幫助您的用戶在旅途中找到他們想要的內容。

除了用戶體驗之外，您的網站應該適合移動設備的另一個重要原因是：谷歌。從 2015 年開始，谷歌對其搜索算法進行了重大改革，以獎勵那些被認為“適合移動設備”的網站。這一變化歸結為一個關鍵數據點：您的網站是否具有響應能力。

這意味著，如果您的網站在移動設備上閱讀效果良好，那么它在搜索結果中的表現將優于那些在移動設備上閱讀效果不佳的網站。如果您已經努力創建了一個適合移動設備的網站，那么這是一個相當不錯的優勢！但如果您的網站不能很好地適應在較小的屏幕上顯示，它也會損害您的網站流量。

幸運的是，如果您的 WordPress 網站還不適合移動設備，那么有很多工具可以幫助您快速上手并構建功能齊全、響應迅速的網站。第一步？對您當前的設計進行基準測試。

2. 如何測試 WordPress 的移動友好性

您的網站可能在某款移動設備（例如您自己的手機）上看起來很棒，但您確實需要在各種屏幕尺寸上進行測試，才能知道它是否真正具有響應性。即使您恰好有一大堆舊手機，在每個屏幕上進行測試也可能是一個耗時的過程。

為了簡化操作，Google 為我們提供了一款免費的移動友好度測試工具，該工具會告訴您您的網站是否符合“移動友好度”標準。只需輸入您網站的網址，即可快速評估您網站的移動設計。如果您的網站已完全針對移動設備進行優化，您將收到一條令人振奮的成功小消息，如下所示：

如果您看到紅色，則說明您還有一點工作要做。（我們馬上就講到這一點！）

Google 還發布了一個移動設備友好度測試 API，可讓您使用自動化工具測試網址。這樣做的好處是，您可以快速測試更多頁面，但也可以監控網站上最重要的頁面，而無需一直手動轉到瀏覽器工具。太棒了！

使用 Google 的移動友好工具對網站進行基準測試后，就該開始進行改進了。讓我們從您的 WordPress 主題開始。

3. 為什么要使用（或創建）響應式 WordPress 主題

如果您最近安裝了新的 WordPress 主題，那么在這方面您很有可能沒問題。但是，如果您的主題已經存在一段時間了，那么可能需要進行一些更新。

首先：仔細檢查您的 WordPress 版本和當前主題版本。如果有待處理的更新，請從這些更新開始。我不能代表所有主題，但有些更新將包含適合移動設備的元素，可能足以解決您的問題。

如果更新不起作用，那么可能是時候尋找新主題或考慮創建自己的主題了。讓我們探索這兩個選項。

最適合移動設備的 WordPress 主題

實際上，如今許多WordPress 主題都是響應式的——主題不適合移動設備的情況可能很少見。話雖如此，在購買主題之前，請仔細檢查它是否在任何屏幕尺寸上都能很好地顯示。測試演示網站，縮放瀏覽器窗口，并閱讀您能找到的任何評論，以了解真實用戶的體驗。

如果您對所看到的內容感到滿意，那就去買吧！但如果看起來不對勁，請避開。即使您認為這是完美的匹配，也有如此多的 WordPress 主題可供選擇，您應該可以毫不費力地找到一個更好的、真正適合移動設備的選項來適合您的網站。

如果您正在查看免費主題，請務必查看它在放置您自己的內容后是什么樣子 – 正如您所知，事物并不總是看起來完全相同，因此請確保它以您希望的方式在移動設備上顯示您的內容。

如何創建自己的響應式 WordPress 主題

如果您寧愿采用 DIY 方式來創建適合移動設備的網站，請務必從頭開始或在測試環境中開始 – 您絕不應該在實時網站上進行如此大的更改。

我們建議使用Local在您的機器上啟動本地 WordPress 網站。這款免費應用程序可讓您隨心所欲地進行實驗，同時不會破壞您當前的網站（這在重新設計時至關重要）。您甚至可以將現有網站導入 Local，因此如果您愿意，只需從頭開始即可。

還有一項名為“實時鏈接”的功能，可生成本地網站的可共享 URL。這樣您就可以將其發送給客戶或將其拉到手機上，這樣您就可以輕松測試網站在移動設備上的外觀。

如果您基于響應式父主題創建子主題，那么您將處于相當不錯的狀態。如果您從完全空白的狀態開始創建自己的主題，請務必使用媒體查詢來為設計建立邊界，并一次考慮一個元素。

問問自己，圖片應該如何縮放、導航應該是什么樣子，以及是否有任何內容會在移動設備上隱藏。以下是一些可以幫助您的教程：

• 如何在 WordPress 中創建響應式導航菜單
• 響應式網頁設計的 7 個最佳實踐技巧

4. 為什么要使用響應式插件

插件會為您的 WordPress 網站添加功能，因此它們并不總是會在前端添加任何視覺效果。但如果它們確實為您的網站添加了物理元素（如小部件或 CTA 按鈕），請確保它能夠在所有屏幕尺寸上很好地縮放，或者至少讓您可以選擇在較小的屏幕尺寸上禁用它。

例如，側邊欄小部件對于桌面網站來說是一個很好的補充，但如果它主導了移動設計或者不能縮小，就不會帶來很好的用戶體驗。

與主題一樣，只需關注插件的功能，并在購買之前嘗試閱讀評論或查找演示。每當您激活新插件時，請記住對您的網站進行快速質量檢查，以確保其在各種屏幕尺寸上都能正確縮放。

只要您擁有一個響應式主題和在移動設備上運行良好的插件，您的網站就能夠在小屏幕上很好地顯示。

5. 避免移動設備彈出窗口

如果您嘗試使用 WordPress 網站構建電子郵件列表，則您的網站上可能會有一些選擇加入表單。大多數電子郵件選擇加入表單在移動設備上都可以正常工作（假設它們可擴展且易于使用）。

然而，彈出窗口則完全不同。谷歌已經開始對帶有侵入性插頁廣告的網站進行懲罰，插頁廣告又稱選擇加入廣告，會覆蓋網站的內容。這包括彈出窗口（無論是立即顯示還是在用戶訪問網站一段時間后顯示）以及用戶在訪問頁面內容之前必須關閉的任何其他類型的選擇加入廣告。

為了讓您的 WordPress 網站適合移動設備并遵循最佳實踐，請避免在移動設備設計中出現彈出窗口。如何做到這一點取決于支持您選擇加入的服務，但大多數提供商應該都有在移動設備上禁用侵入性彈出窗口的選項。

6. 制定響應式媒體策略

無論您在制作作品集網站、日常博客還是電子商務網站，響應式設計的一個重要部分就是考慮網站上的媒體。主頁上的大型背景圖像在臺式機上可能看起來很棒，但如果無法正確縮放，它可能會丟失所有背景并導致手機上的觀看體驗不佳。那么響應式媒體的第一條規則是什么？想想事物如何擴展。

如果縮放實際上不是您網站的最佳解決方案，您還可以考慮在移動設備上加載網站時隱藏某些元素。這將有助于簡化體驗并讓用戶更快地找到最重要的內容。

最后，您還需要記住網站上包含的媒體文件大小。這不僅可以改善移動體驗，還可以縮短桌面加載時間！

媒體文件通常是網站上最大的文件之一，這往往是導致等待時間過長的罪魁禍首。為了幫助簡化您的網站并提高移動性能，請嘗試使用盡可能最小的文件大小來優化您的圖片，同時仍保持所需的質量。（例如，您的移動網站加載的圖片版本可能比桌面版小！）

7. 優先考慮網站性能

長期以來，頁面速度對于您的網站在 Google 桌面搜索中的排名一直很重要，但自 2018 年 7 月起，移動排名也同樣如此。結合上述統計數據，超過 60% 的互聯網搜索都是使用移動設備進行的，您的網站性能（在每臺設備上）比以往任何時候都更加重要。

圖像是性能方程的重要組成部分，但您的代碼和 WordPress 主機也發揮著重要作用。

對于代碼，請考慮采取諸如壓縮之類的措施（尤其是在使用自定義主題時）。盤點網站上安裝的所有插件，停用和卸載不再需要的插件。基本上，網站元素的組織性越強，效果就越好。