【WordPress】Googleカレンダーを埋め込む【プラグイン無】

どうもnakattyです。

今回はWordPressで作ったWEBサイトにgoogleカレンダーを埋め込む方法をまとめようと思います。

あまり使わないかなと思ったのですが、HPの制作依頼を受けた時に、googleカレンダーを更新すればWEBサイト内のカレンダーも更新されるようにしたいと言われたので、まとめようと思います。

表示させるGoogleカレンダーを作成する

WEBサイトに表示させるGoogleカレンダーを作成します。

■Googleアカウントにログインした状態でGoogleカレンダーにいきます。
すると以下の様な画面になると思います。

■以下の画像の赤枠部分「他のカレンダー」をクリックし「新しいカレンダーを作成」をクリックします。

■カレンダーのタイトルと説明を入力し「カレンダーを作成」をクリックします。

■カレンダーに戻ると先ほど作成したカレンダーが表示されています。

カレンダーの設定

作成したGoogleカレンダーはこのままでは、WEBサイトに埋め込んでもサイトに訪問してきた人は見ることができません。
Googleカレンダーの設定を一般公開にする必要があります。

■WEBサイト表示させたいカレンダーにカーソルを合わせ赤枠部分をクリックしてください。
メニューの中にある「設定と共有」をクリックします。

■画面が切り替わりましたら少し下にスクロールします。「アクセス権限」という項目があるので「一般公開して誰でも利用できるようにする」の横にあるチェックボックスにチェックを入れます。

■アラートが出ますが「OK」で大丈夫です。

表示させるカレンダーは一先ずこれでOKです。

カレンダーをWEBサイトに埋め込む

いよいよWEBサイトにGoogleカレンダーを埋め込んで行きます。

流れとしてはGoogleカレンダーから表示させるカレンダーを埋め込むためのコードをコピーしてWEBサイトの表示させたい箇所にコードを貼り付けるだけになります。

■WEBサイト表示させたいカレンダーにカーソルを合わせ赤枠部分をクリックしてください。
メニューの中にある「設定と共有」をクリックします。

■画面が切り替わりましたら少し下にスクロールします。「カレンダーの統合」という項目があるので、その項目の中から「埋め込みコード」というものがありますのでそれをコピーします。
<iframe>から始まるコードです。

■コードをコピーしたらカレンダーを表示させたい箇所にコードを貼り付けます。
WordPressは固定ページや投稿ページに貼り付けたります。
そのまま保存をすれば表示されます。

スマホにした時にカレンダーが上手く表示されない場合

<iframe>から始まるコードですが、そのまま入力するとスマートフォンで表示した時に横幅が縮小されずに画面をはみ出してしまいます。

<iframe>の中に「style=”border: 0″ width=”800″ height=”600″」という部分があります。

この部分を「style=”border: 0″ width=”100%” height=”600″」に書き換えれば上手く機能するハズです。
「height=”600″」は好きな数値を入れて調整してみてください。

まとめ

私はWordPressに埋め込んで使っています
ちょっと見た目は気になりますが、Googleカレンダーは色々設定ができますので上手く使えば相当便利になります。