編輯行動裝置版本

WordPress 網站使用版面自動調整設計，沒有個別的行動裝置版本可供編輯。在這份指引中，你會了解如何使用區塊設定和 CSS 自訂內容在行動裝置的顯示方式。

「導覽」區塊包含行動裝置選單按鈕 (稱為「漢堡」圖示) 的設定。若要在行動裝置上自訂選單：

1. 從網站的儀表板前往「外觀」→「編輯器」。
2. 選取內含導覽選單的「範本」或「範本組件」。
3. 開啟「清單檢視」並選取「導覽」區塊。
4. 在區塊設定側邊欄中，按一下設定圖示 (齒輪圖示)。

5. 在「顯示」 區段：
   • 切換「顯示」圖示按鈕，即可使用漢堡圖示或顯示「選單」文字。
   • 選擇圖示樣式 (兩行或三行)，並使用「覆疊選單」設定來選取漢堡圖示的出現時機。

深入了解如何編輯網站選單的樣式。

部分版面配置區塊可讓你控制是否在行動裝置螢幕垂直堆疊顯示內容。根據預設，WordPress 在較小的螢幕會自動並排堆疊顯示內容，讓讀者能夠輕鬆閱讀內容。

若要調整堆疊顯示行為，請按照下列步驟操作：

1. 從網站的儀表板前往「外觀」→「編輯器」。
2. 編輯內含要調整區塊的頁面或範本。
3. 開啟「清單檢視」並選取區塊。
4. 在區塊設定中，將「在行動裝置堆疊顯示」切換為開啟或關閉。

使用「在行動裝置堆疊顯示」設定的區塊：

• 欄
• 媒體及文字
• 最新 Instagram 貼文

比起強制將按鈕和選單以單行顯示，將這些內容以多行顯示，讓讀者能在行動裝置更輕鬆閱讀。依預設，會關閉多行換行設定。

若要啟用換行設定，請依照下列步驟操作：

1. 從網站的儀表板前往「外觀」→「編輯器」。
2. 編輯內含要調整區塊的頁面或範本。
3. 開啟「清單檢視」並選取區塊。
4. 在區塊設定中，切換「允許多行換行」。

使用「允許多行換行」設定的區塊：

• 按鈕
• 分享按鈕
• 導覽
• 社交網路服務圖示
• 留言數
• 列和堆疊

以像素 (px) 為單位的文字會固定為單一大小。以 em 或 rem 為單位的文字，會根據訪客的設定和螢幕大小進行調整，讓讀者能更容易瀏覽網站，在不同的裝置也能輕鬆閱讀。

若要將文字從像素變更為相對單位，請依照下列步驟操作：

1. 按一下區塊，該區塊內含你要調整大小的文字。
2. 在區塊設定中，找到「文字設計」區段。
3. 在「字型大小」下，按一下自訂大小圖示 (兩條水平線，線上有圓點)。
4. 按一下 px 單位，將其變更為 em 或 rem。
5. 輸入數值並視需要調整。

在 em 和 rem 之間選擇：

• em — 文字會相對於其容器縮放 (適用於註解、標籤或特定區塊內的文字)
• rem — 文字在整個網站中保持一致 (適用於內文、標題和按鈕)

你也可以自訂整個網站的字型大小，而非調整個別區塊。

本節指引適用於使用 WordPress.com 進階版、商用版和電子商務版方案，以及舊版專業版方案的網站。若是採用免費或個人版方案的網站，只要升級方案，即可存取此功能。

你可以使用 CSS 類別，來隱藏桌上型電腦或行動裝置上的特定區塊。此設定的步驟如下：

1. 編輯頁面、文章或範本，內含你要隱藏的區塊。
2. 在清單檢視中按一下或選取區塊，即可選取區塊。
3. 在區塊設定中，按一下「進階」。
4. 在「其他 CSS 類別」方塊中，輸入 hide-desktop 或 hide-mobile：

5. 瀏覽至網站的自訂 CSS 設定：
   • 區塊佈景主題：外觀 → 編輯器 → 樣式→ ⋮ → 其他 CSS
   • 傳統佈景主題：外觀 → 自訂 → 其他 CSS
6. 貼上下列程式碼，然後按一下「儲存」：

/* 在行動裝置上隱藏元素*/
@媒體 (最大寬度：768px) {
 .hide-mobile { display: none !important; }
}
 /*在桌上型電腦上隱藏元素*/
@媒體 (最小寬度：769px) {
 .hide-desktop { display: none !important; }
}

將 CSS 程式碼新增到網站一次。之後，你就可以將 hide-mobile 或 hide-desktop 類別新增到任何區塊，CSS 就會在指定的裝置自動將其隱藏。