Woocommerce의 MyAccount 페이지 메뉴에 새 메뉴를 추가하는 방법

게시 됨: 2020-01-29

내 계정 페이지에 새 탭을 추가하는 방법 Woocommerce WooCommerce의 내 계정 페이지에 새 탭을 추가하는 간단한 방법을 찾고 계십니까? WooCommerce 사용자의 기술 수준에 관계없이 빠르고 쉽게 구현할 수 있습니까? 내 계정 페이지에 새 탭을 추가하는 빠른 솔루션에는 메뉴 추가를 처리하는 두 개의 WooCommerce 필터 후크를 추가하고 다른 하나는 해당 URL에 추가된 새 페이지로 리디렉션하는 작업을 추가해야 합니다.

이 튜토리얼에서는 WooCommerce 내 계정 메뉴에 메뉴를 정확히 추가한 다음 외부 리디렉션을 포함하여 원하는 페이지로 사용자를 리디렉션하는 리디렉션 필터를 만드는 방법을 보여줍니다. 내 계정 메뉴 페이지가 작동하는 방식을 이해하고 시작하겠습니다.

MyAccount WooCommerce 페이지 메뉴 작동 방식

WooCommerce의 이러한 탭은 기본적으로 메뉴이며 해당 페이지의 콘텐츠를 필터링하고 메뉴를 표시하는 배열을 가져온 다음 배열에 콘텐츠를 추가하고 콘텐츠를 반환할 수 있습니다.

WooCommerce/WordPress 필터 후크

이전에 필터로 작업한 적이 없다면 WordPress 필터 작동 방식 을 언급한 이 튜토리얼 apply_filters 및 do_action 에서 필터에 대한 자세한 소개를 작성했습니다.

또 다른 좋은 예는 기본 WordPress 게시물 또는 페이지 콘텐츠 전후에 콘텐츠를 추가하기 위해 이 WordPress 자습서에서 _content에 적용한 필터 입니다.

필터 후크에 대한 정보는 충분했으니 이제 WooCommerce의 내 계정 페이지에 메뉴를 추가하는 방법에 집중하겠습니다.

코드에서 무슨 일이 일어나고 있는지 배우고 이해하는 데 도움이 되는 빠른 단계별 요약으로 모든 자습서를 시작하고 싶습니다. 나는 코드를 공유하고 코드가 무엇을 하는지 설명하지 않고 복사하여 붙여넣기를 요청하는 것을 좋아하지 않습니다. 독자가 코드 조각에 더 혁신적이고 구체적인 기능을 추가할 수 있으므로 이는 좋은 접근 방식입니다.

내 계정 페이지에 새 탭을 추가하는 방법 WooCommerce

내 계정 페이지에 새 탭을 추가하려면 다음과 같은 세 단계를 거쳐야 합니다.

내 계정 페이지에 새 탭을 추가하는 필터 후크를 만들고 필터는 메뉴에 표시된 모든 데이터를 수집한 다음 새 데이터를 푸시해야 합니다 . (PUSH라는 단어를 기억하세요. 이 게시물의 뒷부분에서 더 자세히 설명하겠습니다)
생성한 페이지에 첫 번째 단계에서 추가한 메뉴의 URL 리디렉션을 추가하는 두 번째 필터를 생성합니다.
이 코드를 테마의 functions.php 파일에 추가하거나 이 코드를 플러그인 클래스 또는 기능에 추가하면 WooCommerce의 내 계정 페이지에 새 메뉴가 성공적으로 추가됩니다.

Woocommerce의 내 계정 페이지에 메뉴 추가

지난 며칠 동안 고객이 기존 WooCommerce 사이트의 내 계정 페이지에 새 메뉴를 추가해 달라고 요청했습니다. 이상적으로는 메뉴가 이전에 BuddyPress 를 사용하여 추가한 포럼 으로 리디렉션되어야 했습니다.

이 튜토리얼에서는 이것이 사실이라고 가정하고 메뉴를 내 계정 페이지에 추가하고 포럼으로 리디렉션되어야 합니다.

