【WordPress講座】時間予約サイト編２．システム構築フェーズ - ECサイト制作の『さなげ山ドットコム』

今回は時間予約サイトのシステム構築フェーズを説明します。さらに、サイトの日本語化についても説明します。時間予約サイトは機能が多くなりますので、設定する内容も多くなります。設定手順は動画で示しますので何度も見直しながら理解してください。

時間予約サイトの基本構成

WordPressを利用した時間予約サイトの基本構成を以下の図にしまします。

時間予約サイトにはプラグインとして『Appointment Hour Booking』を利用します。このプラグインは欧州製で利用実績も多く、最新のWordPressとの互換性も保証されています。
メールお問い合わせ用のプラグインとして『Contact Form 7』をインストールします。
テーマは『Twenty Twenty-One』を利用します。
バックアップやセキュリティ対策のプラグインも必要に応じて追加していきます。

インフラとWordPress準備

時間予約サイトの要件定義が完了したら、インフラストラクチャ（ドメイン、サーバなど）の準備をします。これは、WEBサイトを作成する上では共通の手順となりますので、ブログサイト編で説明した内容を参考にしてください。以下に記事のリンクを示します。
【WordPress講座　ブログサイト編】<p>４．ドメインとサーバーの準備</p>

宿泊予約サイトの設定

設定手順

WordPressの設定とプラグインのインストール
Appointment Hour Bookingの設定　(レッスン予約）
1. Rename でタイトル入力
2. Edit：Add a Fieldでお名前ボックスと電話番号ボックス追加
3. Edit:Field Settingで詳細を設定
4. General SettingでカレンダーのLanguageをJapaneseに設定
5. Publishで固定ページに公開
Appointment Hour Bookingの設定（会議室予約）
1. Renameでタイトル入力
2. Edit：Add a Fieldでお名前ボックスと電話番号ボックス追加
3. Edit：Field Settingで詳細を設定
4. General SettingでカレンダーのLanguageをJapaneseに設定
5. Publishで固定ページに公開
テーマ『Twenty Twenty-One』の設定
固定ページと投稿ページの準備
1. ホームページ作成
2. レッスンクラス宣伝ページ作成
3. レンタル会議室宣伝ページ設定
4. ブログページ作成
5. お問い合わせページ作成
6. アクセスページ作成
7. プライバシーポリシーページ作成
8. 利用規約ページ作成
メニューの作成とホームページの設定

１．WordPressの設定とプラグインのインストール

まず最初は、１．WordPressの設定とプラグインのインストールについて説明します。今回は時間予約サイトのプラグインとして欧州製の『Appointment Hour Booking』を利用します。テーマはWordPressのデフォルトであるの『Twenty Twenty-One』を利用します。また、メール問い合わせ用のプラグインの『Contact Form 7』をインストールします。細かい設定手順を以下の図に示します。さらに、動画で具体的な設定内容を説明します。

２．Appointment Hour Bookingの設定（レッスン予約)
３．Appointment Hour Bookingの設定（会議室予約)

次に、『Appointment Hour Booking』の設定について説明します。時間予約の例としてレッスン予約と会議室予約について説明します。レッスンと会議室の情報リストサンプルと設定手順を以下の図に示します。さらに、動画で具体的な設定内容を説明します。動画はレッスン予約のと会議室予約の2つの動画に分かれています。

４．テーマ『Twenty Twenty-One』の設定
５．固定ページと投稿ページの準備

次に、４．テーマ『Twenty Twenty-One』の設定と５．固定ページと投稿ページの準備について説明します。
- ページはページ構成図にあるものを事前に準備しますが、予約ページは『Appointment Hour Booking』で作成します。
- ブログは投稿ページを利用しますので、投稿ページでサンプルを作成します。
- お問い合わせは『Contact Form 7』を利用して作成します。
ページ構成図と細かい設定手順を以下に示します。さらに、動画で具体的な設定内容を説明します。

６．メニューの作成

