WordPressで簡単な予約システムを作成

SHARE

記事内に一部プロモーションを含む場合があります

５：コンタクトフォームの追加

左のバーから「お問い合わせ」をクリックすると自動的に「コンタクトフォーム1」が作成されているので、そのフォーム名を「イベント予約フォーム」に変更して使用します。

イベント予約フォームの一番上にイベントタイトルと日付の項目を追加し保存します。

コンタクトフォーム 
<label> イベントタイトル <span class="automatic">※自動</span>
[text event-title readonly] </label>

<label> 日付 <span class="automatic">※自動</span>
[text event-date readonly] </label>

readonlyとは…？
編集できないようにする属性です。
書き換えができないように自動入力される場所は「readonly」を指定しましょう。
自動入力される場所が自由に編集されても良い場合は無しでも構いません。

固定ページで「イベント予約ページ」を新規作成し、コピーしたフォームのショートコードを張り付けます。
イベント予約ページのパーマリンクは「event_reservation」に変更する（好きなパーマリンクでもOK）
※イベント予約ページのURLは後に使用するため、パーマリンクは必ず半角英数字で指定する

フォームが問題無く表示されてるか確認しましょう。
このとき「イベントタイトル」と「日付」は空欄で表示されます。

６：フォームにイベント情報を渡すためPHPの編集（予約ボタン追加）

1.イベント詳細ページの予約するボタンを押す
2.予約ページに飛ぶ
3.イベントタイトルと日付がフォームに自動で入力されている

ここではこの部分を作っていきます。
使用するファイルはsingle-event.phpとfunctions.phpの2つです。

single-event.phpの編集

ここでは「予約ボタンを作成」します。

single-event.php 
<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date01'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>

すごく長いURLになってて複雑に見えますが、意味が分かれば簡単です。
この長いURLを複数に分けて考えてみましょう。

https://example.com/event_reservation
先ほど固定ページで新規作成した「イベント予約ページ」のURLです。
　

?event-date=<?php the_field('event_date01'); ?>
event-dateにevent_date01(イベントの日付1)を渡す
　

&event-title=<?php the_field('event_title01'); ?>"
event-titleにevent_title01(イベントタイトル)を渡す
　

予約ボタンのURL＝（予約フォームがあるページ＋イベントの日付1＋イベントタイトル）

ざっくりとこんな感じで3つで分かれています。
それを1つのURLにしているので、長いURLになっているのです。

event-dateとevent-titleは、先ほど作ったコンタクトフォームで見ましたね。

コンタクトフォーム 
<label> イベントタイトル <span class="automatic">※自動</span>
[text event-title readonly] </label>

<label> 日付 <span class="automatic">※自動</span>
[text event-date readonly] </label>

このフォームにイベントの日付とイベントタイトルを表示させるために
event-dateとevent-titleがイベント情報を受け取っています。

このボタンをsingle-event.phpに書いてきます。
使用しているテーマによって場所が変わるので、表示させたい部分に挿入してください。
classがついていますが、後にcssで整えるためにつけています。

single-event.php 
<div id="event_reservation_wrap">
	<p>↓<?php the_field('event_date01'); ?>の予約はこちらから
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date01'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	</p>
	<p>↓<?php the_field('event_date02'); ?>の予約はこちらから
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date02'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	</p>
	<p>↓<?php the_field('event_date03'); ?>の予約はこちらから
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date03'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	</p>
	<p>↓<?php the_field('event_date04'); ?>の予約はこちらから
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date04'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	</p>
	<p>↓<?php the_field('event_date05'); ?>の予約はこちらから
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date05'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	</p>
</div>

イベントの日付が5つあるので、ボタンも5つ必要になってきます。

single-event.php 
event-date=<?php the_field('event_date02'); ?>

の部分をevent_date02、event_date03…と書き換えてください。

保存後、single-event.phpをsingle.phpと同じ場所にサーバーにアップします。

functions.phpの編集

ここでは「フォームで使用するタグを追加」します。
functionsのファイルはミスをするとサイトが真っ白になり表示されなくなります、慎重に扱ってください。

functions.php 
<?php
function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;
 
  if(isset($_GET['event-date'])){
    $name = $tag['name'];
    if($name == 'event-date')
      $tag['values'] = (array) $_GET['event-date'];
  }
  if (isset($_GET['event-title'])){
    $name = $tag['name'];
    if($name == 'event-title')
      $tag['values'] = (array) $_GET['event-title'];
  }
  
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);
?>

