배송 관련 정보도 미국 온라인 쇼핑과 한국 온라인 쇼핑간 특징이 극명하게 들어나는 요인중의 하나입니니다.

미국은 배송 지역이 넓기 때문에 상대적으로 다양한 배송 옵션을 제공합니다.

• 비용이 달라지는 배송 기간/배송 방법,
• 상품을 받는 위치를 집이 아닌 특정 유통 매장으로 설정 등 등

이처럼 다양한 방법을 제공하기 때문에 결제화면에 다양한 배송 방법을 제공하고 소비자가 선택하도록 하고 있습니다.

이러한 연유로 우커머스에서는 우리나라에서 흔히 제공하는 무료 배송 옵션과 배송비 추가 옵션이 같이 나타나 불필요한 오해와 실수가 발생할 수 있죠.

여기에서는 무료 배송의 경우 무료만 표시되고 나머지는 표시되지 않도록하는 방법에 대해서 살펴봅니다.

우커머스 배송비 표시 – 무료時 기본 배송비 숨기기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

우커머스 배송비 표시 – 무료時 기본 배송비 숨기기

[결제 단계 최적화] 우커머스 배송비 표시 – 무료 배송 時 기본 배송비 숨기기

이번에는 배송비와 관련해 사용 경험을 최적화하기 위해 무료 배송비인 경우에는 기본 배송비를 표시하지 않는 방법에 대해서 알아봅니다.

이 글은 이전에 설명했던 “우커머스 배송 지역 및 배송비 설정 방법“과 함께 읽어보면 좋을 듯 합니다.

우커머스는 아무래도 미국 등 서구 지역 중심으로 발전한 프로그램이므로 미국적 쇼핑몰의 특성을 많이 반영하고 있습니다.

미국에서는 배송 기간, 배송 방법 그리고 배송 비용에 따라 다양한 옵션을 제공하고 있습니다.

예를들어 노트북을 구매한다고 할 시 이 노트북을 집으로 지접 배달받을 수도 있고, 아니면 가까운 베스트바이 매장에서 찾아갈 수도 있죠. 그리고 집으로 배송하는 경우도 당일 배송이냐 2일내 배송니냐 5일 내 배송 등 다양한 옵션이 존재합니다.

그렇기대문에 결제화면에서도 이러한 옵션을 소비자가 선택할 수 있도록 옵션을제공합니다.

다양한 배송비 표시 시 문제

우니나라도 최근 이렇게 다양한 옵션을 제공하는 방향으로 점점 변하고 있기는 합니다. 그렇지만아직도 여러 조건들은 매우 단순합니다. 그렇기에 굳이 결제화면에서 배송에 대한 복잡한 옵션을제공할 필요가 낮습니다.

특히나 배송비를 구매 금액과 쿠폰등으로 무료 옵션을 제공하는 경우 옵션을 모두 보여주는 것은 잘못하면 문제의 소지조차 있기도 합니다. 그래서 단순하게 최종 확정된 옵션만 보여주기를 선호합니다.

아래처럼 배송비에 무료와 기본이 모두 표현되고 있다면, 비록 체크 표시로 구분된다고는 하지만 혼란의 여지가 있기도하고, 고객이 실수로 다른 곳을 체크해 배송비 부여가 잘못 될 수 있습니다.

고객이 버튼을 옮겼다고 하드라도 말썽의 소지가 다분하므로 차라리 확정된 하나만 나타나도록 하는 것이 필요하죠.

무료일 때 배송비 표시 시 기본 배송료 숨기기

이렇게 두가지가 모두 보이는 경우는 구매액이나 쿠폰으로 인해 무료 배송 조건이 되었을 때입니다.

따라서 무료 배송으로 전환되었을 시 고정 배송비 또는 기본 배송비는 보이지 않도록 만드는 것이 좋습니다.

이를 해결해주는 코드입니다. 이 코드를 차일드 테마 function.php에 추가합니다.

add_filter( 'woocommerce_package_rates', 'hide_fixed_shipping_cost_when_free_is_available', 100 );

function hide_fixed_shipping_cost_when_free_is_available( $rates ) {
  $free = array();
  foreach ( $rates as $rate_id => $rate ) {
    if ( 'free_shipping' === $rate->method_id ) {
      $free[ $rate_id ] = $rate;
      break;
    }
  }
  return ! empty( $free ) ? $free : $rates;
}Code language: PHP (php)

또는 아래와 같은 코드를 적용합니다. 이 코드는 무료 배송의 경우 모든 지역에서 모든 배송 방법을 표현하지 않는다고 합니다.

Snippet #2: Unset ALL rates in ALL zones when ANY Free Shipping rate is available

add_filter( 'woocommerce_package_rates', 'puripia_unset_shipping_when_free_is_available_all_zones', 10, 2 );
  
function puripia_unset_shipping_when_free_is_available_all_zones( $rates, $package ) {
     
    $all_free_rates = array();
    
        foreach ( $rates as $rate_id => $rate ) {
      if ( 'free_shipping' === $rate->method_id ) {
         $all_free_rates[ $rate_id ] = $rate;
         break;
      }
   }
    
   if ( empty( $all_free_rates )) {
        return $rates;
        } else {
        return $all_free_rates;
        } 
}Code language: PHP (php)

위 코드를 적용하면 위와 같은 조건에서 무료 하나만 보입니다. 아래 이미지를 참조하시죠.

우커머스에서 배송 지역 및 배송비 설정 방법에 대한 다양한 글들이 많지만 최근 우컴스 버젼을 기반으로 정리한 글을 찾기 어려웠습니다.

최근 우커머스 버젼으로 우커머승서 배송 지역 및 배송비 성정 방법에 대해 간단히 살펴봅니다.

우커머스 배송 지역 및 배송비 설정 방법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

우커머스 배송 지역 및 배송비 설정 방법

여기에서는 실제 상품이 판매 시 배송비 등을 어떻게 책정할 것인지에 대해서 알아 봅니다.

인터넷에는 우커머스에서 배송 지역 및 배송비 설정 방법에 대한 다양한 글들이 많지만 최근 우컴스 버젼을 기반으로 정리한 글을 찾기 어려웠습니다.

그래서 크게 다르지는 않지만 최신 버젼을 기반으로 우커머스 배송 지역 설정 및 배송비 설정 방법에 대해 정리해 봤습니다.

1. 일반 배송 설정

배송에 대한 일반 옵션 내용을 정하는 곳입니다.

판매지역을 어디까지 할 것인지, 이에 따라 배송 지역은 어디까지 할것인지 등등 설정합니다.

이는 우커머스 – 설정 기본에서 할 수 있습니다.

