セルフバックで3万円の臨時収入を手に入れよう!

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

投稿したイベント(記事)から予約できる簡単なシステムを作成したので
自分が忘れないうちにブログに残しておきます。

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

イベント予約システムの詳細

今回作っていくのはイベント予約システムです。
これがどのような動きをするのか完成形を最初に載せておきます。

動画の通り、クリックした日付がフォームに挿入されます。

  • イベント予約ボタンを押す
  • 予約ページに飛び、フォームにイベントの情報が自動的に入力される
  • 送信ボタンを押した後に届き、予約メールと自動返信メールにも予約したイベントが表示される

準備・使用するもの

WordPressとプラグインを使用していくので、必要なものはインストールしてください。
分かりやすいように、WordPressに最初から入っているTwenty Seventeenテーマを使用しています。

使用するもの

  • WordPress
    使用テーマ:Twenty Seventeenテーマ
  • WinSCP
    WinSCPはファイルをアップするのに使用します。普段から使用しているものがあればそちらでOKです。
  • サクラエディタ
    サクラエディタはファイルの編集(書き換え)をするのに使用します。Bracketsなどいつも使用しているエディタがあればそちらでOKです。

1:WordPress&プラグインのインストール

まず、WordPressインストールします。
テーマは最初から入っているTwenty Seventeenテーマを使用してます。
人によってそれぞれテーマが違ってくるので、あまり気にしなくても良いです。

Classic Editor

WordPress5.0からの新エディタGutenberg(グーテンベルク)を
旧バージョンのClassic Editor(クラシックエディター)へ戻すプラグイン。
Classic Editorのスクショ

Contact Form 7

お問い合わせ機能をWordPressに追加し、簡単に管理する事ができるプラグイン。
Contact Form 7のスクショ

Custom Post Type UI

初期設定では「投稿」のみでしか記事を投稿できませんが
「イベント」「ブログ」などジャンルを追加する事ができるプラグイン。
Custom Post Type UIのスクショ

Advanced Custom Fields

投稿や固定ページの編集画面を拡張する事ができるプラグイン。
Advanced Custom Fieldsのスクショ

プラグインのダウンロードを行ったら「有効化」にしてください。

2:投稿タイプの追加

Custom Post Type UIを使用して、投稿タイプを追加していきます。
今回はイベント予約システムを作成するので「イベント」を新しく追加していきます。

注意
※使用しているWPテーマによっては一度左のメニューに「イベント」が表示されている場合があります。その時は違う名前にして投稿タイプを追加しましょう。
STEP.1
最初は投稿のみ表示
左のメニューには「投稿」しか表示されていない状態
STEP.2
CPT UIから投稿タイプの追加
左のメニューにある「CPT UI」をクリックするとこの画面に
基本設定にある項目を全て埋める。
投稿タイプスラッグ event
複数形のラベル、単数形のラベル イベント
と、入力し投稿タイプを追加ボタンを押す
STEP.3
イベントが追加される
左のメニューに「イベント」という項目が追加される
試しにイベントをクリックすると、なにも投稿していないので「イベントが見つかりません。」と表示される

STEP.4
イベントの投稿
テストイベントを投稿してみる
STEP.5
投稿したイベントの確認
もう一度左のメニュー「イベント」をクリックすると先ほど投稿したイベントが表示されている

これで投稿タイプの追加は完了しました。

3:カスタムフィールドの追加

投稿タイプの追加が終わればカスタムフィールドの追加を行います。

STEP.1
カスタムフィールドをクリック
一度左のメニュー「カスタムフィールド」をクリックするとこの画面に
STEP.2
新規追加
新規追加を押してタイトルには「イベント詳細」と付けて、とりあえず保存
STEP.3
順序の設定
「フィールドを追加」ボタンを押すと(no label)とかかれた設定画面が出現
フィールドラベル イベントの日付1
フィールド名 event_date01
フィールドタイプ テキスト
説明 ここにイベントの日付を入力してください。
例:2020年1月1日(水)
必須か? はい

上のように入力&設定すると(no label)が「イベントの日付1」に変更される

STEP.4
位置の設定
ルール このフィールドグループを表示する条件
投稿タイプ → 等しい → イベント
一番最後の選択は「投稿、固定ページ、イベント」と表示されると思うので「イベント」を選択する
STEP.5
日付の追加
現在の設定では「イベントの日付1」しか登録されていないので
ここで「イベントタイトル」と「イベントの日付2~5」を追加していきます。

