WordPressにGoogleカレンダーを埋め込むのは、店舗の営業日やイベントのスケジュールを訪問者に知らせるのにとても便利ですね。
主な方法は2つあります。プラグインを使わずにGoogleカレンダーの標準機能(iframe)を使う方法が一番簡単でおすすめです。
デザインを細かく調整したい場合はプラグインを使う方法もあります。
ステップ1:Googleカレンダーを「一般公開」にする
カレンダーをサイトに表示するには、誰でも見られるように公開設定にする必要があります。
※個人的な予定が入っているメインカレンダーではなく、サイト公開用の新しいカレンダーを作成して使用することを強くおすすめします。
パソコンで Googleカレンダー を開きます。
右上の歯車アイコン(⚙️)をクリックし、「設定」を選びます。
左側のメニューの「マイカレンダーの設定」から、埋め込みたいカレンダー名をクリックします。
「予定のアクセス権限」という項目を探し、「一般公開して誰でも利用できるようにする」にチェックを入れます(警告が出たら「OK」を押します)。
ステップ2:埋め込みコード(iframe)を取得する
同じ設定画面を少し下にスクロールし、「カレンダーの統合」という項目を見つけます。
「埋め込みコード」という欄にある <iframe src=...> で始まるコードをすべてコピーします。
そのすぐ下にある「カスタマイズ」をクリックすると、カレンダーの色、サイズ、タイトルなどの表示形式を調整してからコードを発行することもできます。
ステップ3:WordPressにコードを貼り付ける
WordPressの管理画面にログインし、カレンダーを埋め込みたい投稿または固定ページの編集画面を開きます。
ブロック追加ボタン(+マーク)をクリックします。
「カスタムHTML」ブロックを検索して追加します。
ブロックの入力欄に、ステップ2でコピーした埋め込みコード(iframe)を貼り付けます。
ブロックの「プレビュー」ボタンを押してカレンダーが表示されれば成功です。記事を保存・公開してください。
Google標準の埋め込みカレンダーは、スマートフォンで見ると少し見づらい(はみ出してしまう)場合があります。スマホ対応(レスポンシブ)を完璧にしたい場合や、デザインをサイトに合わせたい場合は、以下のプラグインがよく使われています。
Simple Calendar (Google Calendar Events)
デザインがシンプルで、WordPressのテーマに馴染みやすいのが特徴です。リスト形式で予定を表示させることもできます。
スマホでの表示について補足
プラグインを使わずに(方法1で)スマホでも綺麗に表示させたい場合は、WordPressに貼り付けたコードの width="800"(数字は環境によって異なります)の部分を width="100%" に書き換えると、画面幅に合わせて自動調整されるようになります。
まずは方法1で無事に表示されるか試してみてください。