2022.05.29 
Web制作2023.4.18
【独学6ステップ】Web制作のためのWordPress学習ロードマップ
WordPressでのお問い合わせフォームを作る際にはプラグインの「MW WP Form」がおすすめです。
シンプルな操作で簡単にお問い合わせフォームを構築できるため、WordPressのお問い合わせフォーム構築のプラグインではよく使用されます。
私もWebサイト構築時にすごくお世話になっているプラグインです。
よく使われる理由と、カスタマイズ例について、紹介します。
「MW WP Form」とは？
「MW WP Form」はフォームを構築するためのWordPressプラグインです。
簡単な操作で”入力画面””確認画面””完了画面”を構築することができる人気のプラグインです。
「MW WP Form」の公式ドキュメントにはフィルターフックが豊富に用意されています。
フィルターフックを活用し、柔軟にカスタマイズすることができます。
カスタマイズについては、後ほど紹介します。
「MW WP Form」vs 「Contact Form 7」
「MW WP Form」とよく比較されるのが、「Contact Form 7」です。
「Contact Form 7」はシンプルな仕様で、機能を拡張するプラグインも豊富で、カスタムしやすいのが特徴でした。
しかし「Contact Form 7」はjQueryで動いています。Web界隈では、JavaScriptのフレームワークは、VueやReactのシェアが多くなってきています。
それらの影響からか「Contact Form 7」も3年ほど前から、更新がされていません。
「Contact Form 7」に対応しているプラグインも最新のWordPressのバージョンとの互換性がなくなり、今までの方法ではフォーム構築できなくなっています。
もちろん「Contact Form 7」の機能を拡張するプラグインもWordPressのバージョンとの互換性がなくなってきています。
プラグインを使用して、お問い合わせフォームを作る場合は、現在もサポートが行われている「MW WP Form」を使用するのがオススメです。
「MW WP Form」のデメリット
とは言え、「MW WP Form」にもデメリットはあります。
「MW WP Form」のデメリットは、確認画面が必ずついてしまうことです。
「Contact Form 7」では、入力画面→完了画面と、確認画面がないフォームプラグインでした。
確認画面が不要な場合は「Contact Form 7」、必要な場合は「MW WP FORM」と使い分けていた人も多かったと思います。
現段階では、確認画面不要のお問い合わせフォームを作る場合はベタ書きでフォームを作るしかないのかな、と思います。
何かいい方法があれば、随時更新していきます。
カスタマイズ例をご紹介
「MW WP Form」のメリットとして、フィルターフックが豊富に用意されており、プラグインを使用せずにカスタマイズが柔軟にできることです。
フィルターフックは、関数のトリガーのようなもので、「これらが実行された時に、これを実行する。」というように、操作することができます。
「MW WP Form」でよく行うカスタマイズ例を紹介します。
「MW WP Form」のショートコードをGitで管理したい
WordPressの管理画面でコードを編集すると、インデントはめちゃくちゃになりますし、Gitのように履歴は残らないですし、管理しにくいです。
そこでショートコードを使って、管理画面の内容をコードで管理できるようにしましょう。
編集する箇所は、
functions.php
mw-wp-form.php(ショートコードを管理するファイル)
MW WP Formのエディター
の3つです。
まず初めに、functions.phpに以下を書き込み、ショートコードの使用を有効にします。
// functions.php
function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params));
ob_start();
include(STYLESHEETPATH . "/$file");
return ob_get_clean();
}
add_shortcode('callphp', 'my_php_Include');
次に、「MW WPForm」のエディターにて下記を追記します。
” file=” “の中のディレクトリは適宜変更してください。
今回はテーマディレクトリからのパスを入力する仕様になっています。
// MW WP Formのエディター
[callphp file='mw-wp-form.php']
これで、「MW WP Form」のエディタの内容が、mw-wp-form.phpで編集できるようになっています。
それでは、mw-wp-form.phpを編集してみましょう。
// mw-wp-form.php
<?php echo do_shortcode('[ショートコード]'); ?>
phpファイルで、ショートコードを出力する際は、<?php echo do_shortcode(‘[ショートコード]’); ?>と書かないと、出力されません。
エディタでコードを管理すると、インデントが揃っておらず、見にくい上に、履歴も残りません。
そのようなことはなるべく避けたいので、ショートコードを用いた、phpファイルでの管理をおすすめします。
バリデーションルールを追加する
編集するファイルはfunctions.phpのみです。
下記内容をfunctions.phpに追記してください。
// functions.php
function validation_rule( $Validation, $data ) {
$Validation->set_rule( ‘name’, 'noEmpty', array('message' => 'お名前を入力してください。'));
$Validation->set_rule( ‘name’, 'mail', array('message' => 'メールアドレスの形式ではありません｡'));
$Validation->set_rule( ‘name’, 'eq', array( 'target' => 'email','message' => "メールアドレスが一致しません。" ));
add_filter( 'mwform_validation_mw-wp-form-xxx', 'validation_rule', 10, 2 );
‘name’にはname属性を入力してください。
‘noEmpty’：値が空白である場合にエラーを返します。
‘mail’：はメール形式でない場合にエラーを返します。
‘eq’：は値が一致しない場合にエラーを返します。
追加のバリデーションルールもありますので、下記をご確認ください。
選択項目によって、バリデーションルールを変更する
バリデーションを設定する際には、選択項目に応じて、必須項目を変更したい場合があります。
そんな時は、先程の「バリデーションルールの追加」にif文を追記して条件分岐させます。
// functions.php
function validation_rule( $Validation, $data ) {
if ($data[‘req’] === 'その他'){
$Validation->set_rule( ‘req-content', 'noEmpty', array('message' => 'お問い合わせ内容を記入してください。'));
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'validation_rule', 10, 2 );
今回はname属性が‘req’のcheckboxでその他を選んだ場合、‘req-cotent’を必須項目にする例です。
お問い合わせフォームによくある形なので、是非活用してみてください。
選択項目によって、メールの内容を変更する
function.phpに、以下の内容を追記してください。
// 自動返信メール
//functions.php
function auto_mail($Mail, $values, $Data) {
if ($Data->get(‘req’) == 'お問い合わせ') {
$Mail->body =
$Data->get('name')."様"."\n".
“お問い合わせを受け付けました。”.”\n”.
"\n";
}
if ($Data->get('subjects') == '資料請求') {
$Mail->body =
$Data->get('name')."様"."\n".
“資料請求を受け付けました。”.”\n”.
"\n";
}
return $Mail;
add_filter('mwform_auto_mail_mw-wp-form-xxx', 'auto_mail', 10, 3);
// 管理者宛メール
// functions.php
function admin_mail($Mail, $values, $Data) {
if ($Data->get(‘req’) == 'お問い合わせ') {
$Mail->body =
$Data->get('name')."様"."\n".
“お問い合わせを受け付けました。”.”\n”.
"\n";
}
if ($Data->get('subjects') == '資料請求') {
$Mail->body =
$Data->get('name')."様"."\n".
“資料請求を受け付けました。”.”\n”.
"\n";
}
return $Mail;
add_filter('mwform_admin_mail_mw-wp-form-xxx', 'admin_mail', 10, 3);
name属性が‘req’のradioをの内容によって、自動返信メールと管理者宛メールの内容を変更する例です。
上記では’お問い合わせ’が選択された場合と、’資料請求’が選択された場合で、メールの内容が異なるようになっています。
フォームの内容をメールに記載したい場合は$Data->get(‘name’)を使用してください。
$Mail->bodyを用いると、メールの内容を変更できますが、下記を追記するとメールの詳細も変更することができます。
$Mail->to：送信先を変更
$Mail->from：送信元を変更
$Mail->sender：送信者を変更
$Mail->subject：件名を変更
是非ご活用ください。
