WordPressにGoogleカレンダーを埋め込む方法

チャオ(･∀･)♪

結論、Googleカレンダーがおすすめです。

今回は、WordPressにGoogleカレンダーを埋め込む方法について解説していきますね。

WordPressには標準でカレンダー機能がついている

WordPressメニュー「外観」→「ウィジェット」を開くと、カレンダーのウィジェットがあることを確認できます。

このウィジェットを「メインサイドバー」にドラッグ＆ドロップして追加することで、サイトバーにカレンダーを追加できます。

ブロックエディターでは、記事の中に直接ウィジェットを配置させることができます。左上の「+」ボタンを押して、「ウィジェット」から「カレンダー」を選択すれば配置完了です。

しかし、なんだか凄く簡素な見た目していますよね。良い意味で言えばシンプルで美しいデザイン、悪く言えば小学生が適当に書いたようなデザインです。

それもそのはずで、これは独自にCSSを使ってカスタマイズすることが前提となっているためです。ある程度のCSSを触れる中級者以上向けなんですね。

専門知識が絡んでくるので、初心者にはちょっとおすすめできないと言えます。

WordPressにGoogleカレンダーを埋め込む方法

ということで、おすすめはGoogleカレンダーです。

Googleカレンダーならカスタマイズは不要で、入力した内容がそのままWordPressにも反映されるので、使い勝手が良好です。

WordPressへの埋め込みは簡単ですが、Googleアプリの利用にはGoogleアカウントが必要なので、まだ取ってない方はこちらで取得しておいてください。あと、Google Chromeも必要なのでダウンロードしておいてください。

Googleカレンダーを起動する

Google Chromeを立ち上げて、右上にあるアイコンを押してGoogleカレンダーを開きましょう。

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

左側に「マイカレンダー」があるので、WordPressに埋め込みたいカレンダーの「︙」を押して、「設定と共有」を選択します。

下にスクロールすると「カレンダーの結合」があるので、「埋め込みコード」と表記されている部分のコードをコピーします。

後はこの埋め込みコードを、Googleカレンダーを表示させたい箇所に貼り付ければ完了です。

クラシックエディターで埋め込む場合

HTML編集ができる「テキストエディタ」に切り替えて、コードを貼り付けましょう。

ブロックエディターで埋め込む場合

「︙」を押して「HTMLとして編集」を選択して、コードを貼り付けましょう。

もし画像のようなエラーが表示されたら、「･･･」を押して「HTMLに変換」を選択しましょう。

ウィジェットを使って埋め込む場合

「カスタムHTML」というウィジェットにコードを貼り付けて、「メインサイドバー」にドラッグ＆ドロップして追加しましょう。必ず「保存」を押してくださいね。

お疲れ様でした。

まとめ

以上、WordPressにGoogleカレンダーを埋め込む方法について解説しました。

Googleカレンダーで入力した内容がそのままWordPressにも反映されますし、CSSでカスタマイズする必要もないので便利かと思います。

それでは、ここまで読んでいただきありがとうございました。
チャオ(･∀･)