1. 판매 지역 : 모든 국가에 판매할 것인지? 아니면 특정 국가에서만 판매할 것인디 등의 판매 지역을 정합니다.
2. 특정 국가 : 만약 특정국가만 판매한다고 했으며 그 특정국가가 어디인지를 정합니다. 여기에서는 대한민국만을 정의했습니다.
3. 배송 지역 : 판매하는 모든 국가에 배송할 것인지 아니면 특정 국가만 배송할 것인지를 정의합니다. 이는 아마존 어필리에이트처럼 전세계를 대상으로 판매는 하되 배송은 담당하지 않는 등 다양한 상황에 맞추어 세팅할 수 있습니다.

2. 배송설정 – 배송관련 기본 사항

우커머스 배송설정에서는 배송비 계산을 어떻게 할것인지, 배송 목적지를 어디로 설정할 것인지, 디버그 모드를 활성화할 것인지를 설정합니다.

1. 장바구니 페이지에 배송 계산기 활성화 : 장바구니 페이지에서 배송비를 계산하고, 알수 있도록 하는 옵션입니다.
   우리나라 고객들은 최종 결제 단계에서 갑자기 금액이 올라가는 것을 굉장히 싫어하므로 가능하면 장바구니에서 배송비를 포함한 비용을 알 수 있도록 하는 것에 좋다고 합니다.
2. 주소가 입력될 때까지 배송 비용 감추기 : 마찬가지로 갑자기 배송료가 튀어나오는 것이 쇼핑 경험에 그리 좋지는 않습니다.
3. 배송 목적지 : 고객 청구 주소를 기본으로하고 필요시 배송 주소를 추가 입력할 수 있게 합니다.
4. 디버그 모드 : 배송 디버그 모드를 활성화하면 결제 단계에서 배송 방식 메세지를 뿌려줍니다. 이는 불필한 정보에 가까우므로 사용하지 않습니다.

3. 배송구역 설정

여기에서는 배송구역을 어떻게 나눌 것인지를 정의합니다.

대한민국을 하나의 배송구역을 보고 전국을 동일한 배송비 정책을 사용할 수도 있고, 대한민국을 몇개의 구역으로 나누어서 각기 다른 배송 설정을 할 수 있습니다.

우리가 그동안 인터넷 쇼핑 시 많이 보았던 도서산간지역, 제주도 등은 분리해서 추가 비용을 받는 것이 일반적이긴 합니다.

따라서 여기서는 대한민국 기본 배송 지역과 도서산간지역 그리고 제주도로 나누는 배송구역을 설정했습니다.

그리고 배송 구역의 순서는 아래 이미지처럼 제주도 > 도서산간지역 > 기본 배송 지역순으로 나열합니다. 그래야 지역적 특성이 제대로 반영됩니다.

여기서 도서산간지역과 제주도를 어떻게 나누느냐가 관건인데요.

4. 배송구역 상세 설정

여기에서는 배송구역을 어떻게 나눌 것인지를 정의합니다.

대한민국을 하나의 배송구역을 보고 전국을 동일한 배송비 정책을 사용할 수도 있고, 대한민국을 몇개의 구역으로 나누어서 각기 다른 배송 설정을 할 수 있습니다.

우리가 그동안 인터넷 쇼핑 시 많이 보았던 도서산간지역, 제주도 등은 분리해서 추가 비용을 받는 것이 일반적이긴 합니다.

따라서 여기서는 대한민국 기본 배송 지역과 도서산간지역 그리고 제주도로 나누는 배송구역을 설정했습니다.

3.1. 도서 산간 지역 설정

배송구역 추가를 선택해, 구역 명을 적고 구역 포함 지역을 입력합니다. 도서 산간 지역의 구역 포함 지역은 G마켓에서 설정한 도서 산간 지역에 해당하는 우편번호를 입력하면 됩니다.

아래는 도서 산간 지역에 해당하는 우편번호입니다.

22386...22388
23004...23010
23100...23116
23124...23136
31700
31708
32133
33411
40200...40240
52570...52571
53031...53033
53089...53104
54000
56347...56349
57068...57069
58760...58762
58800...58806
58809...58810
58816...58818
58826
58828...58866
58953...58958
59102...59103
59106
59127
59129
59137...59145
59149...59166
59421
59531
59551
59563
59568
59650
59766
59781...59790Code language: PHP (php)

아래는 우커머스 – 배송 – 배송구역에서 도서산간지역을 설정한 모습니다.

3.2. 제주도 구역 설정

앞의 도서 산간 지역과 마찬가지로 제주도 지역도 제주도에 해당하는 우편번호를 사용해 제주도 구역 포함 지역을 설정합니다.

아래는 제주도 지역에 해당하는 우편버호입니다.

63000…63644Code language: PHP (php)

5. 배송 비용 설정

배송구역이 설정되었으며 배송 비용을 설정합니다.

이 배송 비용은 각 배송구역에서 고정 요금을 받을 지, 아니면 무료로 할지 등등을 정의합니다.

이 사이트의 초기 설정은 배송 구역별 기본 요금을 설정하고 일정 조건이 되면 무료 배송토록 했습니다.

배송구역에서 배송 방법 추가 버튼을 누르면 고정 요금/무료배송/방문수령 중 하나를 선택해 세팅할 수 있습니다.

만약 고정요금을 선택하면 아래 이미지처럼 세금 상태와 배송 비용을 설정할 수 있습니다.

무료배송 설정은 조금 더 손이 가기는 합니다. 우선 무료 배송 조건을 선택하고 , 필요에 따라 최저 주문 금액을 입력합니다.

여기에서는 최소 주문 금액 또는 쿠폰을 선택하고 최저 주문 금액을 3만원으로 세팅했습니다. 아래는 그러한 설정 단계를 보여주고 있습니다.

그러면 지역 내에서 고정요금과 무료배송의 순서를 어떻게 나영해야 할까요?

배송구역내에서 배송 비용 조건은 무료 배송을 먼저 위치시키고 이어 고정 배송 요금을 후순위로 위치시킵니다.

이전에 바로구매 버튼을 통해서 쇼핑 단계를 줄이는 방법에 대해서 살펴 보았는데요. 이렇게 구매 단계를 줄이는 다양한 방법이 존재합니다.

오늘 소개하려는 원페이지 체크아웃(One Page Checkout)은 장바구니 확인과 결재 단계를 동시에 처리할 수 있는 방법입니다.

[결제 단계 최적화] 우커머스 원페이지 체크아웃(One Page Checkout) 구현 방법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[결제 단계 최적화] 우커머스 원페이지 체크아웃(One Page Checkout) 구현 방법

여기에서는 결제 단계 최적화 기법의 하나로 원페이지 체크아웃에 대해서 알아봅니다.

체크아웃 페이지를 구성하는 방식은 체크아웃 단계를 몇 페이지로 구현했느냐에 따라서 원페잊 체크아웃과 다단계 체크아웃(Multi-step checkout)으로 나눌 수 있습니다.

1. 원페이지 체크아웃(One Page Checkout)이란

