如何使您的 WordPress 網站對移動設備友好
已發表: 2020-10-02對移動設備友好的 WordPress 網站已成為新常態，這已不是什麼秘密，但儘管它們看起來很普遍，但創建一個美觀、響應迅速的網站仍然需要一些工作。 本指南將幫助您了解擁有一個適合移動設備的網站的重要性、如何在 WordPress 上構建一個網站，並向您介紹創建響應式網站的最佳工具。
為了使您的 WordPress 網站適合移動設備，您需要：
- 了解為什麼響應式網頁設計很重要
- 參加 Google 移動設備友好性測試
- 使用響應式 WordPress 主題（或創建您自己的主題）
- 考慮適合移動設備的 WordPress 插件
- 使用適合移動設備的選擇加入
- 從響應式媒體的角度思考
- 優先考慮網站性能
準備好？ 讓我們潛入吧！
1. 為什麼適合移動設備的網站很重要？
2019 年第四季度，61% 的谷歌搜索發生在移動設備上。 這意味著超過一半的人口正在轉向手機和平板電腦而不是傳統的桌面設備，因此為了跟上他們的步伐，您的網站需要準備好在任何屏幕尺寸上顯示。 適合移動設備的設計可帶來積極的用戶體驗，並將幫助您的用戶在旅途中找到他們正在尋找的東西。
除了用戶體驗之外，您的網站應該適合移動設備還有另一個重要原因：谷歌。 從 2015 年（“Mobilegeddon”之年）開始，谷歌對其搜索算法進行了重大改革，以獎勵被認為“適合移動設備”的網站。 這一變化歸結為一個關鍵數據點：您的網站是否具有響應性。
這意味著，如果您的網站在移動設備上閱讀效果很好，那麼它在搜索結果中的表現就會比沒有的網站更好。 如果您已經完成了創建適合移動設備的網站的工作，那將是一個非常好的福利！ 但是，如果它不能完全勝任在較小屏幕上顯示的任務，它也會損害您網站的流量。
幸運的是，如果您的 WordPress 網站還不適合移動設備，那麼有很多工具可以幫助您加快速度並構建一個功能齊全、響應迅速的網站。 第一步？ 對您當前的設計進行基準測試。
2. 參加適合移動設備的測試
您的網站在一台移動設備（例如您自己的個人手機）上可能看起來很棒，但您確實需要在各種屏幕尺寸上對其進行測試，以了解它是否真正響應。 即使您碰巧周圍有一大堆舊手機，在每個屏幕上測試它也可能是一個耗時的過程。
為了簡化事情，谷歌為我們所有人提供了一個免費的移動友好測試工具，它將告訴您您的網站是否符合“移動友好”的條件。 只需輸入您網站的 URL，即可快速評估您網站的移動設計。 如果您的網站針對移動設備進行了全面優化，您將收到一條熱情洋溢的小成功消息，如下所示：
如果你看到紅色，你有一些工作要做。 （我們將在一秒鐘內解決這個問題！）
很漂亮的小工具，對吧？ 好吧，它變得更好了。
對於所有的開發人員，Google 還發布了一個 Mobile-Friendly Test API，允許您使用自動化工具測試 URL。 這樣做的好處是您可以快速測試更多頁面，但您也可以監控網站上最重要的頁面，而無需一直手動轉向瀏覽器工具。 分數！
使用 Google 的移動友好工具對您的網站進行基準測試後，就該開始進行改進了。 讓我們從您的 WordPress 主題開始。
3. 使用（或創建）響應式 WordPress 主題
如果您最近安裝了一個新的 WordPress 主題，那麼您很有可能在這個部門還可以。 如果您的主題已經存在了一段時間，那麼可能是時候進行一些更新了。
首先要做的事：仔細檢查您的 WordPress 版本和當前主題版本。 如果有待處理的更新，請從這些開始。 我不能代表所有主題，但一些更新將包含適合移動設備的元素，可能足以解決您的問題。 例如，WordPress 4.4 為響應式圖像添加了一些非常簡潔的功能（您可以在此處閱讀所有相關信息）。
如果更新不起作用，那麼可能是時候尋找新主題或考慮創建自己的主題了。 讓我們探索這兩種選擇。
最好的移動友好型 WordPress 主題
實際上，現在很多 WordPress 主題都是響應式的——主題可能不太適合移動設備。 話雖如此，在購買主題之前，請仔細檢查它是否在任何屏幕尺寸上都能正常顯示。 測試演示站點，縮放瀏覽器窗口，並閱讀您可以找到的任何評論，以尋找真實用戶的體驗。
如果你對你所看到的感到滿意，那就去吧！ 但是，如果某些事情看起來不正確，請避開。 即使您認為這是完美的匹配，也有很多 WordPress 主題可供選擇，我保證您會找到適合您網站的另一個主題。
如果您正在查看免費主題，請務必查看您自己的內容的外觀 - 我相信您知道，事情並不總是看起來完全一樣，因此請確保它顯示您的內容您在移動設備上想要的方式。
不知道從哪裡開始？ 當您在 Flywheel 上託管您的 WordPress 網站時，您將可以通過您的計劃免費訪問 30 多個高級 StudioPress 主題（包括 Genesis 框架！）。 這些主題具有完全響應性，因此它們在任何設備上看起來都很棒，而且您可以輕鬆地在它們之間進行切換（而不是被您決定購買的“唯一”高級主題所困擾）。
如何創建自己的響應式 WordPress 主題
如果您寧願走 DIY 路線來創建一個適合移動設備的網站，請務必從頭開始或在測試環境中開始 - 您永遠不應該在您的實時網站上進行如此大的更改。
我建議使用 Local 在您的機器上啟動本地 WordPress 站點。 這個免費的應用程序可以讓您在不破壞您當前網站的同時嘗試您的內心內容（這在重新設計時是必不可少的）。 您甚至可以將現有網站導入本地，因此您只需從頭開始。
還有一個名為 Live Links 的功能，它會生成一個可共享的本地站點 URL。 這使您可以將其發送給客戶或將其拉到手機上，這樣您就可以輕鬆地測試網站在移動設備上的外觀。
如果您基於響應式父主題創建子主題，那麼您的狀態會非常好。 如果您從一個完全空白的狀態開始並創建自己的主題，請務必使用媒體查詢來建立設計邊界，並一次通過一個元素來思考元素。
問問自己圖像應該如何縮放，導航應該是什麼樣子，以及是否有任何內容會隱藏在移動設備上。 以下是一些可以幫助您的教程：
- 如何在 WordPress 中創建響應式導航菜單
- 響應式網頁設計的 7 個最佳實踐技巧
- 在 WordPress 中使用響應式圖像
4.使用響應式插件
插件將功能添加到您的 WordPress 網站，因此它們並不總是在前端添加任何視覺上的東西。 但是，如果他們確實向您的網站添加了物理元素（如小部件或 CTA 按鈕），請確保它在所有屏幕尺寸上都能很好地縮放，或者至少讓您可以選擇在較小的屏幕尺寸上禁用它。
例如，側邊欄小部件是桌面網站的絕佳補充，但如果它主導移動設計或不按比例縮小，則不會帶來非常好的用戶體驗。
像主題一樣，只需注意插件的功能，並在購買前嘗試閱讀評論或找到演示。 並且每當您激活新插件時，請記住對您的網站進行快速質量檢查，以確保其在屏幕尺寸上正確縮放。
只要您擁有在移動設備上表現良好的響應式主題和插件，您的網站就會非常適合在較小的屏幕上顯示。
5.避免在移動設備上添加彈窗
如果您嘗試使用 WordPress 網站構建電子郵件列表，我猜您的網站上有多種選擇加入。 大多數電子郵件選擇加入表單在移動設備上運行良好（假設它們可擴展且易於使用）。
然而，彈出窗口是另一種野獸。 谷歌已經開始懲罰帶有侵入性插頁式廣告的網站，即覆蓋網站內容的選擇加入。 這包括彈出窗口（無論是立即顯示還是在用戶訪問網站一段時間後顯示）以及用戶在訪問頁面內容之前必須關閉的任何其他類型的選擇加入。 您可以在此處閱讀有關 Google 對此事的所有立場。
為了讓您的 WordPress 網站保持移動友好並遵循最佳實踐，請避免在您的移動設計中出現彈出窗口。 您如何進行這將取決於為您的選擇提供支持的服務，但大多數提供商應該可以選擇禁用移動設備上的侵入性彈出窗口。
6. 為響應式媒體制定策略
無論您使用的是投資組合網站、每日博客還是電子商務網站，響應難題的一個重要部分是考慮您網站上的媒體。 您主頁上的大背景圖片在台式機上可能看起來很棒，但如果它不能正確縮放，它可能會丟失所有上下文並導致在手機上的觀看體驗困難。 那麼響應式媒體的第一條規則是什麼？ 想想事情是如何擴展的。
如果縮放實際上不是您網站的最佳解決方案，您還可以考慮在移動設備上加載您的網站時隱藏某些元素。 這將有助於簡化體驗並讓用戶更快地訪問最重要的內容。
最後，您還需要記住您網站上包含的媒體的文件大小。 這不僅會改善移動體驗，還會改善桌面加載時間！ 媒體文件通常是網站上最大的文件，這使得它們成為加載欄和等待時間長的原因。 為了幫助簡化您的網站並提高移動性能，請嘗試通過使用盡可能小的文件大小來優化您的圖像，同時仍然保持您需要的質量。 （例如，您的移動網站可能會加載比桌面更小的圖像版本！）
7. 優先考慮網站性能
長期以來，就您的網站在 Google 桌面搜索中的排名而言，頁面速度一直很重要，但截至 2018 年 7 月，移動排名現在也是如此。 再加上上面的統計數據，超過 60% 的互聯網搜索使用移動設備，您的網站性能（在每台設備上）現在比以往任何時候都更加重要。
圖像是性能等式的重要組成部分，但您的代碼和 WordPress 主機也起著重要作用。
當涉及到您的代碼時，請考慮諸如縮小之類的操作（尤其是在使用自定義主題時）。 清點您網站上安裝的所有插件，並停用和卸載不再需要的任何插件。 基本上，您將網站的元素保持得越有條理，您的生活就會越好。
至於您的 WordPress 主機，請確保您使用的是優質合作夥伴，其中包括緩存技術、CDN 等服務，以及由谷歌云平台等可靠提供商提供支持的基礎設施。 如果您在 Flywheel 上託管您的網站，那麼您將處於所有這些領域。 此外，我們甚至還提供了 Performance Insights 插件，可幫助您在故障排除方面更進一步，以確保您的網站在每台設備上都處於最佳狀態。
隨著越來越多的人使用他們的智能手機或平板電腦訪問互聯網，網站設計師必須調整以解決這些使用模式。 那麼，您的網站準備好迎接您的移動訪問者了嗎？ 您必須更改網站的哪些方面？ 您使用什麼工具來創建響應式設計？ 在評論中分享您的經驗！
訪問 30 多個高級（並且適合移動設備！）StudioPress 主題
通過使用 Flywheel 託管並訪問 StudioPress 主題和 Genesis 框架，為自己節省一些時間（和金錢！）。 主題完全響應且易於定制，在嘗試構建適合移動設備的網站時節省您的時間。 此外，Flywheel 強大的平台將使您網站的性能保持飛速發展，幫助這些頁面速度保持快速並讓您的網站排名良好。
本文最初發表於 22-17-2017。 上次更新時間為 2020 年 10 月 2 日。