Как добавить новое меню в меню страницы MyAccount в Woocommerce

Опубликовано: 2020-01-29

Как добавить новую вкладку на страницу «Моя учетная запись» Woocommerce Вы ищете простой способ добавить новую вкладку на страницу моей учетной записи в WooCommerce, который может быть реализован быстро и легко любым пользователем WooCommerce, независимо от его уровня навыков? Быстрое решение для добавления новой вкладки на странице моей учетной записи влечет за собой добавление двух хуков фильтра WooCommerce, которые заботятся о добавлении меню, а другой заботится о перенаправлении на новую страницу, добавленную к соответствующему URL-адресу.

В этом уроке я покажу вам, как точно добавить меню в меню моей учетной записи WooCommerce, а затем создать фильтр перенаправления, чтобы перенаправлять пользователей на любую страницу, которую вы предпочитаете, включая внешнее перенаправление. Итак, давайте начнем с понимания того, как работает страница меню «Моя учетная запись».

Как работает меню страницы MyAccount WooCommerce

Эти вкладки в WooCommerce в основном представляют собой меню, и можно отфильтровать содержимое этой страницы и получить массив, который отображает меню, затем добавить содержимое в массив и вернуть содержимое.

Хуки фильтра WooCommerce/WordPress

Если вы раньше не работали с фильтрами, я написал подробное введение в фильтр в этом руководстве apply_filters и do_action, где я упомянул , как работают фильтры WordPress .

Другим хорошим примером является фильтр, который мы применили к the_content в этом руководстве по WordPress, чтобы добавить контент до или после записи 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, правда) 
	+ $ новый 
	+ array_slice($menu_links, 1, NULL, true);
 
 
	вернуть $menu_links;
 
 
}
add_filter('woocommerce_account_menu_items', 'example_forum_link');

Когда вы добавите этот код в functions.php, вы должны увидеть новое меню на странице моей учетной записи, как показано на изображении ниже:

Добавить меню на страницу «Моя учетная запись» в Woocommerce

Как работает код

  • В этом фильтре мы используем переменную $menu_links, которую мы передаем функции обратного вызова, чтобы получить все меню на странице моей учетной записи в виде массива.
  • После того, как мы получим массив ссылок меню, мы используем функцию array_slice() для извлечения, а затем PUSH в нашем новом пункте меню, затем мы все меню в одном массиве и присоединяем к хуку woocommerce_account_menu_items WooCommerce.
  • На данный момент пункт меню теперь отображается в меню моей учетной записи.

Как видите, фильтр добавил новое меню в меню моей учетной записи по умолчанию. Когда вы нажмете на меню, вы будете перенаправлены на страницу 404, так как перенаправление в этом новом пункте меню теперь работает, как показано на изображении ниже:

Добавить меню на страницу «Моя учетная запись» в Woocommerce

Эта страница не существует на панели инструментов WooCommerce, но вы можете увидеть слаг 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());), чтобы получить идентификатор пользователя моего профиля и добавить его в 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 вашей темы и заменить переменные соответствующим слагом и страницей, на которую вы хотите перенаправить меню.

 //Первый хук, который добавляет пункт меню в меню моей учетной записи 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, правда) 
	+ $ новый 
	+ 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());), чтобы получить идентификатор пользователя моего профиля и добавить его в 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.