チャオ(・∀・)♪
WordPressにカレンダー機能を追加したい。何かオススメなカレンダー機能はありませんか!?
結論、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でカスタマイズする必要もないので便利かと思います。
それでは、ここまで読んでいただきありがとうございました。
チャオ(・∀・)
コメントを残す