ホームページの閲覧者が商品情報ページからお問い合わせページに移動した時に、問い合わせフォーム( Contact Form7 )に移動元の商品名の情報を渡したいケースがあると思います。そんなケースに対応する簡単なカスタマイズ方法を解説します。
概要
URLにパラメータをつける
商品ページから問い合わせページに移動する時に、ボタンのリンク先は問い合わせページのURLだけでなくパラメーターのついたURLで移動します。お問い合わせページのURLが https://vektor-inc.co.jp/contact-item/ だった場合、
https://vektor-inc.co.jp/contact-item/?productName=LightningPro
というようなURLになるようにします。
パラメーターから値を受け取る
問い合わせページ側でこのproductNameがLightningProであるという情報を受け取って、その情報をContact Form 7 が受け取るようにします。
実装
問い合わせフォームへのリンクボタンの作成
リンクボタンはphpのテンプレートをカスタマイズしてボタン部分を埋め込むか、JavaScriptで処理するかなど、いくつかの手法があります。
[ A案 ] phpのテンプレートファイルをカスタマイズする
子テーマなどの場合はあまりテンプレートファイルを変更してしまうと、親テーマのバージョンアップでの仕様変更で動作がおかしくなったり、新規追加された機能がカスタマイズしたページでは効かなくなるなどの弊害につながるので、あまり推奨でないのですが、受託で案件専用テーマなどの場合は手っ取り早くテーマファイルに直書きする事ができます。
<a href="<?php echo home_url() . '/contact-item/?productName=' . esc_attr( get_the_title() ); ?>" class="btn btn-primary">この商品について問い合わせる</a>
[ B案 ] ボタン用のショートコードを作る
Aの手法はphpのテンプレートファイルをカスタマイズしないといけないので、あまりおすすめしていません。代替案としてショートコードでボタンを作る手法を紹介します。
まずは以下のようなコードを子テーマの functions.php などに記述します。
// ショートコード[product_btn]を登録
add_shortcode( 'product_btn', 'my_product_btn' );
// [product_btn] を返す関数
function my_product_btn(){
// 問い合わせフォーム先のURL
$url = home_url() . '/contact-item/?productName=' . get_the_title();
// 問い合わせボタンを返す
return '<div class="text-center"><a href="'.esc_url( $url ).'" class="btn btn-primary">この商品について問い合わせる</a></div>';
}
ショートコードを登録したら商品ページに貼り付けます。
[ C案 ] JavaScript でリンク先URLに自動でパラメータを追加する
若干トリッキーですがJavaScriptを使って、
- ページ内の要素から商品名を取得する
- 問い合わせページへのボタンのリンク先URLに商品名を追加する
というやり方もあります。
まず、商品ページに配置する問い合わせフォームへリンクするボタンを作成します。普通にボタンブロックなどで作成すればかまいません。
その際に識別用にcssクラスを指定します。ここでは url_throw というクラス名にしています。
商品名(ページタイトル)をボタンのリンク先に追加するコード
子テーマの functions.php などに書くコードのサンプルです。
function lightning_pass_item_form() {
?>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
// ページのタイトルの要素( h1.entry-title )を取得
const title = document.querySelectorAll("h1.entry-title")[0].textContent;
// ターゲットのボタンのリンクタグ( .url_throw a )を指定
const targetBtn = document.querySelectorAll('.url_throw a');
// ボタンのURLを取得
const url = targetBtn[0].getAttribute('href');
// 元のURLにフォームに投げるパラメーターを追加する
const newUrl = url + '?productName=' + title;
// ボタンのリンク先を書き換え
targetBtn[0].setAttribute('href', newUrl);
});
</script>
<?php
}
add_action( 'wp_footer', 'lightning_pass_item_form' );
このコードはLightningを前提に書いているので、商品名(投稿名)が表示されている部分のセレクタは h1.entry-title としていますので、他のテーマの場合はテーマで商品名が表示されている箇所のセレクタ名に書き換えてください。
ボタンのcssクラス名は先程 url_throw を設定しました。今回利用したボタンブロックは クラス url_throw がついた div の中にaタグが入るので、.url_throw a としていますが、こちらも自分の設置したボタン部分のHTMLを考慮して必要に応じて変更してください。
A / B / C どの手法でもかまいませんので、ボタンが設置できたらボタンのリンク先が
/contact-item/?productName=LightningPro
のようにリンク元ページの情報がついている事を確認してください。
フォームの設定
まずはお問い合わせフォームを設定します。商品名入力欄をここでは productName というフィールド名で指定します。
商品名<small class="text-danger">(必須)</small>
[text* productName]
公開画面側のフォームはこんな感じです。
自動で値が入るように Contact Form 7 のフックに登録
次にURLについているパラメーターを Contact Form 7 が自動で受け取るように設定します。
子テーマのfunctions.phpなどに以下を貼り付けてください。
function my_form_tag_filter( $tag ) {
if ( ! is_array( $tag ) ) {
return $tag;
}
// productNameの値を受け取ってContactFormに投げる
// 複数のパラメーターを受け取る場合は if (){} 部分を複製してパラメーター名を変更すればOK
if ( isset( $_GET['productName'] ) ) {
$name = $tag['name'];
if ( $name == 'productName' ) {
$tag['values'] = (array) $_GET['productName'];
}
}
return $tag;
}
add_filter( 'wpcf7_form_tag', 'my_form_tag_filter', 11 );
これで元ページのボタンをクリックすると…
こんな感じで受け取る事ができます。
ボタンを自動で表示する
A 以外の場合は商品ページ毎にボタンを設置しないといけないわけですが面倒ですよね。
VK All in One Expansion Unit を使っている方はCTA機能を使うと自動で配置できます。
まずはCTAにお問い合わせボタンを新規登録します。
次に、ExUnitのメイン設定が面で、表示させたい投稿タイプに指定すれば、公開画面の本文下部に自動的に表示されます。
[ D案 ] 画面遷移不要じゃね?
ここまで来て「何もこんな回りくどい事しなくても商品ページの下にフォームがあって商品名が入ってればいいんじゃね?」と思ってしまいました。こういう事です。
これで良い場合は今まで子テーマのfunctions.phpに書いていたものはすべて消去して下記に差し替えます
function my_form_tag_filter( $tag ) {
if ( ! is_array( $tag ) ) {
return $tag;
}
// 商品情報の投稿タイプ名が「products」の場合
if ( get_post_type() === 'products' ) {
$name = $tag['name'];
if ( $name == 'productName' ) {
$tag['values'] = (array) esc_html( get_the_title() );
}
}
return $tag;
}
add_filter( 'wpcf7_form_tag', 'my_form_tag_filter', 11 );
そして Contact Form 7 のショートコードを製品ページの下に貼るか、CTAに登録すればOKです。
この記事を書いた人
-
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー(LT)
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。