WooCommerce賬戶中心頁(yè)面默認(rèn)有一個(gè)我的賬戶側(cè)邊欄，該側(cè)邊欄是用戶中心所有功能的一個(gè)菜單鏈接。對(duì)于使用WooCommerce進(jìn)行商品銷售的網(wǎng)站來(lái)說(shuō)，這些功能基本上夠用了。如果想進(jìn)行 WooCoommerce 二次開發(fā)，在WooCommerce的前端用戶中心實(shí)現(xiàn)一些自定義功能，加在WooCommerce默認(rèn)的功能頁(yè)面顯然是不合適的，這時(shí)候，我們?yōu)閃ooCommerce添加一個(gè)我的賬戶子菜單和自定義頁(yè)面是比較合理的選擇。下面我們來(lái)看一下怎么實(shí)現(xiàn)這個(gè)需求的。

第一步：創(chuàng)建我的賬戶中心新端點(diǎn)，也就是創(chuàng)建新菜單

首先，我們需要使用 add_rewrite_endpoint() 函數(shù)注冊(cè)新的頁(yè)面端點(diǎn)，同時(shí)使用 query_vars 過(guò)濾器注冊(cè)新的查詢字符串。

/**
 * 注冊(cè)在我的賬戶頁(yè)面使用的新的端點(diǎn)
 *
 * @see https://developer.wordpress.org/reference/functions/add_rewrite_endpoint/
 */
function wizhi_endpoints() {
    add_rewrite_endpoint( 'wizhi-endpoint', EP_ROOT | EP_PAGES );
}

add_action( 'init', 'wizhi_endpoints' );

/**
 * 添加新的查詢字符串
 *
 * @param array $vars
 * @return array
 */
function wizhi_query_vars( $vars ) {
    $vars[] = 'wizhi-endpoint';

    return $vars;
}

add_filter( 'query_vars', 'wizhi_query_vars', 0 );

注冊(cè)了新的頁(yè)面端點(diǎn)后，在主題或插件激活后，我們需要使用flush_rewrite_rules()刷新重定向規(guī)則才能使新的頁(yè)面端點(diǎn)生效，或者在 設(shè)置 > 固定鏈接 的選項(xiàng)頁(yè)面創(chuàng)新保存一下選項(xiàng)。如果我們?cè)诩せ钪黝}或插件時(shí)使用 flush_rewrite_rules() 刷新重定向規(guī)則，確保在刷新重定向規(guī)則緩存之前已經(jīng)添加了頁(yè)面端點(diǎn)。

在插件中使用示例：

/**
 * 在插件激活時(shí)，刷新重定向規(guī)則緩存
 */
function wizhi_flush_rewrite_rules() {
    add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
    flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'wizhi_flush_rewrite_rules' );
register_deactivation_hook( __FILE__, 'wizhi_flush_rewrite_rules' );

在主題中使用示例：

/**
 * 主題激活時(shí)，刷新重定向規(guī)則緩存
 */
function my_custom_flush_rewrite_rules() {
    add_rewrite_endpoint( 'my-custom-endpoint', EP_ROOT | EP_PAGES );
    flush_rewrite_rules();
}

add_action( 'after_switch_theme', 'my_custom_flush_rewrite_rules' );

第二步，添加我們創(chuàng)建的自定義菜單到WooCommerce用戶中心菜單

WooCommerce為我們提供了woocommerce_account_menu_items 過(guò)濾器以便我們管理我的賬戶頁(yè)面的菜單。

在菜單上添加新菜單項(xiàng)目

下面的示例演示了如何在 logout 菜單項(xiàng)目前添加一個(gè)新的菜單項(xiàng)目。

/**
 * 在我的賬戶菜單中添加新的菜單項(xiàng)目
 *
 * @param array $items
 * @return array
 */
function wizhi_my_account_menu_items( $items ) {
    // 先移除登出鏈接
    $logout = $items['customer-logout'];
    unset( $items['customer-logout'] );

    // 添加自定義菜單項(xiàng)目
    $items['my-custom-endpoint'] = __( '自定義菜單', 'woocommerce' );

    // 重新添加登出鏈接
    $items['customer-logout'] = $logout;

    return $items;
}

