Q2W3 Fixed Widget 教學：固定 WordPress 側邊欄

其實不少人都遇過這種狀況：讀者花三分鐘把你的長文從頭讀到尾，越讀越有共鳴，當他終於心動、想按下那顆「立即諮詢」按鈕的時候，按鈕已經被捲到螢幕外面了，側邊欄只剩下一片空白。他得反覆往上滑去找入口，很多人在這一步就放棄了。

這不是一個小問題。對一個靠內容導流的網站來說，這就是「讀者最有溫度的那一刻，剛好沒有行動入口」。而修好它的成本，其實低到出乎意料。

固定小工具能讓原本就存在的行動入口在捲動時保持可見，但是否增加詢問，仍要看按鈕文案、後續頁面與實際量測。它解決的是入口可見度，不保證轉換率一定上升。

快速重點整理：WordPress 側邊欄通常會跟頁面一起捲動。要讓特定區塊保持可見，可先用 CSS position: sticky 或主題／區塊建構器的原生功能；真的需要外掛時，再評估目前名為 Fixed Widget and Sticky Elements for WordPress 的工具。外掛官方頁面標示的測試版本落後於目前 WordPress 版本，上線前要在 staging 驗證相容性。

WordPress 是使用比例最高的內容管理系統，W3Techs 長期追蹤顯示其占全球網站四成以上（2026 年 6 月資料）。側邊欄固定可用 CSS、主題功能或外掛處理，應依目前版面選擇。

側邊欄為什麼會「跑掉」：先理解預設的捲動行為

在動手裝任何東西之前，先把機制講清楚，因為一旦你懂了原理，後面的設定與排查會全部豁然開朗。

一個典型的 WordPress 版面是兩欄或三欄：中間是主內容（文章），旁邊是側邊欄（小工具區）。這兩欄在 CSS 裡是並排的容器，各自有自己的高度。當你的文章很長、側邊欄只有幾個小工具時，側邊欄的總高度會遠小於主內容。

當讀者往下捲動，側邊欄底部的小工具很快就會被捲出視窗頂端，主內容繼續延伸，畫面右側則留下空白。這不是 bug，而是並排容器高度不同的正常結果。側邊欄管理方式可參考WordPress 區塊小工具與側邊欄設定教學。

換句話說，固定小工具（Fixed Widget，也有人叫 Sticky Widget、黏性小工具）要做的事就一件：偵測某個小工具即將被捲出視窗，然後把它的定位切換成 fixed 或 sticky，讓它黏在畫面上的某個位置（通常是頂部），直到主內容讀完、頁尾出現為止，再讓它跟著頁尾一起離開。整個過程讀者不需要做任何事，行動入口永遠在視線範圍內。

換個方式想。假設你開一家實體書店，最熱銷的那本書放在走道盡頭的收銀台旁邊，顧客挑選完畢、結帳前一定會經過它，順手就被帶走。固定小工具就是把你網站裡「最想被點的那個按鈕」搬到這條必經走道上，不管讀者滑到文章的哪一段，它都等在那裡。差別只在於：實體店是用動線引導，網站是用 CSS 定位實現。

理解了原理，你就會明白為什麼固定小工具不是萬能。如果一個網站的側邊欄本身就塞得很滿，把全部小工具都設成固定，反而會讓畫面右側變成一整排擠在一起的方塊，讀者根本分不清哪個才是要點的。固定是一種「注意力資源的分配」，把稀缺的視覺焦點留給真正重要的那一兩個入口，這才是它正確的使用方式。

固定小工具到底能幫你做什麼：三個高價值使用情境

固定小工具不是「把所有小工具都釘起來」那麼粗暴。釘太多反而會壓縮閱讀體驗、甚至造成版面擠壓。真正值得固定下來的，是那些「讀者在任何捲動位置都可能突然想做某個動作」的入口。實務上規劃網站時，通常只固定這三類：

情境一：主要 CTA 按鈕

這是最常見也最直接的應用。一顆「立即諮詢」「免費報價」「預約諮詢」的按鈕，固定在側邊欄頂端，讀者讀到哪裡都看得到。CTA 的設計本身是一門學問，按鈕的顏色、文案、位置都會決定它有沒有人點，你可以搭配CTA 行動呼籲按鈕設計指南一起調整，別只顧著「固定」卻忽略了按鈕本身的吸引力。

情境二：聯絡與即時客服入口