これをfunctions.phpに追加すると
コンタクトフォームにイベントタイトルと日付が渡せるようになります。

７：動作チェック

コンタクトフォームにイベントタイトルと日付が渡せるようになったので
ここで動作チェックを行います。

・イベント詳細ページにイベントの日付は表示されているか？
・予約ボタンは追加されているか？
・予約ボタンを押した日付がフォームに渡っているか？

ここで気になるのが「入力していない日付のボタンまで表示されている」所だと思います。
入力がされなかった日付のボタンは非表示にしていきます。

８：入力していない日付のボタンを非表示にする

全てが入力必須ではない為、入力していない日付も出てくると思います。
そこで、日付が入力されていないボタンを非表示する設定を行います。

single-event.php 
<?php $imgid = get_field('event_date01'); ?>
<?php if(empty($imgid)):?>
<?php else:?>
	<p>↓<?php the_field('event_date01'); ?>の予約はこちらから ←event_date01の日付が入力されていなかったら、この部分が非表示になる
<?php endif;?>

と、囲むと表示されなくなります。
これを先ほどボタンを追加した場所へ追加してください。

写真のように、日付を入力していない場所は非表示になっています。

９：メールにもタイトルと日付を表示させる

Contactform7のメール項目の編集をしていきます。
差出人や題名などが記入されている場所にメールタグを追加していきます。

メッセージ本文 
イベント名：[event-title]
日付：[event-date]

これでどのイベントの何日に予約が入ったのか、メールで受け取る事が出来ます。
このメールタグはメール (2)にも使用できるので、自動返信メールにも使用できます。

１０：分かりやすいようにcssで整える

single-event.php 
<div id="event_reservation_wrap">
	<?php $imgid = get_field('event_date01'); ?>
	<?php if(empty($imgid)):?>
	<?php else:?>
		<p>↓<?php the_field('event_date01'); ?>の予約はこちらから<br />
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date01'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	<?php endif;?>

	<?php $imgid = get_field('event_date02'); ?>
	<?php if(empty($imgid)):?>
	<?php else:?>
		<p>↓<?php the_field('event_date02'); ?>の予約はこちらから<br />
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date02'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	<?php endif;?>

	<?php $imgid = get_field('event_date03'); ?>
	<?php if(empty($imgid)):?>
	<?php else:?>
		<p>↓<?php the_field('event_date03'); ?>の予約はこちらから<br />
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date03'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	<?php endif;?>

	<?php $imgid = get_field('event_date04'); ?>
	<?php if(empty($imgid)):?>
	<?php else:?>
		<p>↓<?php the_field('event_date04'); ?>の予約はこちらから<br />
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date04'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	<?php endif;?>

	<?php $imgid = get_field('event_date05'); ?>
	<?php if(empty($imgid)):?>
	<?php else:?>
		<p>↓<?php the_field('event_date05'); ?>の予約はこちらから<br />
		<a class="event_btn" href="https://example.com/event_reservation?event-date=<?php the_field('event_date05'); ?>&event-title=<?php the_field('event_title01'); ?>">予約する</a>
	<?php endif;?>
</div>
style.css 
#event_reservation_wrap{
width: 100%;
margin-top: 25px;
}
.event_con{
width:100%;
overflow: hidden;
margin-bottom: 25px;
padding-bottom: 25px;
border-bottom: 1px solid #eee;
text-align: center;
}
.event_date{
width:50%;
float:left;
}
.event_date p{
margin-bottom:0;
padding: 5px 0;
}
.event_btn_wrap{
width:50%;
float:left;
}
.event_btn_wrap a.event_btn{
color:#000;
background-color:#ffadad;
padding: 5px 15px;
display: inline-block;
border-radius:2px;
}

１１：最終動作チェック

  • 押したボタンの日付がフォームに入っているか
  • メールにもタイトルと日付が表示されているか
  • 入力してない日付のボタンが非表示になっているか
  • フォームから予約できるか

この動画のような動きをしていたら完璧です！

不動産サイトやグルメサイトなどもカスタムフィールドを使用すれば、入力が楽になります！らぶカスタムフィールド！！！

しゃお

最終データ

Twenty Seventeenの子テーマをGithubに置いておきます。
参考 wp_reservationgithub

注意
※カスタマイズは自己責任でお願いします
※必ずバックアップを取って元に戻せるようにしておく
※子テーマでカスタマイズする事をオススメします
1 2

前の記事

長島駅からナガシマスパーランドへは行けない！？

次の記事

読み込んだら左から右へ流れるように開くロード画面