LoginSignup
2
2

More than 5 years have passed since last update.

[Wordpress]プラグイン無し。当月+翌月など任意の月のGoogleカレンダーを挿入する方法

Posted at

WordPressの記事や固定ページ内に、当月を含む複数月のGoogleカレンダーを表示させる方法ログ。
Googleカレンダーと連動してカレンダーを管理・表示させるプラグインはいくつかあるものの、今回はプラグイン無しで実現させたかったので、ショートコードを作成して対応することにしました。

ちなみに…
Googleカレンダーの設定画面からWebページ埋め込み用のコードが取得できるので、そのまま任意の場所に貼り付けてももちろんOKなのですが、それだと当月分しか表示されません。

当月・翌月・翌々月といった複数月を表示させたい場合に今回の方法が役立つと思います。

仕様

  • 指定した月(複数月も可)のGoogleカレンダーを任意の箇所に挿入できる
  • カレンダーはひと月単位。
  • Googleカレンダーの埋め込みコードを利用してインラインフレームで表示
  • デザインはGoogleカレンダーの仕様そのままなのでイケてない

方法

ショートコードを設定

function.phpに以下のコードを追加します。
※function.phpの編集に慣れていない方は、function.phpの最終行以降に追加しましょう。(途中に挿入したりしない)

/* Googleカレンダー表示用ショートコード */
function fxCalendar($atts){ 
    extract(shortcode_atts(array(
        "m" =>0,
        "cal_id" =>null
    ),$atts));

    /* 月を指定するための処理 */
    $count = "+" .$m . "month" ;
    $year  = date("Y",strtotime(date("Y-m-01").$count));
    $month = date("n",strtotime(date("Y-m-01").$count));

    /* 月の一日と末日を取得してひと月単位で表示させる */
    /* うるう年の判定 */
    if (($year % 4 == 0 && $year % 100 != 0) || $year % 400 == 0) {
        $Lyear = true;  /* うるう年 */
    } else {
        $Lyear = false; /* うるう年じゃない */
    }
    /* 末日を定義 */
    /* 31日まである月 */
    $m_days31 = array (1,3,5,7,8,10,12);

    /* 30日までの月 */
    $m_days30 = array (4,6,9,11);

    if (in_array($month,$m_days31 )) {
        $lastday = "31" ;
    } else if (in_array($month,$m_days30 )){
        $lastday = "30" ;
    } else if($month == 2) { /* 2月 */
        if($Lyear == true){
            $lastday = "29" ;
        } else {
            $lastday = "28" ;
        }
    }

    $Ym = date("Ym",strtotime(date("Y-m-01"). $count ));
    $period = $Ym . "01" . "/" . $Ym . $lastday ;

    /* 出力するソースコードの生成 */
    $and = "&";

    return
        '<iframe src="https://www.google.com/calendar/embed?'
        .'src='.$cal_id.$and                        //カレンダーが決まっている(一個しかない)場合はそのままカレンダーIDを記入した方が楽です
        .'showTitle=0'.$and                         //▲タイトル非表示
        .'showNav=0'.$and                           //▲ナビゲーション非表示
        .'showDate=0'.$and                          //▲年月非表示
        .'showPrint=0'.$and                         //▲印刷アイコン非表示
        .'showTabs=0'.$and                          //▲タブ非表示
        .'showCalendars=0'.$and                     //▲カレンダーリスト非表示
        .'showTz=0'.$and                            //▲タイムゾーン非表示
        .'wkst=2'.$and                              //▲週の開始曜日(1=日曜、2=月曜、7=土曜)
        .'bgcolor=%23'.'ccc'.$and                   //▲背景色
        .'color=%23'.'8D6F47'.$and                  //▲文字色
        .'&ctz=Asia/Tokyo&dates=' . $period . '"'   //タイムゾーン=日本
        .' style="border : solid 1px #ccc"'         //▲スタイルシート
        .' width="800"'                             //▲横幅(px)
        .' height="600"'                            //▲高さ(px)
        .' frameborder="0" scrolling="no"></iframe>'; //ここは必要なので消さないでね
}
add_shortcode("GoogleCalendar","fxCalendar"); //前者がショートコードなので分かりやすい名前にしましょう。

/* 
    ▲は任意項目なので、不必要な場合は行ごとに削除してください。
    ただし $and や ダブルクォーテーション("")などが不足するとうまく表示されませんのでご注意ください。
*/

これで下準備が整いました。

記事や固定ページにショートコードを挿入

記事や固定ページの編集画面で編集方法を「テキスト」に設定し、カレンダーを表示させたい箇所に以下のショートコードを挿入してください。

[GoogleCalendar m="0" cal_id="カレンダーID"]

m="x" が、月の指定になります。0=当月、1=翌月、2=再来月、12=来年の当月
cal_id="カレンダーID"には、表示させたいカレンダーIDを記入します。

カレンダーIDの確認方法

  1. Googleカレンダーにログインして右上の設定ボタン(歯車アイコン)をクリックし、プルダウンメニューの中から「設定」をクリック
  2. 切り替わったカレンダー設定ページの、左上のタブメニューから「カレンダー」をクリック
  3. 一覧表示されたカレンダーの中から、表示したいカレンダー名をクリック
  4. 「カレンダーのアドレス」に表示されているカレンダーID【xxxxx@group.calendar.google.com】という文字列がカレンダーIDになります

↑の方法で確認できたカレンダーIDをコピーして、ショートコードの cal_id 部分に記入してください。
※カレンダーは「一般公開」されている必要があります。
 Googleカレンダーを一般公開する方法はこちら

ショートコード入力例

今月のカレンダー

[GoogleCalendar m="0" cal_id="2i7smciu430uh0mv3i0qmd8iuk@group.calendar.google.com"]

来月のカレンダー

[GoogleCalendar m="1" cal_id="2i7smciu430uh0mv3i0qmd8iuk@group.calendar.google.com"]

来年の今月のカレンダー

[GoogleCalendar m="12" cal_id="2i7smciu430uh0mv3i0qmd8iuk@group.calendar.google.com"]

※上記のカレンダーIDは例として「二十四節気・雑節(国立天文台暦計算室)」のカレンダーIDを使用しています。

以上です。

ページごとに表示する月を変えたい場合や、当月を基準に未来のカレンダーも表示させたい場合には、このショートコードを設定しておくと便利です。

2
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2