Woocommerce 會員系統 – 使用函數在網頁中加入會員登出按鈕

內容目錄

Toggle

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略，Woocommerce 會員系統 – 在客製化網站時，如果希望在不一樣的位置顯示會員登出按鈕，就 WordPress 架構而言，只能以加入外掛的方式呈現，但外掛種類很多，如果只是想單純客制一個登出按鈕，加入外掛說不定會引起其他相容性的問題（在 WooCommerce 尤其容易發生），因此在今天的文章中鵠學苑將分享一段簡易的函數，透過輸出控制函式加入 HTML 顯示文字並製作為 Shortcode (短代碼)，以 CSS 來控制按鈕外觀，只要使用短代碼搭配正確的容器，就能在任何位置顯示登出按鈕，希望能讓正在架站有需要的朋友獲得幫助。

WordPress Codex
https://codex.wordpress.org/Function_Reference/add_shortcode
PHP 手冊 – 輸出控制說明
https://www.php.net/manual/zh/book.outcontrol.php

加入自定義函數登出按鈕 – 以短代碼顯示

第一步：下方是以輸出控制函式為主體並加入 HTML 顯示於前端的函數，其中 a 連結內容定義為 wp_logout_url，也就是登出帳戶的連結，並且也設定了登出後直接跳轉首頁，最後 add_shortcode 是定義當 [logout_link] 加入時將顯示 HTML 登出按鈕。

第二步：在主題編輯器中點選子主題，找到 functions.php ，在文件結尾處加入第一步驟提供的函數，完成後點選更新檔案。如果想要替換按鈕文字，只需要修改 ” 登出 ” 這兩個字即可。

第三步：以 Elementor 編輯器來說，選擇短碼小工具，並且在內容中加入 [logout_link] 短代碼，按鈕就會顯示。

第四步：因為 HTML <a> 元素只會顯示文字，因此筆者加入以下 CSS 代碼來修改按鈕外觀。

第五步：在 Elementor 小工具中會有 Custom CSS 的欄位，將上一步提供的 CSS 加入後更新即可。

第六步：下圖是完成登出按鈕設置的結果，點擊登出後會自動跳轉到首頁，並且可以按照網站結構自由移動位置。

結語：

如果不是使用 Elementor 作為網站編輯器，在大部分的佈景主題附帶編輯器中會有一個工具是專門放置短代碼或自定義程式碼的，通常名稱會是 Custom HTML ，使用此類小工具也可以達到一樣的效果，另外如果想要將登出網站的會員引導至其他網頁或感謝頁，可以參考此篇文章：WooCommerce 帳戶設定 – 加入函數讓使用者登出後導向指定頁面。

今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到鵠崙設計做線上免費諮詢喔！我們下次的教學見～