ワードプレスにGoogleカレンダーを埋め込む方法｜同期・表示設定まで初心者向け解説

はじめに

ワードプレス（WordPress）にGoogleカレンダーを埋め込むと、店舗の営業日、教室の開催予定、イベント情報、予約状況などをWebサイト上でわかりやすく案内できます。Googleカレンダー側で予定を更新すれば、ワードプレスに埋め込んだカレンダーにも反映されるため、同じ内容を二重に入力する必要がありません。

基本的な埋め込みであれば、Googleカレンダーが発行するHTMLコードをワードプレスに貼り付けるだけです。専門的なプログラミング知識は必要ありません。

ただし、カレンダーの公開設定やコードの貼り付け場所を間違えると、「カレンダーが表示されない」「スマホではみ出す」「非公開の予定を誤って公開してしまう」といった問題が起こります。

この記事では、ワードプレスにGoogleカレンダーを埋め込む方法を、表示設定、同期の仕組み、プラグインの使い方、トラブル対処法まで含めて初心者向けに解説します。

1. ワードプレスにGoogleカレンダーを埋め込む前に知っておきたいこと

1-1. Googleカレンダーを埋め込むとできること

Googleカレンダーをワードプレスに埋め込むと、Googleカレンダーに登録した予定を、サイト内の投稿や固定ページに表示できます。

たとえば、次のような情報の掲載に利用できます。

  • 店舗の営業日や休業日

  • 教室やスクールのレッスン予定

  • セミナーやイベントの開催日

  • 施設や会議室の利用状況

  • スタッフの出勤予定

  • 予約済みの日時や空き状況

  • 社内や会員向けのスケジュール

Googleカレンダーには月単位、週単位、予定リストなどの表示方法があります。埋め込み時に必要な項目を選ぶことで、サイトの用途に合わせたカレンダーを作成できます。

ただし、通常の埋め込みは、Googleカレンダーの内容をワードプレス内にコピーする機能ではありません。Googleのカレンダー画面を、iframeという仕組みを使ってワードプレス上に表示します。

1-2. ワードプレスでGoogleカレンダーを使う主なメリット

最大のメリットは、予定の管理をGoogleカレンダーに一本化できることです。

Googleカレンダー側で予定を追加・変更・削除すれば、サイト側のカレンダーにも反映されます。ワードプレスのページを予定変更のたびに編集する必要がないため、更新作業の負担を減らせます。

スマートフォンのGoogleカレンダーアプリからも予定を管理できるので、外出先で急に営業時間やイベント予定が変わった場合にも対応しやすくなります。

また、Googleカレンダーの標準埋め込み機能は無料で利用できます。新たにカレンダーシステムを開発する必要がなく、初期費用を抑えられる点もメリットです。

1-3. 埋め込みに必要なもの

ワードプレスにGoogleカレンダーを埋め込むために必要なものは、主に次の3つです。

  • Googleアカウント

  • 表示するGoogleカレンダー

  • ワードプレスの編集権限

埋め込みコードの取得は、原則としてパソコン版のGoogleカレンダーから行います。Googleの公式ヘルプでも、Webサイト用の埋め込みコードはパソコンから取得する手順が案内されています。Google ヘルプ

ワードプレス側では、投稿や固定ページを編集できる権限が必要です。サイドバーやフッターに掲載する場合は、ウィジェットまたはサイトエディターを操作できる権限も必要になります。

1-4. 共有設定と公開範囲の注意点

Googleカレンダーを一般公開のWebサイトに表示する場合は、カレンダーの公開範囲を確認してください。

Googleカレンダーには、主に次の公開方法があります。

  • 一般公開して誰でも閲覧できるようにする

  • 特定のGoogleアカウントだけに共有する

  • 予定の時間だけを公開し、詳細を非表示にする

  • 完全に非公開にする

一般公開していないカレンダーを埋め込んだ場合、閲覧者にカレンダーが表示されなかったり、Googleアカウントへのログインを求められたりすることがあります。

公開用のカレンダーは、個人用カレンダーと分けて新しく作成する方法がおすすめです。「店舗営業日」「公開イベント」のような専用カレンダーを作れば、個人的な予定や非公開情報を誤って公開するリスクを減らせます。

