WEB集客できるホームページになる無料講座はこちら 

色分けしたGoogleカレンダーをワードプレスに埋め込んで、予約申し込みしやすくしよう!

色分けしたGoogleカレンダーをワードプレスに埋め込んで予約の申し込みをしやすくしよう!

日程の希望を添えて申し込むサービスだと、「いったいいつが空いてるんだろう?私の都合が全部ダメかもしれないし…」と躊躇してしまうことがありますよね。

そんなふうにお客様を戸惑わせないために、予約申し込みページに予約可能な日程が一目でわかるカレンダーを掲載してみませんか?

イベント管理システムなどを有料で契約しなくても、Googleカレンダーを活用するだけで無料で設定が可能です。

予約可否カレンダー例

こんな感じで、「✖︎」は予約不可な日、時間が入っているのはその時間内の予約が可能というカレンダーを作って、予約申し込みページに設定してみましょう!

動画でもご説明しています。お役に立てると嬉しいです!
目次

まずはGoogleカレンダーで色分けしたカレンダーを作ろう

Googleカレンダー初期の状態だと、このようにマイカレンダー欄にはログインアカウントの初期カレンダー(とTodoリスト・リマインダー・誕生日)しかありません。

カレンダーをワードプレスに掲載して、誰でも見れるようにするには、カレンダーを一般公開する必要があります。

なので、もしかして個人的・仕事で今後使うかもしれない初期カレンダーは、そのまま置いておいて、新しく予約用のカレンダーを作りましょう。

右上の歯車マークをクリックし、表示されたメニューから『設定』をクリックします。

設定画面が開いたら、左側のメニューの『カレンダーを追加』をクリックしてメニューを開き、その中から『新しいカレンダーを作成』をクリックします。

新しいカレンダーを作成画面が表示されるので、名前欄にご自身がわかりやすく短い名前を入力して、『カレンダーを作成』ボタンを押します。

予約OKと予約NGの色分けをして、視覚的にわかりやすく見せたいので、同様にしてもう一つ新しいカレンダーを作成しましょう。

このように二つのカレンダーができていることを確認します。そして、左上の矢印を押して、一旦、カレンダー画面に戻りましょう。

カレンダー画面に戻ったら、予約OKと予約NGのカレンダーを入力しましょう。表示のさせ方はお好みでOKですが、私は予約NGの時は終日入力で「✖︎」とだけ入れていて、予約OKの時は終日入力で空いている時間帯(例えば「10:00-12:00」のように)を入れています。

ここで注意が必要なのは、予約NGの情報は『予約NG用カレンダー』に入力、予約OKの情報は『予約OK用カレンダー』に入力することです。カレンダーごとに色が付くので、色分けしたい時は、それぞれのカレンダーに入力しましょう。

カレンダーを新しく作ると、自動で色分けされていますが、その色を別の色にしたい場合は、カレンダー名の横にある3つのポチポチをクリックすると、色を選択する画面が表示されます。そこで色を変えてください。

ワードプレスに貼り付ける前にカレンダーの見え方を調整します

右上の歯車マークをクリックし、表示されたメニューから『設定』をクリックします。

左側メニューの中から、新しく作成したカレンダー名のどちらかをクリックします。

『予定のアクセス権限』の項目まで画面をスクロールし、『一般公開して誰でも利用できるようにする』にチェックを入れます。

もうひとつのカレンダーも同じように一般公開の設定をしてください。

一般公開の設定をしましたら、その画面のまま下にスクロールして、『カレンダーの統合』のところまで移動して、『カスタマイズ』ボタンを押します。

埋め込むカレンダーの設定の画面が表示されるので、左側の設定項目を調整していきます。ここはお好みで…になりますが、よかったら私の設定を参考になさってください。

そして、重要なポイント…!表示するカレンダーを選択して、不要なカレンダーのチェックは外してください。

表示するカレンダーのチェックを見せたいものだけにチェックしてください。基本的には今回新しく作成した予約OK用のカレンダーと予約NG用のカレンダーのみです。
サービスの都合上、日本の祝日が見えていた方がいい場合は、日本の祝日カレンダーにもチェックを入れてください。(このカレンダーは作成していなくても自動で表示されています)

設定が終わりましたら、画面上部にスクロールして、『埋め込みコード』をコピーします。コード右側のコピーボタンを押すだけでコピーは完了です。

ワードプレスに埋め込みましょう

ワードプレスにログインして、カレンダーを埋め込みたいページを開きます。さらに、カレンダーを埋め込みたい箇所に『+』を押してブロック一覧を開きます。

ウィジェット欄から『カスタムHTML』をクリックします。

カスタムHTMLブロックが挿入されるので、『HTMLを入力…』のところに、先ほどコピーしたカレンダーコードを貼り付けます。

貼り付けるとこのような表示になります。

これでGoogleカレンダーのワードプレスへの埋め込みは完了です。プレビューして画面表示を確認し、問題なければ公開(か、更新)ボタンを押してください。

旧エディタであるクラシックエディタをご利用の方は、上部に貼ってある動画の方で埋め込み方をご案内していますので、ぜひ動画をご覧ください。

まり子

まり子に直接聞きたいと思ってくださった方、一緒に作業したいと思ってくださった方
オンラインコミュニティでは、質問しながら一緒に作業できます
よかったら、ご参加くださいね!

オンラインコミュニティのご案内はこちら

フリーランス・ひとり起業の女性のためのオンラインコミュニティTAG
SHARE PLEASE!
\Web集客できるホームページになる/ 7つのチェックポイントメール講座
\Web集客できるホームページになる/ 7つのチェックポイントメール講座
メール講座に登録する

この記事を書いた人

まり子のアバター まり子 デジタルマーケティングコーチ

スタートアップ期・成長期のフリーランス・ひとり起業の女性のデジタル集客の専門家。
ウェブサイトやSNSの立ち上げ、運用・活用方法やひとりならではの孤独感の解消・情報収集のサポートをコーチングも活用して提供中。
また、子育て中の女性の生き方・働き方についてコーチングも行っている。

目次
閉じる