最後に、メニューの作成について説明します。細かい設定手順を以下の図に示します。さらに、動画で具体的な設定内容を説明します。

日本語化について

『Appointment Hour Booking』は多言語対応で、日本語の翻訳ファイルも準備されていますが、ほとんど翻訳がされていないため、表示は英語となっています。そこで、英語を日本語化する必要があります。英語化するポイントは３つあります。
1. 固定ページの日本語化
2. メールの日本語化
3. 日本語の翻訳ファイルの作成
以下に順を追って説明していきます。

１．固定ページの日本語化

これは題名の通り固定ページの英語部分を日本語化します。『Appointment Hour Booking』では予約ページを自動で作成します。自動作成する際（Publishコマンド）に、タイトルなどを日本語で入力すれば日本語のページが作成されます。

２．メールに日本語化

メールの日本語化は、顧客と管理者に自動送付されるメールのテンプレートを日本語化します。
メールのテンプレートは、WordPressの管理画面からAppointment Hour Bookingを選択し、Editを選ぶと、上にNotification Emailsというタイトルの③ボタンがありますので、それを選ぶと、メールの編集画面が出ます。その画面で日本語化をします。以下にメール編集画面を示します。

３．日本語の翻訳ファイルの作成

日本語の翻訳ファイルの作成は少し複雑となります。上記のページとメールを日本語化すれば、お客様が見る部分は大体日本語になりますが、管理者が使う設定画面やシステムのメッセージなどは英語のままです。これらを日本語化するため、翻訳ファイルを作成します。
WordPressのWEBシステムでは多言語対応するため、画面に出す言葉をいろいろな言語に対応できるように引数化しています。この引数化したファイルは拡張子が.potとなります。この、.pot拡張子のファイルから翻訳ファイル、つまり、」拡張子が.poと.moのファイルを作成します。
WordPressでは、一般設定で言語を指定した際に指定された言語の翻訳ファイルを見て表示します。つまり、日本語を指定すると、日本語の翻訳ファイル（拡張子が.poと.moのファイル）をみます。
Appointment Hour Bookingでは日本語用の.poと.moのファイルが準備されていますが、その中身がほとんど翻訳されていないため、英語画面となっています。そこでこの.poファイルを編集して日本語化すればよいのですが、Sanageyamaの環境ではうまくいきませんでした。
さらに以下のサイトでは日本語化した.poファイルと.moファイルが入手できますのでそのファイルを既存のファイルから置き換えましたが、やはりうまくいきませんでした。

https://katotaxi.com/netbooking2/

そこで、おおもとの.potファイルから作成するという方法を考えましたが、.potファイルが見つからず実施できませんでした。現在開発元に問い合わせてます。したがって、現時点では日本語の翻訳ファイルの変更ができていませんので日本語化ができません。

まとめ

WordPressとプラグインAppointment Hour Bookingを利用した時間予約サイトのシステム構築について以下の通り説明しました。

時間予約サイトの基本構成について説明しました。
時間予約サイトのインフラストラクチャの準備について説明しました。
時間予約サイトの設定について説明しました。
1. WordPressの設定とプラグインのインストール
2. Appointment Hour Bookingの設定（レッスン予約）
3. Appointment Hour Bookingの設定（会議室予約）
4. テーマ『Twenty Twenty-One』の設定
5. 固定ページと投稿ページの準備
6. メニューの作成
日本語化について
1. ページの日本語化
2. メールの日本語化
3. 翻訳ファイルの作成方法

時間予約サイトは機能が多くなるため、設定が複雑となります。今回説明した設定をベースに自分で必要な設定を追加することで効率的に時間予約サイトを作成することができます。

次回から時間予約サイトのリリースと運用について説明していきますのでご期待ください。

本講座では極力簡単に説明していきますが、それでも、わかりにくい点やご意見があれば、記事下のコメント欄、もしくはContactメールでお知らせください。皆さんと一緒にこのコンテンツを作っていきたいと思いますのでよろしくお願いいたします。

Post Views: 28