Googleは、公開カレンダーをWebサイトに埋め込んだり、リンクで共有したりできると案内しています。公開前には、シークレットウィンドウやログアウトしたブラウザでも正常に閲覧できるか確認しましょう。Google ヘルプ

2. ワードプレスにGoogleカレンダーを埋め込む基本手順

2-1. Googleカレンダーの埋め込みコードを取得する

まず、パソコンのブラウザでGoogleカレンダーを開きます。

画面右上にある歯車アイコンをクリックし、「設定」を選択してください。左側のメニューに「マイカレンダーの設定」が表示されたら、ワードプレスに埋め込みたいカレンダー名をクリックします。

続いて「カレンダーの統合」を開き、「埋め込みコード」の項目を探します。表示されているiframeコードをコピーしてください。

基本的なコードは、次のような形式です。

HTML
<iframe
  src="https://calendar.google.com/calendar/embed?src=カレンダーID"
  style="border: 0"
  width="800"
  height="600"
  frameborder="0"
  scrolling="no">
</iframe>

「カスタマイズ」を選択すると、表示する項目、サイズ、初期表示などを調整してからコードを取得できます。Google公式の手順でも、「設定」から対象カレンダーを選び、「カレンダーの統合」にある埋め込みコードを利用する流れが案内されています。Google ヘルプ

2-2. ワードプレスの投稿・固定ページにコードを貼り付ける

埋め込みコードを取得したら、ワードプレスの管理画面を開きます。

「投稿」または「固定ページ」から、Googleカレンダーを表示したいページを編集してください。新しいページを作成して、「営業日カレンダー」「イベントスケジュール」などの専用ページにしてもよいでしょう。

コードは、通常の文章入力欄ではなく、HTMLを扱えるブロックまたは編集画面に貼り付けます。貼り付けた後はプレビューを開き、カレンダーが正常に表示されていることを確認してから公開します。

2-3. ブロックエディターで埋め込む方法

現在のワードプレスでは、ブロックエディターが標準の編集画面です。

ブロックエディターでGoogleカレンダーを埋め込む手順は次のとおりです。

  1. 投稿または固定ページの編集画面を開く

  2. カレンダーを表示したい位置で「＋」をクリックする

  3. 「カスタムHTML」ブロックを検索する

  4. カスタムHTMLブロックを追加する

  5. Googleカレンダーの埋め込みコードを貼り付ける

  6. 「プレビュー」を押して表示を確認する

  7. ページを公開または更新する

カスタムHTMLブロックは、「/html」と入力して呼び出すこともできます。ワードプレス公式ドキュメントでも、iframeなどのHTMLを挿入する際にカスタムHTMLブロックを使う方法が案内されています。WordPress.org

「コード」ブロックに貼り付けると、カレンダーではなくHTMLコード自体が文章として表示される場合があります。必ず「カスタムHTML」ブロックを選んでください。

2-4. クラシックエディターで埋め込む方法

クラシックエディターを利用している場合は、編集画面の「ビジュアル」ではなく「テキスト」タブを開きます。

Googleカレンダーを表示したい位置に埋め込みコードを貼り付け、プレビューで確認してください。

ビジュアルタブに直接コードを貼ると、iframeが削除されたり、コードが文字として表示されたりすることがあります。コードを貼り付けた後にビジュアルタブへ切り替えると内容が変わるケースもあるため、可能であればテキストタブのまま保存します。

なお、現在のワードプレスではブロックエディターが標準で、クラシックエディターはプラグインなどを使って利用する形式です。WordPress.org

2-5. サイドバーやフッターに表示する方法

Googleカレンダーは、投稿や固定ページだけでなく、サイドバーやフッターにも表示できます。

従来型のテーマでは、ワードプレス管理画面の「外観」から「ウィジェット」を開きます。表示したいサイドバーやフッターのエリアに「カスタムHTML」ウィジェットを追加し、埋め込みコードを貼り付けて保存してください。WordPress.org

ブロックテーマを利用している場合は、「外観」から「エディター」を開きます。テンプレートまたはテンプレートパーツのフッターやサイドバーを編集し、「カスタムHTML」ブロックを追加します。

サイドバーは横幅が狭いため、標準の800ピクセル幅では表示が崩れやすくなります。幅を100％に設定するか、予定リスト形式のプラグインを利用すると見やすくなります。

