如何使 WordPress 網站移動響應
已發表: 2023-02-12由於大量用戶主要在移動設備上瀏覽，因此響應式網站現已成為行業標準。 為了說明這種影響有多深，谷歌等行業巨頭現在在搜索排名中獎勵適合移動設備的網站，以幫助推動更多網站迎合非桌面設備的需求。
簡而言之，響應式網站在所有平台上使用相同的站點代碼，但無論查看媒體如何，都會為每種體驗提供優化。 因此，建立一個響應式網站可能意味著重建你的整個設計，或者只是對你現有的網站做一些調整。
在本文中，您將了解如何使用響應式設計使 WordPress 網站適合移動設備。 我們還將解釋響應能力對搜索引擎優化 (SEO) 的重要性。 讓我們開始吧！
WordPress 對移動設備友好嗎？
WordPress 是一個內容管理系統 (CMS)，可讓您設計網站的前端以滿足您的具體要求。 這意味著它可以很容易地變得適合移動設備。
自 2011 年以來，響應式默認主題已經可用。許多第三方主題現在也提供開箱即用的響應式設計。 那些沒有的通常在許多其他領域已經過時。
什麼是響應式設計？
讓我們介紹響應式設計將如何應用於您的 WordPress 網站。 響應式設計是一種組織網站內容的方式，因此它可以動態響應其顯示的屏幕大小。 這意味著在智能手機上的用戶體驗與在筆記本電腦上一樣好。
為了實現這種跨設備的出色體驗，設計人員將通過站點的 CSS 創建流暢的內容網格並將靈活性編碼到圖像中，以便重新排列 HTML 以直接響應屏幕的大小和分辨率。
如果您想要一個很好的示例，請在新窗口中打開 Mashable.com（假設您還沒有使用移動設備）。 到達那里後，調整瀏覽器窗口的大小，使其越來越小，然後觀察網站如何相應地重新排列自身
當您縮小窗口時，圖片和內容塊會根據設計者創建的流動網格競相適應越來越小的窗口。 在最小的情況下，您只剩下 Mashable 網站在 iPhone 上的樣子。 它很漂亮，也很容易閱讀。 再次打開窗口，他們的反應是跑回他們的“桌面”配置。
該網站會自行重新排列，因為有 CSS 媒體查詢會根據正在查看該網站的設備（在本例中為瀏覽器窗口）的大小對頁面應用不同的規則。 HTML 保持不變，只是由 CSS 重新排列。 CSS 規則可用於重新排列網站上的所有內容，包括根據設備的分辨率提供各種尺寸的圖像。 當您想專門為 iOS 設備提供視網膜增強圖像時，這真的很酷。
移動應用程序與響應式網站
選擇應用程序還是響應式網站歸結為網站目的。 大多數網站都可以適應可適應設備的響應式設計。 當您的用戶想要在他們的移動設備上使用與完整網站提供的不同的非常特定的功能時，移動應用程序就會發揮作用。 您的銀行可能會提供移動應用程序，因此您可以在星巴克排隊快速查看餘額。 Facebook 和 Twitter 還調整了其應用程序中的功能以適應移動設備的使用。
僅當您的用戶需要手機的一組特定功能，而不是他們需要您的主網站的功能時，才需要考慮使用本機應用程序。
響應式站點的性能注意事項
響應式設計會影響您網站的整體性能。 從後端處理的角度來看，加載大量 CSS 和各種尺寸的圖像以響應設備尺寸可能代價高昂。 作為評估響應式設計的一部分，將性能作為一項功能進行優先排序非常重要。 用戶仍然希望移動網站速度慢一點，但如果他們試圖打開您的網站給朋友或他們的約會對像看，他們不會原諒他們，而且他們不得不等待幾秒鐘以上。
從技術角度來看，將您的網站交付到使用蜂窩數據的移動設備時，您從一開始就會有 0.5 秒的障礙。 例如，在最佳條件下，在 4G 上獲取 40KB 需要 700 毫秒。 網絡延遲和情況變化只會增加您的加載時間。 您無法控制蜂窩網絡變量，因此從一開始就以性能作為一項功能來構建響應式站點至關重要。
確保您已完成以下操作以確保您的網站針對移動設備進行了優化。
- 優化您的圖像：自動檢測設備的屏幕尺寸以創建、緩存和交付正確的圖像尺寸。
- 減少 HTTP 請求：盡量減少需要使用的 CSS 和 JavaScript 的數量，然後緩存其他所有內容。
- 有條件地加載資產：大型社交媒體按鈕、圖像等非常適合大型設備，但不會影響小型設備的用戶體驗。 計劃您的設計以僅加載絕對必要的內容。
- 延遲加載：如果你可以在最重要的頁面元素之後加載某些資產，尤其是 JavaScript，那就去做吧。 當您的用戶首先使用了他們想要的內容時，其他資產就會加載。
您的 WordPress 網站需要響應嗎？
越來越多，這個問題的默認答案是肯定的，特別是響應式 WordPress 主題的廣泛可用性。 如果您的網站準備重新設計，或正在設計中，那麼無論用戶使用何種設備，都必須為他們提供高質量的體驗。
考慮到這一點，我將提出一些問題來問你自己和你的團隊，以評估你的 WordPress 是否應該設計為響應式的。
- 您網站的用例是什麼？ 移動消費會很重要嗎？ 很有可能，這個問題的答案是“是的，而且每年都在增加”。 會有例外，但不會很多。
- 誰是你的用戶？ 他們的技術越多，越前沿，他們就越有可能期望為他們關聯的每個品牌提供一個響應式網站。
- 你有預算嗎？ 這是一個很大的。 響應式站點最初的構建成本要高一些，但構建單個響應式站點比計劃構建站點的兩個獨立版本，然後管理兩個版本的維護要便宜。
- 你準備好學習一種新型的設計了嗎？ 響應式設計引入了許多新概念和理解數字內容的方法。 與一個不僅能設計出漂亮的東西，還能一路教育你的設計團隊合作是很重要的。
創建響應式 WordPress 網頁設計
現有的靜態設計通常可以轉換為響應式主題。 以下是整個轉換過程中需要考慮的一些要素：
- 默認瀏覽器縮放
- 流體元素寬度和高度
- 圖片優化
- 特定於設計的斷點
- 移動設備的獨立響應式菜單
您還應該在多個設備上測試更新的設計，並在測試中考慮額外的元素，例如響應表。 然而，讓 WordPress 響應的最簡單方法是從一開始就選擇一個預構建的響應主題。
選擇合適的 WordPress 主題
在您開始搜索今天可用的 10,000 多個 WordPress 主題之前，最好先列出您希望您的站點具有的功能並將該列表用作起點。
如果您不確定要尋找的功能類型，可以堅持使用一些基準來幫助您縮小範圍：搜索引擎優化 (SEO) 和快速頁面加載時間（無論設備如何）是任何主題都應該有兩件事。
雖然有很多 WordPress 主題沒有內置此功能，但使用具有這兩種功能的主題將為您的網站帶來更好的最終用戶體驗。
例如，WP Engine 的高級 WordPress 主題套件都是針對搜索引擎優化和移動響應的，這意味著它們都可以在任何設備上快速加載。 這些漂亮的主題適用於各種用例，各種類型和規模的企業都在使用它們來提升他們的在線形象。
每個 WP Engine 計劃還包括對這些主題的訪問，這意味著 WP Engine 客戶可以免費使用所有這些主題。
移動 WordPress 插件
移動電話為諸如推送通知和在慢速連接上持續加載等功能開闢了很多潛力。 然而，雖然有一些解決方案可以幫助您將網站轉變為移動網絡應用程序並將移動友好概念提升到一個新的水平，但許多解決方案仍處於開發和測試階段。
這意味著您可能缺少某些您期望的功能。 但是，有許多移動 WordPress 插件可以幫助您以各種方式改進您的網站。
1.噴氣背包
雖然有許多可用的解決方案，但 Jetpack 插件是一個非常受歡迎的選項。 您可以在插件目錄中找到它，但它也有用於在您的站點上創建簡單移動主題的選項。
Jetpack 最好的優點之一就是它維護得很好。 這意味著將經常更新以確保其安全性和功能性。 它也是您能找到的功能最豐富的工具之一。 基本插件是免費的，並且有很多選項。 缺點是功能太多，界面一開始可能看起來很混亂。
此外，如果您想要每日備份、自定義主題和 SEO 工具，則需要購買 Jetpack 的高級版本。 根據您的需要，您可以獲得個人使用的高級插件，每年 39 美元，頂級插件每年 299 美元。
2.WP觸摸
此外，您可以探索 WPtouch，這是一個流行的插件，可以從您現有的網站創建移動網站。 使用此插件的主要好處之一是您可以自定義移動版本，而無需中斷或更改您的原始網站。
免費版也有相當強大的功能。 但是，如果您正在尋找不同的外觀和感覺，則必須購買專業版。 專業版定價計劃起價為每年 79 美元，企業級許可最高可達每年 359 美元。
3. WordPress 手機包
雖然 WordPress Mobile Pack 尚未使用最新版本的 WordPress 進行測試，但它是一個用於從現有網站創建漸進式 Web 應用程序 (PWA) 的流行插件。 這意味著您網站的用戶將獲得“類似應用程序”的體驗，而無需您投入資源為應用程序商店編寫可下載的應用程序。
使用此插件，您將能夠向用戶推送橫幅消息，提醒他們將您的網站添加到他們的主屏幕的選項。 然後您的頁面將非常快速地緩存和加載。 此插件的基本功能是免費的，但您必須購買專業版才能訪問更多主題、自定義選項以及同步某些內容的能力。
該插件的專業版有三個層級可供選擇。 Freelancer 套餐起價為每年 99 美元，可用於三個域。 價格等級最高的是 VIP 選項，10 個域許可證每年 499 美元。
響應圖像
自 4.4 版以來，WordPress 默認提供特色響應式圖像。 但是，特別是對於使用舊代碼的網站，您可以將一個簡單的片段添加到樣式表中，以確保圖像在小型設備上看起來永遠不會太大：
img {
max-width: 100%;
height: auto;
}
雖然有很多方法可以確保最佳的響應式圖像性能，但此代碼段可確保您的所有圖像都響應式作為基準。
最後，大多數圖像都適合包含在響應式站點中，儘管可擴展性應該是一個因素。 例如，如果您包含一張包含大量文字的圖片，則可能難以在移動設備上閱讀。 在這種情況下，您最好選擇不同的圖像，或者提供一種獨立於圖像閱讀文本的方式。
響應式菜單
關於響應式菜單的創建，有兩種主要的思想流派：
- 製作適用於所有尺寸的菜單。
- 創建兩個菜單：一個用於大屏幕，一個用於小屏幕體驗。 一次只會顯示一個，具體取決於所使用的屏幕尺寸。
一刀切的方法最適合較小的菜單，因為為移動可讀性優化 CSS 只需要一些簡單的調整。 在這種情況下，無論設備大小如何，菜單始終對用戶可見。
但是，如果菜單太大而無法在移動設備上輕鬆縮小，您可能需要第二個專用於較小屏幕的版本。 在這種情況下，大菜單僅在大屏幕上可見，而移動菜單圖標則出現在小屏幕上。
這種方法的一個典型例子是漢堡包菜單圖標，當點擊它時，它會將完整的移動菜單滑入視圖。 您還可以使用 WordPress 的各種插件來幫助您創建響應式菜單。 讓我們看看三個選項。
1.優步菜單
您可以嘗試的一個選項是 UberMenu。 只需 25 美元，您就可以獲得未來的更新和六個月的支持。 UberMenu 可以幫助您創建完全響應、觸摸友好的菜單。 不幸的是，除非您的主題是特定於 UberMenu 的，否則您可能必須進行一些手動更改才能使您的主題正常工作。
2. Max Mega 菜單
另一個選擇是 Max Mega Menu 插件。 此工具在 WordPress 插件目錄中有一個免費選項，可與您現有的菜單一起使用，將它們轉換為“大型”菜單：
免費版還具有許多移動菜單功能，例如對觸摸屏的原生支持。 要訪問更多字體和移動切換選項，您需要查看三個定價層之一。 該插件的高級版起價為每年 29 美元，多站點許可的價格最高為每年 99 美元。
3.響應式菜單
另一個評價良好且流行的插件是響應式菜單插件，您可以查看它以使菜單對移動設備友好。 該解決方案有超過 150 個不同的自定義選項，所有選項都在一個易於使用的界面中。
您可以從插件設置頁面靈活地更改菜單的幾乎每個方面。 但是，如果您正在尋找動畫和更多字體，則必須查看響應式菜單插件升級。
該插件的免費版本可能會帶來您需要的功能，因為選項列表非常廣泛。 如果升級，您可以獲得 29 美元的單站點許可證，或 99 美元的無限制許可證。 插件費用是一次性費用，您將獲得終身免費更新。
響應表
默認情況下，表格佔用與其內容一樣多的空間（或更多）。 這可能會導致超寬的表格破壞移動佈局。
不幸的是，當縮小以適應移動頁面的寬度時，充滿內容的表格變得難以閱讀。 響應式設計並不僅僅是將數據壓縮到一個小屏幕上。 相反，它是關於使一切都對用戶友好，而不管設備如何。
對於快速而骯髒的解決方案，您可以使用此 CSS 代碼段為您的表格添加基本的響應能力：
table {
width: 100%;
border-collapse: collapse;
}
但是，您不必就此打住。 除非您有小表，否則我們建議根據它呈現的內容類型優化每個表。 根據表格中的數據，您可以選擇多種響應選項以獲得最佳可讀性。
但是，如果您正在尋找響應式表格的插件解決方案，那麼您很幸運！ 有多種選擇，但我們將特別推薦三種。
1. 平板按壓
首先，TablePress 插件是一個流行、維護良好且評價很高的選項。 您將能夠使用短代碼創建和嵌入漂亮的表格。 然而，為了實現真正的響應式表格，您需要安裝 TablePress 擴展。 雖然這些也是免費的，但建議您向開發人員捐款。
2. WP 表生成器
如果您正在尋找五星級的拖放式表格構建器選項，WP Table Builder 可能適合您。 一個有點新但很受歡迎的插件，它的拖放界面使您可以輕鬆地為您的網站創建響應式表格。
這也是一個完全免費的插件。 這個選項唯一真正的缺點是它目前只有五個數據選項。 您在某種程度上受限於文本、圖像、按鈕、列表和星級。
3.wpDataTables
我們推薦檢查的第三個插件是 wpDataTables。 使用此工具，您可以從現有的 Excel、CSV、PHP 或其他數據快速創建表格和圖表。 這意味著您可以獲取大量數據集並在您的網站上訪問它們。
該插件還支持 Gutenberg，一旦您在插件設置中對其進行了自定義，就可以輕而易舉地將表格添加到您網站的頁面和帖子中。 但是，您會受到此插件的免費版本的限制。
例如，除非升級，否則您將無法製作基於 MSQL 查詢的表格或從 Google 電子表格中提取信息。 高級版的基本定價層起價為每年 59 美元，開發包的最高價為每年 249 美元。
添加多語言功能
隨著 WordPress 在世界範圍內的採用率持續上升，它引發了對多語言功能的日益增長的需求，它允許根據用戶的位置將網站翻譯成當地語言。
這種類型的功能對於在多個國家/地區擁有客戶的企業來說意義重大，而使用 WordPress，將其添加到您的網站並不像您想像的那麼具有挑戰性。 事實上，它可以通過安裝 Weglot 等插件來實現，它可以讓您在幾分鐘內讓您的網站成為多語種——無需代碼。
Weglot 還與所有 WordPress 主題和插件兼容，這意味著它適用於您最終使用的任何主題，並且不會導致您的其他插件出現問題。 當添加到 WP Engine 的高級 WordPress 主題之一時，Weglot 可幫助網站所有者構建一個 SEO 友好的移動響應網站，可以用任何語言訪問。
查看本指南以了解更多信息，並訪問 WP Engine 以了解我們的不同計劃以及我們的 WordPress 數字體驗平台附帶的其他特性和功能。
SEO 的移動響應能力
簡而言之，適合移動設備的網站會在自然搜索結果中受到 Google 的獎勵。 2015 年至 2016 年間，排名算法進行了多次更新以支持響應式網站。 值得注意的是，由於速度對移動用戶的用戶友好性起著巨大的作用，這也有助於提高搜索引擎排名。
當然，快速加載的響應式網站依靠一流的託管才能取得成功。 當您選擇 WP Engine 等優質託管公司時（我們提供標準的 PHP 7 和更高級別計劃的免費內容交付網絡），您會發現加載時間更快，操作更流暢。
使用 WP Engine 進行響應式構建
在我們依賴移動的世界中，致力於響應式網站應該是一個優先事項。 有很多東西需要跟踪，但在 WP Engine，我們可以幫助您找到最好的 WordPress 開發人員資源和適用於移動用戶的高響應主題。
此外，我們為您的網站提供多種計劃和解決方案。 我們將幫助您在我們的數字體驗平台上進行響應式構建，您不必擔心因為屏幕尺寸而失去訪客！