원페이지 체크아웃이란 구매 상품 리뷰(구매 상품 갯수 및 구매 여부 조절), 청구 및 배송지 입력 그리고 결제 수단까지를 한 페이지에서 모두 진행하는 것을 말합니다.

여러 단계를 거치지 않고 한 페이지에서 진행되므로 상대적으로 빠르고 간편하게 결제를 진행할 수 있습니다.

• 상대적으로 클릭해야하는 횟수가 줄어듭니다.
• 여러 단계를 거치지 않기 때문에 보다 쉬워 보입니다.

반면에 부정적인 면도 분명히 존재합니다.

• 원페이지 체크아웃은 상대적으로 길어지기 때문에 고객들이 부담을 느낄 수 있습니다. 부담을 느끼고 쇼핑을 중단할 가능성도 있죠.
• 상대적으로 길기 때문에 고객들이 어디까지 했는지 모를 수 있고, 혼란스러워 할 수 있습니다. 이는 앞에서 지적 사항과 연관이 깊습니다.
• 사이트 속도가 느려집니다. 한페이지에 많은 정보를 제공하려고 하기 때문에 속도가 느려질 수 있고 이는 고객들이 쇼핑을 중단할 수 있는 위험성을 가지고 있습니다.
• 분석하기가 애매합니다. 원페이지 체크아웃의 어느 단계에서 쇼핑을 중단했는지와 같은 중요한 정보를 얻기 힘듭니다.

2. 원페이지 체크아웃 구현 방법

원페이지 체크아웃을 가장 잘 구현하려면 어떻게 해야할까요?

2.1. WooCommerce One Page Checkout(79$)

컨셉적으로 원페이지 체크아웃은 우커머스 원페이지 체크아웃(WooCommerce One Page Checkout) 플러그인이 잘 구현되어 있다는 생각입니다.
원페이지 체크아웃 컨셉에 충실한 플러그인이라고나 할까요?

여기에서는 Choose Your product, Billing Details, Additional Information, Your order, Proceed checkout을 한 페이지에서 구현해 놓고 있습니다.

아래 이미지를 참조해 보시죠.

2.2. Woocommerce one page checkout and layouts

얼마전에 배포되기 시작한 완전히 새로 등장한 플로그인이 Woocommerce one page checkout and layouts입니다.

이 플러그인은 한 페이지 내에서 Billing details, Shipping methods, Payment Method, Conform Your Order, Cart total, Proceed To Paypal과 같은 단계를 한페이지에서 보여주고 있습니다.

사용해보지는 않았는데 참고로 공유드립니다.
아래는 플러그인 소개 시 공유하는 원페이지 체크아웃 이미지입니다.

3.3. WooCommerce Direct Checkout Pro(10$)

최근에 WooCommerce express checkout이라는 이름으로 새롭게 런칭하고 있는 “우머커스 다이렉트 체크아웃 프로(WooCommerce Direct Checkout Pro) 플러그인은 “바로구매” 기능과 “원페이지 체크아웃”기능을 동시에 제공하고 있는 플러그인입니다.

제가 사용하는 플러그인으로 가격은 상대적으로 저렴하고, 싼 가격만큼 원페이지 체크아웃 기능은 섬세하지 못합니다. 특히 모바일 최적화가 아직 이루어지 않았습니다.

아래 초기 세팅 후 모바일에서 보여지는 모습압니다.

이 플러그인의 모바일 최적화에 대해서는 아래 글을 참조해 조정하면 좋을 것 같습니다.

[쇼핑경험 개선] 우커머스 쇼핑몰에 바로구매 버튼 추가로 구매 단계 줄이기

여러가지 튜닝을 거치면 모바일에서 이와 같은 모습으로 보여질 수 있습니다.

이전에 쇼핑몰 메뉴에 우커머스 로그인 및 회워가입 메뉴를 추가하는 방법에 대해서 살펴보았습니다. 이번에는 비슷한 주제이기는 하지만 워드프레스 로그인/로그아웃 링크를 메뉴에 추가하는 다양한 방ㅂ버에 대해서 살펴보겠습니다.

플러그인 없이 메뉴에 워드프레스 로그인 로그아웃 링크 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

플러그인 없이 메뉴에 워드프레스 로그인 로그아웃 링크 추가하기

이전 포스팅에서 우커머스 내 계정 로그인 및 회원 가입을 메뉴에 추가하는 방법에 대해서 알아봤습니다.

우커머스 내 계정 로그인 및 회원 가입 기능을 이용하는 것도 좋은 선택이지만 워드프레스 본연의 로그인과 회원가입 폼을 이용하는 것도 굉장한 의미가 잇을 것으로 판단합니다.

따라 오늘은 플러그인없이 메뉴에 워드프레스 본연의 로그인 및 로그아웃 잉크 추가 방법에 대해서 살펴보도록 하겠습니다.

쇼핑몰 메뉴에 우커머스 로그인/로그아웃 링크 추가하기

우커머스 로그인과 로그아웃 링크는 내 계정 정보를 활용한다는 점에서 효율적이지만 우커머스보다는 워드프레스 중심으로 사이트를 운영하는 경우는 아무래도 워드프레스 로그인과 로그아웃이 더 유용하다고 할 수 있습니다.

1. 워드프레스 로그인 링크 추가하기

워드프레스 로그인 링크를 추가하는 것은 이전에 설명한 우커머스 내 계정 로그인 및 회원 가입 링크를 메뉴에 추가하는 방법과 유사합니다.

• 로그인 전에는 계정이 있는 경우 로그인, 계정이 없는 경우는 회원가입으로 들어갈 수 있도록 Loh In과 Sign Up의 두개 메뉴가 나타납니다.
• 로그인 후에는 로그아웃 메뉴만 나타납니다.

이렇게 메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가하는 방법은 아래 코드를 function.php 파일에 추가하는 것입니다. 물로 child theme의 function.php에 추가하는 것이 좋겠죠.

add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 20, 2 );
function add_login_logout_register_menu( $items, $args ) {
      if ( $args->theme_location != 'primary' ) {
            return $items;
      }

      if ( is_user_logged_in() ) {
            $items .= '<li><a href="' . wp_logout_url() . '">' . __( 'Log Out' ) . '</a></li>';
      } else {
            $items .= '<li><a href="' . wp_login_url() . '">' . __( 'Login In' ) . '</a></li>';
            $items .= '<li><a href="' . wp_registration_url() . '">' . __( 'Register/Sign Up' ) . '</a></li>';
      }

      return $items;
}Code language: PHP (php)

자기 테마 메뉴의 위치 슬러그 찾아 변경하기

여기서도 마찬가지로 메뉴의 위치 슬러그 찾아 변경해야하는데요.

