为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>HelloWorld!</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()
                        

                            

                                
                                

                                    

                                        扫码添加UTHEME微信为好友
                                    
                                    

                                        · 分享WordPress相关技术文章，主题上新与优惠动态早知道。
                                        

                                        · 微信端最大WordPress社群，限时免费入群。