3. Googleカレンダーの表示設定をカスタマイズする方法

3-1. 表示サイズを変更する

Googleカレンダーの埋め込みコードには、幅を指定するwidthと高さを指定するheightがあります。

たとえば、次のコードでは横幅800ピクセル、高さ600ピクセルで表示されます。

HTML
width="800"
height="600"

ページ全体の横幅に合わせたい場合は、width="100%"に変更します。

HTML
<iframe
  src="GoogleカレンダーのURL"
  style="border: 0"
  width="100%"
  height="600"
  frameborder="0"
  scrolling="no">
</iframe>

高さが不足すると、予定が見切れたり、操作しにくくなったりします。月表示では500～700ピクセル程度を目安に、実際のサイトを確認しながら調整してください。

3-2. 週表示・月表示・予定リストを切り替える

Googleカレンダーのカスタマイズ画面では、初期表示を変更できます。

代表的な表示方法は次のとおりです。

  • 月表示：営業日やイベント日を一覧で見せたい場合

  • 週表示：時間帯ごとのスケジュールを見せたい場合

  • 予定リスト：直近のイベントを文章に近い形式で見せたい場合

店舗の営業日カレンダーには月表示、時間割やレッスン予定には週表示、セミナー告知には予定リストが向いています。

Google側の画面やアカウント設定によって選択肢の名称が異なる場合があります。コード取得画面の「カスタマイズ」で、現在利用できる表示形式を確認してください。

3-3. タイトル・ナビゲーション・日付表示を調整する

Googleカレンダーのカスタマイズ画面では、タイトルや操作ボタンなどの表示項目を調整できます。

たとえば、次のような項目を必要に応じて表示・非表示にできます。

  • カレンダーのタイトル

  • 前月・次月へ移動するナビゲーション

  • 現在の日付

  • 印刷ボタン

  • 表示形式を切り替えるタブ

  • タイムゾーン

  • カレンダー一覧

ページ上部に「営業日カレンダー」という見出しを別に設置している場合は、Googleカレンダー内のタイトルを非表示にすると重複を避けられます。

一方、複数のカレンダーをまとめて表示する場合は、カレンダー一覧を残したほうが、利用者が情報を切り替えやすくなります。

3-4. 背景色やデザインを変更する

Googleカレンダーの標準埋め込みで変更できるデザインには限界があります。

カスタマイズ画面で背景色などを調整できる場合もありますが、カレンダー内部の文字サイズ、余白、ボタンの形まで自由に変更できるわけではありません。iframeの内部はGoogle側のページであるため、ワードプレスのCSSから直接細かく装飾することは基本的にできません。

ページ全体になじませたい場合は、カレンダーの外側を囲む要素に背景色や余白を付けます。

HTML
<div class="calendar-area">
  <iframe
    src="GoogleカレンダーのURL"
    style="border: 0"
    width="100%"
    height="600"
    frameborder="0"
    scrolling="no">
  </iframe>
</div>
CSS
.calendar-area {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  background: #f7f7f7;
  border-radius: 8px;
}

カレンダーそのものをサイトの配色に合わせて細かく調整したい場合は、標準の埋め込みコードよりも、デザイン変更に対応したプラグインが適しています。

3-5. スマホでも見やすく表示するレスポンシブ対応

埋め込みコードの横幅がwidth="800"などの固定値になっていると、スマートフォンで横にはみ出すことがあります。

最も簡単な対策は、iframeの横幅を100％に変更する方法です。

HTML
<iframe
  src="GoogleカレンダーのURL"
  style="border: 0; width: 100%;"
  height="600"
  frameborder="0"
  scrolling="no">
</iframe>

さらに画面幅に応じて高さを変えたい場合は、カレンダーを専用の要素で囲んでCSSを指定します。

HTML
<div class="google-calendar-wrap">
  <iframe
    src="GoogleカレンダーのURL"
    frameborder="0"
    scrolling="no">
  </iframe>
</div>
CSS
.google-calendar-wrap {
  width: 100%;
  overflow: hidden;
}

.google-calendar-wrap iframe {
  width: 100%;
  height: 650px;
  border: 0;
}

@media screen and (max-width: 767px) {
  .google-calendar-wrap iframe {
    height: 500px;
  }
}

