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

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

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

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

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

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

2. 如何測(cè)試 WordPress 的移動(dòng)友好性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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