如何使您的 WordPress 網站移動友好

移動友好型 WordPress 網站已成為新常態，這已經不是什麼秘密了，但儘管它們看起來很常見，但創建一個美觀、響應迅速的網站仍然需要一些工作。 本指南將幫助您了解為什麼擁有適合移動設備的網站很重要，如何在 WordPress 上構建網站，並向您介紹創建響應式網站的最佳工具。

要使您的 WordPress 網站適合移動設備，您需要：

1. 理解為什麼響應式網頁設計很重要
2. 參加 Google 移動設備友好測試
3. 使用響應式 WordPress 主題（或創建您自己的主題）
4. 考慮適合移動設備的 WordPress 插件
5. 使用適合移動設備的選擇加入
6. 從響應式媒體的角度思考
7. 優先考慮網站性能

準備好？ 讓我們開始吧！

1. 為什麼適合移動設備的網站很重要？

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

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

這意味著，如果您的網站在移動設備上閱讀良好，那麼它在搜索結果中的表現將優於其他網站。 如果您已經完成了創建適合移動設備的網站的工作，那將是一個非常不錯的福利！ 但如果它不能完全滿足在較小屏幕上顯示的任務，它也會損害您網站的流量。

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

2. 參加適合移動設備的測試

您的網站在一台移動設備（例如您自己的個人手機）上看起來可能很棒，但您確實需要在各種屏幕尺寸上對其進行測試，以了解它是否真正具有響應能力。 即使你碰巧有一大堆舊手機，在每個屏幕上測試它也是一個耗時的過程。

為了簡化事情，谷歌為我們所有人提供了一個免費的移動友好測試工具，它會告訴你你的網站是否符合“移動友好”的條件。 只需輸入您網站的 URL 即可快速評估您網站的移動設計。 如果您的網站針對移動設備進行了全面優化，您會收到一條熱情洋溢的小成功消息，如下所示：

如果您看到紅色，則說明您還有一些工作要做。 （我們會在一秒鐘內解決這個問題！）

非常簡潔的小工具，對吧？ 好吧，它變得更好了。

對於所有開發人員，Google 還發布了移動設備友好測試 API，允許您使用自動化工具測試 URL。 這樣做的好處是您可以快速測試更多頁面，但您也可以監控站點上最重要的頁面，而無需一直手動轉向瀏覽器工具。 分數！

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

3.使用（或創建）響應式WordPress主題

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

首先要做的事情：仔細檢查您的 WordPress 版本和當前主題版本。 如果有待處理的更新，請從這些更新開始。 我不能代表所有主題，但一些更新將包含適合移動設備的元素，可能足以解決您的問題。 例如，WordPress 4.4 為響應式圖像添加了一些非常簡潔的功能（您可以在此處閱讀所有相關內容）。

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

最佳移動友好型 WordPress 主題

實際上，現在很多 WordPress 主題都是響應式的——不適合移動設備的主題可能很少見。 也就是說，在購買主題之前，請仔細檢查它是否在任何屏幕尺寸上都能正常顯示。 測試演示站點，縮放瀏覽器窗口，並閱讀您能找到的任何評論，以了解真實用戶的體驗。

如果您對所看到的感到滿意，那就去吧！ 但如果事情看起來不對勁，請避開。 即使您認為它是完美的搭配，也有太多 WordPress 主題可供選擇，我保證您會找到適合您網站的另一個主題。

如果您正在查看免費主題，請務必查看包含您自己的內容後的樣子 – 我相信您知道，事情看起來並不總是完全一樣，因此請確保它顯示您的內容您希望在移動設備上使用的方式。

不知道從哪裡開始？ 當您在 WP Engine 上託管您的 WordPress 網站時，您將可以免費訪問 StudioPress 主題（包括 Genesis Framework！）。 這些主題是完全響應式的，因此它們在任何設備上看起來都很棒，而且您可以輕鬆地在它們之間切換（而不是被您決定購買的“唯一”高級主題所困）。

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

如果您更願意走 DIY 路線來創建適合移動設備的網站，請務必從頭開始或在測試環境中開始——您永遠不應該像在您的實際網站上那樣進行劇烈的更改。

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

還有一個名為 Live Links 的功能，它可以生成指向本地站點的可共享 URL。 這使您可以將其發送給客戶或將其拉到您的手機上，這樣您就可以輕鬆地測試網站在移動設備上的外觀。

