들어가며
가끔 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 스크립트를 워드프레스에서 로드하는 방법은 이 글을 참고하세요.
이제 회원가입 페이지에 접속해보면 다음과 같이 우편번호 옆에 "우편번호 찾기" 버튼이 추가되어 있습니다.
버튼 모양이 위와 같이 나오지 않을 수 있습니다. 그런 경우 CSS를 사용하여 적절히 모양을 조정하도록 합니다.
실제로 테스트해보면 잘 작동합니다.
워드프레스 대시보드에서 해당 사용자의 프로필을 확인해보아도 위에서 추가한 정보가 등록되어 있는 것을 확인할 수 있습니다.
참고: 회원정보 확인 - User Meta Manager
참고로 회원 정보를 일목요연하게 확인하기를 원하는 경우 User Meta Manager 플러그인을 사용할 수 있습니다.
User Meta Manager는 회원 정보를 확인하고 관리하는 매우 유용한 플러그인입니다. 하지만 무슨 이유 때문인지 사용자 평가는 별로 좋은 편은 아니네요.
이상으로 WP-Members의 회원가입 페이지에 우편번호를 추가하는 방법을 살펴보았습니다. 위에서 설명한 방법은 우커머스 결제 회원가입/결제 페이지 등 다양하게 응용할 수 있을 것입니다. 간혹 위와 같은 작업을 의뢰하시는 분이 계신데요, 방법이 비교적 간단해서 잠시 시간을 내어 정리해보았습니다. 도움이 되셨다면 후원도 부탁드려요ㅎㅎ(사이드바의 후원 배너가 장식품이 되고 있어요ㅎㅎ)
위의 방법대로 해보시고 잘 안 되시면 이 페이지에 서비스를 의뢰(유료)하실 수 있습니다.
안녕하세요.
오늘도 많은 정보를 보고 배워 가고 있습니다.
한가지 질문사항이 있어서 이렇게 또 글을 남깁니다.
포스트 내용과는 조금 다른 내용이라 죄송합니다.
wp-members로 로그인과 회원 등록을 만드는 부분은 포스트를 보고 이해를 했습니다.
메뉴 부분에 Login 을 추가 하면 되는데 제가 궁금한 부분은 로그인 이후에는
글씨가 logout아웃으로 바꾸고 싶은데 이 부분을 어떻게 변경하면 가능한지 죄송스럽지만
조언을 부탁드립니다.
감사합니다.
안녕하세요?
블로그를 방문해주셔서 감사합니다. https://www.thewordcracker.com/basic/how-to-change-login-to-logout-when-loggged-in/ 글을 참고해보세요.
답글 주셔서 정말 감사합니다.
제가 더 찾아봤어야 했는데 죄송합니다.
모르는 내용이 있으면 언제든지 댓글을 달아주시기 바랍니다. 시간이 될 때 확인할 수 있으면 확인해드리겠습니다. 즐거운 하루 되세요^^