この記事は公開から3年、最終更新日からも3年経過しています。内容が古くなっている可能性があります。
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
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 |
カレンダーを自作しました
実際に上に表示されています。
仕様概要
仕様概要
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' ); ?>