WordPress

2019.09.10

WPプラグイン:Event Organiserで過去イベントのみに「終了」と表示させる

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"><?php _e('終了', 'DeJaK_2019'); ?></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;
}

 

以上です。


関連記事

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。