この記事は公開から2年、最終更新日からも2年経過しています。内容が古くなっている可能性があります。

2021年07月

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

カレンダーを自作しました

実際に上に表示されています。

仕様概要

WordPressで実装(本ページ)
functions.phpに実装し、ショートコード[disp_calendar]にて表示可能
1900/1月から2999年12月まで
クエリパラメータなしの場合は今月のカレンダー https://www.nakamurayuji.com/archives/23145
クエリパラメータで年月指定可能 https://www.nakamurayuji.com/archives/23145?yyyy=2053&mm=4
次の月、前の月へのリンク表示
全曜日にclass付与
日曜日は赤文字
土曜日は青文字

プログラム

functions.php

function add_query_vars_filter( $vars ){
    $vars[] = 'yyyy';
    $vars[] = 'mm';
    return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );

//URLクエリパラメータから$year,$monthを取得する
function get_year_month() {
	$current_year = date('Y');
	$year = (int)get_query_var('yyyy' , $current_year);
	if ($year < 1900 || $year > 2999) {$year = $current_year;}
	$current_month = date('n');
	$month = (int)get_query_var('mm' , $current_month);
	if ($month <1 || $month > 12) {$month = $current_month;}
	return array($year , $month);
}

function display_calendar($year , $month) {

	date_default_timezone_set('Asia/Tokyo');
	if ($month < 10) {$month = '0' . $month;}

	$first_day_of_the_week = date('w', strtotime('first day of ' . $year . '-' . $month));	//月初の曜日
	$last_date = date('d', strtotime('last day of ' . $year . '-' . $month));	//末日の日
	$last_day_of_the_week = date('w', strtotime('last day of ' . $year . '-' . $month));	//末日の曜日

	$date_str = [];
	if ($first_day_of_the_week > 0) {	//月初が日曜日でない場合、カレンダー空白
		for ($i = 1; $i <= $first_day_of_the_week; $i++) {
			$date_str[] = '';
		}
	}
	//日付
	for ($day = 1; $day <= $last_date; $day++) {
		$date_str[] = $day;
	}
	if ($last_day_of_the_week < 6) {	//月末が土曜日でない場合、カレンダー空白
		for ($i = $last_day_of_the_week; $i < 6; $i++) {
			$date_str[] = '';
		}
	}

	$calendar_html = '';
	$caption = '<caption>' . $year . '年' . $month . '月</caption>';

	$thead = <<<THEAD
		<thead>
			<tr>
				<th class="sun">日</th>
				<th class="mon">月</th>
				<th class="tue">火</th>
				<th class="wed">水</th>
				<th class="thu">木</th>
				<th class="fri">金</th>
				<th class="sat">土</th>
			</tr>
		</thead>
THEAD;

	//カレンダーの中味を作成
	$tr_tds = '';
	foreach ($date_str as $key => $value) {
		if ($key % 7 === 0) {$tr_tds = $tr_tds . '<tr><td class="sun">' . $value . '</td>';}
		if ($key % 7 === 1) {$tr_tds = $tr_tds . '<td class="mon">' . $value . '</td>';}
		if ($key % 7 === 2) {$tr_tds = $tr_tds . '<td class="tue">' . $value . '</td>';}
		if ($key % 7 === 3) {$tr_tds = $tr_tds . '<td class="wed">' . $value . '</td>';}
		if ($key % 7 === 4) {$tr_tds = $tr_tds . '<td class="thu">' . $value . '</td>';}
		if ($key % 7 === 5) {$tr_tds = $tr_tds . '<td class="fri">' . $value . '</td>';}
		if ($key % 7 === 6) {$tr_tds = $tr_tds . '<td class="sat">' . $value . '</td></tr>';}
	}

	//カレンダーを出力
	$calendar_html = '<table class="original_calendar">' . $caption . $thead . '<tbody>' . $tr_tds . '</tbody></table>';
	echo $calendar_html;

	//前月、翌月カレンダーのリンク出力
	$next_month_yyyy = ($month == 12) ? ($year + 1) : $year;
	$next_month_mm = ($month == 12) ? 1 : ($month + 1);
	$prev_month_yyyy = ($month == 1) ? ($year - 1) : $year;
	$prev_month_mm = ($month == 1) ? 12 : ($month - 1);
	echo '<div class="clearfix">';
	if ($prev_month_yyyy >= 1900) {
		echo '<p class="prev_month">' . '<a href = "' . get_permalink() . '?yyyy=' . $prev_month_yyyy . '&mm=' . $prev_month_mm . '">' . '<-前の月</a></p>';
	}
	if ($next_month_yyyy < 3000) {
		echo '<p class="next_month">' . '<a href = "' . get_permalink() . '?yyyy=' . $next_month_yyyy . '&mm=' . $next_month_mm . '">' . '次の月-></a></p>';
	}
	echo '</div>';
	
}

//クエリ取得した上でカレンダーを表示するショートコード定義
function display_calendar_shortcode() {
	list($year , $month) = get_year_month();
	display_calendar($year , $month);
}
add_shortcode( 'disp_calendar' , 'display_calendar_shortcode' );
?>