サイト制作のポイント・まとめ（3）WPカスタマイズ、コンテンツの作成

Contact Form 7にショートコードを登録したい

埋め込みでプライバシーポリシーを表示させたかったので使用しました。

(注)「WPCF7_Shortcode」は非推奨になっていて、「WPCF7_FormTag」になっているから気をつけてね！

Contact Form 7に完了ページ（サンクスページ）を追加したい（GA4でコンバージョンとして設定したい）

ウインドミル

Contact Form 7 プラグインで完了画面（サンクスページ）に移動させる方法 Contact Form 7で、プラグインを使ったサンクスページ（送信完了画面）の表示方法を紹介します。今回はメール送信後のアクションを追加できるプラグイン「Redirection for …

コンバージョン（目標）を設定するなら、あった方がいいお問い合わせ完了ページ。特にGA4で設定するときは設定が楽になるので設定しておきたい。

(注)本当はパラメーター等でどこの完了ページなのか一発で分かるようにしたかったけど、うまく動作しなかったので諦めました。GA4の経路データから見ることにします。

2022年9月6日追記：後日やっぱり複数の完了ページ（サンクスページ）が必要になったので。

もう少し、なんとかできないか探してみたところ、良いページを見つけまして。

じゅんぺいブログ

【Contact Form 7】サンクスページの作り方と複数のお問い合わせフォームを振り分ける方法 WordPressのお問い合わせフォームのプラグイン、Contact Form7でフォームが複数あるとき、サンクスページをフォーム毎に分けたい事があると思います。今回はその方法につい…

このおかげで複数の完了ページ（サンクスページ）を用意することができました。
細かいところまでちゃんと判別するとページの管理が大変になってしまうので、種別問わず「お問い合わせ」は「お問い合わせ完了ページ」、「サービス購入前同意書」は「サービス購入前同意書同意完了ページ」、「資料請求」は「資料ダウンロードページ」をそれぞれ表示することにしました。

「送信」→「送信完了ページ」への移動の時間が、ちょっと遅くなるのが懸念事項ですが、他で遅くなっているわけではないので、許容範囲ではあると思います。（何かを送っているというのは伝わるので、ブラウザ（タブ）を即閉じする人…いないといいなぁ……）

(注)お問い合わせ完了ページの経路についてはGA4の経路データから見ることにします。

お問い合わせフォーム（Contact form 7）スパム対策

reCAPTCHAが手っ取り早いのですが、ログイン画面でもないのにあると煩わしさがあるので。これをテキストエリア（お問い合わせ内容）のところに入れておけば大丈夫かなと思います。ひらがなが必ず入るのは日本語のみなので使える方法ですね。

reCAPTCHAを設定したい方はプラグイン公式ヘルプページに設定方法が載っているので参考にしてください。

Contact Form 7

reCAPTCHA (v3) reCAPTCHA はスパムやその他の自動化された嫌がらせからあなたを守ります。Contact Form 7 …

(注)これを適用すると日本人以外からは受け付けなくなっちゃうので、ターゲットが国内限定の方のみ、ご活用ください。

後日談：差出人が英語、内容は日本語で送ってきたので、差出人にも同じように対応しました。
textareaをtextに、ぁ-ん→a-z|A-Zに変えるとできますよ！（ソース掲載は差し控えます）

<?php
// 英語スパムメールの防止
add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);
function wpcf7_validation_textarea_hiragana($spam_result, $target_tag)
{
    $target_name = $target_tag['name'];
    $target_value = (isset($_POST[$target_name])) ? (string) $_POST[$target_name] : '';
    // テキストエリアが複数ある場合は、IF文内の後ろに「 && $target_name == 'your-message'」を追加（your-messageは指定の名前に変更ください）
    if ($target_value !== '' && !preg_match('/[ぁ-ん]/u', $target_value)) {
        $spam_result['valid'] = false;
        $spam_result['reason'] = array($target_name => '申し訳ありません。この内容は送信できません。お手数をおかけいたしますが、今一度ご入力ください。');
    }
    return $spam_result;
}

