WooCommerce 로그아웃 페이지 단축 코드를 만드는 방법

게시 됨: 2020-08-22

WooCommerce 로그아웃 페이지 단축 코드 생성 WooCommerce 사이트 어디에서나 사용할 수 있는 WooCommerce 로그아웃 페이지 단축 코드를 생성하시겠습니까? WooCommerce 로그아웃 페이지 단축 코드가 실제로 작동하는 빠른 예제를 찾고 있다면 이 예제를 통해 이 작업을 수행하는 방법을 더 쉽게 이해할 수 있습니다.

단축 코드를 사용하면 WooCommerce 상점 소유자가 코딩 없이 또는 최소한의 코딩 기술로 사이트를 빠르게 사용자 지정할 수 있습니다.

오늘 저는 WooCommerce 로그아웃 페이지 단축 코드를 생성하여 사이트의 아무 곳에나 배포할 수 있는 빠르고 쉽고 뛰어난 방법을 공유하고 버튼 클릭 한 번으로 사용자가 로그아웃됩니다.

평소와 같이 스토어 테마에 코드를 더 쉽게 추가할 수 있도록 내 코드가 작동하는 방식을 단계별로 설명하겠습니다. 신규 WordPress 개발자 또는 WooCommerce 신인 개발자라면

WooCommerce 로그아웃 엔드포인트

기본적으로 WooCommerce는 사용자에게 로그아웃 URL을 생성하는 데 사용할 수 있는 로그아웃을 위한 기본 엔드포인트를 제공하며 아래 이미지에 공유된 WooCommerce 설정에서 액세스할 수 있습니다.

WooCommerce 로그아웃 엔드포인트

이 문서 – WooCommerce 끝점 사용자 지정에 설명된 대로 이 끝점을 원하는 대로 사용자 지정할 수 있습니다.

WooCommerce 로그아웃 엔드포인트 외에도 WooCommerce URL을 사용자 정의하는 데 사용할 수 있는 몇 가지 다른 엔드포인트가 있으며 여기에는 체크아웃 페이지 및 내 계정 페이지 엔드포인트가 포함됩니다.

체크아웃 엔드포인트

다음 끝점은 체크아웃 관련 기능에 사용되며 /checkout 페이지의 URL에 추가됩니다.

  • 지불 페이지 – /order-pay/{ORDER_ID}
  • 주문 접수(감사) – /order-received/
  • 결제 수단 추가 – /add-payment-method/
  • 결제 수단 삭제 – /delete-payment-method/
  • 기본 결제 수단 설정 – /set-default-payment-method/

계정 엔드포인트

다음 끝점은 계정 관련 기능에 사용되며 /my-account 페이지의 URL에 추가됩니다.

  • 주문 – /orders/
  • 주문 보기 – /view-order/{ORDER_ID}
  • 다운로드 – /downloads/
  • 계정 편집(및 비밀번호 변경) – /edit-account/
  • 주소 – /edit-address/
  • 지불 방법 – /payment-methods/
  • 비밀번호 분실 – /lost-password/
  • 로그아웃 – /customer-logout/

WooCommerce 로그아웃 페이지 단축 코드 생성

WooCommerce 로그아웃 엔드포인트를 사용하여 사용자를 로그아웃하고 단축 코드 버튼에 코드를 추가합니다.

WooCommerce 로그아웃 끝점은 – /customer-logout/ 입니다. URL attribute =true 를 추가하여 로그아웃 버튼에서 사용할 로그아웃 URL을 빌드합니다.

전체 URL 구조는 site_url/?logout-endpoint=true 와 같아야 합니다.

WooCommerce 로그아웃 단축 코드 생성

이전에 WordPress 또는 WooCommerce 단축 코드를 생성하지 않은 경우 WordPress 단축 코드를 생성하는 방법을 배우는 데 도움이 되도록 제가 작성한 훌륭한 가이드가 있습니다. – 여기에서 확인하세요.

