如何在 Woocommerce 的 MyAccount 頁面菜單中添加新菜單

已發表: 2020-01-29

如何在我的帳戶頁面 Woocommerce 中添加新標籤 您是否正在尋找一種直接的方法來在 WooCommerce 的我的帳戶頁面中添加新選項卡，無論他們的技能水平如何，任何 WooCommerce 用戶都可以快速輕鬆地實施該選項卡？ 在我的帳戶頁面中添加新選項卡的快速解決方案需要添加兩個 WooCommerce 過濾器掛鉤，負責添加菜單，另一個負責重定向到添加到相應 URL 的新頁面。

在本教程中，我將向您展示如何在 WooCommerce 我的帳戶菜單中準確添加菜單，然後創建重定向過濾器以將用戶重定向到您喜歡的任何頁面，包括外部重定向。 因此，讓我們從了解“我的帳戶”菜單頁面的工作原理開始吧。

MyAccount WooCommerce 頁面菜單的工作原理

WooCommerce 上的這些選項卡基本上是菜單，可以過濾該頁面的內容並獲取顯示菜單的數組，然後將內容添加到數組並返回內容。

WooCommerce/WordPress 過濾器鉤子

如果您以前沒有使用過過濾器，我在本教程apply_filters 和 do_action中詳細介紹了過濾器，其中我提到了 WordPress 過濾器的工作原理。

另一個很好的例子是我們在本 WordPress 教程中對 the_content 應用的過濾器，用於在默認 WordPress 帖子或頁面內容之前或之後添加內容。

關於過濾器鉤子的足夠信息，現在讓我們關注如何在 WooCommerce 的我的帳戶頁面中添加菜單。

我喜歡以快速的分步總結來開始我的所有教程，以幫助您學習和理解代碼中發生的事情。 我不喜歡只分享代碼並要求您複製粘貼而不解釋代碼的作用。 這是一個很好的方法，因為讀者可以更具創新性並為代碼片段添加更多特定功能。

如何在我的帳戶頁面 WooCommerce 中添加新標籤的步驟

如何在我的帳戶頁面 WooCommerce 中添加新標籤的步驟

要在我的帳戶頁面中添加一個新選項卡，它需要以下三個步驟：

  1. 創建一個過濾器掛鉤以在我的帳戶頁面中添加新選項卡，過濾器應收集菜單上顯示的所有數據，然後推送您的新數據。 （請記住PUSH這個詞，我將在本文後面更詳細地解釋）
  2. 創建第二個過濾器，將您在第一步中添加的菜單的 URL 重定向添加到您創建的頁面。
  3. 將此代碼添加到主題中的 functions.php文件中，或者您可以將此代碼添加到插件類或函數中，您將成功地在 WooCommerce 中的我的帳戶頁面上添加新菜單。

在 Woocommerce 的“我的帳戶”頁面中添加菜單

在過去的幾天裡，一位客戶要求我在現有 WooCommerce 網站的我的帳戶頁面上添加一個新菜單。 理想情況下，菜單應該重定向到我們之前使用BuddyPress添加的論壇。

在本教程中，我想假設是這種情況，我們將繼續將菜單添加到我的帳戶頁面，它應該重定向到論壇。

首先，下圖顯示了我如何在此 WooCommerce 網站的我的帳戶頁面中添加新選項卡並將用戶重定向到論壇的最終產品。

在 Woocommerce 的“我的帳戶”頁面中添加菜單

添加第一個過濾器以將菜單添加到我的帳戶頁面

在我的帳戶頁面中添加新標籤的代碼包括一個過濾器掛鉤和一個回調函數，如下所示：

 //第一個將菜單項添加到我的帳戶 WooCommerce 菜單的鉤子 

函數 example_forum_link( $menu_links ){
 
	// 我們稍後會鉤住“womanide-forum”
	$new = array('example-forum' => '論壇示例');
 
	// 或者如果你需要 2 個鏈接
	// $new = array('link1' => 'Link 1', 'link2' => 'Link 2' );
 
	// 當你想在其他元素之間添加一個元素時，array_slice() 很好
	$menu_links = array_slice($menu_links, 0, 1, true ) 
	+ $新 
	+ array_slice($menu_links, 1, NULL, true);
 
 
	返回 $menu_links;
 
 
}
add_filter ('woocommerce_account_menu_items', 'example_forum_link');

當您將此代碼​​添加到 functions.php 時，您應該會在我的帳戶頁面上看到新菜單，如下圖所示：