위 코드 중에서 theme_location == ‘primary’)의 ‘primary’가 메뉴의 위치 슬러그를 지칭하고 있습니다. 따라 본인이 사용하는 테마의 메뉴 세팅 부분에서 사용하는 메뉴의 위치 슬러그를 찾아 변경해 주어야 합니다.

이는 메뉴 설정화면에서 크롬의 개발자도구 – 요소 찾기나 파이어폭스의 개발자도구 – 요소 찾기에서 menu-locations 다음에 나오는 위치 슬러그를 찾아 볼 수 있습니다.

아래 이미지는 파이어폭스의 개발자도구 – 검사기에서 메뉴 중 Main을 찍었을 시 검사기에서 나타난 상태인데요. 흐릿한 파란색으로 칠해진 부분을 살펴보면 menu-locations[main menu]를 찾을 수 있죠. 바로 main_menu가 우리가 찾고자하는 메뉴의 위치 슬러그입니다.

최종적으로는 아래와 같은 코드로 변경됩니다.

add_filter( 'wp_nav_menu_items', 'add_login_logout_register_menu', 20, 2 );
function add_login_logout_register_menu( $items, $args ) {
      if ( $args->theme_location != 'main_menu' ) {
            return $items;
      }

      if ( is_user_logged_in() ) {
            $items .= '<li><a href="' . wp_logout_url() . '">' . __( 'Log Out' ) . '</a></li>';
      } else {
            $items .= '<li><a href="' . wp_login_url() . '">' . __( 'Login In' ) . '</a></li>';
            $items .= '<li><a href="' . wp_registration_url() . '">' . __( 'Register/Sign Up' ) . '</a></li>';
      }

      return $items;
}Code language: PHP (php)

2. 보다 근원적인 해결 방안 – 메뉴 로그인 링크

위에서 제시한 방법은 특정메뉴별로 위치 슬러그를 찾아서 기능 정의를 해주어야 합니다.

메뉴를 하나로 통일해서 사용한다면 별 문제가 없겠지만 여러 메뉴에 이러한 로그인 링크를 적용하고 싶다면 메뉴 설정에서 직접 추가가 가능한 방식이 좋을 것입니다.

제가사용 테마의 경우도 일반 PC 접속 상태에서는 정상적으로 로그인 로그아웃 그리고 회원가입이 나타나지만 폭이 좁아져 테블릿이나 모바일 모드가되면 기능이 사라지더군요.

그렇기때문에 보다 근원적으로 메뉴 설정에서 세팅 가능하도록 만들어주는 것이 필요한데요.

아래에서 제시하는 코드는 메우 길지는 하지만 메뉴 설정에서 링크를 추가할 수 있도록 해줍니다.

function.php 파일에 아래 코드를 추가하고 메뉴 세팅에서 링크를 연결해 주면 됩니다. 그러면 아래와 같이 메뉴 설정에서 메뉴에 추가할 수 있는 상태가 됩니다.

이 방법은 “WordPress Login, Logout Menu Link Without a Plugin”이라는 글에서 소개한 방식입니다.

/********************* START OF THE MENU SNIPPET **********************/

/* To add a metabox in admin menu page */
add_action( 'admin_head-nav-menus.php', 'd2l_add_custommenu_metabox' );
function d2l_add_custommenu_metabox() {
      add_meta_box( 'add-d2l_custommenu', __( 'Register, Log In/Out Links' ), 'd2l_custommenu_metabox', 'nav-menus', 'side', 'default' );
}

