以下のエラーが出てきたときの対処方法のお話です。
WordPressのテーマをSWELLに変更し、お問合せフォームをContact Form7からWPFormsに変更したときのトラブル解消のお話。「お問合せができません!」と別媒体からお客様よりご連絡を頂きました。
なぬ?まさか・・・
と思い、自分で試しにフォーム入力、送信をしてみると冒頭の様に表示が現れ送信できない状況では有りませんか…。これはまずいと言うことで色々とやった結果なんとか解決した方法です。
結論、子テーマのfunctions.phpにコードを追加、子テーマにディレクトリ(フォルダー)を作成し、JavaScriptのコードを入れると解決しました。
解決した…とは言え、この方法を実施する際は自己責任の範囲でお願いします。
まず解決のために行ったことは以下のことになります
Command+Fで検索確認できます
読み込む順番が大切と言うお話。wpforms.min.jsが先に来ている場合は本ページの方法では解決しない。
custom-wpforms-settings.js には以下のコードを書き込みます(一例)
var wpforms_settings = {
val_required: "この欄の入力は必須です。",
val_email: "有効なメールアドレスを入力してください。",
val_email_suggestion: "{suggestion} のことでしたか?",
val_email_suggestion_title: "クリックしてこの提案を受け入れます。",
val_email_restricted: "そのメールアドレスでは登録できません。",
val_number: "有効な値を入力してください。",
val_number_positive: "有効な正数を入力してください。",
val_minimum_price: "入力された金額は必要最低額に達していません。",
val_confirm: "フィールドの値が一致しません。",
val_checklimit: "選択可能な数を超えました: {#}。",
val_limit_characters: "最大{limit}文字の{count}。",
val_limit_words: "最大{limit}の単語のうち{count}。",
val_recaptcha_fail_msg: "Google reCAPTCHA の確認に失敗しました。しばらくしてからもう一度お試しください。",
val_turnstile_fail_msg: "Cloudflare Turnstile の検証に失敗しました。しばらくしてからもう一度お試しください。",
val_inputmask_incomplete: "適切な形式でフィールドに入力してください。",
uuid_cookie: "",
locale: "ja",
wpforms_plugin_url: "https://yourwebsite.com/wp-content/plugins/wpforms-lite/",
gdpr: "",
ajaxurl: "https://yourwebsite.com/wp-admin/admin-ajax.php",
mailcheck_enabled: "1",
mailcheck_domains: [],
mailcheck_toplevel_domains: ["dev"],
is_ssl: "1",
page_title: "会員募集",
page_id: "23",
currency_code: "USD",
currency_thousands: ",",
currency_decimals: "2",
currency_decimal: ".",
currency_symbol: "$",
currency_symbol_pos: "left",
val_requiredpayment: "支払いが必要です。",
val_creditcard: "有効なクレジットカード番号を入力してください。",
css_vars: ["field-border-radius", "field-background-color", "field-border-color", "field-text-color", "label-color", "label-sublabel-color", "label-error-color", "button-border-radius", "button-background-color", "button-text-color", "page-break-color", "field-size-input-height", "field-size-input-spacing", "field-size-font-size", "field-size-line-height", "field-size-padding-h", "field-size-checkbox-size", "field-size-sublabel-spacing", "field-size-icon-size", "label-size-font-size", "label-size-line-height", "label-size-sublabel-font-size", "label-size-sublabel-line-height", "button-size-font-size", "button-size-height", "button-size-padding-h", "button-size-margin-top"],
isModernMarkupEnabled: "1",
formErrorMessagePrefix: "フォームエラーメッセージ",
errorMessagePrefix: "エラーメッセージ",
submitBtnDisabled: "フォーム送信中は「送信」ボタンが無効化されます。"
};
内容は必要に応じて変更・修正してください。
SWELLの子テーマにあるfunctions.phpへ以下のコードを書き加えます
add_action('wp_enqueue_scripts', function() {
// 子テーマのスタイルシートを読み込み
$timestamp = date('Ymdgis', filemtime(get_stylesheet_directory() . '/style.css'));
wp_enqueue_style('child_style', get_stylesheet_directory_uri() . '/style.css', [], $timestamp);
// カスタム wpforms 設定スクリプトを読み込み
wp_enqueue_script('custom-wpforms-settings', get_stylesheet_directory_uri() . '/js/custom-wpforms-settings.js', array('jquery'), null, true);
// WPForms のメインスクリプトファイルを読み込み
// ここでのパスは、WPForms プラグインディレクトリ内の実際のパスに置き換えてください。
wp_enqueue_script('wpforms-js', plugins_url('wpforms-lite/assets/js/wpforms.min.js'), array('custom-wpforms-settings'), null, true);
}, 11);
この設定で、custom-wpforms-settings.js が最初に読み込まれ、次に wpforms.min.js が読み込まれるようになります。これにより、wpforms_settings 変数が未定義のエラーを防ぐことができます。
変更を加えた後はブラウザのキャッシュをクリアして、ページが正しく動作するか確認してみてください。念の為この変更が他のスクリプトやスタイルに影響していないかを確認してください。
一言でいうと「読み込まれるべき正しい順番に修正すると直る」
このエラーはテーマやプラグインを何度か変更した際に発生することが多いようです。WPFormsが正しく動くためのコードがなぜかあべこべになってしまっていて、読み込む順番を誤っている状態になって正しく動かなかった…と言うことが原因でした。
純粋にWordPress立ち上げ時にSWELLを使用していたウェブサイトではWPFormsを使用していても問題はありませんでした。SWELLは便利で良いのですが、複雑すぎて問題も色々と発生しそうですね。