4.「傳統 RWD」與「行動優先優化」深度戰略對比

在規劃 WordPress 網站時，理解這兩者的差異，是提升轉單率的關鍵第一步。

※ 註：行動優先優化不僅是技術調整，更是為了在碎片化時間內抓住使用者注意力的商務戰略。

在實務操作中，WordPress 桌機版與手機版分開設計，並不代表要做兩個網站，

而是透過正確的 WordPress 響應式設定，讓不同裝置看到最適合的版面配置。

對於行銷型首頁、商品推薦區或形象主視覺區塊來說，單純依賴預設 RWD（響應式網站設計）往往不足。

透過適當的 WordPress 行動版設計調整，可以有效提升閱讀流暢度與轉換率。以下介紹兩種常見且穩定的做法。

方法一：建立兩組區塊（使用 WPBakery）

這是最直觀、也最容易控制的方式，適合需要針對手機端重新排版的情境。

做法說明：

1. 在 WordPress 編輯頁面中建立「桌機版區塊」。
2. 複製一份內容，改為「手機版區塊」。
3. 針對手機版重新排列圖文順序或精簡內容。
   
   
   
   
4. 分別設定顯示條件：

   如果網站使用 WPBakery Page Builder，可以透過內建的 Responsive Options 進行控制：

   • 編輯 Row 或 Column。
   • 進入「Responsive Options」頁籤。
   • 設定「Hide on Desktop」或「Hide on Mobile」。

注意：部分主題的 CSS 斷點可能與 WPBakery 預設不同，若出現手機隱藏失效的情況，需補充 CSS 修正。

這種做法適合：

• 首頁行銷區塊
• 商品推薦模組
• 圖文左右分欄版型

優點：排版自由度極高，桌機與手機可以各自最佳化；

缺點：後台維護時需同步更新兩組內容。

方法二：使用 CSS 精準控制顯示

當需要更精準的控制時，可以透過自訂 CSS 進行顯示條件設定，這也是開發者最推薦的穩定做法。

操作範例：

1. 為桌機專用區塊加入 CSS Class：desktop-only
2. 為手機專用區塊加入 CSS Class：mobile-only
3. 在 CSS 中設定對應規則：

/* 桌機版顯示，手機版隱藏 */
@media (max-width: 767px) {
    .desktop-only { display: none !important; }
}

/* 手機版顯示，桌機版隱藏 */
@media (min-width: 768px) {
    .mobile-only { display: none !important; }
}

CSS 控制的優點：

• 控制極為精準，不受主題內建斷點限制。
• 載入邏輯清晰，適合進階 WordPress 行動版設計優化。

對於重視版面細節與轉換率的網站來說，

WordPress 桌機版與手機版分開設計並非複雜技術，

而是響應式網站設計中的進階應用。

透過正確的優化策略，可以在不同裝置上提供更貼近使用者行為的瀏覽體驗。

在實際操作 WordPress 網站時，很多人會遇到一個常見問題：

明明在 WPBakery 勾選了「Hide on Mobile」，手機版卻還是顯示。

這也是許多人搜尋 WPBakery 手機隱藏、WPBakery Hide on Mobile 無效 或 WordPress 手機隱藏失效 的主要原因。

以下將說明問題成因與正確解法。

1. 為什麼勾選隱藏卻還會顯示？

在 WPBakery 中，當你勾選「Hide on Mobile」時，

系統其實只是幫該區塊加上類似 vc_hidden-xs 或 vc_hidden-sm 的 Class，

這些 Class 本身並不會自動生效，而是需要對應的 CSS 規則來控制顯示。

如果網站主題發生以下情況，就會出現「設定隱藏卻仍然顯示」的困擾：

• 沒有載入對應的 Bootstrap 隱藏規則。
• 使用不同版本的 Bootstrap。
• 規則被其他主題 CSS 強制覆蓋。

問題通常不在 WPBakery 本身，而在於主題的斷點（Breakpoint）與樣式設定不相容。

2. Bootstrap 斷點差異說明