對服務型網站（律師事務所、診所、室內設計、補習班這類），讀者隨時可能想發問。把聯絡表單或 LINE 客服按鈕固定在側邊欄，能讓想發問的衝動不被摩擦力消磨掉。聯絡表單的建置可以參考Contact Form 7 完整教學，想在側邊欄放 LINE 浮動按鈕則可以看WordPress 加 LINE 浮動按鈕教學。如果你想更進一步理解「為什麼網站沒人詢問」這件事的全貌，這篇把網站變成自動接單機器的步驟拆解會給你完整的轉換漏斗視角。

情境三：電子報訂閱表單

讀者讀完內容後可能願意訂閱，但固定表單是否提高完成率要以實際數據驗證。表單串接與設計可參考電子報訂閱表單教學。

最新文章、分類連結、社群圖示是否需要固定，要看它們是不是當前頁面的主要行動入口。沒有明確用途的元素，不必長時間占用視覺空間。

判斷小工具是否值得固定，可以問兩件事：讀者捲動到一半時是否仍需要這個入口，以及它是否改善導覽或下一步行動。詢問、訂閱與購買按鈕可能直接對應商業目標；文章目錄則主要降低長文導覽成本，不一定直接帶來轉換。需要固定目錄時，可參考文章目錄與側邊欄設定教學，並在手機與長目錄情境實測。

Fixed Widget and Sticky Elements 外掛適合什麼情境

Fixed Widget and Sticky Elements for WordPress（舊稱 Q2W3 Fixed Widget）可把指定元素設為黏性顯示。不過官方外掛頁目前標示的「Tested up to」版本落後於現行 WordPress，不能直接視為預設必裝工具。若主題原生功能或 CSS 已能完成需求，通常不必增加這項相依。

它的工作原理是透過一小段 JavaScript，在讀者捲動頁面時持續計算每個被標記為「固定」的小工具位置。當某個小工具快要被捲出視窗頂端時，腳本會把它的定位切換成固定狀態，讓它黏在你指定的位置；當頁尾接近時，再讓它解除固定、自然地滑出畫面，避免蓋住頁尾的版權或聯絡資訊。

固定小工具和彈出視窗不同：前者隨捲動保持在版面內，後者會在特定時機覆蓋或插入內容。固定元素如果遮住文字或占用過多畫面，一樣可能妨礙閱讀。若要採用頂部通知列，可參考WordPress 通知列教學。

若仍要使用，先備份並在測試站確認目前 WordPress、主題、區塊小工具與快取設定都能正常運作，再決定是否上正式站。外掛選型可參考WordPress 外掛清單，但相容性要以目前官方頁面與自己的測試為準。

動手前的判斷：你真的需要裝外掛嗎

這一段值得多花些篇幅，因為很多教學一上來就叫你裝外掛，卻沒讓你想清楚「到底需不需要」。固定小工具其實有四條路徑可以選，各有適合的情境。先看下表，再決定走哪條：

做法	適合誰	優點	缺點
Fixed Widget and Sticky Elements 外掛	不想寫程式，且測試後確認相容的網站	提供介面設定與元素選擇	多一支相依，官方測試版本落後時要特別審慎
純 CSS position: sticky	懂一點 CSS、希望少用腳本的站長	不需要額外 JS	要處理祖先容器的 overflow、transform 與可捲動高度
佈景主題原生功能	目前主題具備固定選項的網站	與主題整合、設定集中	受主題限制，換主題可能失效
頁面建構器的 Sticky 控件	已用建構器製作頁面的站長	視覺化設定、彈性高	功能常受方案與建構器範圍限制

可先檢查主題或既有頁面建構器是否提供 Sticky 選項；懂 CSS 時，可優先測試 position: sticky。只有現有工具無法涵蓋需求，而且外掛在目前環境通過測試時，再走外掛路線。

本質上來說外掛不是萬靈丹，它只是「把一件常見需求封裝好讓你不寫程式也能用」。要不要為了這個需求多養一支外掛，取決於你網站的複雜度與你自己的技術舒適圈。

若側邊欄、頁首、頁尾與浮動按鈕各用不同外掛處理，可能載入重複腳本並增加衝突；相反地，難以維護的客製 CSS 也會提高交接成本。選擇能涵蓋需求、又讓後續維護者看得懂的最小方案。

完整安裝與設定流程：從下載到第一個固定小工具上線

決定走外掛路線後，先在測試環境操作。如果你對安裝外掛還不熟，可先看WordPress 外掛安裝教學。

