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

1. 為什么移動友好型網(wǎng)站很重要？

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

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

這意味著，如果您的網(wǎng)站在移動設(shè)備上閱讀效果良好，那么它在搜索結(jié)果中的表現(xiàn)將優(yōu)于那些在移動設(shè)備上閱讀效果不佳的網(wǎng)站。如果您已經(jīng)努力創(chuàng)建了一個適合移動設(shè)備的網(wǎng)站，那么這是一個相當(dāng)不錯的優(yōu)勢！但如果您的網(wǎng)站不能很好地適應(yīng)在較小的屏幕上顯示，它也會損害您的網(wǎng)站流量。

幸運的是，如果您的 WordPress 網(wǎng)站還不適合移動設(shè)備，那么有很多工具可以幫助您快速上手并構(gòu)建功能齊全、響應(yīng)迅速的網(wǎng)站。第一步？對您當(dāng)前的設(shè)計進行基準(zhǔn)測試。

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

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

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

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

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

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

3. 為什么要使用（或創(chuàng)建）響應(yīng)式 WordPress 主題

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

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

如果更新不起作用，那么可能是時候?qū)ふ倚轮黝}或考慮創(chuàng)建自己的主題了。讓我們探索這兩個選項。

最適合移動設(shè)備的 WordPress 主題

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

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

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

如何創(chuàng)建自己的響應(yīng)式 WordPress 主題

如果您寧愿采用 DIY 方式來創(chuàng)建適合移動設(shè)備的網(wǎng)站，請務(wù)必從頭開始或在測試環(huán)境中開始 – 您絕不應(yīng)該在實時網(wǎng)站上進行如此大的更改。

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

還有一項名為“實時鏈接”的功能，可生成本地網(wǎng)站的可共享 URL。這樣您就可以將其發(fā)送給客戶或?qū)⑵淅绞謾C上，這樣您就可以輕松測試網(wǎng)站在移動設(shè)備上的外觀。

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

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

• 如何在 WordPress 中創(chuàng)建響應(yīng)式導(dǎo)航菜單
• 響應(yīng)式網(wǎng)頁設(shè)計的 7 個最佳實踐技巧

4. 為什么要使用響應(yīng)式插件

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

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

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

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

5. 避免移動設(shè)備彈出窗口

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

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

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

6. 制定響應(yīng)式媒體策略

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

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

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

媒體文件通常是網(wǎng)站上最大的文件之一，這往往是導(dǎo)致等待時間過長的罪魁禍?zhǔn)住榱藥椭喕木W(wǎng)站并提高移動性能，請嘗試使用盡可能最小的文件大小來優(yōu)化您的圖片，同時仍保持所需的質(zhì)量。（例如，您的移動網(wǎng)站加載的圖片版本可能比桌面版小！）

7. 優(yōu)先考慮網(wǎng)站性能

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

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

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