スマートフォンでは月表示の情報量が多くなりやすいため、予定リスト形式を利用する方法も有効です。公開前には、パソコンだけでなく実際のスマートフォンでも操作性を確認してください。

4. Googleカレンダーとワードプレスの同期について

4-1. 埋め込み表示は自動で同期されるのか

Googleカレンダーをiframeで埋め込んだ場合、Googleカレンダー側の内容が表示されます。そのため、予定を更新するたびにワードプレスのページを編集する必要はありません。

ただし、厳密にはGoogleカレンダーの予定がワードプレスのデータベースへ同期されているわけではありません。ワードプレスのページを開いた際に、Google側の情報を読み込んで表示する仕組みです。

「Googleカレンダーとワードプレスが双方向で同期する」というより、「ワードプレス上にGoogleカレンダーを表示する」と考えるとわかりやすいでしょう。

4-2. Googleカレンダー側で予定を更新した場合の反映タイミング

Googleカレンダー側で予定を追加・編集すると、通常は埋め込み表示にも反映されます。

表示中のページでは古い内容が残っていることがあるため、ページを再読み込みしてください。ブラウザ、キャッシュ機能、CDN、利用しているプラグインなどの影響で、一時的に更新前の内容が見える場合もあります。

反映されない場合は、次の順番で確認します。

  1. Googleカレンダー本体で予定が保存されているか確認する

  2. ワードプレスのページを再読み込みする

  3. ブラウザのキャッシュを削除する

  4. シークレットウィンドウで確認する

  5. ワードプレスのキャッシュを削除する

  6. CDNを利用している場合はCDNキャッシュも削除する

4-3. ワードプレス側で予定を編集できるのか

通常の埋め込みコードでは、ワードプレスの管理画面からGoogleカレンダーの予定を編集できません。

予定の追加、変更、削除は、Googleカレンダー側で行います。ワードプレス側で編集できるのは、カレンダーを掲載するページの文章や埋め込みコード、表示サイズなどです。

ワードプレス上でイベント情報を登録・編集したい場合は、Googleカレンダーの埋め込みではなく、イベント管理機能を備えたワードプレスプラグインを検討します。

4-4. 複数のGoogleカレンダーを同期・表示する方法

複数店舗、複数スタッフ、複数会場などの予定を表示したい場合は、複数のGoogleカレンダーを一つの埋め込み画面にまとめられます。

Googleカレンダーの埋め込みカスタマイズ画面で、表示対象のカレンダーを追加してください。カレンダーごとに色を分けると、どの店舗や担当者の予定なのか見分けやすくなります。

情報量が多すぎる場合は、すべてを一画面にまとめるのではなく、次のようにページを分ける方法もあります。

  • 東京店のカレンダー

  • 大阪店のカレンダー

  • 担当者別カレンダー

  • 会場別カレンダー

複数カレンダーを扱う際は、予定名の付け方や色分けのルールを統一すると、閲覧者が迷いにくくなります。

4-5. 同期されないときに確認すべきポイント

予定が反映されない場合は、最初に「埋め込んだカレンダー」と「更新したカレンダー」が同じか確認してください。

Googleカレンダーでは、アカウント内に複数のカレンダーを作成できます。別のカレンダーに予定を登録していると、ワードプレス側には表示されません。

あわせて、次の項目も確認します。

  • 予定を登録したカレンダーが正しいか

  • 埋め込みコード内のカレンダーIDが正しいか

  • 予定が「非公開」に設定されていないか

  • 表示対象の日付や時間帯が正しいか

  • タイムゾーンが一致しているか

  • キャッシュが残っていないか

  • プラグイン利用時は取得間隔が設定されていないか

ICS形式で読み込むプラグインでは、一定間隔で情報を取得することがあります。その場合、iframeによる標準埋め込みよりも更新に時間がかかる可能性があります。

5. プラグインを使ってGoogleカレンダーを表示する方法

5-1. プラグインを使うメリット・デメリット

プラグインを使うメリットは、Googleカレンダーの予定をワードプレスのデザインになじませやすいことです。

プラグインによっては、次のような機能を利用できます。

  • イベントを一覧形式で表示する

  • カレンダーの色や文字サイズを変更する

  • スマートフォン向けに表示を最適化する

  • 特定のカテゴリーや予定だけを表示する

  • ショートコードで好きな場所に掲載する

  • 複数のカレンダーをまとめる

  • ICS形式のデータを読み込む

