東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

デザイン事務所ダウンアンダー

営業
10:00-
19:00

未来カレンダー(イベントカレンダー)の作り方

     2012/01/09   技術ノート    野村貞次

WordPressでGoogle Calendarのように予定を書き込めるカレンダーを作りたいと思ったのがきっかけです。

サンプルはこちら。

  • 記事を投稿すると、カレンダーにリンクされる。
  • 標準状態では「カレンダーの日付」に「日別アーカイブ」がリンクされる。
  • カレンダーの日付枠内に記事タイトルが表示されるようにしたい。
  • イベントカレンダーなので、「未来の記事(WordPressでは予約投稿)」も表示されるようにしたい。
  • 土日の背景に色をつけたい。
  • 祭日を表示したい(未解決)。

「予約投稿」を無効化して「未来の日付の記事」を公開できるようにする。

WordPressは、記事を投稿すると投稿時点の日時で公開されます。
この「公開日時」未来の日付に書き換えると「更新」ボタンが「予約投稿」ボタンに変わり、記事は公開されなくなってしまいます。

Movabletypeではできるのですが、WordPressは厳格というか融通が利かないと言うか。

この「予約投稿」を無視して「公開」に変えてしまうには、プラグインを使用します。

設定画面はダッシュボードの「設定」にありますが、カテゴリを限定するのでなければ設定の必要はありません。

カレンダーにタイトルを表示する。

プラグインを探しましたが「これは!」というものは見つかりませんでした。

が、「WordPressでイベントカレンダー(my_get_calendar())」という記事を発見。
まさしくやろうとしていることです。

kzさんのサイトは美しく説明も丁寧で、機能追加の際にも参考になる情報が豊富でたいへん助かりました。

当日・土日に記事がある場合に背景に色をつけるため、ソースを改変しました。

土日の背景色を変更する。

これはコアに手を入れないとなりませんでした。

WordPressのカレンダーは<td>タグに曜日のクラスをつけてくれません。

そこでコア(/wordpress/wp-includes/general-template.php)のfunction get_calendar()を修正します。

  • 1200行目あたり。
  • if ( $day == gmdate(‘j’, current_time(‘timestamp’)) && $thismonth == gmdate(‘m’, current_time(‘timestamp’)) && $thisyear == gmdate(‘Y’, current_time(‘timestamp’)) )
    $calendar_output .= ‘<td id="today">’;
  • /*Sunday Saturday Color ここから*/
  • elseif ( calendar_week_mod(date(‘w’, mktime(0, 0 , 0, $thismonth, $day, $thisyear))) % 7 == 0 ) {
  • $calendar_output .= ‘<td class="sunday">’;
  • }
  • elseif ( calendar_week_mod(date(‘w’, mktime(0, 0 , 0, $thismonth, $day, $thisyear))) % 7 == 6 ) {
  • $calendar_output .= ‘<td class="saturday">’;
  • }
  • /*Sunday Saturday Color ここまでを追加*/
  • else
  • $calendar_output .= ‘<td>’;

当日以降の投稿がカレンダーでブロックされる!

ここまでで

  • 未来の投稿を公開できるようになった。
  • カレンダーに投稿タイトルを表示し、記事にリンクできるようになった。
  • 土日に色をつけた。

と、目的を達成したように見えますが、実際にカレンダーを表示すると

  • 未来のカレンダーが表示されるようになった。
  • 記事のある日に何も表示されない。

という状態です。

これは、get_calendar()自体が「今日の日付以降の記事(元々は日付)へのリンクを張らない」という仕様になっているためです。
では、今日の日付を取得している部分を修正すれば良い・・・と思ったのですが、それが分かりにくい。

しかしhttp://www.tomsdimension.de/wp-plugins/no-future-postsに「Calendar Patch」として答えが置かれていました。

このパッチを適用します。

1181行目あたり、

  • $dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date)
  • FROM $wpdb->posts WHERE MONTH(post_date) = ‘$thismonth’
  • AND YEAR(post_date) = ‘$thisyear’
  • AND post_type = ‘post’ AND post_status = ‘publish’
  • AND post_date < ‘" . current_time(‘mysql’) . ‘\”, ARRAY_N);

これを以下のように変更します。

  • $dayswithposts = $wpdb->get_results("SELECT DISTINCT DAYOFMONTH(post_date)
  • FROM $wpdb->posts WHERE MONTH(post_date) = ‘$thismonth’
  • AND YEAR(post_date) = ‘$thisyear’
  • AND post_type = ‘post’ AND post_status = ‘publish’ ", ARRAY_N);

まとめ

上記general-template.phpへのパッチは、WordPressがアップデートされる度に元に戻ってしまいます。

そこでgeneral-template.php内のget_calendar()をコピーして、get_color_calendar()に変更してパッチを当てました。
これをfunctions.phpに貼り付けます。

もちろん、my_get_calendar()でもget_calendarを呼び出す部分をget_color_calendar()を呼び出すように変更しています。

これらの修正をひとまとめにしたファイルがこちらです。

ダウンロードしたファイルを開き、すべてコピーして、wp-content/themes/(使用中のテーマ)/functions.phpの文末にペーストします。

スタイルシート

上のファイルをテーマフォルダにアップロードし、style.cssにて

  • @import "calendar.css";

として読み込んでください。

またはその内容をstyle.css等にコピーしてください。

使い方

  • ページに[get_event_calendar]([]は半角)というショートコードを記入します。
  • またはテンプレート内に<?php my_get_calendar(); ?>と入力します。

投稿にショートコードを入れても動きますが、前後月へのリンクが動作しません。

 

     2012/01/09   技術ノート    野村貞次

Message

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

 こちらの記事も読んで見ましょう

未来カレンダー(イベントカレンダー)の作り方 東京都練馬区。Wordpressはおまかせ。印刷・ホームページなど販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー,2010 All Rights Reserved.

ページ先頭へ