見出し画像

MW WP FormでYubinBango.jsが動かない時の最後の手段

あたおか

WordpressでMW WP Form使ってる方は多いと思いますが、YubinBango.jsを使おうとすると相性が悪いなぁと思います。
対処法はWeb上に転がっていますが、ググった対処法では解決できないケースがあったのでその対処法をメモしました。

Formタグにに「h-adr」クラスを付ける方法

MW WP Formはformタグに対して自由なタグをつけることができないので、下記のようにJSで無理やりクラスをつけてあげる対応方法を良くみます

function mwform_form_class() {
  ?>
    <script>
      jQuery(function($) {
        $( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
      });
    </script>
  <?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );

このコードを実行すると、<head>タグにDom Ready時に動作するJavaScriptが出力されるわけですが、構築したWordpressの構造上の制限などで「このコードの実行よりYubinBango.jsの方が先に実行される」可能性があります。
そうなると、

  • コンソールエラーは出力されない

  • 郵便番号が自動入力されない

  • エラーっぽいことは何もないのになぜ…

と深みにはまる可能性が高いかもしれません

YubinBango.jsを強制実行

その場合はYubinBango.js内で実行されている初期処理てきなフローを強制実行してあげれば解決します。具体的には、先ほどのコードを次のように修正します。

function mwform_form_class() {
  ?>
    <script>
      jQuery(function($) {
        $( '.mw_wp_form form' ).attr( 'class', 'h-adr' );
        new YubinBango.MicroformatDom();
      });
    </script>
  <?php
}
add_action( 'wp_head', 'mwform_form_class', 10000 );

Webサイト上に溢れる解決策は、「処理順序」が意識されていないことが多いので、自分なりにカスタマイズして適用しようとすると処理順序が変わって想定通りに動かない、ということが起きがちですが、上のおまじないを書いておけばだいたい解決すると思います。

YubinBango.jsのソースを見ると、「DOMContentLoaded」イベントで初期処理を行っているので、上記のコードの実行タイミング（dodumento.ready）とはjQueryのバージョンその他によって前後する可能性があります。
なので、万全を期すなら常に上記のおまじないを書いておいた方が安全かもしれません。
更に補足すると、YubinBango.jsの初期処理で「h-adrクラスが付与されたFormタグ」を探すので、この

まとめ

  • コンソールエラーが発生して無いのに郵便番号が自動入力されない場合、処理順序がまずい可能性がある

  • 処理順序が変えられない場合、上記のコードでYubinBango.jsの初期処理を強制実行する

  • それでも解決しない場合、下記の「YubinBangoライブラリを有効にするには？」を参考にチェック
    https://github.com/yubinbango/yubinbango


この記事が気に入ったらサポートをしてみませんか？