一方で、プラグインには次のデメリットもあります。

  • 初期設定が必要になる

  • Google APIの設定を求められる場合がある

  • 更新が停止するとセキュリティ上の問題につながる

  • テーマやほかのプラグインと競合する可能性がある

  • 高度な機能が有料の場合がある

  • 取得キャッシュにより更新がすぐ反映されない場合がある

単純にカレンダーを表示するだけなら埋め込みコード、デザインや表示形式を細かく変えたいならプラグインが適しています。

5-2. Googleカレンダー表示に使える代表的なプラグイン

Googleカレンダーの表示に使われる代表的なプラグインには、「Simple Calendar」や「ICS Calendar」などがあります。

Simple Calendarは、Googleカレンダーのイベントをワードプレス上に表示するためのプラグインです。レスポンシブ表示に対応し、カレンダー形式や一覧形式で予定を掲載できます。WordPress.org 日本語+1

ICS Calendarは、Googleカレンダーを含むiCalendar形式のフィードを読み込み、ショートコードで表示できるプラグインです。Googleカレンダーだけでなく、Microsoft 365やiCloudなどのカレンダーを扱いたい場合にも選択肢になります。WordPress.org

プラグインを選ぶ際は、次の点を確認してください。

  • 最終更新日

  • 現在のワードプレスとの互換性

  • 有効インストール数

  • 利用者の評価

  • サポート状況

  • 無料版で使える機能

  • APIキーが必要か

  • 日本語環境で使いやすいか

プラグインの仕様や対応バージョンは変更されるため、導入時点の公式ページを確認することが重要です。

5-3. プラグインの基本的な設定手順

一般的なプラグインの導入手順は次のとおりです。

  1. ワードプレス管理画面で「プラグイン」を開く

  2. 「新規プラグインを追加」を選択する

  3. プラグイン名を検索する

  4. 「今すぐインストール」をクリックする

  5. インストール後に「有効化」をクリックする

  6. プラグインの設定画面を開く

  7. GoogleカレンダーのIDまたはICS URLを登録する

  8. 表示形式やデザインを設定する

  9. ショートコードまたは専用ブロックをページに設置する

GoogleカレンダーIDは、Googleカレンダーの「設定」から対象カレンダーを選び、「カレンダーの統合」で確認できます。

ICS URLを使用する場合も、同じ「カレンダーの統合」画面から取得します。非公開カレンダーの「iCal形式の非公開URL」は、第三者に知られるとカレンダー情報へアクセスされるおそれがあるため、公開ページのHTMLへ直接記載しないでください。Googleも、このURLを外部のカレンダーアプリへ登録する方法を案内しています。Google ヘルプ

5-4. ショートコードでカレンダーを表示する方法

プラグインの設定が完了すると、次のようなショートコードが発行されることがあります。

[calendar id="123"]

実際のショートコードはプラグインによって異なるため、プラグインの設定画面や公式マニュアルを確認してください。

ブロックエディターでは「ショートコード」ブロックを追加し、発行されたコードを貼り付けます。ショートコードは、複雑な機能を短い記述で投稿や固定ページに呼び出すためのワードプレス独自の仕組みです。WordPress.org

クラシックエディターでは、本文中の表示したい場所へショートコードを貼り付けます。

5-5. 埋め込みコードとプラグインはどちらを選ぶべきか

初心者が短時間で設置したい場合は、Googleカレンダーの標準埋め込みコードがおすすめです。

無料で利用でき、プラグインを追加する必要もありません。Googleカレンダーをそのまま表示できれば十分な場合は、標準埋め込みで対応できます。

一方、次のような希望がある場合はプラグインを検討します。

  • サイトのデザインに合わせたい

  • スマートフォンでの見やすさを重視したい

  • 直近の予定だけを一覧表示したい

  • イベントごとの表示項目を調整したい

  • 複数の外部カレンダーをまとめたい

  • iframeを使わずに表示したい

「設置の簡単さ」を優先するなら埋め込みコード、「表示の自由度」を優先するならプラグインという基準で選ぶとよいでしょう。

6. 用途別におすすめのGoogleカレンダー表示方法

6-1. 店舗・教室・スクールの営業日カレンダー

