[WordPress] WP-Membersの郵便番号を追加する方法

はじめ

時々WP-Membersの郵便番号を追加する方法についてのお問い合わせの方がおられ、簡単にまとめてみました。

以下の内容は、初級者が応じてするには若干ボゴウルができます。 （WordPressよく知らなくても挑戦が好きな方は、リンクされた文を参照して沿って見ることができるでしょう。）

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の会員登録ページで登録したページのページテンプレートを新しく作成したページテンプレートとして指定します。 （参考までに 視覚的な作曲家 などのページビルダーを使用している場合は、直接そのページでjsのコードを追加することができます。）

次に、次のjsファイルを作成して、次のようにinserAfter（）メソッドを使用して、郵便番号の横に「郵便番号の検索」ボタンを追加するスクリプトを追加します。

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

jsスクリプトを WordPressからロードする方法は この記事を参照してください。

今、会員登録ページにアクセスすると、次のように郵便番号の横に「郵便番号検索「ボタンが追加されています。

ボタンの形状が上記のように出てこないことがあります。 そのような場合、CSSを使用して適切に形状を調整するようにします。

実際にテストしてみるとうまく動作します。

WordPress ダッシュボードでは、ユーザーのプロフィールを確認してみても、上記の追加された情報が登録されていることを確認することができます。

注：会員情報の確認 - User Meta Manager

参考までに会員情報を一目瞭然に確認することを希望する場合 ユーザーメタマネージャー プラグインを使用することができます。

User Meta Managerは、会員情報を確認し、管理するために非常に有用なプラグインです。 しかし、どのような理由のためかユーザーの評価はあまり良い方ではないですね。

以上でWP-Membersの会員登録ページに郵便番号を追加する方法を説明しました。 上記の方法は、 WooCommerce 決済会員登録/決済ページなど、さまざまな応用できそうです。 たまに上記のような作業を依頼される方船外、方法が比較的簡単で、しばらく時間を割いてまとめてみました。 役に立ちましたならば スポンサーもお願いします（笑）（サイドバーの後援バナーが装飾品となっています（笑））

上記の方法でて見てよくないましたら、このページに サービスを依頼（有料）することができます。