20160122_thumb
technical

【WordPress】Google Calendar Events プラグインの導入方法

そういえば私はWebクリエイターなんだった…
お仕事関連のメモで、Google Calendar Events(Simple Calendar)のプラグイン導入方法です。


Google Calendar Eventsとは


20160122_thumb
WordPressのプラグインで、Googleアカウントのカレンダー機能で作成したイベントなどを、
WordPress上に取得・表示することができるプラグインです!

WordPress上ではなく、Googleアカウントのカレンダーを編集するだけでページに反映されるので、管理画面が苦手なクライアントさんにも使い易いかもしれません。
Simple Calendarとも言うみたいです。どちらが正式名なんでしょうか。

とても便利なプラグインなのですが、使えるようにする迄の手順がなかなか多い上、
英語なのでちょっとたいへんです。

最近、仕様が変わった為、導入方法が大きく変わったようなので、日本語解説したいと思います!

このプラグインの利用には、
カレンダーの取得を行う為の「Google API Key」と、
取得したいカレンダー固有の「カレンダーID」の二つが必要になります!
※利用にはGoogleのアカウントが必要ですので、持っていない方は予め作成してください。

※この記事の情報は、2016年1月時点のものです。

インストール


20160122_a01

まずは落ち着いてプラグインをインストールしましょう。
新規追加から「Google Calendar Events」または「Simple Calendar」で検索します。
20160122_a02

検索で出てきた緑のカレンダーマークのプラグインを選択し、インストールおよび有効化してください。
20160122_a03


API Keyの取得


まずは必要なもののうちの一つ、API Keyの取得について。
ここが一番面倒ですが、頑張って下さい!

プラグインの有効化でメニューに現れた「Calendar」から「Setting」を選択します。
20160122_b01

以下の画面に遷移します。
ここにGoogle API Keyを入力するのです。
20160122_b02
ご丁寧にAPI Keyを取得する為のGoogle Developers Consoleへのリンクが貼ってありますので、クリックしてGoogleの管理画面へ移動します。

こちらがGoogleの管理画面です。
20160122_b03

プロジェクトを新しく選択します!

20160122_b04
作成するプロジェクト名は、任意のもので適当につけてください。
利用規約に同意することで、作成ボタンが押せるようになります。


APIを作成したら、今度はAPIを有効状態にする必要があります。
20160122_b05
API管理画面に移動します。


管理画面では、有効にしたいAPIを選択します。
ここでは、Calendar APIを選択します。20160122_b06


Calendar APIを選択したら、「APIを有効にする」をクリックし、有効にします!
20160122_b07

もう少しです、頑張って!


今度は左メニューの認証情報を選択します。
20160122_b08
「新しい認証情報」を選択します。
APIとか認証とか面倒そうなことばが多いですが、おまじないだと思って我慢してください。


認証情報のうち「APIキー」を選択します。
20160122_b09

APIキーの中からさらに「サーバキー」を選びます。
20160122_b10

名前はてきとうにつけてください。
20160122_b11
作成!

すると…
なぞのはっしゅもじれつが生成されり!
これがAPI Keyです!
これです!これが欲しかったのです!
20160122_b12
お疲れ様です!
これをすかさずコピーしまして、

WordPress管理画面に戻り、
Calendar -> Settingsの中のAPI Key入力部にペーストして、保存します。
20160122_b13


カレンダーの作成


こんどは、取得して表示する対象となる、カレンダーを作成します。
Googleのメニューからカレンダーを選択します。
20160122_c01

カレンダー編集画面に来たら、WordPressで取得を行う用の新しいカレンダーを作成します。
20160122_c02

ポイントは「このカレンダーを一般公開する」をONにすることです。
一般公開状態のカレンダーでないと、WordPressに表示することができません。
20160122_c03

警告が出ますが、はいを選びます。
20160122_c04

カレンダーIDの確認

カレンダーを作成できたら、カレンダーの設定画面を開きます。
20160122_c05

メニュー内の「カレンダーのアドレス」のところにカレンダーIDが表記されています。
これをコピーしましょう!20160122_c06


これで、取得に必要なAPI KeyとカレンダーIDが揃いました!
あとはWordPress側の調整だけです!