WPBakery 早期是基於 Bootstrap 3 的斷點設計：

• xs：小於 768px
• sm：768px ～ 991px
• md：992px 以上

但現在許多 WordPress 主題已改用 Bootstrap 4 / 5、自訂斷點（例如 1024px）或完全客製的 RWD 架構。

當主題斷點與 WPBakery 預設不一致時，

.vc_hidden-xs 與 .vc_hidden-sm 可能根本沒有對應的 display: none 規則，導致隱藏失效。

3. 正確 CSS 補強方式

若出現 WPBakery 手機隱藏無效的情況，可以透過補強 CSS 來解決。

請前往 WordPress 後台：外觀 → 自訂 → 額外 CSS，加入以下程式碼：

/* 基本補強：強制隱藏 WPBakery 預設隱藏類別 */
@media (max-width: 991px) {
    .vc_hidden-sm,
    .vc_hidden-xs {
        display: none !important;
    }
}

如果設定後仍被主題覆蓋，可以使用更嚴格的選擇器來確保生效：

/* 進階補強：確保手機版完全不佔空間 */
@media (max-width: 991px) {
    .vc_hidden-sm,
    .vc_hidden-xs,
    .desktop-only {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

透過以上補強，即可確保：

• 桌機版維持正常顯示。
• 手機版確實隱藏指定區塊，不產生空白間距。
• 樣式穩定生效，不受主題更新影響。

WPBakery 手機隱藏設定失效並不是操作錯誤，而多半與主題斷點差異有關，

只要理解 Bootstrap 斷點邏輯並適當補強 CSS，就能徹底解決 WordPress 手機隱藏失效的問題。

在進行 WordPress 手機版設計時，很多人最擔心的問題是：

這樣分開設計桌機與手機版，會不會影響搜尋排名？

從 WordPress SEO 優化 的角度來看，只要做法正確，不但不會扣分，反而能提升整體表現。

關鍵在於理解 Google 的 行動優先索引（Mobile First Index） 與正確的手機版 SEO 設定。

1. 這樣做會影響排名嗎？

正常的響應式優化不會影響排名。

Google 早已全面採用「行動優先索引」，也就是：

• 搜尋引擎主要以手機版內容作為排名依據
• 桌機版僅作為輔助參考

因此，WordPress 手機版優化如果做到結構清晰、載入速度更快、內容重點更明確，其實有助於提升 SEO 表現，而不是降低排名。

真正會影響排名的情況，是手機版內容被過度刪減，導致與桌機版差異過大。

2. Google 如何判斷行動版內容？

Google 透過行動裝置的 User-Agent 模擬來抓取網站內容，重點包括：

• 手機版是否能正常讀取文字內容
• 手機版是否隱藏重要段落
• 結構化資料是否完整
• 行動版是否有可點擊元素問題

因此，在做 WordPress 手機版 SEO 設定時，

建議：主要關鍵內容（H1、內文、關鍵段落）保留，不要只在桌機版顯示重要資訊，

圖片與按鈕可依裝置優化，但主題內容需一致。

只要手機版仍包含核心內容，Google 不會因為版面重排而給予負面評價。

3. 什麼情況會被判定為 Cloaking？

Cloaking（障眼法）指的是：對搜尋引擎顯示一種內容，對使用者顯示完全不同內容，這是違反搜尋規範的行為。

以下情況可能被視為 Cloaking：

• 桌機版有完整關鍵字內容，手機版全部刪除
• 搜尋引擎看到長文，使用者只看到簡短段落
• 行動版刻意隱藏商業資訊但對搜尋引擎顯示

但正常的 WordPress 響應式設計與手機版排版優化，並不屬於 Cloaking。

只要內容主題一致、核心資訊未刻意隱藏、手機版仍能讀取完整重點，就屬於合理的手機版 SEO 優化行為。

在行動優先索引時代，WordPress 手機版優化已成為 SEO 的基礎條件，

與其擔心分開設計會影響排名，不如確保手機版具備清楚的結構、完整的內容與良好的使用體驗。