Event Organiserプラグインのイベント一覧表示には、サムネイル画像がなくて少し寂しい見た目になってしまいます。

ちょっとPHPコードを追加するだけで、イベントのアイキャッチ画像を一覧表示に追加することができますよ。コピペでOK。

Event Organiserプラグインとは？

Event Organiserプラグインとは、WordPressサイト内で、イベント情報を丸ごと管理できちゃうプラグインです。

Event Organiserプラグインでできることについては、こちらの記事に詳しく触れています。

Event Organiserプラグインでこれから開催するイベントと過去イベントを分けて表示する方法

Event Organiserプラグインでイベント一覧にサムネイル画像を追加するための手順

1. Event Organiserプラグインフォルダ内からshortcode-event-list.phpファイルをダウンロード
2. shortcode-event-list.phpファイルにコピペでコードを追加
3. 使用中のテーマフォルダ内に手順2で追加したshortcode-event-list.phpファイルをアップロード

Event Organiserプラグインフォルダ内からshortcode-event-list.phpファイルをダウンロード

サーバー上のEvent Organiserプラグインフォルダ内にあるtemplatesフォルダから、shortcode-event-list.phpファイルを見つけてダウンロードします。

shortcode-event-list.phpファイルにコピペでコードを追加

手順1でダウンロードしたファイル内のサムネイル画像を表示したい部分に次のコードをコピー＆ペーストします。

<?php if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'thumbnail', array( 'class' => 'attachment-thumbnail eo-event-thumbnail' ) );
} ?>

実際のshortcode-event-list.phpファイル内は次のようになりました。

赤字部分は、サムネイル画像を表示させるためのコードです。
イベント日時や詳細、カテゴリー等も表示させたい場合は、青字部分をコピペして使ってください。

<?php
/**
* Event List Widget: Standard List
*
* The template is used for displaying the [eo_event] shortcode *unless* it is wrapped around a placeholder: e.g. [eo_event] {placeholder} [/eo_event].
*
* You can use this to edit how the output of the eo_event shortcode. See http://docs.wp-event-organiser.com/shortcodes/events-list
* For the event list widget see widget-event-list.php
*
* For a list of available functions (outputting dates, venue details etc) see http://codex.wp-event-organiser.com/
*
***************** NOTICE: *****************
* Do not make changes to this file. Any changes made to this file
* will be overwritten if the plug-in is updated.
*
* To overwrite this template with your own, make a copy of it (with the same name)
* in your theme directory. See http://docs.wp-event-organiser.com/theme-integration for more information
*
* WordPress will automatically prioritise the template in your theme directory.
***************** NOTICE: *****************
*
* @package Event Organiser (plug-in)
* @since 1.7
*/
global $eo_event_loop,$eo_event_loop_args;

//The list ID / classes
$id = ( $eo_event_loop_args['id'] ? 'id="' . $eo_event_loop_args['id'] . '"' : '' );
$classes = $eo_event_loop_args['class'];

?>

<?php if ( $eo_event_loop->have_posts() ) : ?>

<ul <?php echo $id; ?> class="<?php echo esc_attr( $classes );?>" >

<?php while ( $eo_event_loop->have_posts() ) : $eo_event_loop->the_post(); ?>

<?php
//Generate HTML classes for this event
$eo_event_classes = eo_get_event_classes();

//For non-all-day events, include time format
$format = eo_get_event_datetime_format();
?>

<li class="<?php echo esc_attr( implode( ' ',$eo_event_classes ) ); ?>" >
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'thumbnail', array( 'class' => 'attachment-thumbnail eo-event-thumbnail' ) );
} ?>
<a href="<?php echo eo_get_permalink(); ?>"><?php the_title(); ?></a><p class="tab-item-date"><i class="fa fa-clock-o"></i><?php echo __( '','eventorganiser' ) . ' ' . eo_get_the_start( $format ); ?></p>			
<div class="eo-event-content" itemprop="description"><?php the_excerpt(); ?></div>
<p class="tab-item-category"><?php echo eo_get_event_meta_list();?></p></li>

<?php endwhile; ?>

</ul>

<?php elseif ( ! empty( $eo_event_loop_args['no_events'] ) ) : ?>

<ul id="<?php echo esc_attr( $id );?>" class="<?php echo esc_attr( $classes );?>" >
<li class="eo-no-events" > <?php echo $eo_event_loop_args['no_events']; ?> </li>
</ul>

<?php endif;

使用中のテーマフォルダ内に手順2で追加したshortcode-event-list.phpファイルをアップロード

コードを追加したshortcode-event-list.phpファイルを使用中の自分のテーマフォルダ内にアップロードすると、イベント一覧表示の時にこのテンプレートファイルを使用するようになります。

正しく表示されていたら完成。

shortcode-event-list.phpファイルをアレンジするだけで、望み通りのイベント一覧表示ができるようになります。