Biz Calendar にイベント情報を追加する

WordPressにイベントカレンダーを追加するには、いろいろなプラグインがあります。

All-in-One Event Calendar
The Events Calendar
My Calendar
Event Organiser

なんかがいい感じですが、クライアントさんにお渡しするには、シンプルでわかりやすい必要があります。

ほとんどのイベントカレンダーが日本語化されていないので、そもそもそこがハードルになります。
その点、My Calendarは日本語なんですが、カレンダーそのものは専用ページに出力されるようになっていて、テンプレート内での出力ができなかったりするんですよね。

いろいろ試したのですが、以前からお世話になってる、Biz Calendar さんがシンプルイズベストでやっぱりいいな～と思うのです。

https://wordpress.org/plugins/biz-calendar/
http://residentbird.main.jp/bizplugin/plugins/bizcalendar/

それに、Biz Calender　はウィジェットしか使えない、と思われてますけれど、実はテンプレート中にも配置できます。
たとえば、page.phpなんかに、

<div id='biz_calendar'></div>

1	<div id='biz_calendar'></div>

と書き加えておくと、それがカレンダーに早変わり！（ただし、一つの画面に一つだけしか表示できないので、サイドバーにもBiz Calenderをおいている場合は、どちらかが表示されません。）

見た目もシンプルで、デザインもCSSで上書きすればわりと自由に変更できますし。
でも、イベントは固定ページで人力で作らないといけないので、イベントカレンダーとしてはイマイチ。

というわけで、投稿で「イベント」カテゴリを選択したら、Biz Calendarにリンクが表示されるように、Biz Calendar本体を改造します。

カスタムフィールドの用意

まずは本体改造の前に、カスタムフィールドを用意します。

ここでは、手軽にAdvanced Custom Fields　プラグインを利用することにします。 http://www.advancedcustomfields.com/

作成するカスタムフィールドは、二つ。
まずは、Biz Calenderに表示するイベントのタイトル。
フィールド名はevent-titleで、フィールドタイプはテキストです。

続いて、イベント日をevent-dateというフィールド名で、フィールドタイプはテキストエリアで作成します。フィールドラベルや、ヒントなんかは、適当に入れておきます。位置は、「投稿タイプ　等しい　post」　でOKです。

イベント用のカテゴリの用意

次に、投稿にカテゴリを用意します。名前はイベントで、スラッグはeventとします。

プラグイン本体の編集

さて、プラグインBiz Calendar本体の改造に入ります。
まずは、biz-calendar.php の class BC{ } の中に、以下の関数を追加します。

この関数は、上述で追加したカテゴリの投稿を取得して、追加したカスタムフィールドの値を配列にして返します。

public static function get_event_posts(){
    $cat = get_category_by_slug('event');//eventというスラッグのカテゴリのカテゴリ情報を取得
    $args = array(
        'post_type' => 'post',
        'category' => $cat->term_id,
    );
    $eventposts = get_posts($args);//eventカテゴリの投稿を取得
    $ret = array();
    foreach($eventposts as $epost){
        $eventDate = get_post_meta($epost->ID , 'event-date' , true);//イベント日
        $eventTitle = get_post_meta($epost->ID , 'event-title' , true);//イベントタイトル
        if ($eventTitle){
            $e['title'] = $eventTitle;//イベントタイトル
        }else{
            $e['title'] = $epost->post_title;//イベントタイトルが設定されていなければ、投稿のタイトルを取得
        }
        $e['date'] = $eventDate;
        $e['url'] = get_permalink( $epost->ID );//投稿へのリンクURLを取得
        $ret[] = $e;//イベント日とタイトルとURLごとで配列に格納
    }
    return $ret;
}

public static function get_event_posts(){

$cat = get_category_by_slug('event');//eventというスラッグのカテゴリのカテゴリ情報を取得

$args = array(

'post_type' => 'post',

'category' => $cat->term_id,

);

$eventposts = get_posts($args);//eventカテゴリの投稿を取得

$ret = array();

foreach($eventposts as $epost){

$eventDate = get_post_meta($epost->ID , 'event-date' , true);//イベント日

$eventTitle = get_post_meta($epost->ID , 'event-title' , true);//イベントタイトル

if ($eventTitle){

$e['title'] = $eventTitle;//イベントタイトル

}else{

$e['title'] = $epost->post_title;//イベントタイトルが設定されていなければ、投稿のタイトルを取得

}

$e['date'] = $eventDate;

$e['url'] = get_permalink( $epost->ID );//投稿へのリンクURLを取得

$ret[] = $e;//イベント日とタイトルとURLごとで配列に格納

}

return $ret;

}

