Illustration, Graphic design & WordPressのプラグイン「Event Organiser」を導入した際に、終了した過去のイベントを見せたい場合、それが『すでに終了している』のがわかりにくいです。
そこでテンプレートをカスタマイズして、過去イベントについてはタイトル前方に「終了」の文字を表示し、かつ本文直前には「このイベントは終了しています。」と表示されるようにした際の覚え書きです。
以下その手順です。
1.イベント詳細ページのテンプレートを利用中テーマへコピー
イベント詳細ページのテンプレートは wp-content/plugins/event-organiser/templates の中にある single-event.php になります。これを利用中のテーマフォルダの中にコピーしてきます。元のファイルを削除する必要はありません。
2.タイトル表示タグの前に過去イベント判定をさせ、過去なら「終了」文字表示
single-event.php の中にあるタイトル表示タグ↓を探します。
<!-- Display event title --> <h1 class="entry-title"><?php the_title(); ?></h1>
これの直前に、イベントの終了日を取得してその値が現在より小さければ「終了」の文字を表示させるコードを挿入します。
<?php $eventend = eo_get_the_end(); if ( strtotime( 'now' ) > strtotime( $eventend ) ): ?> <span class="event-closed">終了</span> <?php endif;?>
- イベント終了日は eo_get_the_end で取得
- strtotime で英文形式の日付を Unix タイムスタンプに変換する
以下が実装サンプルです。
<!-- Display event title -->
<h1>
<?php
$eventend = eo_get_the_end();
if ( strtotime( 'now' ) > strtotime( $eventend ) ): ?>
<span class="event-closed">終了</span>
<?php endif;?>
<?php the_title(); ?>
</h1>
3.本文直前に過去のイベントである旨のお知らせを表示させる
single-event.php の中にあるコンテント表示タグ↓を探します。
<div class="entry-content"> <!-- Get event information, see template: event-meta-event-single.php --> <?php eo_get_template_part( 'event-meta', 'event-single' ); ?> <!-- The content or the description of the event--> <?php the_content(); ?> </div><!-- .entry-content -->
これの直前に、同じく過去イベントの判定をさせ、終了しているイベントなら終了のお知らせを表示させます。
<?php
$eventend = eo_get_the_end();
if( strtotime( 'now' ) > strtotime( $eventend ) ): ?>
<div class="event-report">
<p>
このイベントは終了しました。
</p>
</div>
<?php endif;?>classは好きなものに変えてください。ちょっと目立つようにCSSでデザインしてあげるといいと思います。
ちなみに上記はこんな感じです。
このイベントは終了しました。
CSSはこんな感じ。
.event-report {
display:inline-block;
border-radius: .2em;
background: #f19149;
color: #fff;
padding: .5em;
margin-bottom: 3em;
}
以上です。