1. 先確認相容性再安裝。在後台搜尋 Fixed Widget and Sticky Elements for WordPress，核對作者、更新日期、測試版本與支援紀錄；先在 staging 安裝，不要直接拿正式站試。
2. 打開外掛設定與目標版面。介面位置會因外掛版本、傳統或區塊小工具介面而異；以目前外掛說明和後台實際選項為準。
3. 指定要固定的元素。依目前版本提供的選取方式，設定小工具、區塊或 CSS 選擇器。不要一次固定整個側邊欄。
4. 設定頂部、底部與停止範圍。預留固定頁首高度，並確認接近頁尾時不會遮住內容。不同版本的欄位名稱可能不同。
5. 存檔並到前台測試。存檔後打開一篇你網站上最長的文章，慢慢往下捲，確認被勾選的小工具會在快捲出頂端時黏住、並在頁尾接近時自然鬆開。

這五步是基本流程。大多數人停在這裡就會覺得「好了，搞定了」，但魔鬼藏在接下來的細節裡。

傳統介面與區塊小工具介面的差異

有一個很多人卡住的地方值得特別提醒。WordPress 從 5.8 版開始，把小工具管理介面從傳統的拖曳式，改成了以區塊編輯器（也就是 Gutenberg）為基礎的新介面。這個改動直接影響到固定小工具外掛的勾選體驗。

傳統介面與區塊小工具介面的結構不同，舊教學中的勾選框或選單位置不一定仍存在。找不到選項時，先核對外掛版本的文件、設定頁與支援紀錄，不要直接照著舊畫面操作。

如果外掛不支援目前的小工具介面，優先考慮 CSS、主題原生功能或仍在維護的替代方案，不要為了延續舊教學而堆疊相依。區塊編輯器的操作可參考WordPress 頁面建立與編輯教學。

進階設定：margin、停用區塊、手機版行為的眉角

第一個固定小工具上線之後，有幾個參數會直接決定它的體驗好壞，這些是逐一檢查的重點。

Margin top 不要設成 0。很多人固定小工具時把它直接貼齊視窗頂端，結果黏住的那顆按鈕緊貼瀏覽器邊緣，視覺上很壓迫。實務上通常會留 20 到 30 px 的呼吸空間，如果你的網站有固定置頂的導覽列（Sticky Header），這個值還要再加上導覽列的高度，否則按鈕會被導覽列蓋住一半。導覽列的設計可以搭配這篇選單指南一起規劃。

Margin bottom 是「不蓋住頁尾」的關鍵。這個值決定小工具在什麼位置解除固定。設太小，小工具會一路黏到頁尾，把版權資訊或頁尾聯絡資訊蓋掉；設太大，又會太早鬆開。實務上要根據你頁尾的高度微調，沒有放諸四海皆準的數字。

寬度重算選項要注意。側邊欄的小工具在被切換成 fixed 定位後，會脫離原本的欄位容器，有時寬度會崩掉（變成滿版或縮成一團）。外掛通常提供「重新計算寬度」的選項來解這個問題，把它打開可以避免按鈕變形。

頁面層級的停用。有些頁面不適合出現固定小工具，例如登入頁、結帳頁、已經很擁擠的落地頁。設定頁通常讓你選擇在哪些頁面類型停用，記得把這些特殊頁面排除掉，別讓固定的 CTA 按鈕在結帳流程裡跟下一步搶焦點。落地頁的整體設計可以參考Landing Page 銷售頁製作教學。

還有一個小細節容易漏掉：固定小工具的內容不是「設好就永久不動」。如果你之後調整了側邊欄的排版順序，或新增、刪除了某個小工具，原本被固定的那個可能會因為位置變動而重新計算黏住時機，行為跟之前不太一樣。實務上的習慣是，每次動過側邊欄結構之後，都到最長的那篇文章重新捲動一次，確認固定行為還是順暢的。這個動作只要三十秒，卻能避免「改了 A 卻弄壞 B」的隱性問題累積下來，等到讀客投訴才發現。

手機版是重災區：固定小工具在行動裝置的取捨

這一節要講得特別重，因為它是絕大多數站長翻車的地方。

全球網頁流量中，行動裝置長期占一半以上（Statista 2026 年 4 月的統計）。不過單一網站的裝置比例仍要看自己的分析資料，桌面版設定也必須在手機上重新驗證。

