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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • URLをコピーしました!

誰かに聞きながら作業できたらいいのに…と思いませんか?
それが可能なイベントを開催しています。ぜひお気軽にご参加ください!

わいわい作業会

この記事を書いた人

半沢 まり子のアバター 半沢 まり子 子育て中の女性の在宅起業を成功させるWebサポーター

IT企業で約10年勤務していたが妊娠時のトラブルにより専業主婦となる。キャリアが途絶え、今後の働き方や夫婦のあり方を模索しつつパートを始めたときに離婚に直面。正社員での就職を考えたが、ブランクから難しさを感じ、自分に合った働き方を模索。フリーランスという働き方を選択したことで、子どもとの時間も大切にでき、シングルマザーでやっていけるようになる。
現在は、自身の経験を活かし、特別なスキルなく、未経験でもできる子育て中の女性の在宅ワークや、フリーランス・ひとり起業のWeb制作・運用管理をサポート中。

目次