/* The metabox code. */
function d2l_custommenu_metabox( $object ) {
      global $nav_menu_selected_id;

      $menukeywords = array(
            '#d2l_login#' => __( 'Log In' ),
            '#d2l_logout#' => __( 'Log Out' ),
            '#d2l_loginout#' => __( 'Log In/Out' ),
            '#d2l_register#' => __( 'Register/Sign Up' ),
            '#d2l_profile#' => __( 'Profile' )
      );

      class d2lCustomMenuItems {
            public $db_id = 0;
            public $object = 'd2l_custommenu';
            public $object_id;
            public $menu_item_parent = 0;
            public $type = 'custom';
            public $title;
            public $url;
            public $target = '';
            public $attr_title = '';
            public $classes = array();
            public $xfn = '';
      }

      $menukeywords_obj = array();
      foreach ( $menukeywords as $value => $title ) {
            $menukeywords_obj[ $title ]                 = new d2lCustomMenuItems();
            $menukeywords_obj[ $title ]->object_id        = esc_attr( $value );
            $menukeywords_obj[ $title ]->title            = esc_attr( $title );
            $menukeywords_obj[ $title ]->url            = esc_attr( $value );
      }
      $walker = new Walker_Nav_Menu_Checklist( array() );
      ?>
      <div id="d2l-custommenu" class="loginlinksdiv">
            <div id="tabs-panel-d2l-custommenu-all" class="tabs-panel tabs-panel-view-all tabs-panel-active">
                  <ul id="d2l-custommenuchecklist" class="list:d2l-custommenu categorychecklist form-no-clear">
                        <?php echo walk_nav_menu_tree( array_map( 'wp_setup_nav_menu_item', $menukeywords_obj ), 0, (object) array( 'walker' => $walker ) ); ?>
                  </ul>
            </div>

            <p class="button-controls">
                  <span class="list-controls">
                        <a href="<?php echo admin_url('/nav-menus.php?d2l_custommenu-tab=all&selectall=1#d2l-custommenu');?>" class="select-all aria-button-if-js" role="button">Select All</a>
                  </span>
                  <span class="add-to-menu">
                        <input type="submit"<?php disabled( $nav_menu_selected_id, 0 ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-d2l-custommenu-menu-item" id="submit-d2l-custommenu" />
                        <span class="spinner"></span>
                  </span>
            </p>
      </div>
      <?php
}

/* Replace the #keyword# by links */
add_filter( 'wp_setup_nav_menu_item', 'd2l_setup_nav_menu_item' );
function d2l_setup_nav_menu_item( $menu_item ) {
      global $currentpage;

      $menukeywords = array( '#d2l_login#', '#d2l_logout#', '#d2l_loginout#', '#d2l_register#', '#d2l_profile#' );

      if ( isset( $menu_item->object, $menu_item->url )
            && $currentpage != 'nav-menus.php'
            && !is_admin()
            && 'custom'== $menu_item->object
            && in_array( $menu_item->url, $menukeywords ) ) {

            $item_url = substr( $menu_item->url, 0, strpos( $menu_item->url, '#', 1 ) ) . '#';

            $item_redirect = str_replace( $item_url, '', $menu_item->url );

            if( $item_redirect == '%actualpage%') {
                  $item_redirect = $_SERVER['REQUEST_URI'];
            }

            switch ( $item_url ) {
                  case '#d2l_login#'    : $menu_item->url = wp_login_url( $item_redirect ); break;
                  case '#d2l_logout#'   : $menu_item->url = wp_logout_url( $item_redirect ); break;
                  case '#d2l_profile#'   :
                        if( is_user_logged_in() ) {
                              $current_user = wp_get_current_user();
                              $menu_item->title = 'Hi, ' . $current_user->display_name;
                              $menu_item->url = get_edit_user_link($current_user->ID);
                        }else{
                              $menu_item->title = '#d2l_profile#';
                        }
                  break;

                  case '#d2l_register#' :
                        if( is_user_logged_in() ) {
                              $menu_item->title = '#d2l_register#';
                        } else {
                              $menu_item->url = wp_registration_url();
                        }
                  break;

                  case '#d2l_loginout#' :
                        if( is_user_logged_in() ) {
                              $menu_item->title = 'Log Out';
                              $menu_item->url = wp_logout_url();
                        } else {
                              $menu_item->title = 'Log In';
                              $menu_item->url = wp_login_url();
                        }
                  break;
            }

            $menu_item->url = esc_url( $menu_item->url );
      }

      return $menu_item;
}


add_filter( 'wp_nav_menu_objects', 'd2l_nav_menu_objects' );
function d2l_nav_menu_objects( $sorted_menu_items ) {
      foreach ( $sorted_menu_items as $k => $item ) {
            if ( $item->title==$item->url && '#d2l_register#' == $item->title ) {
                  unset( $sorted_menu_items[ $k ] );
            }

            if ( $item->title==$item->url && '#d2l_profile#' == $item->title ) {
                  unset( $sorted_menu_items[ $k ] );
            }

      }
      return $sorted_menu_items;
}

/********************* END OF THE MENU SNIPPET **********************/Code language: PHP (php)

메뉴에서 로그인 또는 회원 가입 기능을 추가하는 것은 아주 당연하고 마땅히 있어야 하는 기능이죠.

워드프레스 쇼핑몰에는 워드프레스 본래 로그인 및회원 가입 기능을 통하는 방법과 우커머스를 통한 로그인 및 회원가입 방법이 있습니다.

이 둘은 통합하면 같은 것처럼 작동할 수도 있지만 본질적으로는 조금 상이합니다.

따라서 여기서 하려는 것은 쇼핑몰 기능을 담당하는 우커머스 회원으로 로그인 및 회원 가입 링크를 추가해 사이트를 보다 쇼핑몰 중심으로 운영하기 위한 방법에 대한 것입니다.

쇼핑몰 메뉴에 우커머스 로그인/로그아웃 링크 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

쇼핑몰 메뉴에 우커머스 로그인/로그아웃 링크 추가하기

이번에는 쇼핑몰 메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가해 우커머스 중심으로 사이트를 운영하는 방법을 살펴보도록 하겠습니다.

커머스를 이용해 쇼핑몰을 구성하는 경우 로그인 및 회원 가입 경로는 기존 워드프레스 로그인 및 회원가입 경로에 우커머스 로그인및 회원가입 경로를 하나 더 추가할 수 있습니다.

즉 우커머스는 내 계정(My Account)이라는 별도 페이지를 제공하는데요. 여기를 통해서 우커머스 쇼핑몰용 회원을 모집하고 관리할 수 있습니다.

이런 관계로 보다 쇼핑몰에 중점을 두고 사이트를 운영한다면 워드프레스 로그인 및 회원관리를 사용하지 않고 우커머스가 제공하는 내 계정(My Account)을 로그인 및 회원가입 경로를 활용할 수 있습니다.

여기서는 우커머스 내 계정(My Account)을 활용해 로그인 및 회원가입을 쉽게 할 수 있도록 메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가하는 방법을 알아보겠습니다.

이 방법은 “Add WooCommerce MyAccount Page Login/Logout to Menu”을 기반으로 정리하였습니다.

메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가하는 코드

이렇게 메뉴에 우커머스 내 계정 로그인/로그아웃 링크를 추가하는 방법은 아래 코드를 function.php 파일에 추가하는 것입니다. 물로 child theme의 function.php에 추가하는 것이 좋겠죠.

add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, 2 );

function my_account_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') { //change your theme registered menu name to suit
        $items .= '<li><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'shop' ) ) ) .'">Log Out</a></li>'; //change logout link, here it goes to 'shop', you may want to put it to 'myaccount'
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {//change your theme registered menu name to suit
        $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';
    }
    return $items;
}Code language: PHP (php)

자기 테마 메뉴의 위치 슬러그 찾아 변경하기

이 코드 중에서 theme_location == ‘primary’)의 ‘primary’는 테마에서 사용하는 메뉴의 위치 슬러그를 지칭하는데요.

본인이 사용하는 테마의 메뉴 세팅 부분에서 사용하는 메뉴의 위치 슬러그를 찾아야 합니다.

이는 메뉴 설정화면에서 크롬이나 파이어폭스의 개발자도구 – 요소 찾기에서 menu-locations 다음에서 찾아 볼 수 있습니다.

아래 이미지는 파이어폭스의 개발자도구 – 검사기에서 메뉴 중 Main을 찍었을 시 검사기에서 나타난 상태인데요. 흐릿한 파란색으로 칠해진 부분을 살펴보면 menu-locations[main menu]를 찾을 수 있죠. 바로 main menu가 우리가 찾고자하는 메뉴의 위치 슬러그입니다.

최종적으로는 아래와 같은 코드로 변경됩니다.

add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, 2 );

function my_account_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'main_menu') { //change your theme registered menu name to suit
        $items .= '<li><a href="'. wp_logout_url( get_permalink( wc_get_page_id( 'shop' ) ) ) .'">Log Out</a></li>'; //change logout link, here it goes to 'shop', you may want to put it to 'myaccount'
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'main_menu') {//change your theme registered menu name to suit
        $items .= '<li><a href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Log In</a></li>';
    }
    return $items;
}Code language: PHP (php)

마찬가지로 소셜 미디어도 한국적인 특징이 아주 강합니다. 그렇기 때문에 쇼셜 미디어를 이용한 마케팅에서도 한국적인 특징이 강할 수 밖에 없습니다.

그런의미에서 몇년전부터 각광을 받았던 소셜 미디어를 이용한 회원 가입 및 로그인 기능에서 워드프레스에서는 마땅히 무료로 쓸만한 플러그인이 부족합니다.

여기서는 이러한 가운데 공개된 소셜 로그인 플러그인을 최대한 활용하는 방법에 대해서 알아보고자 합니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

쇼핑몰 특성상 고객들의 회원 가입을 유도하고 이렇게 가입한 회원들을 대상으로 다양한 마케팅을 전개할 수 밖에 없습니다. 이러한 회원 가입 활성화를 위해서 소셜 로그인 구현 방안에 대해서 살펴봅니다.

물론 비회원 구매도 쇼핑 경험을 활성화하는 좋은 방법이기는 하지만 원활한 쇼핑 경험을 제공하기 위해서는 가능하면 회원제 운영이 가장 나은 대안이라고 할 수 있습니다.

