WordPressでリスト型カレンダー表示機能を追加してみた

WordPressでリスト型カレンダー表示機能を追加してみた

2013年4月25日
Memo

子どもの夜泣きで慢性的睡眠不足なひつじさんです。
以前WordPressで作ったダメ系ライブカレンダーの要望に「カレンダー表示機能を付けて欲しい！」とあり、設置してみました。その設置方法のメモです。
かなり強引なやり方だと思いますが、私の知識ではこのやり方でしか実装できませんでした。もっと勉強したいものです。
その点ご留意のうえご覧ください。

１年以上前の記事です。情報が古くなっている可能性があります。

［Ad］

Contents

やりたいこと・仕様

・カスタムフィールドで追加してある日付を元にカレンダー表示にしたい
・祝祭日も表示したい
・WordPressのdata.phpは使わない
・同じ日にイベントが表示されることもある

投稿日時は投稿日時で使う場合もあるので、data.phpは使用しないやりかたにしました。
カレンダーの表示は固定ページを一つ設けて、そこで大きく表示させます。

コードサンプル

以下のようなやりかたでカレンダー表示しています。
こんな感じのコードを元に、こんなカレンダーができてます。
（※ 2013.8.2 : リンク先が表組み型のカレンダーになっていましたのでリスト型カレンダーに修正しました）

page-calendar.php

<?php
/*
Template Name: カレンダー表示
*/
get_header(); ?>
<!-- main -->
<div id="main">
<?php //'live'というカスタム投稿タイプ呼び出し
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$getY = agv($_GET, 'ey');
$getM = agv($_GET, 'em');
if($getY && $getM){
	$min = $_GET['ey']."年".$_GET['em']."月01日";
	$max = $_GET['ey']."年".$_GET['em']."月31日";
}else{
	$min = date('Y年m月01日');
	$max = date('Y年m月31日');
}
$wp_query = new WP_Query( array(
	'post_type' => 'live',
	'posts_per_page' => -1,
	'paged' => $paged,
	'meta_key'=>'ldate',
	'meta_value'=> array( $min, $max ),
	'meta_compare'=>'BETWEEN',
	'orderby'=>'meta_value',
	'order'=>'ASC'
) );
$eventArray = array();
?>
<?php if (have_posts()) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php //イベントスケジュールを配列に格納
	$eventID = get_permalink();
	$eventTitle = get_the_title();
	$eventDate = get_post_meta($post->ID,'ldate',TRUE);
	$eventPref = get_post_meta($post->ID,'Pref',TRUE);
	preg_match('/\d{2}日/' , $eventDate , $matchDate);
	$eventData = $matchDate[0]."\t".$eventTitle."\t".$eventID."\t".$eventPref."\t";
	array_unshift($eventArray, $eventData);
?>
<?php endwhile; ?>

<?php endif; ?>

<?php
$getY = agv($_GET, 'ey');
$getM = agv($_GET, 'em');
if($getY && $getM){
	$nowYear = $_GET['ey'];
	$nowMon = $_GET['em'];
}else{
	$nowYear = date('Y');
	$nowMon = date('m');
}
$next = strtotime(date("Ymd",strtotime($nowYear.$nowMon."01"))."+1 month");
$next = date("Ymd",$next);
$prev = strtotime(date("Ymd",strtotime($nowYear.$nowMon."01"))."-1 month");
$prev = date("Ymd",$prev);

	echo '<h2>カレンダー表示</h2>';
	echo '<p class="link_prev"><a href="?ey='.substr($prev,0,4).'&amp;em='.substr($prev,-4,2).'">&lt;&lt; '.substr($prev,0,4).'年'.substr($prev,-4,2).'月</a></p>';
	echo '<p class="link_next"><a href="?ey='.substr($next,0,4).'&amp;em='.substr($next,-4,2).'">'.substr($next,0,4).'年'.substr($next,-4,2).'月 &gt;&gt;</a></p>';
	//カレンダー表示
	echo my_event_calendar($nowYear,$nowMon,$eventArray);
	echo '<p class="nextback">';
	echo '<a href="?ey='.substr($prev,0,4).'&amp;em='.substr($prev,-4,2).'">&lt;&lt; '.substr($prev,0,4).'年'.substr($prev,-4,2).'月</a>';
	echo '｜';
	echo '<a href="?ey='.substr($next,0,4).'&amp;em='.substr($next,-4,2).'">'.substr($next,0,4).'年'.substr($next,-4,2).'月 &gt;&gt;</a>';
	echo '</p>';
?>
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

function.php

