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

Woocommerce 會員系統 :

1. 使用函數在網頁中加入會員登出按鈕

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 ,在文件結尾處加入第一步驟提供的函數,完成後點選更新檔案。如果想要替換按鈕文字,只需要修改 ” 登出 ” 這兩個字即可。

Woocommerce 會員系統

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

Woocommerce 會員系統

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

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

Woocommerce 會員系統

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

Woocommerce 會員系統

 

 

結語:

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

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

WooCommerce 客製 相關教學文章:

Woocommerce 購物車教學 – 變更商品數量時自動更新總計金額

WooCommerce 帳戶設定 – 加入函數讓使用者登出後導向指定頁面

WooCommerce 結帳設定 – 加入函數限制訂單結帳最低購買金額

WooCommerce 購物車設定 – 符合訂單金額加入其它商品至購物車

WooCommerce 加入購物車功能 – 使用函數自訂按鈕文字內容

WooCommerce 商品描述標題修改,加入函數快速變更描述區域標題文字

網站架設知識推薦閱讀:

Google SEO 更新 -新增 sponsored 及 ugc 屬性,讓連結性質易於識別

Elementor 網頁編輯器 突破 300 萬下載次數,最受歡迎的外掛!

Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top