はじめに
WordPressのContact Form7で郵便番号から住所を自動入力する機能を実装した方法と、Contact Form7のフォームのメールタグにid属性が反映されないエラーが発生して実装するまでに少し時間がかかってしまったので、どのように反映させたかを今回の記事で書いていこうと思います。
実装環境
WordPress ver.6.3
Contact Form7 var5.8
使用ライブラリ
ajaxzip3
Contribute to ajaxzip3/ajaxzip3.github.io development by cre…
実現したいこと
フォームの郵便番号を入力すると自動で住所が反映される。
functions.phpでcssやjsを読み込んでいるため、functions.phpにscriptを記述したい。
header.phpやfooter.phpには直接scriptを書き込みたくない。
手順
Contact Form7のフォームの郵便番号を表示するメールタグにidを追加する
例
郵便番号入力部分 name属性「your-zip」id属性「zip」class属性「your-zip」を指定
住所を表示させる部分 name属性「your-address」を指定
下記のようなメールタグが出力されます。
郵便番号 [text your-zip id:zip class:your-zip]
住所 [text your-address]
functions.phpにajaxzip3のライブラリとスクリプトを記述する
functions.phpでcssとjsを読み込んでいる部分に下記を追加します。
お問い合わせページだけで読み込むようにしています。
if (is_page('contact')) {
wp_enqueue_script('ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js', array(), null, true);
wp_add_inline_script('ajaxzip3', "
document.getElementById('zip').addEventListener('keyup', function(event) {
AjaxZip3.zip2addr(this, '', 'your-address', 'your-address');
});
");
}wp_add_inline_script()について
wp_add_inline_script( $handle, $data, $position );$handle
wp_enqueue_script()で登録されたスクリプトのハンドル名を指定します。
今回、wp_enqueue_script()でajaxzip3のライブラリのハンドル名を「ajaxzip3」としたのでwp_add_inline_scriptのハンドル名も同じものを指定しています。
$data
Javascriptのソースコードを記述します。
$position
$dataの部分で記述したソースコードを$handleで指定したスクリプトの前で読み込むのか後に読み込むかを指定します。「before」か「after」を指定します。デフォルトでは「after」が指定されています。
リファレンス
Adds extra code to a registered script.…
ところが郵便番号出力部分のinput内にid属性が反映されない
下記のような出力になっています。キャッシュを削除するなど色々試したのですが、反映がされませんでした。
<input size="40" class="wpcf7-form-control wpcf7-text your-zip" aria-invalid="false" value="" type="text" name="your-zip">id属性ではなくclass属性でも問題はない
結局inputにid属性が反映されない理由はわかりませんでしたが、class属性でも実装できたのでスクリプトを下記に変更します。
document.getElementById(‘zip’)をdocument.querySelector(‘.your-zip’)に変更してクラス名で取得する方法に変更しました。
function enqueue_script_footer() {
if (is_page('contact')) {
wp_enqueue_script('ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js', array(), null, true);
wp_add_inline_script('ajaxzip3', "
document.querySelector('.your-zip').addEventListener('keyup', function(event) {
AjaxZip3.zip2addr(this, '', 'your-address', 'your-address');
});
");
}
}
add_action('wp_enqueue_scripts', 'enqueue_script_footer');まとめ
WordPressのContact Form7で郵便番号から住所を自動入力する機能を実装した方法とid属性が反映されなかった時の解決方法について紹介しました。id属性が反映されないエラーは稀かもしれないですが、同じようなエラーに遭遇された方のためになれば幸いです。