店舗や教室の営業日を案内する場合は、月表示のカレンダーが適しています。

定休日、臨時休業日、特別営業日を色分けすると、利用者が営業状況をひと目で確認できます。

予定名は「休業日」「午前のみ営業」「特別レッスン」のように、短く具体的に記載してください。住所や電話番号など、すべての日程で共通する情報はカレンダー内に繰り返し入力せず、ページ本文にまとめたほうが見やすくなります。

営業日だけを伝える用途であれば、標準埋め込みでも十分です。

6-2. セミナー・イベント予定の告知カレンダー

セミナーやイベントを告知する場合は、予定リスト形式が向いています。

カレンダー形式だけではイベント名が途中で省略されることがあります。予定リスト形式なら、開催日とイベント名を縦に並べて表示できるため、スマートフォンでも確認しやすくなります。

各予定の説明欄には、次の情報を記載すると親切です。

  • 開催時間

  • 開催場所

  • 参加費

  • 定員

  • 申込ページ

  • オンライン開催の場合は参加方法

申込受付や参加者管理まで行いたい場合は、Googleカレンダーの表示だけでなく、申込フォームやイベント管理プラグインを組み合わせます。

6-3. 予約状況や空き状況の共有カレンダー

予約済みの日時や空き状況を見せる場合は、個人情報を予定名に入力しないよう注意してください。

「山田様」「株式会社〇〇」のような顧客名ではなく、次のような表記を使います。

  • 予約済み

  • 空きあり

  • 満席

  • 受付終了

  • 午前空きあり

  • 残り1枠

Googleカレンダーは、空き状況を案内する用途には使えますが、標準のカレンダー埋め込みだけでは予約申込、決済、キャンセル管理、在庫管理などはできません。

予約を受け付けたい場合は、Googleカレンダーの予約スケジュール機能や、ワードプレスの予約システムを検討してください。

6-4. 社内・会員向けスケジュール共有

社内や会員向けに使う場合は、公開範囲の設定が重要です。

カレンダーを一般公開すると、ページのURLを知らない第三者にも内容を見られる可能性があります。ページ自体にパスワードを設定しても、公開カレンダーのURLや情報が別の経路から閲覧できる可能性は残ります。

機密情報を扱う場合は、特定のGoogleアカウントだけにカレンダーを共有し、閲覧者がGoogleへログインした状態で利用する運用を検討します。

ワードプレスの会員限定ページに掲載する場合も、「ページのアクセス制限」と「Googleカレンダーの共有権限」は別々に管理してください。

6-5. 複数拠点や複数担当者の予定表示

複数拠点や担当者の予定を表示するときは、拠点・担当者ごとにGoogleカレンダーを分けると管理しやすくなります。

たとえば、次のように分けます。

  • 東京店

  • 大阪店

  • 名古屋店

  • 担当者A

  • 担当者B

  • 会議室A

  • 会議室B

一つの画面にまとめる場合は、それぞれ異なる色を設定します。ただし、表示するカレンダーが多いと見づらくなるため、3～5種類程度を目安に整理する方法が現実的です。

情報量が多い場合は、タブ、アコーディオン、拠点別ページなどを使って分割すると、利用者が目的の予定を探しやすくなります。

7. Googleカレンダーが表示されないときの原因と対処法

7-1. カレンダーが非公開になっている

最も多い原因は、Googleカレンダーが一般公開されていないことです。

Googleアカウントへログインしている管理者には表示されても、一般の訪問者には表示されない場合があります。

Googleカレンダーの設定を開き、「予定のアクセス権限」や共有設定を確認してください。一般公開のサイトで誰でも閲覧できるようにする場合は、公開用カレンダーを作成し、必要な情報だけを掲載します。

設定後は、Googleからログアウトしたブラウザやシークレットウィンドウで確認することが重要です。

7-2. 埋め込みコードの貼り付け場所が間違っている

Googleカレンダーの埋め込みコードはHTMLです。

通常の段落ブロックやビジュアル編集画面へ貼り付けると、コードが文字として表示されたり、一部が削除されたりすることがあります。

ブロックエディターでは「カスタムHTML」ブロック、クラシックエディターでは「テキスト」タブを使ってください。

コードの一部だけをコピーしていないかも確認します。<iframeから</iframe>までをすべてコピーする必要があります。