이러려면 회원가입을 활성화해야 하죠. 어덯게하면 회원가입을 활성화할 수 있을까에 대한 고민중의 하나는 회원 가입 절차를 매우 간단하게 만드는 것입니다. 가입 시 요구하는 정보를 최소화하고 회원 가입절차가 큰 고민없이 이루어지도로 만드는 것이 필요합니다.

이렇게 회원가입을 간단히 할 수 있는 방법중의 하나가 바로 소셜 로그인입니다. 즉 페이스북이나 네이버와 같이 기존 소셜 네트워크에 가입합 정보를 끌어와 추가 정보 입력없이 소비자의 동의만으로도 쉽게 가입절차를 마칠 수 있습니다.

1. 워드프레스에서 소셜 로그인 구현 방법

워드프레스가 기본적으로 블러그에서 큰 강점을 가지고 있고, 로그인이 필요한 회원제 또는 쇼핑몰 구현은 상대적으로 수요가 작다고 할 수 있습니다.

이미 여러번 언급했듯이 한국에서는 큰 비용없이 접근 가능하는 쇼핑몰 솔류션들이 넘쳐나고, 상대적으로 워드프레스는 한국적 특성을 제대로 반영하지 못하고 있기 때문에 점점 밀리는 것 같아 보입니다. 이는 개인적인 판단으로 어던 데이타 기반해 판단하지는 않았습니다.

아무튼 워드프레스 쇼핑몰에서 일반인이 소셜 로그인을 구현하는 방법은 두가지 정도가 있습니다.

1.1. 한국형 회원관리 플러그인 활용, 소셜 로그인 구현

하나는 한국 특성을 반영한 회원관리 플러그인을 구입것이고, 또 하나는 외국에서 개발된 플러그인에 한국향 소셜 로그인 기능을 추가한 플러그인을 활용하는 것이죠.

한국형 회원관리 플러그인은 코스모스팜 회원관리(88,000원), 단비 멤버스(99,000원), 망보드 비즈니스(회원관리) 패키지(55,000원) 등이 있습니다.

코스머스팜 회원관리를 관심있다면 관련 팁을 정리했던 “코스머스팜 회원관리 플러그인 최적화 관련 팁”을 참고해 보시기 바랍니다.

이러한 한국형 회원관리 플러그인들은 한국 실정에 맞추어 한국에서 널리 사용하는 주요 소셜 미디어를 통한 로그인을 지원하고 상대적으로 원활한 사후 지원과 커뮤니케이션이 된다는 등 장점이 있죠.

그렇지만 상대적으로 비용이 높고, 대부분 WP-Members Membership Plugin과 같은 무료 플러그인 기반의 멤버쉽 플로그인 기반하에 설계되었기 때문에 일정 한계가 있습니다.

• 소셜 로그인이나 한국 주소 검색과 같은 부분 기능만 필요한 경우에도 멤버쉽 플러그인 전체를 사용해야 하므로 다소 무거워집니다.
• Memberpress와 같이 매우 뛰어난 유료 멤버쉽 플러그인을 사용하고 싶은 경우 중복 기능과 충돌 가능성이 있습니다.

1.2. 소셜 로그인 플러그인 + 한국 소셜 네트워크 추가 방법

위에서 소개한 한국형 회원관리 플러그인을 사용하지 않는 경우는 외국에서 개발된 소셜 로그인 플러그인에 한국 소셜 네트워크를 추가하는 방법이 있습니다.

외국에서 개발된 소셜 로그인을 지원하는 플러그인은 굉장히 많이 있습니다. 수요가 많은 만큼 다양한 플러그인과 관련 기능들이 발전되어 있습니다.

그러나 대부분 소셜 로그인 플러그인들은 네이버나 카카오와 같은 한국에서 널리 사용되는 소셜 네타워크는 지원하지 않기 때문에 이를 추가해야하는데요. 이는 상당한 저문적인 영역이라 쉽지 않습니다.

현재 일반 사용자가 큰 어려움없이 소셜 로그인 플러그인에 한국의 소셜 네트워크를 추가하는 방법은 Miled라는 사람이 배포한 WordPress Social Login을 이용하는 것입니다.

다만 이 플러그인은 2.3.3 버젼 발표 후 2년전부터 업데이트가 되지 않고 있어 주의가 필요하긴 합니다. 그럼에도 불구하고 당장 대안이 없기때문에 이용할 수 밖에 없는 상황이긴 합니다.

다만 이 플러그인의 소스를 공개하는 GitHub에서는 3.01버젼이 준비되고 있어 조만간 업데이트가 이루어지지 않을까 싶습니다. 그렇지만 업데이트되는 3.01버젼은 기존과 다른 로직으로 설계되면서 이 업그레이드된 플러그인이 출시되면 네이버와 카카오 추가도 능력자분이 업데이트를 해줘야 사용 가능할 것 같습니다.

2. WordPress Social Login에 한국 소셜 네트워크 추가 방법

WordPress Social Login에 한국 소셜 네트워크 추가 방법엔 이미 여러 사이트에 관련 방법을 설명하고 있습니다.

워드님이 정리한 “워드프레스용 네이버 및 카카오 소셜 로그인 플러그인”라는 글을 참고하시면 전체적인 개념을 잡기 쉽습니다.

2.1. 먼저 WordPress Social Login 플러그인 설치하기

당근 WordPress Social Login 플러그인을 설치해야겠죠. 이 플러그인은 한참동안 업데이트가 이루어지지 않았기 때문에 워드프레스 플러그인 검색 시 우선 순위가 떨어집니다.

2019년 5월 현재 키워드를 Wordpress social login으로 검색 시 8번째 나오는 군요.

2.2. wsl-login-extends-naver 플러그인을 설치

다음은 WordPress Social Login이라는 플러그인에서 네이버와 카카오를 추가해주는 wsl-login-extends-naver 플러그인을 설치하는 것입니다.

이 플러그인은 워드프레스 플러그인 추가에서 키워드로 naver를 입력해 찾아 설치할 수 있습니다.

2.3. WordPress Social Login 플러그인 세팅

이 wsl-login-extends-naver 플러그인 설치 후 WordPress Social Login 플러그인 세팅으로 이동합니다.

그러면 네이버와 카카오 아이콘이 우측 Add more providers에 나타난 것을 알 수 있수 있죠. 여기서 네이버와 카카오 아이콘을 클릭하면 네이버와 카카오 관련 세팅할 수 있는 상태로 변합니다.

2.4. 네이버와 카카오의 Application Key와 Application Secret 입력

여기서 네이버와 카카오의 Application Key와 Application Secret를 입력해 세팅을 완료합니다.

