前回の内容、WordPressプラグイン[Contact Form 7]を使って、遷移前のページの値(記事タイトル・カスタムフィールド )を引き継いでフォームに表示する、というのと同じような内容ですが、今回はGETを使ってやってみます。
-
-
[Contact Form 7] 投稿ページのタイトルや情報を取得してフォームの項目に表示する
タイトル通りですが、投稿記事のタイトルやカスタムフィールド の値をContact Form 7に引き渡して、フォームにデフォルトで表示させるには。 イベント・セミナーなどの予約申し込み、不動産の問い合 ...
続きを見る
今回やりたいこと
WelcartショッピングサイトでContact Form 7を使って、ECサイトでよく見かける商品ページにある「この商品について問い合わせ」というボタンをつけて、遷移したフォームに商品名が入力された状態にする
WelcartはWordPressでECサイトが構築できる無料プラグインです(日本製)
Welcart
https://www.welcart.com/
Contact Form 7
https://contactform7.com/ja/
問い合わせフォームを作成する
Contact Form 7をインストールして有効化したら、問い合わせフォームを作成します。
<label>商品名:
[text item-name default:get readonly]</label>
<label">商品コード:
[text item-code default:get readonly]</label>
<label> お名前 (必須):
[text* your-name] </label>
<label> メールアドレス (必須):
[email* your-email] </label>
<label>お問い合わせ内容 (必須):
[textarea* your-message] </label>
<div>
[submit class:button class:expanded "送信"]
</div>
「商品名 item-name」と「商品コード item-code」を商品詳細ページから取得してフォームに表示させることにしますので、[readonly]をつけます。
readonlyをつけると、編集不可にして値を送信できます。
[default:get]はGET取得したデータを表示できます。
作成したらContact Form 7のショートコード を固定ページに貼り付けます。
★送信メールの設定も忘れずに!
[contact-form-7 id="XXX" title="この商品について問い合わせ"]
固定ページのパーマリンクは以下のようにしました。
https://mydomain.com/item-inquire
テーマファイルを編集
Welcartの商品詳細ページのテンプレートwc_item_single.phpを編集します。Welcartでない場合はsingle.php,page.phpなど用途に合わせて。
商品問い合わせボタンを設置します
<a href="<?php echo esc_url(home_url()); ?>/item-inquire/?item-name=<?php the_title(); ?>&item-code=<?php usces_the_itemCode(); ?>">この商品について問い合わせ</a>
※Welcart上の商品名と商品ページのタイトル[the_title()]を同一としていることを想定しているのでitem-nameにはthe_title()を使っています。
Welcartの登録商品名を利用する場合は以下のWelcartで用意されているテンプレートタグを使います。
<?php usces_the_itemName(); ?>
Welcart テンプレートタグ一覧
https://www.welcart.com/community/archives/799
GETを使う方法なら、functions.phpを編集しなくても簡単に設置できますね。
おまけ:問い合わせフォーム以外のページではContact Form 7のjs,cssを無効にする
Contact Form 7をインストールすると、WordPressのページ全てにContact Form 7のcssやjsが挿入されます。
利用するのは問い合わせフォームだけなので、サイトパフォーマンスの為にも問い合わせフォーム以外ではcss,jsを無効にします。
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
function my_deregister_styles() {
// 'contact' または 'item-inquire' という固定ページ以外は無効
if (!is_page( array('contact','item-inquire'))) {
// ハンドル名 'contact-form-7' のCSSの出力を無効化
wp_dequeue_style( 'contact-form-7' );
// Contact Form 7 add confirmも使ってる場合は下記も
wp_dequeue_style( 'contact-form-7-confirm' );
}
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_scripts() {
// 'contact' または 'item-inquire' という固定ページ以外は無効
if (!is_page( array('contact','item-inquire'))) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action( 'wp_print_scripts', 'my_deregister_scripts', 100 );
Welcart対応のオシャレで高機能テーマ

- ショップロゴ表示可能なGoogleマップカスタムピンマーカー
- ローディング画面
- トップページニュースティッカー
- レコメンド商品一覧表示機能、関連商品

- トップページを自由に構成できるコンテンツビルダー
- レコメンド商品一覧表示機能
- 画像つきメガグローバルナビゲーション2タイプ
- ショップロゴ表示可能なGoogleマップカスタムピンマーカー
- 固定ページテンプレート「CONCEPT」「ITEM RANKING」「投稿者一覧」
- カスタム投稿タイプ「お知らせ」「特集記事」

- 静止画、MP4、Youtubeに対応したトップページヘッダー
- 画像付きメガグローバルナビゲーション
- ローディング画面の設定機能
- 固定ページテンプレート「ランディングページ」「ランキング」
- カスタム投稿タイプ「お知らせ」