Contact Form 7：投稿IDから記事タイトルやURLを取得しフォームに自動で入れる
Tag: Contact Form 7
とりあえずwordpressで問い合わせフォームを、、って時にはほぼこれを使いますね。
複雑なフォームだったり特殊だったりレイアウトや動きの指定が厳しかったりすると別のプラグインや自作になりますが、Contact Form 7はお手軽に問い合わせフォームを実装できるので重宝してます。
今回やりたいカスタムは下記の通り
- 記事ページからクエリ付きのURLで問い合わせページにリンク
- クエリに持たせた記事IDから任意のデータを取得
- フォームのinput valueに反映
です。
使用したバージョンは 4.3.1 です。
カスタマイズ後
先にカスタマイズ後のページをご覧ください。
こんな風にタイトル等をフィールドの値にセットさせます。
実装
Contact Form 7の設定
引っ張りたいデータ分フィールドを追加して作成しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <p>記事タイトル (必須)<br />[[text* title]]</p><p>記事URL (必須)<br />[[text* url]]</p><p>お名前 (必須)<br />[[text* your-name]]</p><p>メールアドレス (必須)<br />[email* your-email]</p><p>題名<br />[[text your-subject]]</p><p>メッセージ本文<br />[textarea your-message]</p><p>[submit "送信"]</p> |
わかりやすいようにContact Form 7デフォルトのものに追加しています。
追加したものは記事タイトル・記事URLです。
[[text* title]],[[text* url]]の部分の名前(inputのname)は任意ですが後で使うのでわかりやすいのがいいかと。
functions.php
次にfunctions.phpにコードを追加していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function wpcf7_get_post_data( $tag ){ if( !is_array( $tag ) ) return $tag; //クエリに[post_id]がセットされているか $post_id = ( isset( $_GET['post_id']) && $_GET['post_id'] ) ? $_GET['post_id'] : false; //[post_id]がある場合 if( $post_id ) { if( $tag['name'] == 'title' ) { $title = get_the_title( $post_id ); $tag['values'] = array( $title ); } else if( $tag['name'] == 'url' ) { $url = get_permalink( $post_id ); $tag['values'] = array( $url ); } } return $tag;}add_filter( 'wpcf7_form_tag', 'wpcf7_get_post_data' , 11 ); |
フック：wpcf7_form_tag
wpcf7_form_tagというフックはContact Form 7で内容が出力される前に通る処理で、データを任意の形に変更できます。
呼び出す場所はプラグインファイル「includes/shortcodes.php」に書かれてます。
処理内容
クエリに[post_id]がセットされているか
今回はURLクエリに「post_id」を付与して記事IDを取得するようにします。
ですので、それがあるかないかの判断をしています。
[post_id]がある場合
[post_id]がある場合、記事IDからタイトル・URLを呼び出し、Contact Form 7のデータに追加していきます。
$tagにはContact Form 7で作成した全データが入っている状態で、フィールドの値は全部空です。
そこに取得した記事データを入れていきます。
- $tag[‘name’] == ‘title’
作成したinputのnameは$tag[‘name’]に入っていますので、入れたい箇所かどうか調べています。 - $title = get_the_title( $post_id );
記事IDからタイトルを取得します。 - $tag[‘values’] = array( $title );
inputのvalueは$tag[‘values’]に入りますのでここに入れていきます。必ず配列で。
URLの場合も同様です。
get_post_meta()でカスタムフィールドも取れますよね。
single.php
取得したい記事ページに下記コードを足します。
記事ページですのでsingle.phpになります。
1 | <a href="<?php echo esc_url( home_url( '/contact/?post_id=' .$post->ID ) ); ?>">問い合わせ</a> |
これでクエリにpost_idをもたせたURLにリンクさせます。
問い合わせボタンを出すか出さないか、カスタムフィールドで分岐させてもいいですね。
エディターに書く場合はポストIDも指定で。
1 | <a href="http://securavita.net/contact/?post_id=1">問い合わせ</a> |
完成
応用編
応用では2つのフォームを作成しておき、クエリがあるかないかで切り替えます。
問い合わせとアンケートの様な用途が全く違うものでは使い道が無いですが（ページを変えたほうが良い）普通の問い合わせフォームと記事データを読むフォームを作って切り替えるようにしておけば、任意の記事からリンクされた場合どこのページから問い合わせがあったかわかりやすくなるというものです。
使用はいたって簡単でクエリにpost_idがセットされてれば記事データを読むフォーム、セットされてなければ普通のフォームを出すというものです。
Contact Form 7の設定
Contact Form 7でフォームを2つ作成しておきます。
名前は「contactform」「contactform_post」としておきます。
問い合わせページのテンプレート.php
page.phpでもいいですが、念のためpage-contact.php(問い合わせページのスラッグがcontactの場合)で固定のテンプレートを作成しといたほうがいいかと。
フォームを出したい場所に
1 2 3 4 5 | if( isset( $_GET['post_id'] ) && $_GET['post_id'] ) { echo do_shortcode( '[[contact-form-7 id="{フォームのid}" title="contactform_post"]]' );} else { echo do_shortcode( '[[contact-form-7 id="{フォームのid}" title="contactform"]]' ); } |
これで切り替わります。
do_shortcode()にはContact Form 7のショートコードを入れて下さい。
- Category: Works , WordPress , Plugins
- Tag: Contact Form 7
Comment
Leave a comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Contact form 7に記事タイトル、記事URLを自動入力させる方法を検索していて
こちらの記事を拝見いたしました。
まさに理想的な記事でございました。
誠にありがとうございます。
ただ今回、カスタム投稿タイプのページでは、
こちらの記事の内容通りに設定をしても、フォーム内が空欄となってしまいました。
カスタム投稿タイプの場合は何かコードの書き換えが必要なのでしょうか？
お手すきの際にお知恵をお貸しいただければ幸いです。
よろしくお願いいたします。
takahashi様
コメントありがとうございます。
コメントでいただいた件ですが、これは投稿タイプは関係なく記事IDで記事データを取得してくるので投稿タイプは関係ありません。
試しにカスタム投稿タイプを作成しテストしてみたところ問題なく動作しました。
なので下記を一度ご確認ください。
・問い合わせフォームのURLクエリに「?post_id」がちゃんと付与されているか
http://test.com/contact/?post_id=123
・問い合わせフォームのURLクエリに付与された記事IDは正しいか
post_id=123
このIDが正しくないと取得できません。
・確認方法
URLクエリが付与された状態で、問い合わせフォーム用の固定ページテンプレートにて
$post = get_post( $_GET[‘post_id’] );
var_dump( $post );
を実行してみてください。
念のためWP_DEBUGはtrueにしておいてください。
エラーが出る場合はそのエラーの対応をまず行ってください。
とりあえずこれで一度確認してみてください。