Contact Form 7の送信元をGmail、またはメール送受信トラブル

Contact Form 7に限らないのですが、WordPressを設置しているサーバーのIPアドレスとメールサーバーのIPアドレスが異なると、セキュリティの観点から、メール側でブロックしてしまいます。
例えば、お問い合わせ送信先メールアドレスがGmailのケースが該当しますね。

Gmailといえば、常にセキュリティ対策を強化し続けているためか、自動返信メール等で、独自ドメインのメールアドレスからGmailアドレス宛にメールを送信する場合、迷惑メールに振り分けられるケースもあります。
なりすまし対策としてSPFに対応しているレンタルサーバーは多いのですが、それをしていても、迷惑メールに振り分けられてしまうことも。

残念ながら、クリエイトアコードも該当してしまい、迷惑メールに振り分けられてしまうようになってました……。

SPFに加えてDKIMを設定する必要がありますが、残念ながら、2023年9月29日現在、さくらインターネットでは対応していません。

事業用サイトはさくらインターネットに設置していますので、メールサーバーを別にする他ない状況になってしまい、夜空きり名義でアフィリエイトブログサイトを作るとき用に契約したConoHa WINGはDKIM設定に対応していたために「使える」と判断し、アフィリエイトブログサイトとメールをConoHa WINGで管理することに変更したのが2023年9月8日頃のことです。

メールサーバーだけ契約することも考えたのですが、セキュリティ対策もバッチリだけど料金が高いか、DKIM設定に対応しているのかが定かではないところが多く、断念しました……。
ConoHa VPSのメールサーバーサービスは対応していて安いのですが、前述の通り、ConoHa WINGを既に契約しているので、新しく契約するよりもサーバーを活用しようと考えた次第です。

本件のことを失念していたこと、しばらくお問い合わせフォームが活用されることがなかったこと、最近は、エックスサーバーを使うケースが多く、そうじゃなくても、メールフォームは別システムを使う事例が増えてきたことから、お問い合わせフォームからのメールが届かないことに気づくのが遅れてしまいました。使っていない技術は忘れがちなので、本件については反省しないとです……。

エックスサーバーはDKIMに対応しているのですが、利用者が多すぎる弊害なのか使えなくなってしまう事例がありました。
原因を調査しても解決せず、そのときはエックスサーバーの利用を断念した記憶があります。
もしかして、サーバーIPがブラックリストに入っているのか……？ と考察しているページを見て、そうなのかなと思った記憶があります。
DKIM対応前の話なので、DKIM対応後の今は問題ないかもしれません。DKIMは2023年2月14日に対応したそうです。（公式サイト調べ）

対策としては、メールフォームプラグインの利用をやめてメールフォームサービスを利用するのが一点。もう一つは、WordPressからメールを送るときのSMTP設定をするプラグインを導入して設定することです。

使いやすくて有名なのが「WP Mail SMTP」です。

「WP Mail SMTP」の使い方

このプラグインを利用する前に注意事項。
セキュリティ対策プラグインでログイン通知がメールで届くようになっている場合、WordPressからのメールが届く場合は不都合が生じる可能性があります。
「管理者メールアドレス、ログイン用にも使われるメールアドレス、メールフォームが全部Gmailまたは個人用メールアドレス（同じメールアドレス）だけで対応する」なら問題ありませんが、逆にそうじゃないケースだと、クリエイトアコードのように「お問い合わせフォームからのメールは届くようになったけど、メールアドレスを全部統一するように修正しないとWordPressのサイトから送信される他のメールが届かなくなってしまった」というような不都合が生じる可能性があります。
それ以外の回避方法となると「WordPressでメールフォームプラグインを使うのをやめる」か「サブドメインやサブディレクトリでお問い合わせフォーム専用のWordPressサイトを作って埋め込む」以外には思いつかなかったので、前者の方が楽なんじゃないかと思います。

