Word Cracker의 잡다한 정보 모음

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

9

작년에 다음 우편번호 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 코드 부분을 숏코드로 만들어서 추가하는 것도 가능할 것입니다(참고).

참고:

Related Posts

9 Comments
  1. jonghyo park says

    최신버전과 관리자님이 올려주신 스크립트가 비교해보니 똑같은데요,, 으악,,, 원인을 모르겠네요 ㅠㅠ

    1. Word says

      안녕하세요?

      현재 Quform을 가지고 작업을 하시는가 보네요.

      이 블로그에서도 Quform을 사용하고 있습니다. Quform이 크게 무겁지 않으면서 기본적인 기능을 제공하는 것이 마음에 들어서 계속 사용하고 있습니다.

      잘 안 되는 이유는 여러 가지가 있을 수 있습니다.
      아마 미세한 부분에서 놓치고 있는 것이 있지 않을까 생각되네요.

  2. jonghyo park says

    안녕하세요 말씀 주신대로 Q폼에 getElementsByName 바꾸어서 설정하였는데도 주소입력이 안되네요,,
    뭐가 문제일까요??

    1. Word says

      안녕하세요?

      다음 우편번호 서비스는 계속 업데이트되기 때문에 위의 코드를 그대로 사용할 경우 최신 버전에서는 제대로 적용되지 않을 것입니다.

      위의 내용을 통해 어떻게 적용하는지 원리를 이해한 후에 다음 우편번호 서비스에서 제공하는 새로운 샘플을 사용하여 적절히 응용해야 합니다.

  3. Word says

    WP-Members에서 우편번호를 추가하는 방법이 http://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-wp-members%EC%97%90%EC%84%9C-%EC%9A%B0%ED%8E%B8%EB%B2%88%ED%98%B8%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/ 에 설명되어 있습니다. 위의 방법이 잘 안 되면 링크된 글을 참고해보시기 바랍니다.

  4. jayce says

    Quform에 넣어서 만들었는데 팝업이 떠서 주소 선택은 되지만 선택하면 자동 입력이 되지 않습니다…무엇이 문제일까요? ㅜ

    1. WordCracker says

      안녕하세요? 방문해주셔서 감사합니다.

      문의하신 내용은 “그러므로 위의 코드에서 getElementById 부분은 그대로 사용할 수 없습니다. 대신 getElementsByName을 사용하면 됩니다.” -> 이 부분과 관련되는 것 같습니다.

      이 글을 작성한지 벌써 다섯 달이 되어 기억이 조금 가물가물하긴 한데요.

      다음 글을 참고하면 문제를 해결할 수 있을 것입니다.
      How to use document.getElementByName and getElementByTag? (http://stackoverflow.com/questions/7816863/how-to-use-document-getelementbyname-and-getelementbytag )

  5. Matthew says


    postcode.v2.js 극혐입니다. 페이지 로딩속도에 최소 1.5초 정도 추가됩니다. 이 postcode.vs.js 때문에 다른 resource 까지 느리게 로딩됩니다.

    미디어 다음 (카카오) 의 기술력 문제도 문제지만, 개발자들이 도대체 생각이 없는건지, 저렇게 느리게 구동되는 API 를 불러오고 있는걸 보면, 대략 어이상실입니다. 한국 우커머스 사이트들이 전부다 7초 8초씩 걸려서 로딩되고 있는 이유 중 하나 입니다.

    로딩속도 = 순수익 인데, 무슨 생각들이신지… 흠냐…

    해결방법: iframe
    다른 해결방법은 찾지 못했습니다.

    1. WordCracker says

      기술력이 없을 수도 있고… 아니면 별로 중요하지 않아서 신경을 덜 써서 그럴 수도 있을 것 같네요.

      유료 테마를 사용한 많은 사이트가 속도가 문제가 되는 것처럼 보이네요…

Leave A Reply

Your email address will not be published.