add_filter( 'woocommerce_account_menu_items', 'wizhi_my_account_menu_items' );

我們也可以添加自定義菜單到我的賬戶頁(yè)面菜單中的任意位置。

/**
 * 自定義插入項(xiàng)目到數(shù)據(jù)中的某個(gè)項(xiàng)目之后的輔助功能
 *
 * @param array $items
 * @param array $new_items
 * @param string $after
 * @return array
 */
function my_custom_insert_after_helper( $items, $new_items, $after ) {
    // 搜索指定的位置，+1 就是該位置之后位置
    $position = array_search( $after, array_keys( $items ) ) + 1;

    // 插入新項(xiàng)目
    $array = array_slice( $items, 0, $position, true );
    $array += $new_items;
    $array += array_slice( $items, $position, count( $items ) - $position, true );

    return $array;
}

/**
 * 插入一個(gè)新的自定義菜單到我的賬戶頁(yè)面菜單
 *
 * @param array $items
 * @return array
 */
function wizhi_my_account_menu_items( $items ) {
    $new_items = array();
    $new_items['my-custom-endpoint'] = __( '自定義菜單', 'woocommerce' );

    // 在 `我的訂單` 后面添加新的自定義菜單
    return my_custom_insert_after_helper( $items, $new_items, 'orders' );
}

add_filter( 'woocommerce_account_menu_items', 'wizhi_my_account_menu_items' );

第三步：管理新添加的菜單項(xiàng)目頁(yè)面顯示的內(nèi)容

WooCommerce自動(dòng)為每個(gè)菜單項(xiàng)目創(chuàng)建了一個(gè) hook，用來(lái)顯示該菜單項(xiàng)目對(duì)應(yīng)的頁(yè)面內(nèi)容，該 hook 的名稱為 woocommerce_account_{$endpoint}_endpoint 。

默認(rèn)的WooCommerce我的賬戶菜單端點(diǎn) hooks

默認(rèn)情況下，WooCommerce我的賬戶頁(yè)面菜單有以下幾個(gè) hooks：

• woocommerce_account_orders_endpoint
• woocommerce_account_view-order_endpoint
• woocommerce_account_downloads_endpoint
• woocommerce_account_edit-address_endpoint
• woocommerce_account_payment-methods_endpoint
• woocommerce_account_add-payment-method_endpoint
• woocommerce_account_edit-account_endpoint

為自定義菜單添加頁(yè)面內(nèi)容

/**
 * 自定義菜單頁(yè)面顯示的內(nèi)容
 */
function wizhi_endpoint_content() {
    echo '<p>Hello World!</p>';
}

add_action( 'woocommerce_account_my-custom-endpoint_endpoint', 'wizhi_endpoint_content' );

修改一個(gè)頁(yè)面菜單標(biāo)題

我們或可以通過(guò) the_title 過(guò)濾器修改上面添加的自定義頁(yè)面的標(biāo)題。

/*
 * 修改自定義菜單頁(yè)面標(biāo)題
 *
 * @param string $title
 * @return string
 */
function wizhi_endpoint_title( $title ) {
    global $wp_query;

    $is_endpoint = isset( $wp_query->query_vars['wizhi-endpoint'] );

    if ( $is_endpoint && ! is_admin() && is_main_query() && in_the_loop() && is_account_page() ) {
        // 新頁(yè)面標(biāo)題
        $title = __( '自定義WooCommerce我的賬戶菜單', 'woocommerce' );

        remove_filter( 'the_title', 'wizhi_endpoint_title' );
    }

    return $title;
}

add_filter( 'the_title', 'wizhi_endpoint_title' );

以上代碼只是基礎(chǔ)的演示，具體需要在WooCommerce自定義用戶中心頁(yè)面實(shí)現(xiàn)什么樣的功能，還需要根據(jù)網(wǎng)站和項(xiàng)目的需求確定。如果你的網(wǎng)站添加了WooCommerce自定義用戶中心菜單頁(yè)面，不妨在這里分享出來(lái)，我可以把你的網(wǎng)站作為一個(gè)示例為大家說(shuō)明。