7-3. HTMLブロックではなく通常ブロックに貼っている

ブロックエディターには、「段落」「コード」「カスタムHTML」など似た役割に見えるブロックがあります。

Googleカレンダーの表示に使用するのは「カスタムHTML」ブロックです。

「コード」ブロックは、プログラムのソースコードを読者に見せるためのブロックです。そのため、埋め込みコードを貼るとカレンダーではなくコードそのものが表示されます。

間違ったブロックに貼り付けた場合は、コードを切り取り、「カスタムHTML」ブロックを追加して貼り直してください。

7-4. テーマやプラグインの影響で表示が崩れている

テーマのCSSやセキュリティ系プラグインによって、iframeの表示が制限されることがあります。

原因を切り分けるには、次の項目を確認します。

  • iframeの横幅が固定されていないか

  • 親要素に狭い幅が設定されていないか

  • overflow: hiddenで内容が切れていないか

  • セキュリティプラグインがiframeを削除していないか

  • キャッシュ最適化機能がコードを書き換えていないか

  • 遅延読み込み機能が正常に動作しているか

可能であれば、ステージング環境で一時的にプラグインを停止し、原因を切り分けます。本番サイトでプラグインを停止する場合は、表示や機能への影響に注意してください。

7-5. スマホ表示で横幅がはみ出す

スマートフォンで横にはみ出す場合は、埋め込みコードのwidthを確認します。

次のように固定幅になっている場合、

HTML
width="800"

次のように変更します。

HTML
width="100%"

テーマ側のコンテンツ幅が狭い場合は、iframeにmax-width: 100%;を指定する方法もあります。

CSS
.google-calendar-wrap iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
}

月表示が小さすぎて読みづらい場合は、スマートフォン向けに予定リストを表示するプラグインを使う方法も検討してください。

8. ワードプレスにGoogleカレンダーを埋め込む際の注意点

8-1. 個人情報や非公開予定を表示しない

公開カレンダーには、氏名、電話番号、メールアドレス、住所、顧客情報、社内情報などを登録しないでください。

予定名だけでなく、説明欄、場所、添付ファイル、Google Meetの情報にも注意が必要です。

安全に運用するため、Webサイト公開専用のGoogleカレンダーを作成する方法がおすすめです。公開用カレンダーには、サイト訪問者へ伝えてよい情報だけを登録します。

8-2. 誰でも見られるカレンダーか確認する

Googleアカウントへログインした状態だけで確認すると、共有設定の問題に気づけないことがあります。

公開後は、次の環境で表示確認を行ってください。

  • Googleからログアウトしたブラウザ

  • シークレットウィンドウ

  • 別のGoogleアカウント

  • パソコン

  • スマートフォン

特定の人だけに見せたいカレンダーは、一般公開せず、Google側で閲覧者のアカウントを指定します。

8-3. サイト表示速度への影響を確認する

Googleカレンダーは外部のコンテンツを読み込むため、ページ内に複数設置すると表示速度へ影響する可能性があります。

すべてのページにカレンダーを掲載するのではなく、「営業日」「スケジュール」などの専用ページにまとめる方法が効果的です。

トップページに掲載する場合は、カレンダー全体ではなく、直近の予定だけを表示することも検討してください。

表示速度を確認するときは、カレンダーを設置する前後でページの読み込み状況を比較します。

8-4. デザインがサイト全体と合うか確認する

Googleカレンダーの標準デザインは、サイトのテーマと完全に一致するとは限りません。

カレンダーの上に見出しや説明文を追加し、外側に余白を設定するだけでも、ページ全体になじみやすくなります。

たとえば、カレンダーの直前に次のような案内を掲載します。

営業日とイベント予定をご確認いただけます。予定は変更になる場合がありますので、ご来店前に最新情報をご確認ください。

細かな色や文字のデザインまで統一したい場合は、カスタマイズ性の高いプラグインを使用します。

8-5. 予約機能として使う場合の限界を理解する

通常のGoogleカレンダー埋め込みは、予定を表示するための機能です。

予約システムとして必要になることが多い、次の機能は標準の埋め込みだけでは実現できません。

  • 希望日時の選択

  • 予約フォームの入力

  • 予約枠の自動制御

  • 自動返信メール

  • キャンセル受付

  • 事前決済

  • 顧客情報の管理

  • 複数スタッフへの自動割り当て

