プラグインの導入
SMFとZipaddr-JPは両方ともWordPressのプラグインなので導入は簡単です
「プラグインを追加」画面にて「Snow Monkey Forms」 「Zipaddr-JP」をそれぞれ検索しインストールします
Snow Monkey Formsに郵便番号と住所の欄を作成
郵便番号の欄
SMFの「テキスト」を追加し、「id」に「zip」と記入
住所の欄
SMFの「テキスト」を追加しかし、「id」に「addr」と記入
都道府県、市区町村など分けたい場合はテキストを追加して、それぞれのidを「pref」「city」「area」にする
「pref」「city」 「city」「addr」 みたいにできます
Zipaddr-JPの設定
WordPress管理画面の左サイドバーにある「Zipaddr-JP」をクリックして設定画面に移動
以下は変更例です
郵便番号のハイフンを消す
郵便番号を入力した時に自動で入力されるハイフン「-」を刑したい場合「郵便番号の区切り文字」の部分を空欄にします
placeholder上書
「住所自動入力」の部分を書き換えることができます
↓
選択後にフォーカスするid
郵便番号を入力した後に、フォーカスを移動させる場所です
デフォルトは住所の一番最後の部分になります
番地などを別のテキスト欄にしたい時などに便利です
上の画像は郵便番号を入力した後に、フォーカスを郵便番号の所に残したい場合
SMFの「確認画面」から「戻る」を押した時の対策
SMFの確認画面を使わない場合はここを飛ばしてください
ここまではSMFで「Zipaddr-JP」を使う方法を紹介してきました
しかし、SMFの「確認画面」から「戻る」を押した後に郵便番号を変えても住所が変わりません
そこで、JavaScriptを使って住所も変わるようにします
以下のJavaScriptを利用しているテーマ下に保存してください
新しいファイル名で保存した場合は、そのファイル名を読み込むのも忘れないように
document.addEventListener('DOMContentLoaded', () => {
const initialZip = document.getElementById('zip');
const setupZip = () => {
const zip = document.getElementById('zip');
if (!zip || zip === initialZip || zip.dataset.zipaddrFix) return;
zip.addEventListener('keyup', () => Zip.kc(1));
zip.dataset.zipaddrFix = 'true';
};
new MutationObserver(setupZip).observe(document.body, {
childList: true,
subtree: true
});
});郵便番号の欄のidを合わせる
document.getElementById(‘zip’) の部分 2ヶ所
住所欄を２つ使う場合
SMFの郵便番号のidを「zip2」 住所のidを「addr2」などとして追加
「pref」「city」などを使っている場合は、「zip2」に合わせて「pref2」「city2」などにしてください
※SMFの複製を使った場合「name」の部分を書き換えてください（一旦削除しても可）
「name」の部分が同じだとエラーが起きます
SMFの確認画面を使う
上記では１つだけでしたが、２つ以上使う場合はJavaScriptを書き換える必要があります
document.addEventListener('DOMContentLoaded', () => {
/*
* 初回表示時の郵便番号inputを記録
*
* 初回の #zip / #zip2 には
* zipaddr-jp がすでにイベントを設定しているため、
* こちらからイベントを追加しない。
*/
const initialInputs = new WeakSet();
['zip', 'zip2'].forEach(id => {
const input = document.getElementById(id);
if (input) {
initialInputs.add(input);
}
});
/*
* 郵便番号inputにzipaddr-jpの処理を追加
*/
const setupZipAddr = (id, number) => {
const input = document.getElementById(id);
if (!input) return;
// 初回表示時のinputはzipaddr-jpに任せる
if (initialInputs.has(input)) return;
// すでに登録済みなら何もしない
if (input.dataset.zipaddrFix === 'true') return;
// 新しく生成されたinputにイベントを追加
input.addEventListener('keyup', () => {
Zip.kc(number);
});
// 登録済み
input.dataset.zipaddrFix = 'true';
};
/*
* 現在の郵便番号inputを確認
*/
const initZipAddr = () => {
setupZipAddr('zip', 1);
setupZipAddr('zip2', 2);
};
/*
* SMFによるDOM再生成を監視
*/
new MutationObserver(() => {
initZipAddr();
}).observe(document.body, {
childList: true,
subtree: true
});
});郵便番号をホバーした時に出るメッセージ
郵便番号をホバーした時に出るメッセージ「ハイフンは入力不要です。」の部分
背景色を変える
cssファイルに記入
#autozip {
background: #3366ff !important;
}
Zipaddr-JPの設定画面から変更する
#3366ff の部分を任意の色に変更してください
ハイフン不要 を消す
#autozip {
display:none !important;
}デモページ
デモとして４つほど紹介します
コメント