为 WooCommerce 添加新的前端用户中心子菜单及自定义功能页面

WooCommerce 账户中心页面默认有一个我的账户侧边栏，该侧边栏是用户中心所有功能的一个菜单链接。对于使用 WooCommerce 进行商品销售的网站来说，这些功能基本上够用了。如果想进行 WooCoommerce 二次开发，在 WooCommerce 的前端用户中心实现一些自定义功能，加在 WooCommerce 默认的功能页面显然是不合适的，这时候，我们为 WooCommerce 添加一个我的账户子菜单和自定义页面是比较合理的选择。下面我们来看一下怎么实现这个需求的。

第一步：创建我的账户中心新端点，也就是创建新菜单

首先，我们需要使用 add_rewrite_endpoint() 函数注册新的页面端点，同时使用 query_vars 过滤器注册新的查询字符串。

/**
 * 注册在我的账户页面使用的新的端点
 *
 * @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 );

注册了新的页面端点后，在主题或插件激活后，我们需要使用flush_rewrite_rules()刷新重定向规则才能使新的页面端点生效，或者在 设置 > 固定链接 的选项页面创新保存一下选项。如果我们在激活主题或插件时使用 flush_rewrite_rules() 刷新重定向规则，确保在刷新重定向规则缓存之前已经添加了页面端点。

在插件中使用示例：

/**
 * 在插件激活时，刷新重定向规则缓存
 */
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' );

在主题中使用示例：

/**
 * 主题激活时，刷新重定向规则缓存
 */
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' );

第二步，添加我们创建的自定义菜单到 WooCommerce 用户中心菜单

WooCommerce 为我们提供了woocommerce_account_menu_items 过滤器以便我们管理我的账户页面的菜单。

在菜单上添加新菜单项目

下面的示例演示了如何在 logout 菜单项目前添加一个新的菜单项目。

/**
 * 在我的账户菜单中添加新的菜单项目
 *
 * @param array $items
 * @return array
 */
function wizhi_my_account_menu_items( $items ) {
    // 先移除登出链接
    $logout = $items['customer-logout'];
    unset( $items['customer-logout'] );

    // 添加自定义菜单项目
    $items['my-custom-endpoint'] = __( '自定义菜单', 'woocommerce' );

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

    return $items;
}

add_filter( 'woocommerce_account_menu_items', 'wizhi_my_account_menu_items' );

我们也可以添加自定义菜单到我的账户页面菜单中的任意位置。

/**
 * 自定义插入项目到数据中的某个项目之后的辅助功能
 *
 * @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;

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

    return $array;
}

/**
 * 插入一个新的自定义菜单到我的账户页面菜单
 *
 * @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' );

第三步：管理新添加的菜单项目页面显示的内容

WooCommerce 自动为每个菜单项目创建了一个 hook，用来显示该菜单项目对应的页面内容，该 hook 的名称为 woocommerce_account_{$endpoint}_endpoint 。

默认的 WooCommerce 我的账户菜单端点 hooks

默认情况下，WooCommerce 我的账户页面菜单有以下几个 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

为自定义菜单添加页面内容

/**
 * 自定义菜单页面显示的内容
 */
function wizhi_endpoint_content() {
    echo '<p>Hello World!</p>';
}

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

修改一个页面菜单标题

我们或可以通过 the_title 过滤器修改上面添加的自定义页面的标题。

/*
 * 修改自定义菜单页面标题
 *
 * @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() ) {
        // 新页面标题
        $title = __( '自定义 WooCommerce 我的账户菜单', 'woocommerce' );

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

    return $title;
}

add_filter( 'the_title', 'wizhi_endpoint_title' );

以上代码只是基础的演示，具体需要在 WooCommerce 自定义用户中心页面实现什么样的功能，还需要根据网站和项目的需求确定。如果你的网站添加了 WooCommerce 自定义用户中心菜单页面，不妨在这里分享出来，我可以把你的网站作为一个示例为大家说明。