[워드프레스] WP-Members에서 우편번호를 추가하는 방법

들어가며

가끔 WP-Members에서 우편번호를 추가하는 방법에 대해 문의하는 분들이 계셔서 간단히 정리해보았습니다.

아래 내용은 초급자들이 따라 하기에는 약간 버거울 수 있습니다. (워드프레스에 잘 모르더라도 도전을 좋아하는 분들은 링크된 글을 참고하여 따라해 볼 수 있을 것입니다.)

WP-Members 회원가입 페이지에 '다음우편번호 찾기' 추가하기

먼저 WP-Members를 설치하고 기본적인 설정을 하도록 합니다. 그리고 WP-Members의 필드 섹션에서 우편번호를 주소 위로 이동시킵니다. (마우스로 끌어서 이동시킬 수 있습니다.)

이제 페이지 템플릿을 하나 만들도록 합니다. 테마 폴더에서 page.php 파일의 내용을 복사하여 page-daum.php처럼 적절한 이름으로 파일을 하나 만들어서 작업하면 됩니다(페이지 템플릿을 만드는 방법은 이 글을 참고해보세요).

그리고 새로 만든 페이지 템플릿 파일에 다음과 같은 코드를 추가하도록 합니다.

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
</script>

<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분.

// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var fullAddr = ''; // 최종 주소 변수
var extraAddr = ''; // 조합형 주소 변수

// 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
fullAddr = data.roadAddress;

} else { // 사용자가 지번 주소를 선택했을 경우(J)
fullAddr = data.jibunAddress;
}

// 사용자가 선택한 주소가 도로명 타입일때 조합한다.
if(data.userSelectedType === 'R'){
//법정동명이 있을 경우 추가한다.
if(data.bname !== ''){
extraAddr += data.bname;
}
// 건물명이 있을 경우 추가한다.
if(data.buildingName !== ''){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
}

// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zip').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('addr1').value = fullAddr;

// 커서를 상세주소 필드로 이동한다.
document.getElementById('addr2').focus();
}
}).open();
}
</script>

참고로 위의 코드는 이 문서를 작성하는 시점(2017년 1월)을 기준으로 이 페이지에 나와있는 코드를 참고한 것입니다. 만약 다음 우편번호서비스가 업데이트되면 위의 내용을 적절히 수정하도록 합니다.

WP-Members에서 회원가입 페이지로 등록한 페이지에서 페이지 템플릿을 새로 만든 페이지 템플릿으로 지정합니다. (참고로 Visual Composer 등의 페이지 빌더를 사용하는 경우 직접 해당 페이지에서 js 코드를 추가할 수 있습니다.)

이제 다음 js 파일을 하나 만들어서 다음과 같이 inserAfter() 메소드를 사용하여 우편번호 옆에 "우편번호 찾기" 버튼을 추가하는 스크립트를 추가합니다.

$( '<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기" class="addzipcode">' ).insertAfter( '#zip' );

js 스크립트를 워드프레스에서 로드하는 방법은 이 글을 참고하세요.

이제 회원가입 페이지에 접속해보면 다음과 같이 우편번호 옆에 "우편번호 찾기" 버튼이 추가되어 있습니다.

WP-Members에서 우편번호 추가하기

버튼 모양이 위와 같이 나오지 않을 수 있습니다. 그런 경우 CSS를 사용하여 적절히 모양을 조정하도록 합니다.

실제로 테스트해보면 잘 작동합니다.

워드프레스 회원가입 우편번호 추가하기워드프레스 대시보드에서 해당 사용자의 프로필을 확인해보아도 위에서 추가한 정보가 등록되어 있는 것을 확인할 수 있습니다.

참고: 회원정보 확인 - User Meta Manager

참고로 회원 정보를 일목요연하게 확인하기를 원하는 경우 User Meta Manager 플러그인을 사용할 수 있습니다.

워드프레스 사용자 정보 관리

User Meta Manager는 회원 정보를 확인하고 관리하는 매우 유용한 플러그인입니다. 하지만 무슨 이유 때문인지 사용자 평가는 별로 좋은 편은 아니네요.

이상으로 WP-Members의 회원가입 페이지에 우편번호를 추가하는 방법을 살펴보았습니다. 위에서 설명한 방법은 우커머스 결제 회원가입/결제 페이지 등 다양하게 응용할 수 있을 것입니다. 간혹 위와 같은 작업을 의뢰하시는 분이 계신데요, 방법이 비교적 간단해서 잠시 시간을 내어 정리해보았습니다. 도움이 되셨다면 후원도 부탁드려요ㅎㅎ(사이드바의 후원 배너가 장식품이 되고 있어요ㅎㅎ)

위의 방법대로 해보시고 잘 안 되시면 이 페이지에 서비스를 의뢰(유료)하실 수 있습니다.


4개 댓글

  1. 안녕하세요.

    오늘도 많은 정보를 보고 배워 가고 있습니다.

    한가지 질문사항이 있어서 이렇게 또 글을 남깁니다.

    포스트 내용과는 조금 다른 내용이라 죄송합니다.

    wp-members로 로그인과 회원 등록을 만드는 부분은 포스트를 보고 이해를 했습니다.

    메뉴 부분에 Login 을 추가 하면 되는데 제가 궁금한 부분은 로그인 이후에는

    글씨가 logout아웃으로 바꾸고 싶은데 이 부분을 어떻게 변경하면 가능한지 죄송스럽지만

    조언을 부탁드립니다.

    감사합니다.

      1. 모르는 내용이 있으면 언제든지 댓글을 달아주시기 바랍니다. 시간이 될 때 확인할 수 있으면 확인해드리겠습니다. 즐거운 하루 되세요^^

댓글 남기기

* 이메일 주소는 공개되지 않습니다.