最近做 WooCommerce 的外掛,需要在會員的帳號,讓會員可以查看自己的資料。因此本篇就來分享如何用四個步驟,在WooCommerce 我的帳號新增選單吧。

我的帳號建立新的按鈕

首先,先在我的帳號頁面建立按鈕連結,方便使用者進入自訂的頁面,先建立頁面的連結端點名稱變數,再透過 woocommerce_account_menu_items 的 hook 執行 function。

<?php
$endpoint = 'mypage';    // 頁面url端點

add_action( 'woocommerce_account_menu_items', 'add_menu_items' );

function add_menu_items( $menu_items ) {
    $menu_items[ $endpoint ] = '�'的頁面';
    return $menu_items;
}
?>

此時在我的帳號中,就會看到新增的選單項目了。

新增連結端點

此時點擊按鈕會發現網頁還是 404 狀態,是因為還沒新增端點,透過底下程式就可以新增了。

<?php
add_action( 'init', array( $this, 'add_endpoints' ) );

function add_endpoints() {
    add_rewrite_endpoint( $endpoint, EP_PAGES );
}
?>

add_rewrite_endpoint 有兩個參數需要填寫,分別是以下:

  • $name: 端點名稱,這邊就是上面建立的變數 $endpoint 就會帶入 mypage
  • $places: 端點的類型,因為我們是頁面,所以帶入 EP_PAGES,如果有其他類型可以點此觀看

將端點寫入規則

新增完成後,還需要透過 flush_rewrite_rules 進行寫入規則才可以順利進入頁面,通常都是在需要有更新主題或是開啟關閉外掛才需要更新規則,因此遇到三種狀態就命令進行更新規則。

<?php
register_activation_hook( __FILE__, 'activate' );
register_deactivation_hook( __FILE__, 'activate' );
add_action( 'after_switch_theme', 'activate' );

function activate() {
    flush_rewrite_rules();
}
?>

點擊連結後就可以看到空白的內容了。

編輯內容

最後一步,可以開始寫網頁內容了,使用 woocommerce_account_{endpoint}_endpoint 再端點頁面填寫內容。

<?php
add_action( 'woocommerce_account_' . $endpoint . '_endpoint', 'mypage_endpoint_content' );

function mypage_endpoint_content() {
    echo '<h1>我的頁面</h1>';
    echo '<p>在這裡寫網頁內容</p>';
}
?>

rHuei

一個喜歡亂玩亂弄的工程師。

Leave a comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *