重點整理
想讓側邊欄的促銷圖片或公告在捲動時一直留在畫面上，可以安裝 Q2W3 Fixed Widget：到「外觀 → Fixed Widget」設定上下邊界，再在要固定的小工具勾選「固定此小工具」並儲存。外掛現名 Fixed Widget and Sticky Elements，WordPress.org 上最後更新為 2023 年。
不知道各位同學在學習架站的過程中，有沒有常常去看一些別人的網站呢？如果有的話，相信對於今天教學要跟大家說的這個 Q2W3 Fixed Widget 側邊欄固定 小工具 應該不陌生，因為這個外掛太多網站會使用了！在部落格裡，它會是一個浮動型的廣告視窗；在分享論壇中，它會固定在畫面上顯示重要公告；而在購物網站中它搖身一變成了本月促銷的主打商品，就像是夏天的蒼蠅揮也揮不走啊！就是會固定在視窗上的某個角落，無時無刻提醒者瀏覽者它的存在！
這個外掛無論是設定還是使用都非常的簡單，但還是要對WordPress有一定的了解，才能懂得如何運用它！現在
（小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範！）
在WordPress後台介面安裝 Q2W3 Fixed Widget 固定 小工具 以及說明功能
第一步： 進入WordPress後台外掛安裝介面，在搜尋欄輸入Q2W3 Fixed Widget 固定 小工具 的英文名稱，並點選安裝，可以參考WordPress 教學 基礎介紹六（外掛）。
第二步： 在側邊攔找到外觀選項，可以看到裡面多了 Fixed Widget 選項 這一個可以選擇，點擊進去。
第三步： 進入到 Q2W3 Fixed Widget 固定小工具 的設定頁面，比較會影響外觀的在一般選項裡的上、下邊界，可以自行輸入以 PX 為單位的值，來控制圖片在畫面滾動中上下邊界高度；而在重整間隔這個選項，可以設定圖片更新的秒數。其他的功能因為已經繁體中文化了，就請各位同學自行參考，基本上對圖片的沒有影響。
第四步： 進入到後台側邊攔外觀/小工具的選項，在這裡從左側小工具區域拉取加入圖片功能的欄位到右邊側邊攔的區域裡面，將圖片功能欄的設定點開，在下方有一個固定此小工具的小方框勾選起來，按下右下角的儲存，基本的操作請參考 WordPress 教學 基礎介紹五（外觀）。
第五步： 連結到網站的主畫面，可以看到剛剛設定的側邊攔圖片在上下滾動時會固定在畫面上的右邊，如此就完成設定了。
不用外掛也能固定側邊欄嗎？
可以，用 CSS 的 position: sticky 就能做到，現在主流瀏覽器都支援：
- 找出要固定的小工具或側邊欄的 class 名稱（用瀏覽器開發人員工具檢查元素）。
- 到「外觀 → 自訂 → 附加 CSS」加入：
.你的class { position: sticky; top: 100px; }，top 是距離畫面頂端的距離，有固定頁首時要加上頁首高度。 - 儲存後捲動頁面測試。
如果沒有效果，通常是外層元素設定了 overflow: hidden，或側邊欄高度和內容一樣高，需要調整外層樣式。
固定小工具適合放什麼內容？
固定小工具會一直跟著畫面，內容要精簡才不會干擾閱讀：
- 適合：當期促銷圖片、聯絡按鈕、文章目錄、訂閱表單這類短內容。
- 不適合：很長的文章列表、標籤雲或多個廣告，高度超過螢幕時下半部會永遠看不到。
- 只固定一個：同一個側邊欄固定多個小工具容易互相重疊，挑最重要的一個就好。
放上去後用筆電小螢幕檢查一次，確認小工具高度沒有超出畫面。
常見問題
Q2W3 Fixed Widget 現在還能用嗎？
還能從 WordPress.org 下載，外掛現名 Fixed Widget and Sticky Elements，但最後更新在 2023 年 3 月，相容測試只到 WordPress 6.2。使用前先在測試站確認固定效果正常，長期可考慮改用 CSS 的 sticky 寫法。
固定的小工具捲到底會蓋住頁尾怎麼辦？
到「外觀 → Fixed Widget」調整下邊界的像素值，讓小工具在接近頁尾時停住；也可以在設定裡指定頁尾元素的 HTML ID 作為停止位置。調整後用不同長度的文章測試一次。
手機版也需要固定小工具嗎？
通常不需要。手機版側邊欄會移到內文下方，固定效果意義不大，還可能擋住內容。外掛設定中可以指定在螢幕寬度小於某個數值時停用固定，依主題的手機版寬度設定即可。
結語
Q2W3 Fixed Widget 固定小工具是相當方便實用，不只是可以運用到網站效果，如果今天做的是主打商品，也可以在圖片中加入賣場連結，讓客戶能更方便的對商品有所了解，除了圖片外也可以插入文字的部分，如果對於 CSS 或 HTML 等程式語言比較了解的人，也可以自行編寫設計特效或淡入淡出的效果。其實在鵠學苑推薦給同學的外掛，有許多的應用方式，對此有興趣的同學可以到網頁設計公司裡參考一些示範的網站，如果有想要做的效果或覺得哪一個網站的版型不錯，都歡迎留言詢問喔！ 今天的教學就到這裡結束拉~不要忘記持續追蹤 鵠學苑 的最新教學文章，才能帶著同學們一起獲得更多更好用的架站技能喔！