[Contact Form 7] Welcart商品名を問い合わせ項目名として問い合わせフォームに引き継ぐ

前回の内容、WordPressプラグイン[Contact Form 7]を使って、遷移前のページの値（記事タイトル・カスタムフィールド ）を引き継いでフォームに表示する、というのと同じような内容ですが、今回はGETを使ってやってみます。

今回やりたいこと

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 );

WordPressテーマ「ICONIC」

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

WordPressテーマ「GLAMOUR」

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

WordPressテーマ「EGO.」

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