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

チャオ(・∀・)♪

 

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でカスタマイズする必要もないので便利かと思います。

 

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です