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

文 / @WordPress主题

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为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。