Daum Zipcode in WordPress

[워드프레스] Contact Form 7/Quform에 우편번호 검색창 추가하기

작년에 다음 우편번호 API를 사용하여 워드프레스에 우편번호 검색창을 다는 방법에 대한 글을 작성한 적이 있습니다. 하지만 오늘 살펴보니 다음 우편보호 API가 새로운 우편번호 체계에 따라 업데이트되어 더 이상 그 방법이 작동하지 않는 것을 알게 되었습니다.

기본적으로 방법은 동일합니다. 다음 우편번호 검색창을 워드프레스에 추가하려는 경우 다음 우편번호 서비스 페이지에 소개된 샘플 코드를 사용하면 됩니다. 아래에서 Contact Form 7과 Quform에서 다음 우편번호 검색창을 추가하는 방법을 간략히 설명하니 참고하시기 바랍니다.

Contact Form 7에서 우편번호 검색창 추가하기

우선 페이지 템플릿을 하나 만들도록 합니다. 예를 들어, page.php 파일의 내용을 복사하여 page-contact.php 파일을 하나 만듭니다. 그런 다음 page-contact.php 파일의 헤더 부분을 다음과 같이 수정합니다.

<?php
/**
* Template Name: Contact Page
*/

get_header(); ?>

그리고 다음 우편번호 샘플 코드에서 javascript 부분을 페이지 템플릿의 적절한 곳에 추가합니다. 예를 들어, 다음과 같은 코드를 추가할 수 있습니다.

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function execDaumZipcode() {
new daum.Postcode({
oncomplete: function(data) {
var fullRoadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 도로명 조합형 주소 변수
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
if(fullRoadAddr !== ''){
fullRoadAddr += extraRoadAddr;
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode; //5자리 새우편번호 사용
document.getElementById('address1').value = fullRoadAddr;
document.getElementById('address2').value = data.jibunAddress;

// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
//예상되는 도로명 주소에 조합형 주소를 추가한다.
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
document.getElementById('guide').innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';

} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
document.getElementById('guide').innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';

} else {
document.getElementById('guide').innerHTML = '';
}
}
}).open();
}
</script>

샘플에서 우편번호, 주소, 상세주소 부분의 ID와 함수 이름만 수정했습니다. 이 부분은 상황에 맞게 적절히 수정하시면 됩니다.

이제 Contact Form 7에서 새로운 문의 폼을 만들고 다음 예시와 같이 우편번호 검색창, 주소, 상세주소에 해당하는 코드를 추가합니다. 

<p>[text zipcode id:zipcode] <input type="button" onclick="execDaumZipcode()" value="우편번호 찾기"><br></p>

<p>주소<br />
[text address1 id:address1]</p>

<p>상세 주소<br />
[text address2 id:address2]</p>
<span id="guide" style="color:#999"></span>

새로운 페이지를 만들고 Contact Form 7의 숏코드를 붙여넣기 합니다. 그리고 페이지의 템플릿을 위에서 만든 템플릿으로 지정해줍니다. 이제 문의 폼에서 우편번호 검색 기능이 제대로 작동합니다.

Daum Zipcode in WordPress

위의 그림과 같이 도로명과 지번이 동시에 표시되고, 주소를 누르면 문의 폼의 우편번호 부분과 주소, 상세주소 부분에 자동으로 우편번호와 주소가 채워집니다.

그런데 사용 중인 워드프레스 테마 문제인지 혹은 다른 플러그인과의 충돌 문제인지는 모르겠지만 우편번호와 주소를 자동으로 추가한 후에도 우편번호 검색 팝업 창이 닫히지 않네요. 수동으로 닫아야 했습니다.

우편번호 입력 상자의 크기는 CSS로 조정해주면 됩니다.

input#zipcode {
width: 100px; /* 적당한 크기로 변경합니다 */
}

워드프레스에서 CSS를 추가하는 방법은 이 글을 참고하세요.

Quform에서 우편번호 추가하기

Quform에서는 별도로 페이지 템플릿을 만들 필요는 없습니다. 폼 편집 화면에서 일반적인 방법으로 우편번호 입력란과 주소, 상세주소 입력란을 추가합니다. (Quform은 프리미엄 컨택트 폼 플러그인으로 무료 플러그인인 Contact Form 7보다 더 다양한 기능을 제공합니다. Contact Form 7은 Revolution Slider 등과 함께 보안상의 위험이 있을 수 있으므로 사용을 자제하는 것이 좋을 듯 합니다(참고). Quform 외에 FormCraft라는 플러그인도 최근에는 많이 사용되고 있네요.)

Quform Zipcode

(1)로 표시된 부분에는 다음과 같이 우편번호 검색 버튼 코드를 추가합니다.

<input type="button" onclick="execDaumZipcode()" value="우편번호 찾기">

그리고 (2)로 표시된 부분에는 위에 나와 있는 javascript 코드를 추가합니다. 여기에서 중요한 것은 Quform의 경우 문의 폼을 로드할 때마다 ID가 바뀝니다. 그러므로 위의 코드에서 getElementById 부분은 그대로 사용할 수 없습니다. 대신 getElementsByName을 사용하면 됩니다.

그러면 폼에서 우편번호 검색 기능이 정상적으로 작동하고 주소를 선택하면 우편번호와 주소가 채워지면서 우편번호 검색창도 자동으로 닫힙니다.

위의 방법을 응용하면 다른 플러그인(예: KBoard)에서도 쉽게 다음 우편번호 검색창을 추가할 수 있습니다. 검색창이 제대로 닫히지 않으면 다음 라인을 적절한 곳에 추가해주도록 합니다.

<span id="guide" style="color:#999"></span>

참고로 위에서 Contact Form 7에서 javascript 코드를 추가하기 위해 별도의 페이지 템플릿을 만들었지만, Visual Composer나 아바다의 Fusion Builder를 사용하는 경우 페이지 빌더 내에서 직접 자바스크립트 코드를 추가할 수 있습니다. 혹은 다른 방법으로 javascript 코드 부분을 숏코드로 만들어서 추가하는 것도 가능할 것입니다(참고).

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.