WordPress(ワードプレス)でイベント表示するプラグインを使ってみた(Event Calendar3)

最近担当したとあるWordpress案件でイベントページが必要となりまして、いくつかプラグインを試してみたのですが、そのページの要件は以下のとおり。

・イベント実施日をカレンダー上に表示できること
・管理画面から記事の登録日と別にイベント期日の入力ができること
・特定のカテゴリをイベントとして扱うことができる

上記を全て満たし、かつ使いやすいものと考えて検討した結果、Event Calendar3というものが今回の案件にはあっているように思いまして、今回これで実装してみました。以下、サイトでの運用までの諸々です。

インストール

Event Calendar

上記よりダウンロードして、解凍してプラグインフォルダにアップし、有効化すればOKです。

親切な方が日本語化もしてくれています。最新バージョンへの対応は保証されていないと思いますが、今回動作確認した限りでは問題ありませんでした。以下のサイトからDLできますので、languageフォルダに追加します。

WordPressプラグインでイベントスケジュール表示ができる「Event Calendar」 | WordPress & Business メモ

設定

ここで指定したカテゴリの内容が、プラグインで扱われる内容となります。実際に試してみた方が早いと思いますので、その他の設定の細かい説明は割愛します。

表示

テンプレート内への表示は以下のタグを使って行います。

カレンダー表示

<?php ec3_get_calendar(); ?>

挿入した位置にカレンダーを表示します。

リスト表示

指定する引数で表示されるリストの内容が変わります。

▼最新記事を指定件数表示する場合

<?php ec3_get_events(5); ?>

表示結果:イベントの最新記事が5件表示されます。

▼最新記事を指定件数表示する場合

<?php ec3_get_events(3days); ?>

表示結果:本日から3日間内で開催される記事の一覧が表示されます。

ソース見る限りもう少し違うパラメータも渡せそうなんですが、僕が試したのは上の2通り。英語が堪能な方は、同梱のTODO.txtを読めばきっともっと活用できそうですね。

以上で設置は完了です。

注意する点

the_excerpt()と干渉してしまう

かなり重要な注意点なのですが、このプラグイン、the_excerpt()と相性がわるいようです。このプラグインを有効化した時点で、the_excerpt()で表示される内容がthe_content()と同じものとなってしまいます。

結局僕は今回関数を使用せず、$post->post_contentから記事本文を取得してHTMLを削除、任意の文字数でカット、という処理を行うことで回避しました。参考までに、ソースは以下のとおりです。

if($post->post_excerpt){
	the_excerpt();
}else{
	$postcontent = strip_tags($post->post_content);
	echo mb_substr($postcontent,0,100);
	echo ' ...<a href="'.$post->guid.'">続きを読む</a>';
}

$post->post_excerptの中身が入っている場合はそのまま以前通りの処理とし、概要が入力されていない場合は本文を任意の文字数でカットして表示するというthe_excerptを肩代わりするような処理をテンプレ側で行うようにしました。

処理が多少雑

と、プログラマでもない僕が言うべきではないとは思うのですが、このプラグインの中身を今回もあちこちいじってみたところ、同じHTMLソースを吐き出す処理が複数あったりするんです。で、呼んでるfunctionも複数のファイルにまたがってあちこち飛んでるし、なんか優しくないなー・・・と。

例えば、カレンダーに表示する月表示と月遷移のナビゲーション部分なんかは、最初の一回はPHP内に書かれているにも関わらず、遷移した先の処理はjs任せだったりして、同じソースを吐き出す記述がphpとjs内に二箇所あるという・・・これってどうなんでしょう。やり辛いなあと思いました。

カスタマイズの一例

カスタマイズは案件それぞれで色々あるとおもうのですが、今回僕がやったカスタマイズをご紹介。

リスト表示部分はデフォルトだとタイトルとそのリンクのみをざっくり表示して終わりなのですが、内部的にイベント開始日時~終了日時などのデータを持ってはいるので、せっかくだから表示するようにカスタマイズしてみました。

template-functions-new.phpの中の、ec3_get_eventsでリスト部分のhtmlが吐き出されており、デフォルトのリストの記述は以下の通りです。

echo "<ul class='ec3_events'>";
中略(処理が挟みこまれてます)
echo "<li>".ec3_format_str($template_event,$data)."</li>n";
中略(処理が挟みこまれてます)
echo "</ul>n";

これを、以下のように書き直しました。

echo "<dl class='ec3_events'>";
中略(処理が挟みこまれてます)
echo ' <dt>'.ec3_get_start_date('Y/m/d').'〜'.ec3_get_end_date('Y/m/d').'</dt>';
echo ' <dd><a href="'.get_permalink().'">'.get_the_title().'</a></dd>';
中略(処理が挟みこまれてます)
echo "</dl>n";

ec3_get_start_date()とec3_get_end_date()は、このプラグイン内で用意されている関数で、それぞれ開始日時と終了日時を取得できます。フォーマットは、phpのdate関数と同じ指定の仕方でいいみたいです。

元々のソースはfunction化された別処理で整形された内容をまるごと取得するような形ですが、ここで書いちゃったほうが分かりやすいなーと思ったので、日時等を取得する関数を組み合わせて直接リストHTMLをここで吐き出す形にしました。dlタグで日時とタイトルをセットにしてリスト化しています。

これで、以下のような形でリスト化できますので、あとはCSSでふふんふ~んと装飾してやればOKです。

2011/5/18~2011/5/18
「レーザービーム/微かなカオリ」Release!!

ぱらぱらと使ってみての所感を書き殴りましたが、どなたかの参考になれば幸いです。