WordPress Tips

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

2019-08-31

本記事にはプロモーションが含まれています。

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

前回の内容、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対応のオシャレで高機能テーマ

WordPressテーマ「ICONIC」

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

    WordPressテーマ「GLAMOUR」

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

    WordPressテーマ「EGO.」

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

      今月キャンペーン特典があるサービス

      • エックスサーバー
        利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
      • ConoHa WING
        WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
      • カラフルボックス
        ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

      -WordPress Tips
      -,