【Contact Form 7】テンプレートファイルに直接埋め込む方法と注意点

【Contact Form 7】テンプレートファイルに直接埋め込む方法と注意点

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • WordPressのコンタクトフォームプラグイン「Contact Form 7」のコンタクトフォームをindex.phpやfront-page.phpに直接挿入する方法を知りたい
  • コンタクトフォームをテンプレートファイルに直接挿入する際の注意点を教えてほしい
  • do_shortcode関数で直接埋め込んだのはいいけど表示されなくて困っている…

という方のお悩みを解決します!

ショートコード do_shortcode関数を使う

テンプレートファイルにコンタクトフォームを直接埋め込むにはショートコード do_shortcode関数を使用します。

使い方は至って簡単!

 

  1. do_shortcode関数の引数に埋め込みたいコンタクトフォームのショートコードを指定する
  2. テンプレートファイルの表示させたい箇所にそのコードを貼る

 

do_shortcode関数は以下のように使用します。

do_shortcode関数
<?php echo do_shortcode('[ショートコード]'); ?>
<!-- 例 -->
<?php echo do_shortcode('[contact-form-7 id="1" title="お問い合わせ"]'); ?>

直接埋め込む際の注意点

テンプレートファイルに直接埋め込む際の注意点はぼくが一度それでハマったので同じことで困っている方の助けになればなと笑

 

上述のdo_shortcode関数でテンプレートファイルに埋め込んだのにも関わらずWebページを確認すると何も表示されていないという状態になったのです。。。

20分ほど悩んだ末、原因が判明しました。

それはメインループの中でdo_shortcode関数を使用していたからです!!

こんな感じに書いちゃうと表示されないので皆さんご注意くださいまし。

良くない例
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<?php echo do_shortcode('[contact-form-7 id="1" title="お問い合わせ"]'); ?>

<?php endwhile; ?>
<?php endif; ?>

まとめ

今回紹介したdo_shortcode関数を使うとコンタクトフォームを好きな場所に表示させることができるようになりますね!

Contact Form 7記事まとめ

Contact Form 7を使うときに役立つ記事まとめ