Googleカレンダーの予約スケジュールを利用すると、予約ページをWebサイトへ埋め込めます。Google公式ヘルプでも、予約ページの共有オプションからWebサイト用コードを取得し、インライン形式で埋め込む方法が案内されています。利用できる機能や条件は、使用しているGoogleアカウントや契約内容を確認してください。Google ヘルプ+1

本格的な予約受付が必要な場合は、ワードプレスの予約プラグインや外部予約サービスとの比較も必要です。

9. よくある質問

9-1. Googleカレンダーの埋め込みは無料でできますか

Googleカレンダーの標準的な埋め込み機能は、無料のGoogleアカウントでも利用できます。

ワードプレス側も、カスタムHTMLブロックへコードを貼り付けるだけであれば、追加のプラグイン費用はかかりません。

ただし、有料プラグイン、デザインカスタマイズ、予約システム、Google Workspaceの一部機能などを利用する場合は費用が発生することがあります。

9-2. 予定を追加するとワードプレスにも自動反映されますか

はい。iframeによる埋め込みでは、Googleカレンダー側の予定がワードプレス上に表示されるため、Googleカレンダーで追加・変更した内容も反映されます。

ただし、ワードプレスのデータベースに予定がコピーされるわけではありません。また、ブラウザやプラグインのキャッシュによって、更新前の内容が一時的に表示される場合があります。

反映されないときは、ページの再読み込みとキャッシュの削除を試してください。

9-3. 非公開カレンダーを特定の人だけに見せられますか

Googleカレンダー側で特定のGoogleアカウントに共有権限を付与すれば、そのアカウントを利用している人だけに見せる運用が可能です。

ただし、閲覧者は権限を与えられたGoogleアカウントへログインする必要があります。一般公開ページに非公開カレンダーを埋め込んでも、権限のない人には内容が表示されません。

会員サイトで利用する場合は、ワードプレスの会員権限だけでなく、Googleカレンダー側の共有権限も設計する必要があります。

9-4. スマホで見やすく表示するにはどうすればいいですか

埋め込みコードの横幅を100%に設定してください。

HTML
width="100%"

それでも見づらい場合は、次の対策が有効です。

  • 高さをスマートフォン向けに調整する

  • 月表示ではなく予定リストを使う

  • カレンダーを専用ページに掲載する

  • レスポンシブ対応のプラグインを使う

  • 表示するカレンダーや項目を減らす

スマートフォンでは画面が狭いため、予定の件数が多いサイトほど、一覧形式のほうが読みやすくなる傾向があります。

9-5. Googleカレンダーで予約受付はできますか

通常のGoogleカレンダーを埋め込むだけでは、予約受付機能にはなりません。

空き状況を見せることはできますが、閲覧者がサイト上で予約枠を選び、申込情報を送信する仕組みは別途必要です。

Googleカレンダーの予約スケジュールを利用できるアカウントでは、予約ページのリンク共有やWebサイトへの埋め込みが可能です。Google ヘルプ

複数スタッフの管理、決済、キャンセル待ち、顧客管理などが必要な場合は、専用の予約システムやワードプレスプラグインを検討してください。

まとめ

ワードプレスにGoogleカレンダーを埋め込む基本的な方法は、Googleカレンダーの「カレンダーの統合」から取得したiframeコードを、ワードプレスのカスタムHTMLブロックへ貼り付けるだけです。

Googleカレンダー側で予定を更新すれば、埋め込んだカレンダーにも反映されるため、店舗の営業日、教室の予定、イベント情報などを効率よく管理できます。

設置する際は、次の点を確認することが重要です。

  • 公開用のカレンダーを用意する

  • カレンダーの公開範囲を確認する

  • カスタムHTMLブロックにコードを貼り付ける

  • 横幅を100％にしてスマホ表示へ対応する

  • ログアウトした状態でも表示を確認する

  • 個人情報や非公開情報を登録しない

  • 予約受付には別の機能が必要であることを理解する

簡単に予定を表示したい場合は標準の埋め込みコード、デザインや一覧表示を細かく調整したい場合はプラグインが適しています。サイトの用途と管理方法に合わせて、使いやすい表示方法を選びましょう。