スタイルシートで
- 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))) . '">« ' . $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('"', '"', wptexturize($ak_post_title->post_title));
else
$ak_titles_for_day["$ak_post_title->dom"] .= $ak_title_separator . str_replace('"', '"', 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)) . ' »</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)) . ' »</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,'ＭＳ Ｐゴシック',sans-serif;
color : #333333;
}
#wp-calendar-horizontal .w-saturday {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'ＭＳ Ｐゴシック',sans-serif;
color : #0000ff;
}
#wp-calendar-horizontal .w-sunday {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Meiryo,Verdana,'ＭＳ Ｐゴシック',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;
}
赤が独自に付け加えた要素です。
あまり美しいソースにはなってないかもですが。
