投稿したイベント(記事)から予約できる簡単なシステムを作成したので
自分が忘れないうちにブログに残しておきます。
※必ずバックアップを取って元に戻せるようにしておく
※子テーマでカスタマイズする事をオススメします
もくじ
イベント予約システムの詳細
今回作っていくのはイベント予約システムです。
これがどのような動きをするのか完成形を最初に載せておきます。
動画の通り、クリックした日付がフォームに挿入されます。
- イベント予約ボタンを押す
- 予約ページに飛び、フォームにイベントの情報が自動的に入力される
- 送信ボタンを押した後に届き、予約メールと自動返信メールにも予約したイベントが表示される
準備・使用するもの
WordPressとプラグインを使用していくので、必要なものはインストールしてください。
分かりやすいように、WordPressに最初から入っているTwenty Seventeenテーマを使用しています。
使用するもの
- WordPress
使用テーマ：Twenty Seventeenテーマ - WinSCP
WinSCPはファイルをアップするのに使用します。普段から使用しているものがあればそちらでOKです。 - サクラエディタ
サクラエディタはファイルの編集(書き換え)をするのに使用します。Bracketsなどいつも使用しているエディタがあればそちらでOKです。
１：WordPress＆プラグインのインストール
まず、WordPressインストールします。
テーマは最初から入っているTwenty Seventeenテーマを使用してます。
人によってそれぞれテーマが違ってくるので、あまり気にしなくても良いです。
Classic Editor
WordPress5.0からの新エディタGutenberg(グーテンベルク)を
旧バージョンのClassic Editor(クラシックエディター)へ戻すプラグイン。
Contact Form 7
お問い合わせ機能をWordPressに追加し、簡単に管理する事ができるプラグイン。
Custom Post Type UI
初期設定では「投稿」のみでしか記事を投稿できませんが
「イベント」「ブログ」などジャンルを追加する事ができるプラグイン。
Advanced Custom Fields
投稿や固定ページの編集画面を拡張する事ができるプラグイン。
プラグインのダウンロードを行ったら「有効化」にしてください。
２：投稿タイプの追加
Custom Post Type UIを使用して、投稿タイプを追加していきます。
今回はイベント予約システムを作成するので「イベント」を新しく追加していきます。
基本設定にある項目を全て埋める。
投稿タイプスラッグ event
複数形のラベル、単数形のラベル イベント
と、入力し投稿タイプを追加ボタンを押す
試しにイベントをクリックすると、なにも投稿していないので「イベントが見つかりません。」と表示される
これで投稿タイプの追加は完了しました。
３：カスタムフィールドの追加
投稿タイプの追加が終わればカスタムフィールドの追加を行います。
フィールドラベル イベントの日付1
フィールド名 event_date01
フィールドタイプ テキスト
説明 ここにイベントの日付を入力してください。
例：2020年1月1日(水)
必須か？ はい
上のように入力＆設定すると(no label)が「イベントの日付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
と、数字で管理するのがわかりやすいと思います。
この入力・設定で保存します。
保存後、左のメニュー「イベント」をクリックし、先ほど投稿したテストイベントへ。
先ほどまで表示されていなかった「イベント詳細」の項目が表示されています。
表示を確認したら、イベント詳細にイベントタイトルと日付を入力し、イベントを保存します。
これでカスタムフィールドの追加は完了しました。
４：入力したタイトル・日付を表示するためPHPの編集
イベントのタイトル・日付を入力するのは行えるようになりましたが、イベント詳細ページに入力したタイトル・日付が表示されません。
イベントタイトル・イベントの日付をページに表示させるため、PHPの編集を行います。
バックアップを取っていないと万が一失敗したときに元に戻せなくなります、必ずバックアップを取ってください。
WinSCP以外で普段使用しているものがあればそちらでOK（FFFTPやFileZillaなど）
「single-○○○○.php」の○○○○部分はCustom Post Type UIで追加した「投稿タイプスラッグ」と合わせてください。
（例）追加した投稿タイプスラッグがfoodの場合「single-food.php」となる
※元から入ってるテーマを削除やファイル名の変更をするとサイトが正常に動かなくなります。その他ファイルは削除やファイル名の変更をしないよう気を付けてください。
single.php
single-event.php
2つのファイルが存在しているか確認してください。
さぁ、いよいよタイトル・日付をページに表示させるための編集を行います。
ここで使用するファイルはsingle-event.phpです。
サクラエディタなどのエディタでsingle-event.phpを開きます。
カスタムフィールドで入力した情報を表示させるには、このようなコードが必要です。
<?php the_field('event_date01'); ?>event_title01 ←どこかで見覚えのある英数字ですね…？
先ほど、カスタムフィールドで付けたフィールド名です。
<?php the_field('★★★'); ?>★★★に表示させたいフィールド名を置き換えてください。
今回、ここで使用しているフィールド名は6個なので下のようになります。
<?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と同じ場所にサーバーにアップします。
表示されているか確認するために、左のメニュー「イベント」をクリックし、テストイベントへ。
イベント詳細に入力した「タイトルと日付」が表示されていれば完璧です。
これでタイトル・日付を表示するための編集は完了しました。
