会員登録フォームに住所検索条件/個人情報同意追加するII（WordPress)

初めて フロントエンドメンバーシップモジュールという WordPress 会員登録の管理プラグインを紹介した後、いくつかのアップデートが行われました。 この記事では、具体的には、登録フォームにメールアドレスを検索ウィンドウの個人情報同意チェック欄を追加する方法を説明します。

上の図のように、郵便住所と利用規約のチェックボックスを入力できます。

メールアドレス検索を追加する

Javascriptコードを追加する

郵便住所検索は 次の郵便検索サービスを利用するようにします。 次のメール検索サービスページを訪問して好みの例を選択します。 例に記載されているID属性は任意に変更が可能ですが、便宜上例に記載されているコードに基づいて説明します。

まず、サンプルコードのjavascript部分をCSSJockyの下に Membership Modules メニューから Configuration > Custom CSS or javascriptの入力ウィンドウにコピーします。

<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

// .....

// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_address2").focus();
}
}).open();
}
</script>

たとえば、上記のコードを「Custom JavaScript Code」の横にある入力フィールドにコピーして挿入します。

郵便番号検索フィールド

以下の作業は、 カスタム化フォームから進みます。 希望のフォーム名の横にある「Customize Fields」アイコンをクリックして、新しいフィールドを追加または変更できます。

郵便番号検索フィールドは、XNUMXつのテキスト入力フィールドとXNUMXつのカスタムHTMLフィールドで構成できますが、便宜上、XNUMXつの「カスタムHTML」に設定することもできます。 私は便宜上、郵便番号検索フィールドの部分をXNUMXつとして扱い、「カスタムHTML」フィールドを追加してコードを入れる方法を選択しました。 （必ず、郵便番号情報を受け取る必要がある場合には、各郵便番号入力ウィンドウに対してテキスト入力フィールドを選択してください。）

上記のように郵便番号検索入力フィールドと検索ボタン部分のコードをそのままコピーして入れるとされます。

住所欄と詳細住所欄

アドレスと番地フィールド部分は、それぞれのテキスト入力フィールドを選択するが、Unique Nameに、各IDの値を入力するようにします。

たとえば、「アドレス」フィールドの編集画面を見ると：

表示される「Unique Name」は、次の郵便検索サービスの例の「住所」部分のID値に対応しています。

<input type="text" id="sample6_address" placeholder="주소">

「詳細アドレス」部分も同じ方法でフィールドを追加するだけです。

以上の過程を終了したら、一番上の図のように郵便番号検索ウィンドウアドレスフィールドが追加されます。 コードを異常なく入れたら正常に動作することを確認することができます。 （任意IDを変更して収納すると、たまにエラーが発生する場合があります。その場合一つずつ照合してエラーを修正するようにします。）

利用規約同意欄を追加する

利用規約同意欄は、「チェックボックス」フィールドを追加することで実装できます。

ここで重要な点は「Required Field?」 部分を「はい」として選択する必要があることです。 Description部分に上記のように利用規約リンクを追加できます。 Field Options セクションに適切なフレーズを入力します。 （例：「同意」）

以上で フロントエンドメンバーシップモジュール WordPress プラグインの郵便番号検索と利用規約に同意欄を追加する方法を説明しました。

メモ：

• WP-Membersの郵便番号を追加する方法
• 無料のプラグインを使用して基本的な登録フォームに利用規約を追加する
• プラグインを使用せずに WordPress デフォルトのログインフォーム/登録フォームのデザインを変更する方法