カレンダーの設定(WordPress側)


さっそく、WordPress管理画面に戻り、Calendarメニューから「Add New」を選択しましょう。
20160122_d01


新規作成画面の下の方に、Calendar設定部があります。
20160122_d02
その中の「Google Calendar」タブの中にCalendar IDを入力する部分があります。
ここに、先ほど作成したカレンダーのIDをコピペします。

これで、WordPressでカレンダーを取得する準備が完了しました!

あとは、画面右下に書いてあるショートコードを呼び出せば、
作成したカレンダーの情報が自動で取得されるようになります!
20160122_d02a

カレンダーを表示したい投稿内にショートコードを貼り付けてもいいですし、
テンプレートから直接カレンダーを呼び出したい場合は

<?php echo do_shortcode(‘[calendar id=”92″]’); ?>

とでも書いて、ショートコードを実行してあげてください。
※ショートコードの番号は適宜書き換えてください。

動作確認

WordPress上に取得したカレンダーは、初期状態ではこのように表示されます。
20160122_d04
試しに、取得元のカレンダーを編集してみます。
Googleのカレンダー管理画面に戻り、適当にイベントを追加してみます。
20160122_d05


20160122_d06
追加が完了しました。

WordPressのカレンダー表示ページに戻ってみると…
更新されて、たった今追加したイベントが表示されるようになりました。
20160122_d07

カレンダーのカスタマイズ


カレンダー設定画面の本文は、カレンダーのイベントをクリックした時に表示されるツールチップの中身と連動しています。
20160122_e01

イベントをクリックすると表示されるコレです!
20160122_e02

これを編集したい場合は、以下のページを参考にテンプレートタグを書き換えてみてください!
http://docs.simplecalendar.io/event-template-tags/

以上です!

  • Category: technical / WordPress
  • Posted: 2016/1/22 12:00
  • Author: ユーリ
関連タグ
関連記事
20141218_thumb
【WordPress】同じタグが付いた記事を関連記事として表示する