먼저 아래 이미지는 이 WooCommerce 사이트의 내 계정 페이지에 새 탭을 추가하고 사용자를 포럼으로 리디렉션한 최종 제품을 나타냅니다.

Woocommerce의 내 계정 페이지에 메뉴 추가

내 계정 페이지에 메뉴 추가를 위한 첫 번째 필터 추가

내 계정 페이지에 새 탭을 추가하는 코드는 아래와 같이 필터 후크와 콜백 함수를 포함합니다.

 //내 계정 WooCommerce 메뉴에 메뉴 항목을 추가하는 첫 번째 후크 

function example_forum_link( $menu_links ){
 
	// 나중에 "womanide-forum"을 연결합니다.
	$new = array( 'example-forum' => '포럼 예제' );
 
	// 또는 2개의 링크가 필요한 경우
	// $new = array( 'link1' => '링크 1', 'link2' => '링크 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의 내 계정 페이지에 메뉴 추가

코드 작동 방식

이 필터에서 우리는 배열의 my-account 페이지에 있는 모든 메뉴를 얻기 위해 콜백 함수에 전달한 $menu_links 변수를 사용하고 있습니다.
메뉴 링크 배열을 얻은 후 array_slice() 함수 를 사용하여 추출한 다음 새 메뉴 항목에서 PUSH 를 수행한 다음 모든 메뉴를 하나의 배열로 만들고 woocommerce_account_menu_items WooCommerce 후크에 연결합니다.
이 시점에서 메뉴 항목이 이제 내 계정 메뉴에 표시됩니다.

보시다시피 필터는 기본 내 계정 메뉴에 새 메뉴를 추가했습니다. 메뉴를 클릭하면 이 새 메뉴 항목에 대한 리디렉션이 아래 이미지와 같이 작동하므로 404 페이지 로 리디렉션됩니다.

Woocommerce의 내 계정 페이지에 메뉴 추가

이 페이지는 WooCommerce 대시보드에 없지만 첫 번째 필터에서 추가한 슬러그 example-forum 을 볼 수 있으며 두 번째 필터에서 이를 사용하여 포럼 페이지로 리디렉션합니다.

내 계정 페이지에 메뉴 추가를 위한 두 번째 필터 추가

위에서 언급했듯이 두 번째 필터는 이 메뉴를 리디렉션하려는 페이지를 추가하고 이 경우 아래 표시된 코드를 사용하여 추가할 수 있습니다.

 // WooCommerce 끝점을 사용자 지정 URL로 리디렉션하는 두 번째 필터
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === '예시 포럼' ) {
	   
		// 이것은 사용자 정의 URL을 추가하는 곳입니다. 예를 들어 외부에 있을 수 있습니다. 이 경우에는 bbpress froum에서 내 프로필로 이동해야 합니다.
		// 이 함수(bp_core_get_username( bp_loggedin_user_id() );)를 사용하여 프로필 사용자 ID를 가져와 아래와 같이 URL에 추가합니다. 
		
		$url = site_url() .'/구성원/' . 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 메뉴에 메뉴 항목을 추가하는 첫 번째 후크 

function example_forum_link( $menu_links ){
 
	// 나중에 "womanide-forum"을 연결합니다.
	$new = array( 'example-forum' => '포럼 예제' );
 
	// 또는 2개의 링크가 필요한 경우
	// $new = array( 'link1' => '링크 1', 'link2' => '링크 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로 리디렉션하는 두 번째 필터
function forum_example_hook_endpoint( $url, $endpoint, $value, $permalink ){
 
	if( $endpoint === '예시 포럼' ) {
	   
		// 이것은 사용자 정의 URL을 추가하는 곳입니다. 이 경우 bbpress froum의 내 프로필로 이동해야 하는 것처럼 외부에 있을 수 있습니다.
		// 이 함수(bp_core_get_username( bp_loggedin_user_id() );)를 사용하여 프로필 사용자 ID를 가져와 아래와 같이 URL에 추가합니다. 
		
		$url = site_url() .'/구성원/' . 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 개발자의 도움을 요청할 수 있습니다.