GoogleカレンダーをWordPressに埋め込み・表示する方法

飲食店や美容室などのような事業を行なっている方であれば、休業日や予約状況といった情報をサイト上に表示したいと考えられる方も多いのではないでしょうか？

簡単な方法は、予定を入力したGoogleカレンダーをサイト上に埋め込むといった方法です。

今回は、GoogleカレンダーをWordPressサイトに埋め込み・表示させる方法についてご紹介していきます。

お店の予約状況をユーザーが確認できるようにウェブサイトにカレンダーを表示したいな。。。

Googleカレンダーを使用すると簡単ですよ。以下ではGoogleカレンダーをWordPressサイトに埋め込む手順を紹介していきますね。

Googleカレンダーとは？

GoogleカレンダーはGoogleが提供している無料のスケジュール管理ツールです。Googleアカウントを持っている方であれば誰でも使用することができます。

カレンダー上に予定を入れる方法は簡単で、以下のように画面左上の「作成」→「予定」をクリックし、「予定のタイトル」「時間帯」をそれぞれ入力してから、「保存」をクリックしてあげれば新しい予定を追加してあげることができます。

これでカレンダーに予定が追加されました。

他にもGoogleカレンダーでは「他のユーザーとスケジュールを共有」したりといった便利な機能が使用できますが、本記事ではGoogleカレンダーの詳しい使い方については割愛致します。

GoogleカレンダーをWordPressサイトへ埋め込む手順

ここからはGoogleカレンダーをWordPressサイトへ埋め込む手順を解説していきます。

GoogleカレンダーをWordPressに埋め込むには大きく分けて3つの手順を踏む必要があります。

(STEP. 1) 埋め込み用のカレンダーを作成する

まずSTEP. 1では、埋め込み用のカレンダーを作成しましょう。

Googleカレンダーはこちら

すでにGoogleカレンダーを使用している方であればプライベートの予定をカレンダー上に登録していることもあると思うので、こちらが一般公開されないようにここでは別途埋め込み用のカレンダーを作っておきます。

まずGoogleカレンダーを開き、画面右上の歯車マークをクリックし、「設定」をクリックします。

設定メニューが開かれたら、左のサイドバーの「カレンダーを追加」→「新しいカレンダーを作成」をクリックします。

ここでカレンダーの名前(例では「WordPress埋め込み用カレンダー」としています。)を入力し、「カレンダーを作成」をクリックします。(「説明」は任意です。)

これで「マイカレンダーの設定」と書かれた項目の下に追加したカレンダーの名前が表示されているはずです。

(STEP. 2) 埋め込み用カレンダーを一般公開にする

STEP. 1で埋め込み用のカレンダーが作成できたら、つぎに作成したカレンダーを一般公開にしましょう。

この設定をしておかないとGoogleカレンダーを埋め込んだ際に、カレンダー自体は表示されても予定の詳細が表示されないといった状態になってしまいます。

左サイドバーからWordPress埋め込み用のカレンダーを選択して、下にスクロールした箇所にある「一般公開して誰でも利用できるようにする」という項目にチェックを入れます。

チェックを入れると以下のようなモーダルが表示されますが、「OK」をクリックして問題ありません。

これでSTEP. 2は完了です。

(STEP. 3) 埋め込み用iframeタグをWordPressに貼り付ける

最後にSTEP. 3では、埋め込み用iframeタグをWordPressに貼り付けます。

カレンダーの埋め込み用iframeタグは、WordPress埋め込み用のカレンダーを選択している状態で下にスクロールした箇所にある「カレンダーの統合」という項目にあります。こちらをコピーしましょう。

また、貼り付ける方法はご使用のエディターによって若干異なりますので、以下では「ブロックエディター」「クラシックエディター」の2つの方法で埋め込みコードを貼り付ける方法をご紹介します。

ブロックエディターの場合

ブロックエディターの場合は、「カスタムHTML」ブロックを使用して埋め込みコードを貼り付けます。

「カスタムHTML」ブロックを追加するとHTMLコードを入力できる欄が表示されるので、こちらに先ほどコピーしたカレンダー埋め込み用iframeタグを貼り付けてあげればOKです。

これで埋め込んだカレンダーは以下のように表示されます。(下の例では事前に予定をいくつか追加した状態にしています。)

■(参考)Googleカレンダーを埋め込み表示させている例

クラシックエディターの場合

プラグインを使用してクラシックエディターを使用されている場合は、エディターを「テキストモード」に切り替えてからiframeタグを貼り付けます。

Googleカレンダーのカスタマイズ方法

デフォルトでは埋め込んだGoogleカレンダーは以下のように表示されます。

こちらのデザインを変更したい場合は、カレンダーの埋め込み用iframeタグが記載されている箇所の下にある「カスタマイズ」をクリックします。

「カスタマイズ」をクリックすると別タブが開かれ以下のような画面が表示されるので、こちらでGoogleカレンダーのカスタマイズを行なっていきます。

なお1点注意が必要で、初期状態では「表示するカレンダー」箇所の全てのカレンダーにチェックが入っていますが、「WordPress埋め込み用カレンダー」以外のカレンダーのチェックを外しておくようにしましょう。

こうすることでGoogleカレンダーをプライベート用、仕事用などと使い分けている場合に他の関係のないスケジュールが表示されてしまうことを防ぐことができます。

表示する項目の絞り込む

左サイドバーの「表示」に記載されている項目のチェックを付け外しすることで、カレンダー上に表示したい項目を絞り込むことできます。

デフォルトでは全てにチェックが入っている為、たくさんの情報が表示されていますが、こちらを外すことでよりシンプルにすることが可能です。

カレンダーのスタイルを変更する

Googleカレンダーの「カスタマイズ」画面からは、カレンダーの「サイズ」「背景色」「枠線」の3つのスタイルを指定することができます。

週の開始日を変更する

デフォルトでは埋め込まれたカレンダーは「日曜日」を週の開始日としています。

これを変更したい場合は、「週の開始日」に記載の曜日を変更してあげればOKです。

上の例では「土曜日」に変更してあげた為、埋め込まれたカレンダーは「土曜日」を週の開始日として表示されるようになりました。

また補足になりますが、これ以上に細かいカスタマイズを行いたい場合は「Google Calendar API」を使用することでより細かい設定ができるようになります。

まとめ

まとめです。今回はGoogleカレンダーをWordPressサイトに埋め込み・表示させる方法についてをご紹介しました。

飲食店や美容室などのような事業を行なっている方で、休業日や予約状況といった情報をウェブサイト上に告知したいと考えられている方は是非、Googleカレンダーに予定を登録してウェブサイトに埋め込む方法を導入してみて下さい。

今回は以上になります。最後までご覧頂き、ありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。