Godios.のpjax有効時にContact Form 7を正しく動作させる
WordPressのメジャーなメールフォームプラグイン「Contact Form 7」をWordPressテーマ「Godios.」のpjax有効時に正常に動作するように修正します。
症状
うちの事情だとまあそもそもがスパム対策も考えてのメールフォームなので、reCAPTCHAも当然導入しています。pjaxを有効にした状態で遷移先でContact Form 7からメールを送信しようとすると
- reCAPTCHAが読み込まれない(全く表示されない)
- 必要項目を記入して送信押すと「正常に送信されました。」というメッセージが表示されるが、実際には送信されていない。
というなかなかハードな状況になっています。しばらくこの状態だったのでもし送ってくれた人がいたら多分届いてません。ごめんね。
対策
コンタクトフォームページに対してはpjaxを使用しないようにするのが早そうです。Godios.では特定のリンクのみGodモード(pjax)を無効化する機能が用意されています。pjaxを無効化したいページへの<a>タグのclassにno-godを追加するだけでOKです。
基本はこれでOKなのですが、コンタクトフォームへのリンクは基本的にフッターからだけにするので、コンタクトフォームに限らずメニューからのリンクは気軽にno-godを指定できる方が良さそうです。
WordPressのカスタムメニューの項目にはclassを振るオプションがあります。このオプションはメニュー > 表示オプション > CSS クラスのチェックを入れると表示されます。しかし、これはメニューの<a>タグではなくその親の<li>のclassに書き加えるものなので、no-godclassの子の<a>のclassにもno-godを動的に付与するようにする必要があります。
ググったらなんとGodiosテーマ作者の記事がマッチしました。リンク先のコードをfunctions.phpに加えればOKです。ここで注意点ですが、記事中にGodiosテーマ用のgnav-linkクラスが追加されたコードが示されていますがこれは今回は使用しません。reCAPTCHAが表示され動作もするものの、メッセージの送信の症状は改善されておらず送信されたように見えてされてないままでした。なので変更前のgnav-linkなしのコードにします。(gnav-linkがどういう仕事をしているのかはよく分かってません。)
追記：gnav-linkはグローバルナビのハンバーガーメニュー用のクラスだったようで、Footerにグローバル用のクラスがついたことで何か誤作動が起きたのではないかとのことです。
報告ありがとうございます！
— Simmon@Godios (@thisissimmon) November 6, 2018
gnav-linkクラスはグローバルナビのリンクにつけて置かないと、Godモード有効時、スマホからハンバーガーメニューをタップして各リンクをクリックした時にメニューが閉じなくなるので追加しておいたんです🤔
ですのでフッターナビゲーションの場合は必要ないのでたねのぶさんの記事の通りで問題ないと思います。
— Simmon@Godios (@thisissimmon) November 6, 2018
フッターナビのリンクにもgnav-linkクラスを追加したことによって、たぶんGodモードのスクリプトが誤作動起こしてたっぽいです。。。
一応元記事に修正入れておきました。
まとめ
- コンタクトフォームへの
<a>タグにno-godリンクを付与する(基本はこれだけでOK) - カスタムメニューから
no-godを指定できるようにするために、メニューの表示オプションからCSSクラスを表示させ、no-godclassを指定する。(この項目でclassが追加されるのはメニューの<li>タグ) no-godクラスが追加された<li>の子の<a>にも同じクラスが追加されるようにfunctions.phpに書き加える。