方便行動裝置瀏覽你的網站

你知道嗎？超過半數的網站訪客，其實都是使用手機或平板電腦來瀏覽網站。本指引將詳細說明每個必要步驟，像是如何微調內容以及選取能隨版面自動調整的佈景主題，幫助你為各式螢幕尺寸的使用者提供流暢體驗。

為 WordPress 網站選擇支援行動裝置的佈景主題，能有效為各種裝置的使用者提供頂級流暢體驗、提升使用便利度，使你的網站在搜尋引擎上名列前矛。

WordPress.com 上提供的所有佈景主題都能隨行動裝置自動調整版面，也就是說，無論使用行動裝置還是桌上型電腦，這些佈景主題都能在瀏覽器中完美呈現。

如果你使用第三方佈景主題，請確認是否標註支援行動裝置，並且實際用行動裝置開啟時，畫面也同樣美觀。請查看佈景主題的自訂選項或設定說明文件，了解如何控制該佈景主題在行動裝置上的外觀。

選好能隨行動裝置自動調整版面的佈景主題後，你應該會變更預設內容，使畫面更有個人風格。在 WordPress 編輯器上編輯網站時，請務必確定畫面能在所有裝置上順利呈現。

WordPress 不提供另外的「行動版編輯器」。你對網站做出的變更，會同時反映於行動裝置和桌上型電腦。只要你的網站套用支援行動裝置的佈景主題，則無論你做出什麼變更，內容都會自動適用於所有螢幕大小。這就是所謂的「版面自動調整」。

你可以按一下編輯器右上角的「預覽」圖示，了解訪客看到的網站樣貌。選取「行動裝置」或「平板電腦」，即可在編輯器中預覽內容的模擬情況：

之所以只顯示模擬情況，是因為編輯器檢視內的諸多元素，會隨網站佈景主題的設定而異。佈景主題的樣式不會顯示於編輯器內。唯有透過新分頁預覽頁面，或使用裝置瀏覽器檢視網站，系統才會顯示完整樣式狀態。如要檢視套用佈景主題樣式後的內容，請按一下「在新分頁中預覽」選項。

按一下「在新分頁中預覽」選項後，就能用瀏覽器內的檢查工具檢視行動版內容。如要使用瀏覽器的「檢查」模式，預覽頁面或文章在行動裝置檢視畫面中的呈現方式，請依下列步驟進行：

1. 按一下 WordPress 編輯器右上角的「預覽」圖示。
2. 選取「在新分頁中預覽」選項。
3. 在預覽頁面上按一下滑鼠右鍵，再按一下「檢查」(Chrome、Firefox、Edge) 或「檢查元素」(Safari)。
4. 在瀏覽器的「檢查」模式中，按一下行動裝置圖示，即可將預覽畫面切換成行動裝置檢視。

發表變更後，你不妨打開手機或平板電腦，以一般大眾的視角檢視網站，確定內容是否以理想方式呈現。

以下提供幾個秘訣，能幫助你將網站設計的版面自動調整功能發揮到淋漓盡致，確保內容能在行動裝置、平板電腦和桌上型電腦上流暢呈現。

如果圖片在原始設計中包含文字，則較小的螢幕可能使文字遭到截斷，如圖所示：

之所以如此，是因為圖片設計內的文字並不會隨版面自動調整。

你可以使用 WordPress 編輯器，將文字寫在圖片上。用這種方式在圖片上新增的文字，就會隨版面自動調整。在下方影片中，我們用「封面」區塊重建與上方相同的圖片，示範該圖片在較小螢幕中的版面自動調整效果：

若要盡可能提升頁面中字型大小的版面自動調整效果，請用 em 或 rem 單位取代像素 (px)。如果你以像素設定字型大小，會使該字型大小以硬式編碼的方式寫入頁面，亦即字型會一律以設定的大小呈現，不會依螢幕大小而改變。反之，em 和 rem 的值屬於相對大小單位，會依檢視者畫面空白處的大小而變更。

不要使用行動裝置版面形式的文字選單；反之，請將網站的「導覽列」區塊自訂為顯示行動選單，也就是覆疊選單 (又稱「漢堡選單」或「烤肉串選單」)。這項功能可讓頁首更精簡，使用行動裝置時更容易檢視與使用選單。

有些區塊包含「在行動裝置上堆疊顯示」選項，以利充分運用小螢幕的空白區域。如果內容在桌上型電腦的畫面採取並排顯示，則該內容在小尺寸螢幕上，則會採覆疊顯示，方便行動裝置檢視者閱讀。

下列區塊可使用「在行動裝置上堆疊顯示」設定：

• 「多重欄位」區塊
• 「媒體及文字」區塊
• 顯示 Instagram 貼文

允許按鈕和選單斷行，行動裝置使用者便能更容易閱讀。

下列區塊的版面形式設定可使用「允許斷行」選項：

• 「按鈕組」區塊
• 「分享按鈕」區塊
• 「導覽列」區塊
• 「社交網路服務圖示」區塊
• 「留言」區塊
• 「橫列排列」和「項目行」區塊

加速行動版網頁 (AMP) 是第三方開放原始碼架構，能讓所建置的網站以近乎即時的速度在行動裝置上載入，讓網站訪客享有迅速的瀏覽體驗。若要將 AMP 新增至網站，請安裝 AMP 外掛程式。若 WordPress.com 網站是在 2022 年 6 月 13 日前建置完成，且已啟用外掛程式，則系統會預設安裝 AMP 外掛程式。

請注意，為使網站迅速載入，AMP 會使行動裝置訪客無法使用網站上的許多功能 (包括版面形式等眾多功能)。因此，建議你在使用 AMP 時，採用與 AMP 相容的佈景主題。WordPress.com 的所有佈景主題皆可支援行動裝置，因此你無須採用 AMP，也可讓行動裝置使用者享有絕佳體驗。

如果你的網站出現顯示方面的問題，而你已安裝 AMP，建議你停用 AMP 外掛程式，看看網站效能是否因此提升。如果你的網站出現「離開行動裝置版本」選項，而你希望該選項不再顯示，也請停用 AMP 外掛程式。

如果你的網站已使用 AMP 一段時間，請記得 Google 不會立即更新結果，因此即便你已停用 AMP，AMP 頁面仍會顯示一陣子。停用 AMP 後，建議你設定頁面重新導向。搜尋引擎會為 AMP 頁面 URL 建立索引，而系統需要一段時間才能從清單中移除這些 URL。也就是說，有些行動裝置訪客可能會在這段期間看到 404 錯誤頁面。

你可以從這幾款熱門免費的重新導向外掛程式選用。你可以設定 301 重新導向，並設定與 /(.*)\/amp 類似的 Regex 表達式。不妨進行一些測試，確保重新導向設定正確，同時參閱重新導向外掛程式的說明指引。