25 件のコメント

    • 1
    • ななしさん
    • 2016/02/06 22:34

    わかりやすく、ありがとうございます!
    こちらのおかげで設定出来ました。
    質問なのですが、設定後来月に移動する矢印ボタンを押しても今月のままです。
    先月に戻るボタンを押しても、そのままです。
    何か設定があるのでしょうか?
    初心者で何もわからず、もし何か知っていれば教えて頂きたいです。

    • 2
    • ユーリ
    • 2016/02/06 22:45

    >>1さん
    わかりやすかったですか!そう言ってもらえるとうれしいです(*´∀`)
    月間の移動は、特に何もせずともデフォルトでできる仕様のはずです。
    動かないのであれば、何かエラーが発生している可能性があります。
    JavaScriptは動いていますでしょうか?
    ボタンを押した時にやじるしがクルクル回る表示が出ないのであれば、何らかのエラーによってJavaScriptが止まっている可能性があります。
    F12キーを押してブラウザのコンソールを見ると、エラーが出ているかどうかご確認をお願いします!

    • 3
    • ななしさん
    • 2016/02/06 23:52

    お返事ありがとうございます。
    早速試してみます!
    こちらの記事がなければ、設定出来なかったので本当に感謝してます(^_^)
    ありがとうございました☆

    • 4
    • ユーリ
    • 2016/02/07 11:30

    >>3さん
    いえいえです!
    こちらこそご丁寧にありがとうございました。

    • 5
    • ななしさん
    • 2016/02/07 18:58

    度々すみません。
    コンソールを見るとエラーがありました。
    Uncaught TypeError: e.on is not a functionと出ました。
    あれから色々試してみたのですが、解決せずです。
    もしアドバイスあれば教えて頂きたいです。
    何かあればでかまいません!
    面倒であればお返事大丈夫ですので
    もしよければお力貸してください。

    • 6
    • ユーリ
    • 2016/02/07 20:06

    >>5さん
    なるほどです!
    このプラグインが動作するためにはjQueryが必要ですが、
    おそらく.onというjQueryの機能がみつからないようです。
     
    WordPressには標準でjQueryが同梱されていますが、
    WordPressのバージョンが古い場合はjQueryのバージョンも古くなり、機能が古いために使えないプラグインもでてきてしまう、という具合です。
    管理画面から WordPressのバージョンアップを試みてはいかがでしょうか!
    もし、バージョンアップをしたく無い場合は手動で最新のjQueryを導入する必要があります。
     
    実際に配置されている環境を拝見しないことには確かなことはいえませんので、推測でのお答えになり恐縮ですが…
    再度ご確認くださいー

    • 7
    • ななしさん
    • 2016/02/07 22:47

    詳しくありがとうございます!
    バージョンアップなどやってみましたが、やはり直らず、、
    ネットに書いてあることも試してみたのですがだめでした、
    まだまだ勉強不足みたいです(._.)
    ご丁寧にありがとうございました。
    とっても親切で感謝しています。
    色々試してみますね!

    • 8
    • ユーリ
    • 2016/02/08 08:16

    >>7さん
    直りませぬか…jQuery関連とは思うのですが…
    お力になれず心苦しいです。・゜・(ノД`)・゜・。
    まだ私でできそうなことがあれば仰ってくださいね。

    • 9
    • ななしさん
    • 2016/04/23 15:04

    こちらの記事のお陰で無事に設置できました!
    分かりやすい説明有難うございました!

    • 10
    • ユーリ
    • 2016/04/25 09:52

    >>9さん
    コメントありがとうございます!
    無事に設置できた方も居らっしゃるようで、ひと安心ですー!
    お役にたったようでしたら幸いです。

    • 11
    • ななしさん
    • 2016/04/30 20:29

    web製作初心者です。こちらのページを見て、
    カレンダーの設置は出来たのですが、
    翌月に移動させるためのボタン?がなく、
    次の月の情報を確認することができません><
    コメント見て、バージョンアップもしたのですが、
    変わらすです。なにかいい方法はないでしょうか?
    設定画面見ても、英語表記なのでどこを編集したらいいかわかりません。教えていただけないでしょうか?

    • 12
    • ユーリ
    • 2016/04/30 23:20

    >>11さん
    こんばんは!
    まず、エラーが出ているかどうかで状況が変わってきます。
    他のプラグインやスクリプトと喧嘩していたりすると、エラーが出てうまく動作しないということがあります。
    コンソールを見てエラーがでているかどうかの確認をお願いします!

    • 13
    • 11
    • 2016/05/09 12:29

    返信ありがとうございます!
    エラーが出ているかどうか、コンソールを見て確認とのことですが、
    どこから確認したら良いのでしょうか?
    全くの初心者で使い方がわかりません。。
    お手数ですが、回答いただければ幸いです!

    • 14
    • ユーリ
    • 2016/05/09 14:10

    >>11さん
    使用しているブラウザにもよりますが、このページが参考になると思いますー
    http://www.koikikukan.com/archives/2013/07/31-005555.php

    • 15
    • sakenyan
    • 2016/05/23 17:51

    こんにちは。本記事とても参考になりました。
    質問がございます。
    googlecalendarとの連携が正常に動作しているかとおもいきや、googlecalendarに予定を追加しても反映されません。
    WordPress側のEdit Calendarを更新した場合のみ反映されます。
    リアルタイムで反映するにはどのようにしたら良いでしょうか。
    サーバー側のip設定の必要があるのでしょうか・・・。
    宜しくお願い致します。

    • 16
    • ユーリ
    • 2016/05/24 00:02

    >sakenyanさん
    こんばんは!ご参考になったようで何よりです。
    私が設置した際は、特に設定を行わなくてもその場で反映されたので、「リアルタイムで反映させる為の設定」という項目については認識していないです…。
     
    Wordpressにキャッシュ系、ページ高速化系のプラグインを導入していたりはしていませんでしょうか。
    一度読み込んだページを強力にキャッシュしてしまい、読み込みを行ってもデータを取りに行っていない可能性があります。
    もしその場合は該当ページをキャッシュしないように設定するか、カレンダーだけ別ページから呼び出す方式にする等の処置が必要かと思います。
    ご確認ください。

    • 17
    • sakenyan
    • 2016/05/25 09:24

    ご連絡ありがとうございます。助かりました。
    仰るとおりキャッシュ系で何か影響を受けているようです。
    何度か試したところ、リアルタイムといかなくても数時間程で反映されるようでしたのでひとまずこのままにします。

    質問ばかりで申し訳ありませんが、リスト表示にした際の曜日は反映されないのでしょうか。

    せっかくかっこいいのにもったいないですよね・・・。

    • 18
    • ユーリ
    • 2016/05/25 09:49

    >sakenyanさん
    やはりキャッシュ系でしたか!
    原因がわかって良かったです。
     
    リスト表示時の曜日フォーマットですが、
    Calendar Settingsの左タブ「Advanced」のなかの
    Date Formatを「Site Default」ではなく「Custom」に変更することで解決できないでしょうか。
    質問の意図が間違っていましたらすみません。

    • 19
    • もんばび
    • 2016/08/08 17:00

    なかなかうまく行かなかったのに、こちらのサイトのご説明通りにやったら、何ごともなかったかのようにカレンダーが表示されました。ほんとにありがとうございます。
    それで、ひとつ不可解な挙動があります。
    WordPressにログインしていない状態だと、次月、前月をクリックしたときに、丸井矢印がクルクルまわったまま一晩たっても切り替わりません。しかし、WordPressにログインしている状態だと、1秒未満で次月・前月に切り替わります。
    この件について、何かピンとくることはありませんでしょうか? さんざん探してみるもヒントが見つけられず、失礼を承知でお伺いいたします。

    • 20
    • ユーリ
    • 2016/08/08 17:39

    >もんばびさん
    お役に立ったようでよかったです!

    ログイン状態による挙動の変化ですが、
    ・WordPressダッシュボードでカレンダーの公開状態が「公開」になっているか(非公開や下書きになっていないか)
    ・ページキャッシュ系のプラグインを導入していて、キャッシュの消し忘れが無いか
    ・Theme Test Driveなど、ログインしている時だけ別のテーマが表示されているプラグインを利用していないか
    などご確認くださいー。
    矢印くるくるで切り替わらない際、コンソールにエラーが来てないかどうかもチェックしてみてください。

    • 21
    • もんばび
    • 2016/08/09 16:49

    ユーリさん、アドバイスまことにありがとうございます。
    さっそく調べてみます。
    何かわかったらまた来ます~。

    • 22
    • もんばび
    • 2016/08/19 13:50

    ひとつ判明しましたので来ました。
    「永遠クルクル」現象は、さくらレンタルサーバーで再現していますので、試しに別のサーバーで同じ環境を作ってみたところ、全く問題なく動きました。
    サーバーの仕様かなぁと思いつつ、調査継続中です。

    • 23
    • ユーリ
    • 2016/08/19 22:33

    >もんばびさん
    情報ありがとうございます!
    そういうこともあるのですね!プラグインもぜんぶまるまる移しても動いたんでしょうか。
     
    私が構築した環境もさくらサーバなのですが、そちらは正常に動いていたので謎ですね (˘ω˘;)
    WordPress外の設定の問題、という線もみていかなければならないのかもしれないです…

    • 24
    • ミズタマ
    • 2017/08/10 21:02

    リアルタイムなコメントではなくてスミマセン。
    こちらのサイトを参考にしてHPへカレンダー設置はできたのできました!
    ただ、翌月や前月に移動すると次のようなエラー?が出て見られません。

    Missing arguments in default calendar grid ajax request.

    いろいろと調べてみたのですがお手上げで、こちらにコメさせていただきました。
    よろしくお願いいたします。

    • 25
    • ユーリ
    • 2017/08/11 18:32

    >ミズタマさん
    こんにちは!
    私のほうで、このカレンダーを設置している環境が手元にないので深く調べられないんですが、
    Ajax通信の引数がなんかおかしいってエラーですかね?
    Calender Settingの項にあるviewの設定[grid,list]のあたりが関係している可能性があるかもしれません。
    違ったらごめんなさい(>人<;)

コメントを残す


※おなまえ空欄可("ななしさん"になります。)