在 Woocommerce 的“我的帳戶”頁面中添加菜單

代碼如何運作

  • 在這個過濾器中，我們使用傳遞給回調函數的 $menu_links 變量來獲取數組中 my-account 頁面上的所有菜單。
  • 在我們獲得菜單鏈接數組後，我們使用array_slice() 函數提取然後在我們的新菜單項中推送，然後我們將所有菜單放在一個數組中並附加到woocommerce_account_menu_items WooCommerce 鉤子。
  • 此時，菜單項現在顯示在我的帳戶菜單上

如您所見，過濾器已在默認的我的帳戶菜單上添加了新菜單。 當您單擊菜單時，您將被重定向到404 頁面，因為此新菜單項上的重定向現在正在工作，如下圖所示：

在 Woocommerce 的“我的帳戶”頁面中添加菜單

該頁面在 WooCommerce 儀表板上不存在，但您可以看到 slug example-forum ，我們在第一個過濾器中添加，我們將在第二個過濾器中使用它來重定向到論壇頁面。

添加第二個過濾器以將菜單添加到我的帳戶頁面

如上所述，第二個過濾器將添加我們想要重定向此菜單的頁面，在這種情況下，我們可以使用下面顯示的代碼添加它：

 // 第二個過濾器將 WooCommerce 端點重定向到自定義 URL
功能 forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'example-forum' ) {
	   
		// 這是你添加自定義 URL 的地方，它可以是外部的，在這種情況下，我們需要轉到我在 bbpress 論壇上的個人資料
		// 我將使用這個函數 (bp_core_get_username( bp_loggedin_user_id() );) 來獲取我的個人資料用戶 id 並將其添加到 URL 中，如下所示 
		
		$url = site_url() .'/members/' 。 bp_core_get_username(bp_loggedin_user_id());
 
	}
	返回 $url;
 
}


add_filter('woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4);

當您在我們在上述步驟中添加的第一個過濾器下方添加此代碼時，您的論壇示例菜單應重定向到特定用戶配置文件，如下圖所示，我已重定向到我在 BBPress 論壇上的配置文件。

添加過濾器以將菜單添加到我的帳戶頁面以重定向到另一個頁面

完成代碼片段以在我的帳戶頁面中添加新選項卡並重定向到任何頁面

要將新菜單添加到 WooCommerce 中的我的帳戶頁面菜單，您應該在主題的 functions.pfp 文件中添加下面共享的完整代碼片段，並將變量替換為您要重定向菜單的相應 slug 和頁面。

 //將菜單項添加到我的帳戶 WooCommerce 菜單的第一個鉤子 

函數 example_forum_link( $menu_links ){
 
	// 我們稍後會鉤住“womanide-forum”
	$new = array('example-forum' => '論壇示例');
 
	// 或者如果你需要 2 個鏈接
	// $new = array('link1' => 'Link 1', 'link2' => 'Link 2' );
 
	// 當你想在其他元素之間添加一個元素時，array_slice() 很好
	$menu_links = array_slice($menu_links, 0, 1, true ) 
	+ $新 
	+ array_slice($menu_links, 1, NULL, true);
 
 
	返回 $menu_links;
 
 
}

add_filter ('woocommerce_account_menu_items', 'example_forum_link');


// 第二個過濾器將 WooCommerce 端點重定向到自定義 URL
功能 forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === 'example-forum' ) {
	   
		// 這是您添加自定義 URL 的地方，它可以是外部的，例如在這種情況下，我們需要轉到我在 bbpress 論壇上的個人資料
		// 我將使用這個函數 (bp_core_get_username( bp_loggedin_user_id() );) 來獲取我的個人資料用戶 id 並將其添加到 URL 中，如下所示 
		
		$url = site_url() .'/members/' 。 bp_core_get_username(bp_loggedin_user_id());
 
	}
	返回 $url;
 
}


add_filter('woocommerce_get_endpoint_url', 'forum_example_hook_endpoint', 10, 4);

包起來

閱讀本教程後，在 WooCommerce 上的我的帳戶頁面中創建一個新的菜單選項卡應該不再是一個挑戰。 我已通過一個實際示例逐步解釋瞭如何在我的帳戶頁面中添加新選項卡並創建指向您選擇的頁面的重定向。 我還編寫了有關如何在結帳後添加 WooCommerce 重定向和註冊後添加 WooCommerce 重定向的其他教程。 如果您無法實施此解決方案，您可以尋求專業 WooCommerce 開發人員的幫助。