Simple Calendar – Googleカレンダーを WordPress で利用する

Google カレンダーをカスタマイズして見栄えを調整したかった。

で探して、見つけたのが Simple Calendar と言うプラグイン。

結論から言うと、以下の理由で僕の場合は利用できなかった。

  • 月表示と予定表示は出来るがそれ以外が出来ない。
  • ロードされるのにちょいと重い。

ただ、月表示と予定リストを表示される方には便利だと思います。

設置方法も簡単ですし・・・。

と言うことで、覚え書きです。

 

プラグインをインストールすると、下のような画面がダッシュボードに現れる。
「Calendars」の中の「Settings」をクリックすると以下の画面になる。

ここで、青い部分「 Step-by-step instructions 」をクリックすると、インストールからカレンダーの設置方法までいろいろ記載されたドキュメントを見ることが出来る。

赤い部分をくりっくすると「Google Developers Console」へジャンプする。

20160210wp-001.png

20160210wp-002.png 20160210wp-003.png

こんなドキュメントが見られる。
左画像の一番上にある「Simple Calendar Documentation」をクリックすると、右の画面に移動する。
カレンダーの固定ページ、投稿に設置する方法、ウィジェットへの設置方法などがていねいに解説されている。


● Simple Calender 用の API キーを取得する。

20160210wp-004.png
以下の画面で「プロジェクトの作成」をクリック。

20160210wp-005.png
プロジェクト名を入力して「作成」をクリック。
(ここでは「Simple Calendar」にしました。)

20160210wp-006.png
この画面で「API を有効にして管理しましょう」をクリック。

20160210wp-007.png
「Calendar API」をクリック。

20160210wp-008.png
「API を有効にする」をクリック。

20160210wp-009.png
「認証情報に進む」をクリック。

20160210wp-010.png
「API キー」をクリック。

20160210wp-011.png
「サーバーキー」をクリック。

20160210wp-012.png
名前のところに任意の名前を入力。
(ここでは「Simple Calendar API Key」としました。)

20160210wp-013.png
「API キー」が表示されるのでコピーして、「OK」をクリック。

20160210wp-014.png
「Simple Calendar」の画面に戻って、先ほどコピーした「API キー」を「Google API Key」に入力して「変更を保存」をクリック。


● カレンダーの設置

20160210wp-015.png
Simple Calendar の「Add New」をクリック。

20160210wp-016.png
この画面でカレンダーの名前を入力する。

  • 赤い枠で通常のカレンダーまたは共有カレンダーを選択できる。
  • 青い枠で「グリッド表示」または「リスト表示」を選択できる。
  • ピンクの枠をクリックするとカレンダーの見た目など、いろいろ設定できる。
    (ドキュメントを見て下さい。)
  • 緑の枠内のショートコードを固定ページや投稿画面で使用するので覚えておくこと。

20160210wp-017.png
試しに固定ページにショートコードを貼ってみる。

20160210wp-018.png
ウィジェット画面に行くと、「Simple Calendar」というウィジェットがあるので、それを画面右にドラッグして利用する。


相当いい加減な覚え書きだが、完成すると下記のようなカレンダーができあがる。

デフォルトでは WordPress テーマによって見栄えが変わるようです。

カレンダーのテーマは「Dark」と「Light」が選択できます。
あと、「本日」の日付部分の背景色および枠線と「イベントがある日」の日付部分の背景色を選択できます。

もっとカスタマイズしたい場合はソースの CSSセレクタを読み取ってスタイルを編集して下さい、と言う仕様だと思います。

カレンダー表示の挙動も選択できるので、楽しいプラグインです。

月表示と予定表示を利用したい方には、便利なプラグインではないでしょうか。

LINEで送る
このエントリーを Google ブックマーク に追加
[`yahoo` not found]
GREE にシェア

This entry was posted in WordPress and tagged , , , , , . Bookmark the permalink.

One Response to Simple Calendar – Googleカレンダーを WordPress で利用する

  1. Pingback: gcalendar-wrapper – Googleカレンダーを WordPress で利用する | あんとんさんち

コメントを残す

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