固定小工具在手機上的問題是什麼？手機螢幕直向時，寬度本來就有限，側邊欄在響應式設計下通常會被推到主內容的「下方」（堆疊排版），而不是旁邊。這時候如果還讓某個小工具黏在螢幕頂部或底部，它會佔走手機可貴的視覺面積，把文章內容往下擠，閱讀體驗大打折扣。更糟的是，有些沒處理好的固定腳本會在手機上持續閃爍、抖動，造成版面不穩定。

手機版通常應先關閉側邊欄固定，再依實際 CTA 需求決定是否改用較小的固定入口。斷點要配合佈景主題版面，不宜套用固定像素。響應式設計的整體邏輯可參考響應式網頁設計 RWD。

另一個手機版常見的衝突來自固定置頂導覽列。很多網站在手機上會有一條黏在頂部的導覽列（Sticky Header），如果你的固定小工具也黏在頂端，兩者會疊在一起，導覽列把按鈕蓋住，或按鈕把導覽列擠歪。解法是調高外掛的 Margin top，讓它留出導覽列的高度；或更乾脆地，手機版根本不固定側邊欄，把行動入口交給導覽列或浮動按鈕去處理。記住一個原則：同一個畫面上同時黏住的元素越少越好，每一個黏住的東西都在搶讀者的注意力。

手機上真的需要持續曝光的行動入口，建議改用更輕量的做法，例如一個浮動在右下角的小按鈕（LINE 或聯絡），有別於把整個側邊欄小工具黏在頂部。這類浮動按鈕的設計邏輯跟固定小工具不同，它不依賴側邊欄，也不會擠壓內容。

它會拖慢網站嗎：效能與快取外掛的相容性

固定小工具外掛對效能的影響要以目前版本實測，不能只用檔案大小判斷。捲動監聽、版面重算、與其他腳本的互動，都可能影響主執行緒與視覺穩定性。

第一個風險是它依賴 JavaScript 運作，而快取或 JavaScript 優化可能改變載入順序，導致固定行為失效。速度與 Core Web Vitals 是 Google 搜尋眾多訊號中影響有限的一部分，同時也會影響使用體驗；前者可見 Google 2018 年 1 月的行動搜尋速度訊號說明，後者可見 web.dev 的速度研究。

如果延遲或合併 JavaScript 後固定功能失效，先在測試環境確認是哪支腳本與哪項設定造成，再加入最小排除規則。不要預設所有固定腳本都必須排除。想從更廣的角度理解網站加速，可看速度優化的完整做法與快取 Cache 是什麼。

第二個風險是版面位移（Layout Shift）。固定小工具切換定位時若沒有保留空間，可能造成 CLS。CLS 會影響使用者體驗，也是 Core Web Vitals 的一部分；Google 將頁面體驗視為有限訊號，內容相關性仍更重要。詳細邏輯可看Core Web Vitals 完全攻略。

整體來看，固定小工具對效能的影響是「可控但有條件」的。它本身不會成為拖垮網站的元兇，前提是你把它的腳本納入既有的優化流程管理，而不是裝完就放著不管。如果你已經在用快取外掛做 JavaScript 延遲載入，那就多花十分鐘把它的腳本排除規則設好；如果你還沒做任何速度優化，那比起擔心固定小工具，更該優先處理的是圖片壓縮、快取與字型載入這幾個大宗，圖片壓縮工具推薦與WordPress 圖片優化指南是很好的起點。把效能的根基打穩，固定小工具這種輕量功能才有揮灑的空間。

常見「裝了沒效」的五個原因與排查

以下五項是常見排查方向，實際順序要依錯誤記錄、版面 CSS 與最近變更決定：

1. 祖先容器的 CSS 限制。對 position: sticky 而言，祖先容器的 overflow、transform 與容器高度都可能改變黏附範圍；JavaScript 外掛則有自己的定位邏輯。用開發者工具逐層檢查，不要把所有失效都歸因於 overflow: hidden。
2. 快取外掛延遲載入了它的腳本。如上一節所說，JS 被 defer 或合併到很晚才執行，固定就不會觸發。把腳本排除出延遲清單通常能解決。
3. 主題或另一支外掛已經載入了衝突的固定腳本。有些主題本身就有 sticky 功能，或你同時裝了兩支做類似事情的外掛，腳本會互相打架。停用其他可疑外掛、逐一交叉測試，找出衝突來源。
4. 小工具本身比視窗還高。如果某個小工具的內容（例如一張大圖加一長串文字）本身就超過了螢幕高度，固定它毫無意義，因為它連完整顯示都做不到。固定小工具的前提是「它夠矮，塞得進視窗」。這種情況請先精簡小工具內容。
5. 勾選沒有存檔，或勾選到錯的小工具。聽起來很基本，但真的發生得很頻繁，尤其是在區塊編輯器的小工具介面下，勾選框的位置跟傳統介面不同。回到設定頁再確認一次勾選狀態。

