【WordPress】ウィジェットでなくトップページにそのままイベントカレンダーを表示できるプラグイン

仕事の案件で探していたイベントカレンダー表示用のプラグイン。
条件は以下。もし無ければ作らないといけない。面倒だからありモノを見つけてカスタマイズしたい。

1. サイドのウィジットでなく、トップページに表示が可能。iframeはスマホで表示が崩れるので不可。
2. 期限（開催日）が過ぎたものは自動で表示されなくなる仕様。
   つまり、開催中やこれから始まるイベントと過去のイベントを分けて表示できること。
3. カレンダーだけでなく、リスト表示が可能。

探しまくって、ほぼ条件にピッタリくるプラグインを見つけました。

the (free, open source, php) events calendar WordPress plugin | Modern Tribe Inc.

特徴としては、

1. リスト表示とカレンダー表示に切り替えが可能。
2. イベントを表示する数を指定してのページングが可能。
3. GoogleマップへのリンクやGoogleマップそのものの表示が可能。
4. どの固定ページのテンプレートにイベントカレンダーを当てはめるかの選択が可能。もちろん自分で作ったページ(page-xxx.php)に当てることも可能。
5. 多彩なテンプレートタグが標準装備で、かつcssやjsのカスタマイズも可能なので、表示方法は自由自在。ショートコードは無いので、簡単に作りたい人やWordPress初心者には不向き。企業サイト用にフルカスタマイズが必要だったりする、やりこみ人種向きなプラグイン。

現在では、日本語化ファイルも同封されています。lang/tribe-events-calendar-ja_JAを_JAを取ってアップロードすれば日本語で使えます。

さてでは具体的に見ていきます。

充実したテンプレートタグ

テンプレートタグが非常に充実していてトップページfront-page.phpに割りと自由に表示させることができます。

たとえばこんな感じ。

<!--// The Events Calendar plugin -->
<?php
global $post;
$all_events = tribe_get_events(array(
'eventDisplay'=>'upcoming',
'posts_per_page'=>-1
));

foreach($all_events as $post) {
setup_postdata($post);
?>
<h4>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h4>

<dl>
<dt>期間</dt>
	<dd><?php echo tribe_get_start_date( $post->ID, false, 'Y/m/j(D)' ); ?>から<?php echo tribe_get_end_date( $post->ID, false, 'Y/m/j(D)' ); ?></dd>
<?php if ( tribe_get_organizer_id( $post->ID) ) {  ?>
<dt>リンク</dt>
	<dd><?php echo tribe_get_organizer_link( $post->ID); ?></dd>
<?php } ?>
</dl>

<?php } //endforeach ?>
<?php wp_reset_query(); 
?>

get_post()の使い方が分かる人ならすぐに分かると思います。

サンプルはここに載っています。http://tri.be/support/documentation/the-events-calendar-template-tags-general-functions/#functiontribe_get_events

テンプレートタグの詳細はここに書かれています。Documentation | Modern Tribe Inc.
中段あたりの「The Events Calendar Template Tags & Standard Functions」の項です。

英語ですが書いてあるのが技術的なことなので、WordPressが分かる人なら十分読めます。

子テーマを作るような感じでカスタマイズが可能

子テーマを作るような感じでテーマディレクトリ内に/events/というディレクトリを作り、その中に/wp-content/plugins/the-events-calendar/views/のファイルをコピーすれば、本体をいじることなくリスト表示やカレンダー表示の見た目を変更することが可能です。もちろんcssやjsもコピーしてカスタマイズが可能です。

このあたりに書かれています。http://tri.be/support/documentation/events-calendar-themers-guide/#views

Tips

1. 日本語化を有効にするには、lang/tribe-events-calendar-ja_JAを_JAを取ってアップロードします。ただちょっとおかしいところも散見されますので、自分で.poを作ったほうがいいかも。私は作りました。Poeditを使えば簡単にできます。
2. デフォルトでは住所が欧米風（1丁目、瑞穂区、名古屋市、愛知県みたいになる）で使えないが、テンプレートタグで順番を変えることが可能。例えばsingle.php内で以下のように書けば、郵便番号から始まる日本風表記になる。

   <?php if( tribe_get_zip( get_the_ID() )) : ?>
   〒<?php echo tribe_get_zip( get_the_ID() ); ?>
   <?php endif; ?>
   <?php echo tribe_get_province( get_the_ID() ); //都道府県 ?>
   <?php echo tribe_get_city( get_the_ID() ); //市区町村 ?>
   <?php echo tribe_get_address( get_the_ID() ); //番地 ?>

参考にさせていただいたサイト