【WordPress】 ContactForm7 セレクトボックスの項目を自動生成する

バンドやミュージシャンなど音楽活動をする人のためのホームページ用WordPressテーマ「zousanrecords」
販売ページは→こちら

PHP初心者の自分がこのWordPressテーマを構築していく上でつまずいたとこ、苦戦したところを備忘録として残しておこうと思います。

今回はライブ予約フォームで使ったContactForm7について。

やりたいこと
jQueryで実装可能
ContactForm7の設定
実装するページのコード
バンド・ミュージシャンのためのWordPressテーマ

やりたいこと

ライブ予約フォームを作ったのですが、日程と会場をお客さんに手動で入力してもらうのが煩わしい。
そこで、ライブ情報を更新すると自動的にライブ予約フォームの「日程・会場」に項目が追加されて選択できるようにしたいと思います。

先に見せると完成形はこう↓

「今日」以降の日程と会場名が自動的に選択肢に追加されます。また、ライブの日が過ぎると自動的に消えます。

jQueryで実装可能

調べたらありました。こちらの記事を参考にさせていただきました。jQueryで実装可能とのこと。

参考：ContactForm7＋jQueryでセレクトボックスを動的に生成する

「今日」以降の情報のみ追加するというのは以前書いた【WordPress】Advanced custom fieldsのデイトピッカーで表示を分岐するを応用します。

ContactForm7の設定

ContactForm7の設定の設定画面で「日程・会場」をドロップダウンメニューで作成、オプションは空白のままでidを「select-live」としました。

実装するページのコード

jQueryは予め実装するページに読み込んでおきます。

実装する固定ページに書いたコード↓

<?php if( is_page('46')): // 実装する固定ページのID ?> 
<script type='text/javascript'>
    jQuery(function(){    
		<?php
		 $arg = array(
			'posts_per_page' => -1,
			'post_type'    => 'live',
			'orderby'      => 'live_date',
			'order'        => 'ASC',
			'meta_key'     => 'live_date',
			'meta_value'   => date( "Ymd" ),
			'meta_compare' => '>=',
			);
		 $posts = new WP_Query($arg);
		?>
		<?php if ($posts->have_posts()) : ?>
			<?php while ($posts->have_posts()) : $posts->the_post(); ?>            
				jQuery('#select-live').append(jQuery('<option>').attr({ value: '<?php the_field('live_date'); ?><?php the_field('live_place'); ?>' }).text('<?php
				  $date = get_field('live_date', false, false); //値の取得
				  $date = new DateTime($date); //日付オブジェクトの作成
				  echo $date->format('Y/m/d '); //日付の表示フォーマット
				?>
				<?php the_field('live_place'); ?>'));
			<?php endwhile; ?>
		<?php endif; ?>    
    });
</script>
<?php endif; ?>

		<div id="contents_wrap">
			<div id="contact_index_contents" class="contents">
				<div class="mono_area">
					<section>
						<div class="hgroup">
							<h1 class="heading01"><?php wp_title(''); ?></h1>
						</div>
						<div class="box">
							<div class="part texts">
								<p>ライブの予約は下記フォームよりご連絡ください。<br>追ってご連絡いたしますのでよろしくお願いいたします。</p>
							</div>
						</div>
						<div class="box">
							<h2 class="heading02">ライブ予約フォーム</h2>
							<div class="part form_part">
								<div id="contact_form">
									<?php echo do_shortcode('エラー: コンタクトフォームが見つかりません。'); // ContactForm7のショートコード ?>
								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>

これで実装できました。

サンプルページは→こちら