安妮網站 【WORDPRESS教學】步驟3｜安裝外掛、套用模板、新增文章、設置選單
佈景主題 Astra 教學 (功能圖文講解)
WordPress 如何固定側邊欄
WordPress 如何固定側邊欄（Sticky Sidebar）？任何元素都可靠這套外掛 1 鍵搞定！
通常我們在架設「部落格」或「電商」類型的網站時，都會加上側邊欄（Sidebar）來放置與突顯更多網站內的資訊，當使用者在瀏覽網站時，側邊欄內的資訊會隨著網頁往下捲動「同步」呈現在網頁的左或右側，可以增加更多的網站互動或是商品的轉換率。
WordPress 預設的側邊欄是採用「不固定」的方式，所以當使用者瀏覽網站內容到一定程度時，如果側邊欄內容無法跟文章一樣長（通常不會一樣多），就會顯示空白區域，會顯的有些空洞。
今天所要介紹的「Fixed Widget and Sticky Elements for WordPress」外掛，可以幫助站長固定某些側邊欄的小工具（Widget），當使用者瀏覽網站內容時，該小工具（Widget）會一直固定在側邊欄上，可以提高「可見度」與「點擊率」，也可以彌補側邊欄內容不夠長的問題。
如果在閱讀文章的過程中有任何問題，可以前往「各類電腦疑難雜症討論區」尋求幫助，讓我們開始今天的「固定側邊欄（Sticky Sidebar）」教學內容吧！
內容目錄隱藏
什麼是側邊欄（Sidebar）？
一般來說，絕大部分的網站都會用以上架構圖劃分，會把網頁分成「四大區塊」，側邊欄會在網頁的「左或右」兩邊欄位，主要可用來放置搜尋、相關文章、相關標籤或廣告等，可以展示自己網站內的一些特色，增強讀者繼續留在站內繼續閱讀的機率，對於「部落格或新聞」類型的網站，是一個非常重要的元素。
當然側邊欄不是強制規定要有，有些站長為了網站美觀，也會選擇只單純顯示「文章內容」，或是使用 CSS 技巧在「行動裝置」上隱藏側邊欄。
ADVERTISEMENThttps://e09d73b6e66fe3c06bea66262e6471ef.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html
延伸閱讀：如何在手機或平板隱藏側邊欄？
固定側邊欄的好處？
側邊欄內的小工具是一個很好的「展示」空間，可以提供給讀者很多有用的資訊，如果可以固定某些側邊欄小工具，可以有以下優點：
- 提高可見率：因為把小工具固定後，不會隨著讀者滾動內容而消失，可以大幅提昇該小工具的可見率，如果有使用 Google AdSense 導入廣告，更是可以提高收益。
- 提高轉換率：假設我們是把「訂閱網站內容」固定在側邊欄，隨著可見率提昇，將會帶來更多讀者訂閱網站，自然轉換率就會提昇，其他如「註冊會員」、「呼籲按鈕」與「廣告」都會有相同效果。
- 改善使用者體驗：假設我們是把「網站導覽」或是「相關文章」固定在側邊欄，讀者可以輕易的透過固定側邊欄內的連結，瀏覽觀看更多文章。
- 提高整體舒適度：如果有使用固定側邊欄，左右兩側不會因為側邊欄內容不夠長而留白，提昇美觀與舒適度。
本章節教學會透過「Fixed Widget and Sticky Elements for WordPress」外掛來達成「固定側邊欄」內的小工具，使用方式非常簡單，不管是透過「傳統小工具」還是「區塊小工具」都可以輕鬆達成。
預估時間： 5 minutes
步驟一：安裝外掛並啟用
在 WordPress 後台安裝外掛頁面，搜尋「Fixed Widget」後，找到「Fixed Widget and Sticky Elements for WordPress」外掛，點擊「立即安裝」。
安裝完成後，記得點擊「啟用」按鈕。
步驟二：啟用改進版本
啟用外掛之後，到外掛設定頁面內，把「改進版本」打勾，這可以用全新的指令碼來處理版面配置問題，也就是說相容性會比較高，建議打勾啟用！https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7053518192495960&output=html&h=601&adk=1532281336&adf=434680184&pi=t.aa~a.2977507694~rp.4&w=862&lmt=1680341525&nsk=d1cb2202&rafmt=11&pwprc=7126995058&ad_type=text_image&format=862×601&url=https%3A%2F%2Fadersaytech.com%2Ftutorial%2Fwordpress-plugin%2Fhow-to-fix-wordpress-sidebar.html&pra=3&wgl=1&fa=26&uach=WyJtYWNPUyIsIjEzLjIuMSIsImFybSIsIiIsIjExMS4wLjU1NjMuMTEwIixbXSxmYWxzZSxudWxsLCI2NCIsW1siR29vZ2xlIENocm9tZSIsIjExMS4wLjU1NjMuMTEwIl0sWyJOb3QoQTpCcmFuZCIsIjguMC4wLjAiXSxbIkNocm9taXVtIiwiMTExLjAuNTU2My4xMTAiXV0sZmFsc2Vd&dt=1680341526336&bpp=2&bdt=1000&idt=2&shv=r20230329&mjsv=m202303290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D633e752aa3172d0e-22d1e32df2de0071%3AT%3D1680341526%3AS%3DALNI_MYLaLzldXrU_V1p5_2fzYgQsTmsTw&gpic=UID%3D00000bea07d4bc0a%3AT%3D1680341526%3ART%3D1680341526%3AS%3DALNI_MZpeyrJdrbqDsBhcBYsUCjF_7SpfA&prev_fmts=0x0%2C862x280%2C862x280%2C862x280%2C862x280%2C862x280&nras=3&correlator=1013646793906&frm=20&pv=1&ga_vid=1050932437.1680341526&ga_sid=1680341526&ga_hid=1776301501&ga_fc=1&u_tz=480&u_his=4&u_h=1080&u_w=1920&u_ah=1055&u_aw=1920&u_cd=24&u_sd=2.5&dmc=8&adx=148&ady=8505&biw=1536&bih=710&scr_x=0&scr_y=5669&eid=44759927%2C44759837%2C44759876%2C31073509&oid=2&psts=AHQMDFfspUibLBmoaibInFb2p8MubCJIN-USIepDyAMHy8__DUV0IFGLJYOMr6p2efaGqBgWWX5Y0F56O1EeMUVREg2I8O2X%2CAHQMDFdBjlHqrjifRJGrWHb2PRGeLPGXwCc6n0EVAhskrdAJH5oXBkX2NmlTCVl7xlOjSGAGmDy99GkrFu31fOvrc95vO840%2CAHQMDFfSHMEQaVL1l29NchaxIGdu2wuMmnO89ivCOAyiKtgv626P2GoKofUxM0Aqek-iHa2jARPTbNY7aM4hDly_mMlB7w%2CAHQMDFfW0hzaafbpiQWLKjEkgrqgrnjSJg3pV7TaIwRL0V07EGpF-HEGOFTws1OfG0LZx9UXX_f5Mx5S83n43kBFFUO1%2CAHQMDFfJ7SOtu4iwmXxFiJ07YMjmpnXH4H-DFmPTFyek_3yL82YsbZqTlJy7O2KlWeenvC6hQwJxUpA14BinXKWq64Os&pvsid=2136116938776408&tmod=1943480995&uas=1&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&fc=1792&brdim=0%2C24%2C0%2C24%2C1920%2C25%2C1920%2C1056%2C1536%2C710&vis=1&rsz=%7C%7Cs%7C&abl=NS&cms=2&fu=128&bc=31&ifi=7&uci=a!7&btvi=5&fsb=1&xpc=4y0wttEdOk&p=https%3A//adersaytech.com&dtd=M
步驟三：前往小工具頁面
https://api.dable.io/widgets/id/jobwO047/users/53637626.1680341526278?from=https%3A%2F%2Fadersaytech.com%2Ftutorial%2Fwordpress-plugin%2Fhow-to-fix-wordpress-sidebar.html&url=https%3A%2F%2Fadersaytech.com%2Ftutorial%2Fwordpress-plugin%2Fhow-to-fix-wordpress-sidebar.html&ref=https%3A%2F%2Fwww.google.com%2F&cid=53637626.1680341526278&uid=53637626.1680341526278&site=adersaytech.com&gdpr=0&service_id=12705&service_type=blog&country=TW&client_id=3617&randomStr=90e56db3-80d8-484f-b007-54916d0ebc4e&id=dablewidget_jobwO047_37JaO6go&category1=Wordpress%E5%A4%96%E6%8E%9B&author=Ted&ad_params=%7B%7D&item_id=13960&item_pub_date=2022-07-05T14%3A26%3A44%2B08%3A00&pixel_ratio=2.200000047683716&ua=Mozilla%2F5.0%20(Macintosh%3B%20Intel%20Mac%20OS%20X%2013.2.1)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F111.0.5563.110%20Safari%2F537.36&client_width=862&network=non-wifi&lang=zh-TW&is_top_win=1&top_win_accessible=1&is_lazyload=0
這個章節會以「區塊小工具」來當作示範，至於「傳統小工具」在後面章節會提到，我們先前往小工具頁面吧！
步驟四：固定小工具
接下來就可以選擇想要固定的小工具，通常都會固定側邊欄最後一個或是最後兩個小工具，我這邊先選擇小工具的標題，並在右側會看到「Fixed Widget」的選項，如上圖。
再來就是小工具的內容，我這個小工具是一張「300×600」的廣告圖片，一樣選擇「Fixed Widget」選項，如下圖。
最後記得要點擊右上角的「更新」按鈕來保存設定。
步驟五：檢視固定效果
當所有設定都完成後，就可以前往網頁前台檢視效果，在瀏覽網頁內容的過程中，固定小工具會一直呈現在側邊欄中，直到文章最底部還是惠存在，大功告成！https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7053518192495960&output=html&h=438&adk=3483313822&adf=74951034&pi=t.aa~a.2977506597~rp.4&w=862&lmt=1680341525&nsk=48e7b9bd&rafmt=11&pwprc=7126995058&ad_type=text_image&format=862×438&url=https%3A%2F%2Fadersaytech.com%2Ftutorial%2Fwordpress-plugin%2Fhow-to-fix-wordpress-sidebar.html&pra=3&wgl=1&fa=26&uach=WyJtYWNPUyIsIjEzLjIuMSIsImFybSIsIiIsIjExMS4wLjU1NjMuMTEwIixbXSxmYWxzZSxudWxsLCI2NCIsW1siR29vZ2xlIENocm9tZSIsIjExMS4wLjU1NjMuMTEwIl0sWyJOb3QoQTpCcmFuZCIsIjguMC4wLjAiXSxbIkNocm9taXVtIiwiMTExLjAuNTU2My4xMTAiXV0sZmFsc2Vd&dt=1680341526342&bpp=1&bdt=998&idt=1&shv=r20230329&mjsv=m202303290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D633e752aa3172d0e-22d1e32df2de0071%3AT%3D1680341526%3AS%3DALNI_MYLaLzldXrU_V1p5_2fzYgQsTmsTw&gpic=UID%3D00000bea07d4bc0a%3AT%3D1680341526%3ART%3D1680341526%3AS%3DALNI_MZpeyrJdrbqDsBhcBYsUCjF_7SpfA&prev_fmts=0x0%2C862x280%2C862x280%2C862x280%2C862x280%2C862x280%2C862x601&nras=4&correlator=1013646793906&frm=20&pv=1&ga_vid=1050932437.1680341526&ga_sid=1680341526&ga_hid=1776301501&ga_fc=1&u_tz=480&u_his=4&u_h=1080&u_w=1920&u_ah=1055&u_aw=1920&u_cd=24&u_sd=2.5&dmc=8&adx=148&ady=12197&biw=1536&bih=710&scr_x=0&scr_y=9383&eid=44759927%2C44759837%2C44759876%2C31073509&oid=2&psts=AHQMDFfspUibLBmoaibInFb2p8MubCJIN-USIepDyAMHy8__DUV0IFGLJYOMr6p2efaGqBgWWX5Y0F56O1EeMUVREg2I8O2X%2CAHQMDFdBjlHqrjifRJGrWHb2PRGeLPGXwCc6n0EVAhskrdAJH5oXBkX2NmlTCVl7xlOjSGAGmDy99GkrFu31fOvrc95vO840%2CAHQMDFfSHMEQaVL1l29NchaxIGdu2wuMmnO89ivCOAyiKtgv626P2GoKofUxM0Aqek-iHa2jARPTbNY7aM4hDly_mMlB7w%2CAHQMDFfW0hzaafbpiQWLKjEkgrqgrnjSJg3pV7TaIwRL0V07EGpF-HEGOFTws1OfG0LZx9UXX_f5Mx5S83n43kBFFUO1%2CAHQMDFfJ7SOtu4iwmXxFiJ07YMjmpnXH4H-DFmPTFyek_3yL82YsbZqTlJy7O2KlWeenvC6hQwJxUpA14BinXKWq64Os%2CAHQMDFer6-QRV4y35UFhrgX5GK2sAM-NzxIGzIKXNRYr8397h0FSv-KC4KnBvakkKvcP2XGQ_hOzlkDXRYqRm7GIErTpkA&pvsid=2136116938776408&tmod=1943480995&uas=1&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&fc=1792&brdim=0%2C24%2C0%2C24%2C1920%2C25%2C1920%2C1056%2C1536%2C710&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=128&bc=31&ifi=8&uci=a!8&btvi=6&fsb=1&xpc=3LCD4vk2x3&p=https%3A//adersaytech.com&dtd=M
Supply:
- Advanced Ads
Tools:
- Fixed Widget and Sticky Elements for WordPress
調整小工具上下距離
ADVERTISEMENThttps://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-7053518192495960&output=html&h=280&slotname=8421225931&adk=3810813450&adf=2483438317&pi=t.ma~as.8421225931&w=862&fwrn=4&fwrnh=100&lmt=1680341525&rafmt=1&format=862×280&url=https%3A%2F%2Fadersaytech.com%2Ftutorial%2Fwordpress-plugin%2Fhow-to-fix-wordpress-sidebar.html&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&wgl=1&uach=WyJtYWNPUyIsIjEzLjIuMSIsImFybSIsIiIsIjExMS4wLjU1NjMuMTEwIixbXSxmYWxzZSxudWxsLCI2NCIsW1siR29vZ2xlIENocm9tZSIsIjExMS4wLjU1NjMuMTEwIl0sWyJOb3QoQTpCcmFuZCIsIjguMC4wLjAiXSxbIkNocm9taXVtIiwiMTExLjAuNTU2My4xMTAiXV0sZmFsc2Vd&dt=1680341532033&bpp=2&bdt=6689&idt=3&shv=r20230329&mjsv=m202303290101&ptt=9&saldr=aa&abxe=1&cookie=ID%3D633e752aa3172d0e-22d1e32df2de0071%3AT%3D1680341526%3AS%3DALNI_MYLaLzldXrU_V1p5_2fzYgQsTmsTw&gpic=UID%3D00000bea07d4bc0a%3AT%3D1680341526%3ART%3D1680341526%3AS%3DALNI_MZpeyrJdrbqDsBhcBYsUCjF_7SpfA&prev_fmts=0x0%2C862x280%2C862x280%2C862x280%2C862x280%2C862x280%2C862x601%2C862x438&nras=4&correlator=1013646793906&frm=20&pv=1&ga_vid=1050932437.1680341526&ga_sid=1680341526&ga_hid=1776301501&ga_fc=1&u_tz=480&u_his=4&u_h=1080&u_w=1920&u_ah=1055&u_aw=1920&u_cd=24&u_sd=2.5&dmc=8&adx=148&ady=13098&biw=1536&bih=710&scr_x=0&scr_y=10280&eid=44759927%2C44759837%2C44759876%2C31073509&oid=2&psts=AHQMDFfspUibLBmoaibInFb2p8MubCJIN-USIepDyAMHy8__DUV0IFGLJYOMr6p2efaGqBgWWX5Y0F56O1EeMUVREg2I8O2X%2CAHQMDFdBjlHqrjifRJGrWHb2PRGeLPGXwCc6n0EVAhskrdAJH5oXBkX2NmlTCVl7xlOjSGAGmDy99GkrFu31fOvrc95vO840%2CAHQMDFfSHMEQaVL1l29NchaxIGdu2wuMmnO89ivCOAyiKtgv626P2GoKofUxM0Aqek-iHa2jARPTbNY7aM4hDly_mMlB7w%2CAHQMDFfW0hzaafbpiQWLKjEkgrqgrnjSJg3pV7TaIwRL0V07EGpF-HEGOFTws1OfG0LZx9UXX_f5Mx5S83n43kBFFUO1%2CAHQMDFfJ7SOtu4iwmXxFiJ07YMjmpnXH4H-DFmPTFyek_3yL82YsbZqTlJy7O2KlWeenvC6hQwJxUpA14BinXKWq64Os%2CAHQMDFer6-QRV4y35UFhrgX5GK2sAM-NzxIGzIKXNRYr8397h0FSv-KC4KnBvakkKvcP2XGQ_hOzlkDXRYqRm7GIErTpkA&pvsid=2136116938776408&tmod=1943480995&uas=1&nvt=1&ref=https%3A%2F%2Fwww.google.com%2F&fc=1920&brdim=0%2C24%2C0%2C24%2C1920%2C25%2C1920%2C1056%2C1536%2C710&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&fu=128&bc=31&ifi=21&uci=a!l&btvi=7&fsb=1&xpc=0Zo9PQJgPx&p=https%3A//adersaytech.com&dtd=M
當你固定側邊欄小工具後，該小工具與網頁頂部與底部的距離是採用預設，會有點接近網頁頂部，如下圖。
側邊欄文章目錄固定教學
如何固定 WordPress 側邊欄 / 選單 / 按鈕？（Q2W3 Fixed Widget 浮動外掛教學）
啟用過後，便會在各項小工具設定中，多出「固定這個小工具」選項，將該工具釘選在頁面中。
有的站長，可能會有在側邊欄固定小工具的需求，就可以使用外掛來幫助設定。
我們將來介紹這款好用的 WordPress 浮動選單外掛，
分享如何安裝＋啟用，並且設定固定小工具不超出指定邊界，避免覆蓋頁尾及跑版
Easy Table of Contents 外掛教學
當訪客閱讀文章時，如果沒有文章目錄的話，會需要花更多的時間，尋找想要看到的文章段落。 今天這一部影片，會跟大家分享「 Easy Table of Contents 」這款外掛，它能用最快速的方式，完成「 ＷordPress文章目錄 」功能。 好處是，方便找到想觀看的章節、加快搜尋速度、優化使用者體驗，這是多數站長都會使用的一款 ＷordPress 外掛。 影片中，從外掛安裝啟用、基本設定、目錄放置在文章中、列表樣式調整、目錄固定在側邊欄中等 ..，我們都會手把手帶著大夥兒學習！
影片時間軸
00:00 影片開頭 00:23 完成品展示 01:29 外掛安裝＆基本設定介紹 03:24 新增文章目錄 05:08 更改外觀樣式 06:08 目錄加入到側邊欄中 06:38 固定目錄外掛安裝 07:09 結尾分享 讓我們趕快一起來學習吧：）