wordpressで、Contact Form 7+jQueryを使って、セレクトボックスの項目を動的に生成させる方法。
「当ブログで一番好きな記事はどれですか?」という質問を作る場合
wordpressのプラグイン「ContactForm7」は、記事内からショートコードでフォーム全体を呼び出すため、セレクトボックスの項目を動的に生成させようと思うと、Javascriptなどを使って、フォーム表示部分とは別にコードを追加する必要があります。
今回は例として、「一番好きな記事はどれですか?」という質問に対して、ブログの記事タイトル一覧から選択できるようなフォームを作る方法を説明します。
ContactForm7側の設定
ContactForm7の設定画面で、とりあえず、フォーム内にドロップダウンリストを、名前を「favorite」、ID名を「select-title」、選択項目を空で作っておきます。すると、以下のコードが実際のページで出力されます(コードが見やすいように、改行をいれています)。
<span class="wpcf7-form-control-wrap favorite"> <select name="favorite" id="select-title" class="wpcf7-select"> <option value="---">---</option> </select> </span>
これに、Javascriptで、動的にoption要素を追加してあげます。
option要素を追加
僕はほとんどのサイトでjQueryを読み込んでるので、option要素の追加もjQueryを使います。まず、テンプレートにjQueryを読み込む記述を追加します。wp_headよりも手前に以下のコードを追加。
<?php wp_enqueue_script('jquery'); ?>
今度は、wp_headの後に(jQueryが読み込まれた後に)、option要素を追加するコードを。
<?php if( is_page('フォームページのID')): ?> <script type='text/javascript'> jQuery(function(){ <?php $my_query = new WP_Query('&posts_per_page=-1'); ?> <?php if ($my_query->have_posts()) : ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> jQuery('#select-title').append(jQuery('<option>').attr({ value: '<?php the_title(); ?>' }).text('<?php the_title(); ?>')); <?php endwhile; ?> <?php endif; ?> }); </script> <?php endif; ?>
簡単に説明すると、全記事を表示するwordpressループを作って(wordpressループに関しての詳細はこちらの記事もどうぞ) 、#select-titleというIDのついたselect要素内に、記事タイトルの入ったoption要素を作成しています。ちなみに、wordpress付属のjQueryを読み込んでいると、「$」がきかないので、代わりに「jQuery」を使います。
と、いうわけで
今回は、分かりやすいように、全記事のタイトルでoptionを作成しましたが、応用すれば、いろいろな用途に使えるのではないでしょうか。例えば、カスタム投稿タイプで「店舗」を作って、問い合わせ時に店舗を選べるようにしたり・・・。
やってることは、「Javascriptでoption要素を追加」してるだけですので、特別新しいことはないんですけどね・・・
アマゾンのサーバでエラーが起こっているかもしれません。
一度ページを再読み込みしてみてください。
持ってるだけで、一目置かれる本。