如果這五項都排除，下一步應查看主題與外掛文件、瀏覽器主控台和實際計算樣式，再決定是否聯繫維護者。

懷疑衝突時，先在 staging 或故障排除模式測試。外掛很多時可採二分法停用一半、逐步縮小範圍；外掛少時逐一測試即可。動手前保留可還原備份，相關流程可參考 WordPress 備份教學。

設定完不是終點：用數據驗證固定小工具到底有沒有用

這一節是很多教學會跳過的部分，但它才是整件事的核心。固定小工具裝好了、會動了，不代表它「有效」。你得用數據去驗證，否則你只是把一個自己以為有效的東西掛在網站上，徒增維護負擔。

要驗證，你至少要看三個指標的變化。這三個指標分別對應「被看見、被點擊、被轉換」這三個層次，缺一不可，只看其中一個會得到片面的結論：

指標	看哪裡	期望的方向
CTA 點擊率	GA4 事件或連結點擊追蹤	上升
頁面跳出率	GA4 參與度 / 跳出率報表	下降
名單或詢問數	表單提交紀錄	上升

量測要有改動前後的對照，並盡量比較流量來源、活動與季節相近的期間。若流量足夠，可用實驗工具分流；流量較低時要拉長觀察期，避免用固定的一兩週門檻下結論。

這裡有一個容易踩的陷阱要提醒你。固定小工具帶來的點擊率提升，有時候是「假象」。怎麼說？當一個按鈕從底部被搬到隨時可見的位置，點擊數變多，可能只是因為它「更容易被點到」，不代表它「更有吸引力」。如果點擊率上升了，但最終的轉換（成交、詢問、訂閱完成）沒有跟著上升，表示你吸引到的是一堆「點了但沒有下一步」的無效點擊。這時候該做的不是把按鈕固定得更顯眼，而是回頭檢視按鈕連到的下一步頁面（例如表單、報價單）本身有沒有問題。固定小工具解決的是「曝光」，它解決不了「點了之後不轉換」的問題。這兩件事要分開看。

如果你想知道點擊率怎麼追蹤與優化，CTR 優化實戰攻略有完整的說明；跳出率與 SEO 的關係可以看跳出率完整解析。把固定小工具放進這套量測框架裡，它才會從「感覺有效」變成「數據證明有效」。而網站整體的數據佈建，可以從WordPress 安裝 Google Analytics或GTM 加 GA4 串接起步；想用一個外掛把 GA4、GSC、GTM 一次串好，Site Kit by Google 完整教學是最快的入口。

下一步行動方案

讀到這裡，你應該已經對「要不要固定、固定什麼、怎麼固定、怎麼驗證」有了完整的判斷框架。接下來就是把判斷變成動作。以下把行動拆成五個明確的步驟：

1. 盤點側邊欄。把你目前側邊欄的每一個小工具列出來，標出哪些是「行動入口」（CTA、聯絡、訂閱），哪些只是資訊展示。只把行動入口列入固定候選。
2. 選定路徑。對照前面的四條路徑表，根據技術能力與網站架構，決定走外掛、CSS、主題原生或既有建構器。不要為固定一個按鈕引入超過需求的工具。
3. 設定並測試桌面版。安裝、勾選、調 margin、到最長的那篇文章實際捲動測試，確認黏住與鬆開的時機都順暢。
4. 關閉或調整手機版。把行動斷點的停用選項打開，必要時改用浮動按鈕取代側邊欄固定，保護手機的閱讀體驗。
5. 量測與迭代。記下基準值，依流量規模選擇足夠的觀察期間，再決定保留、調整或拆除。

這五步會形成一套可重複的判斷流程：確認用途、選擇實作、跨裝置測試，再用數據驗證是否保留。

固定小工具看似是一個技術小細節，但它背後其實是一個更深的問題：你有沒有在讀者最有意願行動的那一刻，把入口放在他眼前。把所有功能一股腦打開從來不是答案；真正的關鍵，在於精準地把對的東西放在對的位置，再用數據去證明它真的對。

若想把這項調整放進整體網站規劃，可參考 WordPress 架站與 SEO 優化全攻略，並把固定元素、手機體驗與轉換追蹤一起驗證。