如果您基於響應式父主題創建子主題，您將處於非常好的狀態。 如果您是從一片空白開始並創建自己的主題，請務必使用媒體查詢來為設計建立邊界，並一次考慮一個元素。

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

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

4.使用響應式插件

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

例如，側邊欄小部件是桌面站點的絕佳補充，但如果它在移動設計中占主導地位或不按比例縮小，則不會帶來非常好的用戶體驗。

像主題一樣，只關注插件的特性，並在購買前嘗試閱讀評論或找到演示。 每當您激活一個新插件時，請記住對您的網站進行快速質量檢查，以確保它在不同屏幕尺寸之間正確縮放。

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

5.避免在移動設備上添加彈出窗口

如果您正在嘗試使用您的 WordPress 網站構建電子郵件列表，我猜您的網站上有多種選擇加入。 大多數電子郵件選擇加入表單在移動設備上工作得很好（假設它們可擴展且易於使用）。

然而，彈出窗口是一個不同的野獸。 谷歌已經開始懲罰具有侵入性插頁式廣告的網站，也就是覆蓋網站內容的選擇加入。 這包括彈出窗口（無論是立即顯示還是在用戶訪問網站一段時間後顯示）以及用戶在訪問頁面內容之前必須關閉的任何其他類型的選擇加入。 你可以在這裡閱讀谷歌對此事的所有立場。

為了讓您的 WordPress 網站保持移動友好並遵循最佳實踐，請避免在您的移動設計中使用彈出窗口。 你如何去做取決於支持你選擇加入的服務，但大多數供應商應該有一個選項來禁用移動設備上的侵入性彈出窗口。

6. 為響應式媒體制定策略

無論您是在使用投資組合網站、每日博客還是電子商務網站，響應式難題的一個重要部分就是考慮您網站上的媒體。 主頁上的大背景圖片在台式機上可能看起來不錯，但如果不能正確縮放，它可能會丟失所有上下文並導致手機上的觀看體驗不佳。 那麼響應式媒體的第一條規則是什麼？ 想想事情是如何擴展的。

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

最後，您還需要牢記要包含在站點中的媒體的文件大小。 這不僅會改善移動體驗，還會改善桌面加載時間！ 媒體文件通常是網站上最大的文件之一，這使得它們成為加載欄和漫長等待時間的原因。 為了幫助簡化您的網站並提高移動性能，請嘗試使用盡可能小的文件大小來優化您的圖像，同時仍保持您需要的質量。 （例如，您的移動網站加載的圖像版本可能比桌面版本小！）

7.優先考慮網站性能

長期以來，頁面速度對於您的網站在 Google 桌面搜索中的排名非常重要，但從 2018 年 7 月開始，移動排名現在也是如此。 將其與上面的統計數據相結合，超過 60% 的互聯網搜索使用移動設備，您網站的性能（在每台設備上）現在比以往任何時候都更加重要。

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

當涉及到您的代碼時，請考慮縮小等操作（尤其是在使用自定義主題時）。 清點您網站上安裝的所有插件，停用和卸載不再需要的插件。 基本上，您越有條理地保留為您的網站提供動力的元素，您的生活就會越好。

至於您的 WordPress 主機，請確保您使用的是優質合作夥伴，其中包括緩存技術、CDN 和由 Google Cloud Platform 等可靠提供商提供支持的基礎架構等服務。 如果您在 WP Engine 上託管您的網站，那麼您已經在所有這些領域中設置好了。

隨著越來越多的人使用他們的智能手機或平板電腦訪問互聯網，網站設計者必須進行調整以解決這些使用模式。 那麼，您的網站準備好迎接移動訪問者了嗎？ 您必須更改網站的哪些方面？ 您使用什麼工具來創建響應式設計？ 在評論中分享您的經驗！

訪問 30 多個高級（和移動友好！）主題

使用 WP Engine 託管的 WordPress 並訪問 StudioPress 主題和 Genesis Framework，為自己節省一些時間（和金錢！）。 這些主題完全響應且易於自定義，從而在您嘗試構建適合移動設備的網站時節省您的時間。 此外，WP Engine 強大的平台將使您的網站性能得到優化，幫助這些頁面速度保持快速並使您的網站排名良好。