この記事では、Netgsm と Wordfence Security プラグインの競合解決について説明します。この競合は、SMS による Netgsm プラグインの電話番号検証機能が Woocommerce 登録フォームに追加され、同時に Wordfence Security プラグインがアクティブ化された場合に発生します。では、この対立の理由は何でしょうか？一緒に調べて解決しましょう。
Wordfence プラグインの隠し入力と Netgsm
Wordfence プラグインは、ログイン セキュリティ セクションの再キャプチャ機能の機能のために、「wfls-email-verification」ID を持つ非表示の入力を Woocommerce の登録およびログイン フォームに追加します。登録フォームに記入した後、[確認コードを送信] ボタンをクリックして SMS を受信すると、Netgsm プラグインによってブラウザーに警告が表示されます。この警告ではメールアドレスが入力されていませんとありますが、メールアドレスを入力しました。この理由は、Wordfence Security によって追加された非表示の入力要素がある間、Netgsm プラグインが電子メール ボックスからデータを取得できないためです。そのため、メールアドレスが入力されていないという警告が返されます。
PHPでWordfenceフィルターを使ってみよう
Wordfence の非表示の入力要素は、ログイン セキュリティ設定で recaptcha キーを入力しなくても、デフォルトで追加されます。これを削除するために最初に思いつくのは、Wordfence フィルターを使用してこの機能を無効にすることですよね。試してみましょう。
<?php add_filter( 'wordfence_ls_require_captcha', '__return_false' );このコードは、現在のバージョンのログイン セキュリティ (ls: ログイン セキュリティ) のキャプチャ要件を削除しますが、非表示の入力は削除しません。この場合、理想的な解決策は、JavaScript を使用して DOM から入力を削除することです。この記事では、JavaScript ソリューションについて説明します。もちろん、これが唯一の解決策ではありません。 Wordfence プラグインが関連する入力を追加する OOP クラスとメソッドを見つけて、子テーマまたはコード スニペット プラグインで作成したコードでオーバーライドできます。
Javascript を使用して DOM から隠し入力を削除してみましょう
次のアプローチを使用して、JavaScript を使用してコードから非表示の入力を削除できます。アプローチの詳細を説明する前に、重要な問題について説明しましょう。このアプローチで DOMContentLoaded イベントが使用される場合、一部のサイトではコードが未定義を返す可能性があります。 DOMContentLoaded イベントは、どのような状況でも DOM が読み込まれるときは実行されません。確実に成功させるために、window.onload イベント内にコードを記述しました。これらのコードは、DOM の script タグ内の終了 body タグの直前に追加することをお勧めします。
// Remove Wordfence Security hidden email input due to conflict with Netgsm plugin by Onur Özden Web Çözümleri
window.addEventListener('load', () => {
// used window.onload due to DOMContentLoaded not working properly for this codes
const oowcRemoveWflsHiddenInput = [...document.querySelectorAll("input[name='wfls-email-verification']")];
oowcRemoveWflsHiddenInput.forEach(hiddenInput => hiddenInput.remove());
});では、これらのコードを使って何をしたのでしょうか?ページ上の DOM が読み込まれると、Wordfence Security プラグインは oowcRemoveWflsHiddenInput という変数を追加します。要素が DOM に存在しない場合 (たとえば、このコードがフォームが存在しない別のページで実行された場合)、forEach はとにかく機能しないため、if ブロックを使用してターゲット要素の存在を確認しませんでした。 forEach ループで見つかったすべてのターゲット要素を削除しました。コードが ES12 標準に準拠していることを確認するために、拡散方式が使用されます。 NodeList'iそれを直接配列に変換しました。このようにして NodeListArray メソッドである forEach を直接使用しました。