네이버와 카카오의 Application Key와 Application Secret를 얻는 방법은 기존에 많이 소개되었기 때문에 이를 자세히 잘 설명한 글을 소개하는 것으로 마치도록 하겠습니다.

• 네이버 소셜 로그인 설정 방법
• 카카오 소셜 로그인 설정 방법

2.5. 네이버와 카카오 개발자 사이트에서 리디렉션 URL 등록

아마 마지막으로 네이버와 카카오 개발자 사이트에서 유효한 OAuth 리디렉션 URL을 추가해 주어야합니다.

WordPress Social Login 플러그인의 유효한 OAuth 리디렉션 URL, 또는 Callback URL은 아래와 같습니다.

• 네이버 Callback URL : https://MyDomain.com/wp-content/plugins/wordpress-social-login/hybridauth/callbacks/naver.php
• 카카오 Callback URL : /wp-content/plugins/wordpress-social-login/hybridauth/callbacks/kakao.php

네이버나 페이스북 등 대부분 소셜 미디어들은 이러한 Callback URL을 여러개를 등록할 수 있지만 카카오는 단 하나만 등록할 수 있으니 참고 하시기 바랍니다.

그리고 네이버는 소셜 로그인 기능을 사용하기 위해서는 승인을 받아야 합니다. 이승인 절차에는 네이버에서 가져오는 정보를 어떻게 활용하고 있는지를 스크린 캡워해서 증명해야 하고, 증명이 부족하다싶으면 거절당하기 싶습니다.

저도 세번째에 대대적으로 증빙을 보강해서 겨우통과할 수 있었습니다.

3. WordPress Social Login 플러그인 사용 시 문제 및 해결 방안

WordPress Social Login 플러그인은 앞서서 이야기한대로 오랬동안 업데이트가 이루어지지 않아서인지 사용 시 몇가지 문제에 부딕치게 됩니다.

적용하는 동안 발견했던 문제와 그 해결 방안에 대해서 간단히 소개합니다.

3.1. “404 Not Found” when checking WSL end-points

처음 이 플러그인을 설치하고 소셜 로그인을 시도해 보니 404 Not Found라는 메세지와 함게 작동하지 않는 현상을 만날 수 있습니다.

WordPress Social Login 플러그인에는 WordPress Social Login Diagnostics이라는 메뉴가 있어 상황을 진단해 볼 수 있는 기능이 있는데요. 이 진단 기능을 사용하면 아래와 같은 메세지를 만날 수 있습니다.

Error: Your web server returned “404 Not Found” when checking WSL end-points. This issue usually happen when :

1. Your web host uses mod_security to block requests containing URLs (eg. hosts like HostGator, GoDaddy and The Planet). On this case, you should contact your provider to have WSL end-points urls white-listed.

2. There is a .htaccess file that prevent direct access to the WordPress plugins directory.

In any case, WSL requires this url to be white-listed:

저는 웹서버로 nginx를 사용하고 있는데요. 위 진단에서는 Apache 서버를 기준으로 진단하고 해결책을 제시하고 있어서 별 도움이 안되었습니다.

XETOWN과 같은 고수들이 모여있는 사이트에도 질의를 남겼고, 코스모스팜 커뮤니티에도 관련 질문을 남겼지만 별 도움이 안되더군요.

결국 기존 nginx configure 파일에 적용된 규칙들을 참조해 아래와 같은 코드를 추가했습니다. 그랬더니 문제가 해결되었습니다.

location /wp-content/plugins/wordpress-social-login/hybridauth/ { allow all; }Code language: PHP (php)

3.2. 트위터의 Callback URL 세팅 관련

트위터 설정 시 Callback URL 설정 시 플러그인에서 제시하는 URL이 트위터에서는 먹히지 않습니다.

WordPress Social Login 플러그인에서는 Callback URL로 다음을 사용하라고 하고 있죠. 이는 먹히지 않습니다.

https://MyDomain.com/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=TwitterCode language: PHP (php)

이에 대한 해결책은 CallBack URL로 다음으로 대체 사용하면 됩니다. 이는 “Twitter App Error”라는 플러그인 Support에 올라온 이슈에 대한 해결책에서 인용했습니다.

https://Mydomain.com/wp-content/plugins/wordpress-social-login/hybridauth/Code language: PHP (php)

3.3. 차단된 URL

초기 세팅 시 아래와 같이 차단된 URL이라는 메세지가 나오는 경우가 있습니다.

차단된 URL: 리디렉션 URI가 앱의 클라이언트 OAuth 설정의 화이트리스트에 없으므로 리디렉션하지 못했습니다. 클라이언트 및 웹 OAuth 로그인이 설정되었는지 확인하고 모든 앱 도메인을 유효한 OAuth 리디렉션 URI로 추가하세요.

이는 CallBack URL 설정이 제대로 안된 경우이니 개발자 사이트로 들어가 CallBack URL을 제대로 등록해주면 됩니다.

3.4. 페이스북 에러

마찬가지로 이 플러그인이 오랬동안 업데이트가 이루어지지 않았기 때문에 페이스북 사용에 문제가 있습니다.

페이스북이 제공하는 정보가 변경되면서 아래와 같은 user_friends 이슈가 발생하는데요.

Invalid Scopes: This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions

이 문제를 해결하기 위해서는 코드 추가가 필요합니다. 이에 대한 해결은 이 이슈를 제기한 Error when logging with Fb에서 찾을 수 있습니다.

우선 FTP로 들어가서 /wp-content/plugins/wordpress-social-login/로 이동합니다.
이 폴더에 있는 wp-social-login.php 파일을 편집기로 엽니다.
이 파일의 맨 아래에 아래 코드를 추가하고 저장합니다.

function wsl_change_default_permissons( $provider_scope, $provider )
{
    if( 'facebook' == strtolower( $provider ) )
    {
        $provider_scope = 'email, public_profile';
    }

    return $provider_scope;
}

add_filter( 'wsl_hook_alter_provider_scope', 'wsl_change_default_permissons', 10, 2 );Code language: PHP (php)

3.5. 번역

아무래도 이 플러그인은 외국에서 개발된 플러그인으로 번역 문제가 대두됩니다. 특히 고객들에게 보여지는 메세지도 전부 영어로 나오기 때문에 당혹스러울 수 있습니다.

전체는 아니지만 일부 번역 파일이 인터넷에 공개되어 있는데요. 아래 사이트에서 다운받아 사용할 수 있습니다.

WordPress Social Login 부분 한글화 파일(이전 버전)

워드프레스 쇼핑몰은 그 기반이 미국이다보니 한국적인 특성 반영이 미약합니다. 이중하나가 한국에 맞는 주소 검색 시스템인데요.

여기에서는 워드프레스 쇼핑몰에서 다음 주소 검색 서비스를 이용해 쉽게 줏 검색을 할 수 있도록 만드는 방법에 대해서 알아봅니다.