次に、同じくbiz-calendar.php の localize_js() 関数に、

$option["events"] =self::get_event_posts();

1	$option["events"] =self::get_event_posts();

を追加します。5行目です。

 ]public static function localize_js(){
	$option = self::get_option();
	$option["plugindir"] = plugin_dir_url( __FILE__ );
	$nh= self::get_national_holiday();
	$option["events"] =self::get_event_posts();
	$option["national_holiday"] = $nh["national_holiday"];
	wp_localize_script( 'biz-cal-script', 'bizcalOptions', $option );
}

]public static function localize_js(){

$option = self::get_option();

$option["plugindir"] = plugin_dir_url( __FILE__ );

$nh= self::get_national_holiday();

$option["events"] =self::get_event_posts();

$option["national_holiday"] = $nh["national_holiday"];

wp_localize_script( 'biz-cal-script', 'bizcalOptions', $option );

}

こんどは、calendar.jsを編集します。

まずは、var getDateType = function(date, day)　に以下の6-12行目を追加します。
ここで、カレンダーの日付の日に、投稿で設定されたイベントがあるかどうかを取得します。
もともと、Biz Calender　にはイベントを設定できる機能があるのですが、投稿のイベントカテゴリを優先するようにしています。

 ]var getDateType = function(date, day) {

	var fulldate = getFormatDate(currentSetting.year, currentSetting.month,
			date);

	//　投稿のイベント日
	var events = currentSetting.options.events;
	for(var i=0; i<events.length; i++){
	    if (events[i]["date"].indexOf(fulldate) != -1){
	        return "EVENTDAY";
	    }
	}

	// イベント日
	if (currentSetting.options.eventdays.indexOf(fulldate) != -1) {
		return "EVENTDAY";
	}
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・

]var getDateType = function(date, day) {

var fulldate = getFormatDate(currentSetting.year, currentSetting.month,

date);

//　投稿のイベント日

var events = currentSetting.options.events;

for(var i=0; i<events.length; i++){

if (events[i]["date"].indexOf(fulldate) != -1){

return "EVENTDAY";

}

// イベント日

if (currentSetting.options.eventdays.indexOf(fulldate) != -1) {

return "EVENTDAY";

}

　　　　　　　　　　　　　　　・

次に、var getDateTag = function(date, day) に以下の7～18行目を追加します。
ここで、カレンダーの日付と投稿のイベントが紐付けられます。

 ]var getDateTag = function(date, day) {

	if (date == undefined || date == "") {
		return "";
	}

	var fulldate = getFormatDate(currentSetting.year, currentSetting.month,date);
	var events = currentSetting.options.events;
	var info = "";
	for(var i=0; i<events.length; i++){
		if (events[i]["date"].indexOf(fulldate) != -1){
			if (!info) { info += date; }
				info += "<br /><a class='cal-event' href='" + events[i]["url"] + "'>" + events[i]["title"] + "</a>";
			}
		}
		if (info != "") {
			return info;
		}
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　・

]var getDateTag = function(date, day) {

if (date == undefined || date == "") {

return "";

}

var fulldate = getFormatDate(currentSetting.year, currentSetting.month,date);

var events = currentSetting.options.events;

var info = "";

for(var i=0; i<events.length; i++){

if (events[i]["date"].indexOf(fulldate) != -1){

if (!info) { info += date; }

info += "<br /><a class='cal-event' href='" + events[i]["url"] + "'>" + events[i]["title"] + "</a>";

}

if (info != "") {

return info;

}

　　　　　　　　　　　　　　　・

これで、投稿で作成した記事をイベントとしてカレンダーに表示させることが出来るようになります。
（CSSもいじってます。）

実際に投稿してみる

投稿をひらくと、以下の項目が出てきます。

イベント日は、2015-07-07 のように半角で年月日を　-　で区切って入力します。
15-7-7　のように、西暦二桁を省略したり、　0 を省くことは出来ません。
複数行で入力することで、複数日を設定することが出来ます。
イベントタイトルを設定すると、そのタイトルが投稿ページヘのリンク付きで、カレンダーに表示されます。

最後に

本当は、Biz Calendarにフックがついていたら利用したかったのですが、なかったので本体そのものを改造することに。
Biz Calenderにフック追加してもらうか、いっそ、イベントを表示できるようにしてくれたらなぁ。なんて思いつつ。

当然ですが、プログラムそのものを改変してしまうので、プラグイン本家のアップグレードで上書きされてしまう点に注意が必要です。
なので、プラグインのフォルダ名そのものを、biz-calendar 以外に変えてしまうほうが安全ですね。