イベントタイトル
フィールドラベル イベントタイトル
フィールド名 event_title01
フィールドタイプ テキスト
説明 ここにイベントのタイトルを入力してください。
必須か? はい

イベントの日付2
フィールドラベル イベントの日付2
フィールド名 event_date02
フィールドタイプ テキスト
説明 ここにイベントの日付を入力してください。
例:2020年1月1日(水)
必須か? いいえ

イベントの日付2の場合「必須か?」では「いいえ」を選択してください。
ここを「必須か?はい」にすると、イベントの日付が1日しかないのに、日付2を入力しなければ保存できなくなります。

最終的に6個の設定を行いました。

イベントタイトル event_title01
イベントの日付1 event_date01
イベントの日付2 event_date02
イベントの日付3 event_date03
イベントの日付4 event_date04
イベントの日付5 event_date05

イベントタイトル、イベントの日付1は「必須」に設定。

注意
※フィールドラベルとフィールド名は既に存在しているものを設定しないように注意してください。
フィールドラベル イベントの日付1
フィールド名 event_date01
と、あれば
フィールドラベル イベントの日付2
フィールド名 event_date02
と、数字で管理するのがわかりやすいと思います。

この入力・設定で保存します。
保存後、左のメニュー「イベント」をクリックし、先ほど投稿したテストイベントへ。

先ほどまで表示されていなかった「イベント詳細」の項目が表示されています。
表示を確認したら、イベント詳細にイベントタイトルと日付を入力し、イベントを保存します。

これでカスタムフィールドの追加は完了しました。

4:入力したタイトル・日付を表示するためPHPの編集

イベントのタイトル・日付を入力するのは行えるようになりましたが、イベント詳細ページに入力したタイトル・日付が表示されません。

イベントタイトル・イベントの日付をページに表示させるため、PHPの編集を行います。

注意
サイトを表示させるのに大切なファイルを扱います、特に慎重に作業を行ってください。
バックアップを取っていないと万が一失敗したときに元に戻せなくなります、必ずバックアップを取ってください。
STEP.1
タイトル1
WinSCPでWordPressをインストールした場所へアクセスします
WinSCP以外で普段使用しているものがあればそちらでOK(FFFTPやFileZillaなど)
STEP.2
タイトル2
public_html → wp-content → themesへアクセス
STEP.3
タイトル3
themesファイル内にある自分が使用しているテーマへアクセス
STEP.4
タイトル4
使用しているテーマから「single.php」をコピー
STEP.5
タイトル5
コピーしたsingle.phpを「single-event.php」にファイル名を変更
「single-○○○○.php」の○○○○部分はCustom Post Type UIで追加した「投稿タイプスラッグ」と合わせてください。

(例)追加した投稿タイプスラッグがfoodの場合「single-food.php」となる
注意
※single.phpの名前を変更するのではなく、single.phpをコピーしたファイルの名前を変更してください。
※元から入ってるテーマを削除やファイル名の変更をするとサイトが正常に動かなくなります。その他ファイルは削除やファイル名の変更をしないよう気を付けてください。

single.php
single-event.php
2つのファイルが存在しているか確認してください。

さぁ、いよいよタイトル・日付をページに表示させるための編集を行います。
ここで使用するファイルはsingle-event.phpです。
サクラエディタなどのエディタでsingle-event.phpを開きます。

カスタムフィールドで入力した情報を表示させるには、このようなコードが必要です。

single-event.php
<?php the_field('event_date01'); ?>

event_title01 ←どこかで見覚えのある英数字ですね…?
先ほど、カスタムフィールドで付けたフィールド名です。

single-event.php
<?php the_field('★★★'); ?>

★★★に表示させたいフィールド名を置き換えてください。
今回、ここで使用しているフィールド名は6個なので下のようになります。

single-event.php
<?php the_field('event_title01'); ?> //イベントタイトル
<?php the_field('event_date01'); ?> //日付1
<?php the_field('event_date02'); ?> //日付2
<?php the_field('event_date03'); ?> //日付3
<?php the_field('event_date04'); ?> //日付4
<?php the_field('event_date05'); ?> //日付5

これをsingle-event.phpに書いてきます。

私が使用しているTwenty Seventeenテーマの場合、ループの下に入れていきます。
使用しているテーマによって場所が変わるので、表示させたい部分に挿入してください。
保存後、single-event.phpをsingle.phpと同じ場所にサーバーにアップします。

表示されているか確認するために、左のメニュー「イベント」をクリックし、テストイベントへ。
イベント詳細に入力した「タイトルと日付」が表示されていれば完璧です。

これでタイトル・日付を表示するための編集は完了しました。

1 2