なんとなく個人的に「セットアップウィザード」は使いにくいと感じているので、ダッシュボード（プラグインの設定画面）にアクセスした後は画面の項目名に合わせて設定をしていきます。

「送信元メールアドレスを強制使用」のような強制使用と「送信元アドレスを返信パス (return-path) として設定」は必要ならチェックを入れてください。「送信元メールアドレスを強制使用」はチェックを入れた方がいいかもしれません。

STMPサーバーやユーザーID・パスワード等の設定については、サーバー側のメール設定ヘルプページをご確認ください。
送受信テストを行い、問題がなければ設定完了です。
管理面でも、Webサーバーとメールサーバーを分けておくのはオススメの方法と言えますが、こういう落とし穴には気をつけていきましょう！

suzunonlog

SMTP設定でフォームからメールを送信する方法【Word Press】 「WordPressでフォームを設置したけど送信したメールが届かない」とお困りの方に、SMTP設定でフォームからメールを送信する方法を紹介します。

Contact Form 7とreCAPTCHA v3

Contact Form 7には「Contact Form 7 の設定を検証する」ツールが備わっていますが、「最低限reCAPTCHAは必須である」と指摘および注意喚起がありました。
理想は「Akismet」と組み合わせることとページには記載されていますが、商業利用は有料のプラグインのため、予算との相談になるでしょう（クリエイトアコードは商業利用になります。アフィリエイトブログも商業利用の区分になるそうです）

Contact Form 7

Unsafe email config is used without sufficient protection. This warning appears when you have an email configuration that allows spammers to abuse the contact form—and sufficient spam protection is not deployed. If you …

Googleが提供する「reCAPTCHA」は無料で使えるので、設定することをおすすめします。
設定の仕方ですが、GoogleのreCAPTCHAページにアクセスします。
ここで「v3 Admin Console」を選択します。

青いボタン「Get Started with Enterprise」のリンク先にアクセスすると戸惑うし、目的が達成できないので注意。

その後、「新しいサイトを登録する（または＋）」をクリックして、ラベル（自分が分かればOK）とreCAPTCHA タイプ（Contact Form 7はv3を選択）を設定、ドメインを入力して送信してキーを発行します。

ここで得られたキーをWordPressの管理画面「Contact Form 7」のメニューから「インテグレーション」を選択し、reCAPTCHAを選び、進んだセットアップ画面に入力すると設定が完了します。

ただ、お問い合わせフォーム以外の全部のページで表示される上にページ表示速度も遅くなるんですよね……ありがたいけど、正直邪魔です。
ここから先はカスタマイズが必要になりますが、気になる人は、下記のコードを入力してください。フォームがあるページが一つじゃない場合は、「 || 」 でつなげて記入します。

add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact')) return;
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);

add_action( 'wp_enqueue_scripts', function() {
    if(is_page('contact1') || is_page('contact2')) {
        return;
    }
    wp_deregister_script( 'google-recaptcha' );
}, 100, 0);

欲を言うなら、お問い合わせフォームがあるページ以外の「Contact Form 7」のJavaScriptとCSSの読み込みも廃止したいところなのですが、実現できなくはないけど、それを対応するコストと対応結果が見合うわけではなく、バージョンアップに対応していくメンテナンスコストを考えると、今はパフォーマンスがそこまで悪いとは体感的にも感じていないこともあり、対応を保留しています。

難しいしややこしくなるにしても、もう少し「必要な部分だけ必要なものを読み込む」設定が楽にできれば良いのですが……思いつかないので、思いついたら紹介しようと思います。（余談ながら、広告も似たような感じで……。フックとかあったら自動で説明文を入れられるのになぁ）

100ウェブ

Contact form 7に実装したreCAPTCHA v3のロゴをフォーム以外の場所では非表示にする | WordPressカスタマイ… スパム対策用のGoogle reCAPTCHA。 v2まではチェックボックスにチェック入れたり、写真が出てきて「標識を選べ」だの「自動車を選べ」言われて使えなかったのですが、v3に…