• 2022.11.22
  • WordPress
  • GIV_wataru

WordPressでGoogleカレンダーを表示させる方法

飲食店や美容院、病院を運営している人なら、ホームページに定休日が分かるカレンダーを表示したいですよね。カレンダーはWordPressのプラグインを使うのもありですが、Googleカレンダーを表示させることもできます。そこで今回はWordpressでGoogleカレンダーを表示させる方法を紹介します。

Googleカレンダーを使うにはgoogleアカウントが必要

googleカレンダーを使うにはgoogleアカウントが必要です。お金はかかりません。

googleアカウントの作成は下記のリンクから行ってみてください。

Google アカウント|Google公式サイト

Googleカレンダーを表示するための手順

➀Googleカレンダーを開いて、画面右上にある歯車マークをクリック。その後に「設定」をクリックします。

➁「設定」画面にある「カレンダーを追加」を選択して、「新しいカレンダーを作成」をクリックします。

③「新しいカレンダー作成」で「名前」を記入して「カレンダーを作成」をクリックします。

説明の欄はそこまで必須項目ではないので、記名しなくても良いです。

カレンダーを作成をクリックすると下記のように、さきほど作成したカレンダーが表示されます。

➃埋め込みコードをコピーして、カレンダーを表示させたい箇所に貼り付けます。

埋め込みコードをカレンダーの表示させたい箇所に貼り付けると、下記のようにさきほど作成したGoogleカレンダーが表示されます。

固定ページや投稿ページにGoogleカレンダーを公開する方法

固定ページや投稿ページならWordpressの管理画面から簡単にGoogleカレンダーを公開できます。ブロックエディタとクラシックエディタで表示させ方が違うので、それぞれの表示のさせ方を紹介します。

ブロックエディターの場合
➀「カスタムHTML」をクリックします。

初めてカスタムHTMLを使う際には、「すべて表示」をクリックしてから、カスタムHTMLを選択してください。

➁Googleカレンダーの埋め込みコードを貼り付けます。

カスタムHTMLを選択すると、上記の画面が表示されます。この水色の枠に埋め込みコードを貼り付けてください。

クラシックエディターの場合
➀テキストモードから埋め込みコードを貼り付けます。

定休日を設定する方法

毎月、指定した曜日を定休日として表示する方法を解説します。

➀指定したい曜日に該当する日の枠内をクリックします。

日にちの数字をクリックすると、その日の個別ページに移るので、数字以外の箇所をクリックしてください。上記の画面ですと31をクリックすると、31日にの個別ページが開きます。

➁「繰り返さない」をクリックします。

③毎週○曜日をクリックします。

今回は毎週月曜日を定休日として表示したかったので、「毎週 月曜日」を選択しています。

➃タイトルに「休業日」と記入して「保存」をクリックします。

保存が完了すると、下記のように月曜日がすべて休業日と表示されるようになりました。

カレンダーをカスタマイズする方法

Googleカレンダーは自分好みでさまざまなカスタマイズが可能です。

カスタマイズは個別のカレンダーの設定画面にある「カスタマイズ」から設定可能です。

左側のチェックボタンでタイトル・ナビゲーションボタンなどの有無をチェックボックスで設定可能です。

GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

GIV / Design / Security / People
お問い合わせ
Contact