[쇼핑 경험 개선] 우커머스 결제 단계에서 우편번호 주소 검색 기능 추가하기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 개선] 우커머스 결제 단계에서 우편번호 주소 검색 기능 추가하기

워드프레스는 블로깅 시스템으로 시작해 우커머스 플러그인이 등장하면서 쇼핑몰 구축에 용이한 플랫폼으로 성장을 거듭하고 있지만 기본적으로 워드프레스 철학을 반영해 올인원보다는 사람들의 필요에 따라 적절하게 기능을 추가해 사용토록 하고 있습니다.

이런 이유이기도하고, 한국은 시장 규모가 작기 때문에 워드프레스 시장에서 한국 시장을 반영한 프로그램들이 광장히 적습니다.

그렇기 때문에 거듭 이야기하지만 한국에서 워드프레스 쇼핑몰의 최대 단점은 한국적인 특성 반영이 상당히 약하다는 점입니다.

우커머스가 발전하면서 조금씩 동양적인 문화를 반영하기는 하지만 아직도 많은 부분이 부족하기는 합니다. 그렇기에 우리나라 특성에 맞추어 추가해야하는 요소들이 상당히 많이 있죠.

이렇게 우리나라 특성에 맞춰야하는 요소중의 하나가 바로 우리나라 주소 검색 기능입니다.

오늘은 우리나라 특성에 맞추어 주소 검색을 쉽게 할 수 있는 기능 구현을 해보도록 하겟습니다.

1. 워드프레스에 주소 검색 기능 추가 방법

워드프레스에서 우리나라 주소 검색 기능을 추가할 수 있는 방법을 간단히 살펴보죠.

1.1. 유료 플러그인 구입

먼저 제일 쉽게 할 수 있는 방법이 유료로 판매하고 있는 플러그인을 구매해 적용하는 것입니다.

이전에도 한번 소개했지만 한국형 회원관리 플러그인들은 기본적으로 소셜 로그인을 비롯해 주소 검색 기능을 가지고 있습니다.

[쇼핑 경험 개선] 소셜 로그인으로 회원가입 활성화하기

한국형 회원관리 플러그인은 코스모스팜 회원관리(88,000원), 단비 멤버스(99,000원), 망보드 비즈니스(회원관리) 패키지(55,000원) 등이 있습니다.

1.2. 무료 플러그인 설치

그러면 한국형 회원관리 플러그인과 같은 비싼 플러그인만 있을까요?

워드프레스가 각광을 받고 수요가 증가하던 시절에는 다양한 무료 플러그인들이 등장했지만 수요가 시들해진 요즘은 쓸만한 무료 플러그인들은 대부분 자취를 감추었습니다.

그래도 사용 가능한 무료 주소검색 플러그인은 “Beomps Korea Postcode Search” 플러그인인데요.

이 플러그인은 1년이상 업데이트가 안되고 있습니다. 그래서 제대로 작동할까 걱정스러웠지만 제가 테스트해본 바로는 아직은 제대로 작동하기는 하더군요.

아마 이 플러그인은 아주 간단한 구조이고, 우편번호 체계 변동이 없고, 다음 우편번호 검색기능을 끌어오는 것이기 때문에 굳이 업데이트 사항이 없을 수 있을 것입니다.

2. 기존 주소 검색 플러그인들의 단점

위에서 소개한 유료로 판매하는 한국형 회원관리 플러그인들은

• 당근 비싼기도 하거니와
• WP-Members Membership Plugin과 같은 무료 플러그인 기반하에 설계되었기에 무조건 WP-Members Membership Plugin을설치하고 추가로 한국형 회원관리 플러그인을 설치해야 하며
• 다양한 기능들을 제공하도록 설계되었기 때문에 상대적으로 무겁고
• 특정 PG만 사용 가능한다든지 제약이 많고
• 불필요한 기능들로 많이 포함되어 있어 속도에 영향을 줍니다.

또한 무료인 “Beomps Korea Postcode Search” 플러그인은

• 1년이상 업데이트가 되지 않고 있어 찜찜하고
• 간단한 구조이지만 여기에도 다양한 기능들이 있는데 이는 기존 구현 플러그인들에서 이미 해결된 것이라 중복되며
• 우편번호 추가 버튼을 주소 맨 아래에 추가하도록 설계되어 있어 우편번호 옆에 위치하고 있는 일반 검색 시스템에 비교하면 조금 어색합니다.

3. 나만의 주소 검색 기능을 넣어보자.

따라서 불필요한 기능을 제거하고 꼭 필요한 주소 검색 기능만 추가하는 방법을 찾았습니다.

아는 주로 “Beomps Korea Postcode Search” 플러그인에서 제시하는 방법을 따랐고 비슷한 Flow를 적용했습니다.

또한 제대로 작동하지는 않았지만 흐름을 이해하는데는 “워드프레스 WP-Members 우편번호 검색 기능 넣기”라는 글도 참조했습니다.

워드프레스 주소 검색 구현 코드

아래와 같은 코드를 차이드테마 function.php에 추가했습니다.

/*
 * 다음 우편번호 검색 기능 추가
 */
     add_filter( 'woocommerce_checkout_fields' , 'checkout_fields_postcode_lookup' );
     function checkout_fields_postcode_lookup( $fields ) {

             $fields['billing']['billing_postcode']['label'] = '<input type="button" id="billing_postcode_search" value="우편번호 검색" class="btn" onclick="openDaumPostcode();" style="height: 40px;">';

             $fields['shipping']['shipping_postcode']['label'] = '<input type="button" id="shipping_postcode_search" value="우편번호 검색" class="btn" onclick="openDaumPostcode2();" style="height: 40px;">';

             return $fields;
     }

     //워드프레스 초기에 시작할 수 있도록 함
     add_action('init','postcode_lookup_load');

     function postcode_lookup_load() {
     wp_enqueue_script('daum_postcode_woocommerce', 'https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js');
     }

     add_action( 'wp_enqueue_scripts', 'wp_enqueue_scripts_postcode_lookup' );

        //add action for clicking button 
        function wp_enqueue_scripts_postcode_lookup() {
        ?>
            <script type="text/javascript">
                //for billing address
                function openDaumPostcode() {

                    new daum.Postcode({
                        oncomplete: function(data) {
                            document.getElementById('billing_postcode').value = data.zonecode;          
                            document.getElementById('billing_address_1').value = data.address;            
                            document.getElementById('billing_address_2').focus();
                        }
                    }).open();
                }
                //for shipping address
                function openDaumPostcode2() {
                    new daum.Postcode({
                        oncomplete: function(data) {
                            document.getElementById('shipping_postcode').value = data.zonecode;
                            document.getElementById('shipping_address_1').value = data.address;                                
                            document.getElementById('shipping_address_2').focus();
                        }
                    }).open();
                }

            </script>
         <?php
        }Code language: PHP (php)