function my_event_calendar($year, $month, $eventArray){
	if(empty($year) && empty($month)) {
		$year = date("Y");
		$month = date("n");
	}
	//月末の取得
	$l_day = date("j", mktime(0, 0, 0, $month + 1, 0, $year));
	$aday = array("日", "月", "火", "水", "木", "金", "土");
	//祝日の取得
	$holidays = getHolidays($year);
	//初期出力
	$tmp = <<<EOM
<table class="calendar_list">
	<caption>{$year}年{$month}月</caption>
EOM;
	//月末分繰り返す
	for ($i = 1; $i < $l_day + 1;$i++) {
		//曜日の取得
		$week = $aday[date("w", mktime(0, 0, 0, $month, $i, $year))];
		if($i<10){
			$holinum = $year.'-'.$month.'-0'.$i;
		}else{
			$holinum = $year.'-'.$month.'-'.$i;
		}
		$holiday = agv($holidays, $holinum);

		if ($i == date("j") && $year == date("Y") && $month == date("n")) {
			//現在の日付の場合
			$tmp .= "\t".'<tr class="today">';
			if($holiday){$tmp .= '<td class="holiday">'.$i.'</td><td class="holiday">'.$week.'</td>';
			}elseif($week == '日'){$tmp .= '<td class="sun">'.$i.'</td><td class="sun">'.$week.'</td>';
			}elseif($week == '土'){$tmp .= '<td class="sat">'.$i.'</td><td class="sat">'.$week.'</td>';
			}else{$tmp .= '<td>'.$i.'</td><td>'.$week.'</td>';
			}
			$tmp .= '<td class="event">';
			if($holiday){$tmp .= '<span class="holiday">'.$holidays[$holinum].'</span>';}
		} else {
			//現在の日付ではない場合
			$tmp .= "\t";
			if($holiday){
				$tmp .= '<tr class="holiday"><td>'.$i.'</td><td class="holiday">'.$week.'</td>';
				$tmp .= '<td class="event"><span class="holiday">'.$holidays[$holinum].'</span>';
			}elseif($week == '日'){
				$tmp .= '<tr class="sun"><td>'.$i.'</td><td class="sun">'.$week.'</td><td class="event">';
			}elseif($week == '土'){
				$tmp .= '<tr class="sat"><td>'.$i.'</td><td class="sat">'.$week.'</td><td class="event">';
			}else{
				$tmp .= '<tr><td>'.$i.'</td><td>'.$week.'</td><td class="event">';
			}
		}
		if($i<10){$day = "0".$i."日";}else{$day = $i."日";}
		foreach($eventArray as $eventArrayData) {
			$eln = explode("\t", $eventArrayData);
			if($eln[0] == $day){$tmp .= '<a href="'.$eln[2].'">'.$eln[1].'('.$eln[3].')</a>';}
		}
		$tmp .= "</td></tr>\n";
	}
	$tmp .= "</table>\n";

	return $tmp;
}

/* 祝日の取得 */
//Googleカレンダーから祝日を取得
function getHolidays($year) {
	//Googleカレンダーから、指定年の祝日情報をJSON形式で取得するためのURL
	$url = sprintf(
		'http://www.google.com/calendar/feeds/%s/public/full-noattendees?alt=json&%s&%s',
		'japanese__ja@holiday.calendar.google.com',
		'start-min='.$year.'-01-01',
		'start-max='.$year.'-12-31'
	);
	if ( $results = file_get_contents($url) ) {
            $results = json_decode($results, true);
            $holidays = array();
            foreach ($results['feed']['entry'] as $val ) {
                    $date  = $val['gd$when'][0]['startTime'];
                    $week = date('w',strtotime($date));
                    $title = $val['title']['$t'];
                    $holidays[$date] = $title;

                    if( $week == 0) {
                        $nextday = date('Y-m-d',strtotime('+1 day', strtotime($date)));
                        $holidays[$nextday] = '振替休日';
                    }

                    $before_yesterday = date('Y-m-d',strtotime('-2 day', strtotime($date)));

                    if(isset($holidays[$before_yesterday])){
                        $yesterday = date('Y-m-d',strtotime('-1 day', strtotime($date)));
                        $holidays[$yesterday] = '国民の休日';
                    }

            }
            ksort($holidays);
    }
    return $holidays;
}

function agv($array, $key, $default = NULL) {
  return isset($array[$key]) ? $array[$key]: $default;
}

カレンダー表示用テンプレート内で、表示する月のイベントの情報を扱いやすい配列に一度格納。
function.phpのカレンダー表示用関数を叩いて日付の合う場所に配置、というやり方です。

祝祭日の取得は、
・Googleカレンダーから祝日情報を取得。 | almondlab. | Web Design, Graphic Design, CMS, Drupal, Flash
・phpで日本の祝日や振替休日を出力する。 ::: Toro_Unit
を参考にしました。

fnnction.phpのagv()は連想配列でキーがない場合の警告回避対策です。
・連想配列の存在しないキーにアクセスした際のPHP警告を回避する 15:40 … — Bigegg Lab

少しずつではありますが、ダメ系ライブカレンダー、進化してきております。
今度は検索周りを頑張りたいですね ＠・ェ・＠

［Ad］

カテゴリー

タグ

関連記事

一回り成長したいwebデザイナーさん達へ

「くろひつじの書物占い」をリリースしました