重點整理
在子主題 functions.php 加入一段函數，以 wp_logout_url 產生登出連結並註冊成短代碼，就能把會員登出按鈕放在網站任何位置，登出後自動回首頁。本文也提供修改按鈕外觀的 CSS。
WooCommerce 會員系統 – 在客製化網站時，如果希望在不一樣的位置顯示會員登出按鈕，就 WordPress 架構而言，只能以加入外掛的方式呈現，但外掛種類很多，如果只是想單純客制一個登出按鈕，加入外掛說不定會引起其他相容性的問題（在 WooCommerce 尤其容易發生），因此在今天的文章中鵠學苑將分享一段簡易的函數，透過輸出控制函式加入 HTML 顯示文字並製作為 Shortcode（短代碼），以 CSS 來控制按鈕外觀，只要使用短代碼搭配正確的容器，就能在任何位置顯示登出按鈕，希望能讓正在架站有需要的朋友獲得幫助。
加入自定義函數登出按鈕 – 以短代碼顯示
第一步：下方是以輸出控制函式為主體並加入 HTML 顯示於前端的函數，其中 a 連結內容定義為 wp_logout_url，也就是登出帳戶的連結，並且也設定了登出後直接跳轉首頁，最後 add_shortcode 是定義當 [logout_link] 加入時將顯示 HTML 登出按鈕。
第二步：在主題編輯器中點選子主題，找到 functions.php ，在文件結尾處加入第一步驟提供的函數，完成後點選更新檔案。如果想要替換按鈕文字，只需要修改 ” 登出 ” 這兩個字即可。
第三步：以 Elementor 編輯器來說，選擇短碼小工具，並且在內容中加入 [logout_link] 短代碼，按鈕就會顯示。
第四步：因為 HTML <a>元素只會顯示文字，因此筆者加入以下 CSS 代碼來修改按鈕外觀。
第五步：在 Elementor 小工具中會有 Custom CSS 的欄位，將上一步提供的 CSS 加入後更新即可。
第六步：下圖是完成登出按鈕設置的結果，點擊登出後會自動跳轉到首頁，並且可以按照網站結構自由移動位置。
加入短代碼函數前要注意什麼？
這個做法需要修改 functions.php，操作前請確認：
- 寫在子主題：放在子主題 functions.php 或程式碼片段外掛，主題更新才不會消失。
- 短代碼名稱不要重複：若其他外掛已註冊同名短代碼，會互相覆蓋，可以加上自己的前綴。
- 只對登入者顯示：可在函數中用 is_user_logged_in 判斷，未登入時改顯示登入連結或不顯示。
- 注意快取：登出按鈕屬於個人化內容，頁面快取外掛通常會略過已登入的使用者，但仍要實際登入測試。
登出按鈕適合放在哪裡？
登出按鈕要讓會員找得到，但不需要搶眼，常見的位置有：
- 頁首會員選單：滑過或點擊會員圖示後顯示「我的帳號」「訂單」「登出」，是電商網站最常見的做法。
- 我的帳號頁面：WooCommerce 預設已在帳號選單最後提供登出。
- 手機版選單底部：手機版空間有限，放在選單最下方較不會誤觸。
- 會員專區側邊欄：適合有課程、下載區等會員內容的網站。
按鈕樣式建議比主要行動按鈕低調，例如用文字連結或線框按鈕。
常見問題
WooCommerce 會員登出按鈕不寫程式可以做嗎？
可以。在「外觀 › 選單」的 WooCommerce 端點區塊中有「登出」項目，加入選單就會出現登出連結。只有在選單以外的位置，例如頁面內容或側邊欄，才需要用本文的短代碼函數。
為什麼直接連到登出網址會出現確認訊息？
WordPress 的登出連結需要帶安全驗證參數，直接手打登出網址時會先顯示確認畫面，避免被惡意連結強制登出。本文用 wp_logout_url 產生連結，會自動帶上驗證參數，點擊後就直接登出。
登出後可以導回指定頁面嗎？
可以。wp_logout_url 可以傳入登出後要導向的網址，例如首頁或「我的帳號」頁面，在函數中修改這個參數即可。只要導向同一個網站內的頁面，就不會被 WordPress 擋下。
結語
如果不是使用 Elementor 作為網站編輯器，在大部分的佈景主題附帶編輯器中會有一個工具是專門放置短代碼或自定義程式碼的，通常名稱會是 Custom HTML ，使用此類小工具也可以達到一樣的效果，另外如果想要將登出網站的會員引導至其他網頁或感謝頁，可以參考此篇文章：WooCommerce 帳戶設定 – 加入函數讓使用者登出後導向指定頁面。