이제 단계별로 WooCommerce 로그아웃 페이지 단축 코드를 생성해 보겠습니다.

  • 1단계 : 로그아웃 페이지 단축 코드에 대한 작업 후크 및 콜백 함수 생성 – 예를 들어 다음과 같이 생성할 수 있습니다 . add_shortcode( 'wc_logout_shortcode', 'njengah_wc_logout_shortcode' ); . 콜백 함수는 다음과 같이 생성할 수도 있습니다. function njengah_wc_logout_shortcode(){ }
  • 2단계: 사용자가 이 튜토리얼에서 공유한 코드를 사용하여 로그인 했는지 확인 – 사용자가 WordPress에 로그인했는지 확인하는 방법 : if (is_user_logged_in())
  • 3단계: 로그아웃 URL 변수 를 만들고 WooCommerce 끝점 에서 다음과 같이 빌드할 수 있습니다. $wc_shortcode_logout_url = site_url() . '/?customer-logout=true'; $wc_shortcode_logout_url = site_url() . '/?customer-logout=true';
  • 4단계: 버튼 코드를 만들고 클래스를 추가하여 WooCommerce 테마의 색 구성표에 맞게 빠르게 스타일을 지정할 수 있습니다. <button class="wc_logout_shortcode_btn"><a href="<?php echo $wc_shortcode_logout_url; ?>">Log Out</a></button>
  • 5단계: 이 코드를 조합하고 functions.php 파일을 통해 테마에 코드를 추가 하거나 사용자 정의 WooCommerce 플러그인 개발에 코드를 포함할 수 있습니다. functions.php woocommerce에 단축 코드 추가
  • 6단계: 페이지, 게시물 또는 단축 코드를 지원하는 WordPress 위젯의 아무 곳에서나 단축 코드 [wc_logout_shortcode]테스트하면 단축 코드 를 추가한 곳에 WooCommerce 로그아웃 버튼이 표시되어야 합니다.

다음은 WooCommerce 로그아웃 페이지 단축 코드를 생성하기 위해 functions.php에 추가할 수 있는 전체 코드 스니펫입니다.

 /**
 * WooCommerce 로그아웃 페이지 단축 코드 버튼 추가
 */

// 숏코드 액션 후크 

add_shortcode( 'wc_logout_shortcode', 'njengah_wc_logout_shortcode' );

// 콜백 

기능 njengah_wc_logout_shortcode(){
	
    ob_start();
    // 사용자가 로그인했는지 확인 
    if (is_user_logged_in()){ 
          // url 변수 생성 
	   $wc_shortcode_logout_url = site_url() . '/?고객-로그아웃=참';?>
	    <button class="wc_logout_shortcode_btn"><a href="<?php echo $wc_shortcode_logout_url; ?>">로그아웃</a></button> 
        <?php 
	}

    반환 ob_get_clean();
}

이제 아래 이미지와 같이 새 페이지나 게시물에 단축 코드를 추가하여 테스트할 수 있으며 프런트엔드에 버튼이 표시되어야 합니다.

woocommerce 로그아웃 페이지 단축 코드

페이지에서 WooCommerce 로그아웃 단축 코드 버튼 테스트

마지막으로 프런트엔드에서 로그아웃 버튼을 테스트하고 아래 이미지와 같이 작동하는지 확인해야 합니다. 모든 단계를 따랐다면 WooCommerce 로그아웃 단축 코드가 아래 예제와 같이 작동해야 합니다.

woocommerce 로그아웃 단축 코드 예

결론

이 게시물에서는 WooCommerce 로그아웃 기능에 대한 단축 코드를 만드는 방법을 공유했습니다. 확인 메시지 팝업 없이 로그아웃하려면 WooCommerce 로그아웃 확인 메시지를 제거하는 방법에 대한 좋은 가이드를 작성했습니다.

요약하자면 WooCommerce 로그아웃 단축 코드를 생성하려면 기본 WooCommerce 로그아웃 끝점을 활용해야 합니다. 또한 이 끝점 URL을 원하는 변수로 변경하고 코드에 추가하면 작동합니다!

유사한 기사