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

WordPress

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

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

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

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

お店の予約状況をユーザーが確認できるようにウェブサイトにカレンダーを表示したいな。。。
Googleカレンダーを使用すると簡単ですよ。以下ではGoogleカレンダーをWordPressサイトに埋め込む手順を紹介していきますね。

 

この記事を読むと分かること

  • Googleカレンダーの概要について
  • GoogleカレンダーをWordPressサイトへ埋め込む手順
  • Googleカレンダーのカスタマイズ方法について

 

 

Googleカレンダーとは?

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

Googleカレンダー

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

Googleカレンダーに新しい予約を追加する方法

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

Googleカレンダーに新しい予定が追加された状態

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

 

 

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

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

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

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

  • (STEP. 1) 埋め込み用のカレンダーを作成する
  • (STEP. 2) 埋め込み用カレンターを一般公開する
  • (STEP. 3) 埋め込み用iframeタグをWordPressに貼り付ける

 

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

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

Googleカレンダーはこちら

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

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

歯車マークをクリックし、「設定」をクリック

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

「カレンダーを追加」→「新しいカレンダーを作成」をクリック

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

カレンダーの名前を入力して、「カレンダーを作成」をクリック

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

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

 

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

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

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

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

一般公開して誰でも利用できるようにする」という項目にチェックを入れる

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

「OK」をクリック

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

 

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

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

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

Googleカレンダーの埋め込みコード

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

 

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

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

「カスタムHTML」ブロック

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

カレンダー埋め込み用のiframeタグを貼り付ける

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

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

Googleカレンダーを埋め込んで表示させている例

 

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

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

「テキストモード」に切り替えてからiframeタグを貼り付け

 

 

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

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

埋め込んだGoogleカレンダーのデフォルトデザイン

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

「カスタマイズ」をクリック

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

Googleカレンダーのカスタマイズ画面

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

関係のないカレンダーのチェックを外す

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

 

表示する項目の絞り込む

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

「表示」に記載されている項目一覧

■表示・非表示が切り替えられる項目

  • タイトル
  • ナビゲーションボタン
  • 日付
  • 印刷アイコン
  • タブ
  • カレンダーリスト
  • タイムゾーン

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

「表示」に記載項目のそれぞれの対応箇所

 

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

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

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

 

週の開始日を変更する

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

「日曜日」を週の開始日としている

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

「土曜日」を週の開始日に変更

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

「土曜日」を週の開始日としている

 

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

 

 

まとめ

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

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

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

  • (STEP. 1) 埋め込み用のカレンダーを作成する
  • (STEP. 2) 埋め込み用カレンターを一般公開する
  • (STEP. 3) 埋め込み用iframeタグをWordPressに貼り付ける

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

 

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

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

詳細はこちら

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

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

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


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress