WordPressの横型カレンダーの編集

以前に紹介したWordPressの横型カレンダーにHorizontal Calendarプラグインってのがあります。

曜日の表示がないのがちょっと寂しかったので、カレンダーの位置修正と一緒に

各曜日を表示できるようにチャレンジしてみる。

WordPress設定で最初の曜日を月曜日に設定し表示させたい場所にタグを追加し

スタイルシート

  • wp-calendar-horizontal(カレンダー全体を囲むp要素)
  • cal-month(今月の月名の部分のspan要素)
  • cal-prev-month(前月の月名の部分のspan要素)
  • cal-next-month(次月の月名の部分のspan要素)
  • today(今日の日付の部分のspan要素)

また、要素によっては以下のクラスを割り当てます。

  • saturday(土曜日の日付のspan要素)
  • sunday(日曜日の日付のspan要素)

を使用し編集できるようになってます。

horizontal_calendar.phpファイルを修正

WPTP-Chocolateテーマ用とし修正ですが、他のテーマと合わないのは位置修正部分ぐらいなので

ほとんどのソースはそのまま使えると思います。

各曜日のソースは既存のソース一部を利用して表示させ

カレンダーの位置はテーブルを使って修正。

76行から最後までがカレンダー表示部分になるのでこの範囲に手を加えます。
以下が76行からの全ソース

	echo "<div id=\"wp-calendar-horizontal\">";
echo '<table align="right"><tr><td class="month" colspan="15">';
	if ($previous) {
		echo "\t<span id=\"cal-prev-month\"><a href=\"" .
		get_month_link($previous->year, $previous->month) . '" title="' . sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($previous->month),
			date('Y', mktime(0, 0 , 0, $previous->month, 1, $previous->year))) . '">&laquo; ' . $wp_locale->get_month_abbrev($wp_locale->get_month($previous->month)) . "</a></span>\n";
	}

	echo "\t<span id=\"cal-month\">" . date('Y', $unixmonth) . ' ' . $wp_locale->get_month($thismonth) . "</span>\n";

	// Get days with posts
	$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);
	if ( $dayswithposts ) {
		foreach ( $dayswithposts as $daywith ) {
			$daywithpost[] = $daywith[0];
		}
	} else {
		$daywithpost = array();
	}



	if ( strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'camino') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'safari') )
		$ak_title_separator = "\n";
	else
		$ak_title_separator = ', ';

	$ak_titles_for_day = array();
	$ak_post_titles = $wpdb->get_results("SELECT post_title, DAYOFMONTH(post_date) as dom "
		."FROM $wpdb->posts "
		."WHERE YEAR(post_date) = '$thisyear' "
		."AND MONTH(post_date) = '$thismonth' "
		."AND post_date < '".current_time('mysql')."' "
		."AND post_type = 'post' AND post_status = 'publish'"
	);
	if ( $ak_post_titles ) {
		foreach ( $ak_post_titles as $ak_post_title ) {
				if ( empty($ak_titles_for_day['day_'.$ak_post_title->dom]) )
					$ak_titles_for_day['day_'.$ak_post_title->dom] = '';
				if ( empty($ak_titles_for_day["$ak_post_title->dom"]) ) // first one
					$ak_titles_for_day["$ak_post_title->dom"] = str_replace('"', '&quot;', wptexturize($ak_post_title->post_title));
				else
					$ak_titles_for_day["$ak_post_title->dom"] .= $ak_title_separator . str_replace('"', '&quot;', wptexturize($ak_post_title->post_title));
		}
	}

echo "</td>\n";


echo '<td colspan="20" align="right">';
	if ($next) {
		echo "\t<span id=\"cal-next-month\"><a href=\"" .
		get_month_link($next->year, $next->month) . '" title="' . sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($next->month),
			date('Y', mktime(0, 0 , 0, $next->month, 1, $next->year))) . '">' . $wp_locale->get_month_abbrev($wp_locale->get_month($next->month)) . ' &raquo;</a></span>' ."\n";
	}
echo "</td>";
echo '<td width="10%"></td>';
echo "</tr><tr>\n";


	$daysinmonth = intval(date('t', $unixmonth));
	for ( $day = 1; $day <= $daysinmonth; ++$day ) {
echo "<td>";
		if ( 0 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">月';
		}
		else if ( 1 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">火';
		}
		else if ( 2 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">水';
		}
		else if ( 3 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">木';
		}
		else if ( 4 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">金';
		}
		else if ( 5 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "w-saturday">土';
		}
		else if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "w-sunday">日';
		}
		echo "</span></td>\n";

	}

echo "</tr><tr>\n";

	$daysinmonth = intval(date('t', $unixmonth));
	for ( $day = 1; $day <= $daysinmonth; ++$day ) {
echo "<td>";
		if ( 5 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
			$span_class = ' class="saturday"';
		}
		else if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
			$span_class = ' class="sunday"';
		}
		else {
			$span_class = '';
		}
		if ( $day == gmdate('j', (time() + (get_option('gmt_offset') * 3600))) && $thismonth == gmdate('m', time()+(get_option('gmt_offset') * 3600)) && $thisyear == gmdate('Y', time()+(get_option('gmt_offset') * 3600)) )
			echo "\t" . '<span id="today">';
		else
			echo "\t<span${span_class}>";
		if ( in_array($day, $daywithpost) ) // any posts today?
				echo '<a href="' . get_day_link($thisyear, $thismonth, $day) . "\" title=\"$ak_titles_for_day[$day]\">$day</a>";
		else
			echo $day;
		echo "</span></td>\n";

	}

echo "</td></tr></table>\n";
	echo "</div>\n";

	$output = ob_get_contents();
	ob_end_clean();
	echo $output;
	$cache[ $key ] = $output;
	wp_cache_set( 'get_calendar_horizontal', $cache, 'calendar' );
}
?>

青が変更箇所で赤が追加または移動です。

簡単に説明

青のdivタグはもともとpタグでした。その後tableタグで表示部分を囲っています。

カレンダーの横位置はテーブルタグ内にあるダミーで設置しているセルの大きさで決めるようにしています。

echo '<td colspan="20" align="right">';
	if ($next) {
		echo "\t<span id=\"cal-next-month\"><a href=\"" .

数値20を大きくすると左へ行くと思います。

テーブルの1行目を月の表示にするため

前月や今月の表示部分の後に次月表示部分

	if ($next) {
		echo "\t<span id=\"cal-next-month\"><a href=\"" .
		get_month_link($next->year, $next->month) . '" title="' . sprintf(__('View posts for %1$s %2$s'), $wp_locale->get_month($next->month),
			date('Y', mktime(0, 0 , 0, $next->month, 1, $next->year))) . '">' . $wp_locale->get_month_abbrev($wp_locale->get_month($next->month)) . ' &raquo;</a></span>' ."\n";
	}
	echo "</p>\n";

を移動させtdタブで囲んでいる。

テーブルの2行目は曜日を並べるために日付を表示しているソースを利用し

	$daysinmonth = intval(date('t', $unixmonth));
	for ( $day = 1; $day <= $daysinmonth; ++$day ) {
echo "<td>";
		if ( 0 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">月';
		}
		else if ( 1 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">火';
		}
		else if ( 2 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">水';
		}
		else if ( 3 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">木';
		}
		else if ( 4 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "weekday">金';
		}
		else if ( 5 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "w-saturday">土';
		}
		else if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
		echo '<span class = "w-sunday">日';
		}
		echo "</span></td>\n";

	}

を作成しtrタグで囲んでいます。

以上のソースや以下のソース

	$daysinmonth = intval(date('t', $unixmonth));
	for ( $day = 1; $day <= $daysinmonth; ++$day ) {
		if ( 5 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
			$span_class = ' class="saturday"';
		}
		else if ( 6 == calendar_week_mod(date('w', mktime(0, 0 , 0, $thismonth, $day, $thisyear))-$week_begins) ) {
			$span_class = ' class="sunday"';
		}
		else {
			$span_class = '';
		}
		if ( $day == gmdate('j', (time() + (get_option('gmt_offset') * 3600))) && $thismonth == gmdate('m', time()+(get_option('gmt_offset') * 3600)) && $thisyear == gmdate('Y', time()+(get_option('gmt_offset') * 3600)) )
			echo "\t" . '<span id="today">';
		else
			echo "\t<span${span_class}>";
		if ( in_array($day, $daywithpost) ) // any posts today?
				echo '<a href="' . get_day_link($thisyear, $thismonth, $day) . "\" title=\"$ak_titles_for_day[$day]\">$day</a>";
		else
			echo $day;
		echo "</span>\n";

	}

が日付を表示するソースなどとわかれば後は位置関係と

スタートする曜日の収得方法だけです。

style.cssファイルの修正

スタイルシートも修正し以下のようにしてます。

#wp-calendar-horizontal {
	font-family: 'Georgia', sans-serif, Verdana, "Times New Roman", Times, serif;
	float: left;
	width: 922px;
	background: url(images/content.jpg) repeat-y;
	position: relative;
	margin : 0;
	padding : 3px 0;
	font-size: 14px;
}
#wp-calendar-horizontal .weekday {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
	color : #333333;
}
#wp-calendar-horizontal .w-saturday {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
	color : #0000ff;
}
#wp-calendar-horizontal .w-sunday {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
	color : #ff0000;
}
#wp-calendar-horizontal a {
	color : #393328;
	background : #eeeeee;
}
#wp-calendar-horizontal a:hover {
	color : #ffffff;
	background : #393328;
}
#wp-calendar-horizontal .saturday {
	color : #bbbbff;
}
#wp-calendar-horizontal .saturday a:link,
#wp-calendar-horizontal .saturday a {
	color : #0000ff;
}
#wp-calendar-horizontal .sunday {
	color : #ffbbbb;
}
#wp-calendar-horizontal .sunday a:link,
#wp-calendar-horizontal .sunday a {
	color : #ff0000;
}
#today {
	border : 2px solid #0000aa;
}
td.month {
color: #222222;
}

赤が独自に付け加えた要素です。

あまり美しいソースにはなってないかもですが。

コメントを残す

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