こんにちは!ウェブサバイバー運営のYeah-Manです!
さて、今回は『WordPressにフォームを設置したい!』といった時に真っ先に思いつく方も多いんじゃないかと思う有名プラグイン『MW WP FORM』のカスタマイズに関して紹介したいと思います!管理画面からでも簡単にデータを渡すこともできますし、MW WP FORMには豊富なフックを用意してくれているので、実際にあった事例を参考に用途別に紹介し、『あー!探してた処理!』という感じで見つかったらいいなと思って執筆しています。もしも困っていることがあったらぜひ参考にしてみてください!筆者は嬉しいですぅw
それではいってみます!
この記事の目次
カスタマイズの基本手順
まずはMW WP FORMのフックを使ったカスタマイズの基本手順を押さえましょう。基本手順はおおまか以下の通りです。
- 作成したMW WP FORMの設定画面で『設定』から『URL引数を有効にする』にチェックをつける
- functions.phpにフックを使って処理を書く
上記二点が基本手順です。処理自体はfunctions.phpへ書きます。基本的にカスタマイズはfunctions.phpで行います。1の『URL引数を有効にする』へチェックをつける設定ですが、やっておくと便利ですので、カスタマイズをする時はつけておくといいかもしれません。
『URL引数を有効にする』のチェックボックスの説明には以下のように記載があります。
有効にした場合、MW WP FormはURL引数を取得します。また、URL引数 ”post_id” をもとに投稿を取得します。その投稿($post) のプロパティを使用できるようになります。例:{ID}、{post_title}、{post_meta}など…
ちょっとわかりにくいですが、URLのパラメーターで『post_id』というのがWordPressの場合セットされているのですが、『それをもとにフォームを表示している記事のデータを取得できますよー』といったことが書かれています。
また、このチェックボックスにチェックをつけると、表示するフォームの入力画面で$GETで取得できるクエリを付与できるようなるので、カスタマイズ時に重宝したりします。なのでカスタマイズをする時はチェックをつけるようにするといいと思います。
基本手順についてここまで解説してまいりました。
それではここから実際にカスタマイズ例をご紹介していきたいと思います!
『フォームを表示した時、記事のタイトルなどを自動入力させたい!』
よくWordPressを使ってコーポレートサイトを作成、なんらかサービスや製品を紹介しているとします。そのようなコンテンツに対し、問い合わせを受け付けるというシチュエーションが実際によくあります。さて、そんなときによく芽生えるのが『各製品やサービスに対して個別に問い合わせを受け付けたい!』という気持ち。それはそうですよね。『製品へのお問い合わせ』で一括りにしたものでプルダウン選択して問い合わせ。。。etc。。。という導線を考えた時、『何らか工夫して製品やサービス名が特定できる』方がユーザーも使いやすいでしょう。
前段が長すぎました(汗。さて、そんなシチュエーションの時によく使うカスタマイズです。
そんな時は以下をご参照ください。
※先ほど紹介した『URL引数を有効にする』にチェックをつけてからお試しください!
解説
この処理は端的には『入力画面を表示したら「テキストフィールド名」というMW WP FORMで作成したテキスト入力フィールドに自動で記事のタイトルが挿入される』と言う処理です。
※こちらの処理はfunctions.phpに記入してください。
ポイントは3行目。前提として、表示している入力画面のURLは『URL引数を有効にする』にチェックが入っている状態で閲覧していますが、
その際URLヲ『https://web-survivor.com/conatctform/?post_id=3』などとして表示しましょう。
通常この状態でMW WP FORMの入力画面を表示すると、『?post_id=3』などのクエリ箇所はすべて除外されますが、『URL引数を有効にしている』ため、クエリ部分はそのままのURLで入力画面が表示されます。
その状態で先ほどのfuntions.phpの処理、冒頭のif文箇所に、MW WP FORMで埋め込みたいテキストフィールドのname属性を入れてあげれば、
『?post_idの値をもとに処理が走り(この場合、投稿ID3番を探しに行きます)、そのIDを持った投稿記事のタイトルを取得、自動で挿入される』と言うわけです!
なので製品やサービスを例に取るなら、製品やサービス1つ1つの情報をカスタム投稿で作成し、そこから問い合わせへの導線を引くときに
『https://web-survivor.com/conatctform/』など単純にフォームへのリンクを引くのではなく、『https://web-survivor.com/conatctform/?post_id=その製品のID』とURLを作ってあげて導線を引いてあげることで、あらかじめその製品・サービス名が入力された状態で、ユーザーに問い合わせてもらえるようになるとういわけですね!
『チェックボックスの内容を投稿記事と連動したい!』
これもよくあります。MW WP FORMでチェックボックスを作成することができますが、そのチェックボックス、たとえば先ほどの例にあった『カスタム投稿で作成した製品やサービスを入れる』という形で作成するとしたらどうでしょう?手作業で登録するのも、もちろんいいですが『変更がかかった』『めっちゃ大量に入れなきゃいけない』といったシチュエーションの時、一気に面倒になりますよね。そんな時に使えるカスタマイズです!
以下をご参照ください!
解説
まず処理全体としては『mwform_admin_mail_raw_mw-wp-form-※※※※※※』という、MW WP FORMであらかじめ用意されているフックを使い、書き換え処理を挟み込む形で行います。フックの名前を見てもらえばわかる通り、このサンプルでは『mwform_admin_mail』ということで、『管理者宛メール側』の『to』と『replyTo』を書き換えています。
『toやreplyToなどのメールアドレスを選択肢に併せて動的に変更/追加したい!』
例えばセレクトボックスなどで、『とある選択をチョイスしたユーザーからの問い合わせは、宛先を変更したい』といったシチュエーションに心当たりはありませんか?これも実際に要望としてはよくあがってくるもので、セレクトボックス以外ですとチェックボックスやラジオボタンだったりも同じ選択式ですので該当します。そんな『ユーザーの選択によって、toやreplyToへメールアドレスを追加したり、変更を行う』シチュエーションの時は以下をご参照ください!
解説
まず処理全体としては『mwform_admin_mail_raw_mw-wp-form-※※※※※※』という、MW WP FORMであらかじめ用意されているフックを使い、書き換え処理を挟み込む形で行います。フックの名前を見てもらえばわかる通り、このサンプルでは『mwform_admin_mail』ということで、『管理者宛メール側』の『to』と『replyTo』を書き換えています。
はじめに1行目から解説していきますね。
1行目の『mwform_admin_mail_raw_mw-wp-form-※※※※※※』箇所ですが、この『※※※※※※』箇所に作成したMW WP FORMのIDが入ります。MW WP FORMのIDは、フォームを作成した際に埋め込みコードとして提供される『ショートコード』の末尾です。
引数の『$Mail, $values, $Data』にはそれぞれ任意のデータが入ってきます。本サンプルでは$Dataに用意されているgetメソッドと、実際に値が入っている$Mailを書き換えていきます。他気になるデータがあれば、サンプル中でコメントアウトしてある箇所のコメントアウトを外し、MW WP FORMを使って実際に作成したフォームにて、完了画面まで遷移しましょう。exit()箇所で処理が止まりますので、中にどのようなデータが入っているかを確認することができます。
※こういった自発的に調べた情報はいろんなところで使えます!ぜひお試しくださいね!
2、3行目ですが本サンプルでは『ユーザーがセレクトボックスの値が、作成したセレクトボックスほにゃららだったらtoとreplyToを書き換える』といった処理ですので、ここで対象のセレクトボックスの値を取得、if文による条件分岐を挟んでいます。
※もしなんでもいいから取り急ぎ書き換えとい言うことでしたら、このif文を外して使えば、そのまま書き換わると思います。
※もしセレクトボックスが『multiple』など複数選択可な場合は、foreachなどで配列処理をして対応が必要ですが、ここでは単一選択による単一の値が入ってくるものとします。
問い合わせデータ内のステータスにオリジナルステータスを追加したい!
ちょっとニッチかもしれませんが、問い合わせデータ内の『対応中』や『未対応』といったステータスへオリジナルステータスを追加することができます!コードは以下です!ご参照ください!
keyの部分へ半角英数にて好きなキー名を、それに対して値を設定してあげてください。対応中や未対応などと合わせて、項目が追加されることが確認できると思います!
カスタマイズはアイデア次第
ここまで実際によくある事例を紹介しながらカスタマイズパターンを何点か紹介してきました。フォームというのはユーザーのリアクションが生で届く大事なもの。他にもたくさんのカスタマイズ要望があることでしょう。様々な要望に答えるために、知識をたくさん蓄え、アイデアの引き出しをいっぱいにしておきましょう。無茶とも思えるカスタマイズもなんなくクリアできるかも?
それでは今回はこの辺で!まったね〜〜〜〜〜〜!!!