配布しているイベントプラグインでもいいのだけれど、高機能すぎて使いづらいし、イベントが多い日はカレンダーにタイトルがずら～と並んでも・・・
と言うことで、プラグインを作ってみた。
こんな条件
・「イベント（スラッグがevent）」カテゴリーに投稿されたものが対象。
・「○○日～☓☓日まで」のような連日にも対応。
・表示はカレンダー形式でイベントがある日に印がつく。
・印をクリックするとイベントの一覧が表示される。
最低限の機能、いいかげんなCSSなので、実使用するにはカスタマイズが必要。
参考サイト
http://www.webopixel.net/wordpress/343.html
http://shanabrian.com/web/php_calendar.php
http://memo.ark-under.net/memo/718
■カレンダーの表示
カレンダーはショートコードで
[mec_calendar]
と入れると表示されるので、固定ページやウイジェットでもOK。
一覧表示はテンプレートを作ってもいいんだけれど、面倒だったので固定ページに「event-date」スラッグでページを作ってショートコードで表示しています。
[mec_event_date]
一覧の表示がいいかげんなので、カスタマイズが必要。
■投稿画面
jQueryのdatepickerで開始日、終了日を入力
プラグインの構成
my-event-calendar ├ my-event-calendar.php ├ css │ ├ my-event-calendar.css │ └ smoothness │ ├ jquery-ui.min.css │ ├ jquery.ui.datepicker.min.css │ └ images └ js ├ jquery.ui.datepicker-ja.min.js └ jquery.ui.datepicker.min.js
smoothnessは「jQuery UI – ThemeRoller」からダウンロードして必要なものをコピーしてください。
私はsmoothnessを使用していますが、他のテーマの場合は、テーマ名に合わせて変更して下さい。以下のソースも。
■プラグインのソース（my-event-calendar.php）
<?php
/*
Plugin Name: My Event Calendar
Plugin URI: https://webpaprika.com
Description: My Event Calendar
Version: 1.0
Author: webpaprika
Author URI: https://webpaprika.com
*/
/**
* query_var に追加
*/
function add_aws_query_var($vars) {
$vars[] = 'eventdate';
return $vars;
}
add_filter('query_vars', 'add_aws_query_var');
/**
* Widgetでショートコード
*/
add_filter('widget_text', 'do_shortcode');
/**
* CSS追加
*/
function mec_load_stylesheet() {
echo '<link rel="stylesheet" href="'.plugins_url('css/my-event-calendar.css', __FILE__).'" type="text/css" media="all" />';
}
add_action('wp_head', 'mec_load_stylesheet');
/**
* CSS追加（Admin）
*/
function mec_admin_load_stylesheet() {
echo '<link rel="stylesheet" href="'.plugins_url('css/smoothness/jquery-ui.min.css', __FILE__).'" type="text/css" media="all" />';
echo '<link rel="stylesheet" href="'.plugins_url('css/smoothness/jquery.ui.datepicker.min.css', __FILE__).'" type="text/css" media="all" />';
}
add_action('admin_print_styles-post.php', 'mec_admin_load_stylesheet');
add_action('admin_print_styles-post-new.php', 'mec_admin_load_stylesheet');
/**
* JS追加（Admin）
*/
function mec_admin_load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery.ui.datepicker', plugins_url('js/jquery.ui.datepicker.min.js', __FILE__));
wp_enqueue_script('jquery.ui.datepicker-ja', plugins_url('js/jquery.ui.datepicker-ja.min.js', __FILE__));
}
add_action('admin_print_scripts-post.php', 'mec_admin_load_scripts');
add_action('admin_print_scripts-post-new.php', 'mec_admin_load_scripts');
function mec_admin_load_scripts2() {
echo '<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#datepicker").datepicker();
jQuery("#datepicker2").datepicker();
});
</script>';
}
add_action('admin_footer-post.php', 'mec_admin_load_scripts2');
add_action('admin_footer-post-new.php', 'mec_admin_load_scripts2');
/**
* 投稿カスタムフィールド
*/
add_action( 'admin_init', 'event_create' );
function event_create() {
add_meta_box('events_meta', 'イベント期間', 'events_meta_html', 'post');
}
function events_meta_html () {
global $post;
$custom = get_post_custom($post->ID);
if(!empty($custom)) {
$mec_startdate = $custom['mec_startdate'][0];
$mec_enddate = $custom['mec_enddate'][0];
}
echo '<input type="hidden" name="events-nonce" id="events-nonce" value="' . wp_create_nonce( 'events-nonce' ) . '" />';
?>
<div id="event-meta">
<table>
<tr>
<td>開始日：<input size="10" name="mec_startdate" id="datepicker" value="<?php if (isset($mec_startdate)) echo $mec_startdate; ?>" /> ～ 終了日：<input size="10" name="mec_enddate" id="datepicker2" value="<?php if (isset($mec_enddate)) echo $mec_enddate; ?>" /><br />
例）2013-01-01 ※1日だけのイベントは開始日と終了日に同じ日付を入力</td>
</tr>
</table>
</div>
<?php
}
add_action ('save_post', 'save_events');
function save_events($post_id){
global $post;
if ( !wp_verify_nonce( $_POST['events-nonce'], 'events-nonce' )) {
return $post_id;
}
if ( !current_user_can( 'edit_post', $post->ID )) {
return $post_id;
}
$mec_startdate = $_POST['mec_startdate'];
$mec_enddate = $_POST['mec_enddate'];
if (!$mec_enddate) { $mec_enddate = $mec_startdate;}
update_post_meta($post->ID, 'mec_startdate', $mec_startdate);
update_post_meta($post->ID, 'mec_enddate', $mec_enddate);
}
/**
* カレンダー
*/
function my_event_calendar($year=null, $month=null, $eventArray=array()) {
if(empty($year) && empty($month)) {
$year = date("Y");
$month = date("n");
}
// 月末の取得
$l_day = date("j", mktime(0, 0, 0, $month + 1, 0, $year));
// 初期出力
$out = <<<EOM
<h2>{$year}年{$month}月<h2>
<table class="mycalendar">
<tr>
<th class="sun">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="sat">土</th>
</tr>
EOM;
$lc = 0;
// 月末分繰り返す
for ($i = 1; $i < $l_day + 1;$i++) {
// 曜日の取得
$week = date("w", mktime(0, 0, 0, $month, $i, $year));
// 曜日が日曜日の場合
if ($week == 0) {
$out .= '<tr>';
$lc++;
}
// 1日の場合
if ($i == 1) {
if($week != 0) {
$out .= '<tr>';
$lc++;
}
$out .= repeat($week);
}
if ($i == date("j") && $year == date("Y") && $month == date("n")) {
// 現在の日付の場合
$out .= '<td class="today"><span class="num">'.$i;
} else {
// 現在の日付ではない場合
$out .= '<td><span class="num">'.$i;
}
// イベント日
foreach($eventArray as $key => $val) {
$eventdate = date("Y-m").'-'.sprintf("%02d",$i);
if (($key == $i) && $val) { $out .= '<div class="event"><a href="'.get_bloginfo('url').'/event-date/?eventdate='.$eventdate.'">○</a></div>'; }
}
$out .= '</span></td>';
// 月末の場合
if ($i == $l_day) {
$out .= repeat(6 - $week);
}
// 土曜日の場合
if($week == 6) {
$out .= '</tr>';
}
}
if($lc < 6) {
$out .= '<tr>';
$out .= repeat(7);
$out .= '</tr>';
}
if($lc == 4) {
$out .= '<tr>';
$out .= repeat(7);
$out .= '</tr>';
}
$out .= '</table>';
return $out;
}
function repeat($n) {
return str_repeat('<td> </td>', $n);
}
/**
* カレンダーショートコード
*/
function mec_calendar_shortcode() {
$min = date('Y-m-01');
$max = date('Y-m-31');
$wp_query = new WP_Query(
array(
'posts_per_page' => -1,
'post_status' => 'publish',
'category_name' => 'event',
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'mec_startdate',
'value' => array($min, $max),
'compare' => 'BETWEEN',
),
array(
'key' => 'mec_enddate',
'value' => array($min, $max),
'compare' => 'BETWEEN',
)
),
'meta_key' => 'mec_startdate',
'orderby' => 'meta_value',
'order'=>'ASC'
)
);
$eventArray = array();
while ($wp_query->have_posts()) : $wp_query->the_post();
global $post;
$startdate = get_post_meta($post->ID,'mec_startdate');
$enddate = get_post_meta($post->ID,'mec_enddate');
if ($startdate[0] && $enddate[0]) {
if (date("m", strtotime($startdate[0])) == date("m")) {
$sdate = date("j", strtotime($startdate[0]));
} elseif (date("m", strtotime($startdate[0])) <= date("m")) {
$sdate = 1;
} else {
break;
}
if (date("m", strtotime($enddate[0])) == date("m")) {
$edate = date("j", strtotime($enddate[0]));
} elseif (date("m", strtotime($enddate[0])) > date("m")) {
$edate = date("j", mktime(0, 0, 0, date("m")+1, 0, date("Y")));
} else {
break;
}
for ($i=$sdate;$i<=$edate;$i++) {
$eventArray[$i] = 1;
}
} elseif ($startdate[0]) {
$edate = date("j", strtotime($startdate[0]));
$eventArray[$edate] = 1;
}
endwhile;
wp_reset_postdata();
return my_event_calendar(date("Y"), date("m"), $eventArray);
}
add_shortcode('mec_calendar', 'mec_calendar_shortcode');
/**
* 日付でイベント表示ショートコード
*/
function mec_event_date_shortcode() {
global $wp_query;
$out = '';
$eventdate = $wp_query->query_vars['eventdate'];
$out .= '<h1>'.date("Y/n/j", strtotime($eventdate)).'のイベント</h1>';
if ($eventdate) {
$event_query = new WP_Query(
array(
'posts_per_page' => -1,
'post_status' => 'publish',
'category_name' => 'event',
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'mec_startdate',
'value' => $eventdate,
'compare' => '<=',
),
array(
'key' => 'mec_enddate',
'value' => $eventdate,
'compare' => '>=',
)
),
'meta_key' => 'mec_startdate',
'orderby' => 'meta_value',
'order'=>'ASC'
)
);
while ($event_query->have_posts()) : $event_query->the_post();
global $post;
$startdate = get_post_meta($post->ID,'mec_startdate');
$enddate = get_post_meta($post->ID,'mec_enddate');
$out .= '<h2><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></h2>';
$out .= 'イベント開催期間：'.date("Y/n/j", strtotime($startdate[0])).'～'.date("Y/n/j", strtotime($enddate[0]));
$out .= '<p>'.get_the_content().'</p>';
endwhile;
wp_reset_postdata();
}
return $out;
}
add_shortcode('mec_event_date', 'mec_event_date_shortcode');
?>
■CSSのソース（my-event-calendar.css）
/* my event calendar styles */
table.mycalendar {
border-left-color: #999999;
border-top-color: #999999;
border-left-style: solid;
border-top-style: solid;
border-left-width: 1px;
border-top-width: 1px;
padding: 0px;
margin: 0px;
width: 95%;
}
table.mycalendar th {
border-right-color: #999999;
border-bottom-color: #999999;
border-right-style: solid;
border-bottom-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
padding-left: 5px;
padding-bottom: 0px;
padding-right: 5px;
padding-top: 0px;
text-align: center;
font-weight: bold;
font-size: 1em;
margin: 0px;
background-color: #eeeeee;
}
table.mycalendar th.sun {
background-color: #ffcccc;
}
table.mycalendar th.sat {
background-color: #99ffff;
}
table.mycalendar td {
border-right-color: #999999;
border-bottom-color: #999999;
border-right-style: solid;
border-bottom-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
height: 3.5em;
text-align: left;
padding: 5px;
margin: 0px;
vertical-align: top;
}
table.mycalendar td.today {
background-color: #ffff99;
}
table.mycalendar td span.num {
font-size: 0.8em;
}
table.mycalendar td div.event {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
color: red;
font-size: 1.5em;
text-align: center;
padding: 0px;
margin: 0px;
}
/* end of css file */
日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）