イベントプラグイン「Event Organiser」のエクステンション「Event Organiser Posterboard」で出力項目をカスタマイズする

wordpressのイベント情報の管理と表示に便利な「Event Organiser」。
Event Organiserで登録したイベント情報を、pinterest風にボックス表示できる「Event Organiser Posterboard」を使ってみました。

デフォルトの表示項目は、

• イベント開始日(フォーマットはM月d)
• イベントタイトル
• ベニュー
• 時間帯(終日が設定されていない場合)
• アイキャッチ画像
• 抜粋

ですが、ここに、カスタムフィールドに設定した情報を表示したいと思いました。で、ハマったのでメモです。

テンプレートファイルとその中身

ちなみにテンプレートファイルは以下にあります。

/wp-content/plugins/event-organiser-posterboard/templates/single-event-board-item.html

ここにテンプレートが記述されています。

<div class="eo-eb-event-box eo-eb-venue-<%=event_venue_id%> eo-eb-category-<%= event_cat_ids.join(' eo-eb-category-') %> eo-eb-city-<%=event_venue_city%> eo-eb-state-<%=event_venue_state%> eo-eb-country-<%=event_venue_country%>" data-venue="<%=event_venue_id%>" data-category="<% event_cat_ids.join(',') %>">

	<div class="eo-eb-date-container">
		<span class="eo-eb-date-month" style="background-color: <%=event_color%>;"><%=event_start_month%></span>
		<span class="eo-eb-date-day" style="background: <%=event_color_light%>;"><%=event_start_day%></span>
	</div>

	<div class="eo-eb-event-meta-container">
		<span class="eo-eb-event-title"><a href="<%=event_permalink%>"><%=event_title%></a></span>

		<% if( event_venue ){ %>
			<span class="eo-eb-event-meta"> @ <em><a href="<%=event_venue_url%>"><%=event_venue%></a></em> </span>
		<% } %>

		<% if( event_is_all_day == false ){ %>
			<span class="eo-eb-event-meta"> <%=event_range%> </span>
		<% } %>
	</div>

	<div style="clear:both"></div>
		
	<div>
		<a href="<%=event_permalink%>"><%=event_thumbnail%></a>
	</div>
			
	<%= event_excerpt %>
			
	<% if( event_categories ){ %>
		<p class="eo-eb-event-meta"><%=event_categories%></p>
	<% } %>
			
</div>

カスタマイズ用にテーマフォルダ直下にコピー

このファイルをカスタマイズ用にテーマフォルダ直下にコピーして編集すると、こちらを使ってくれます。

表示項目を新たに定義する

/wp-content/plugins/event-organiser-posterboard/event-organiser-posterboard.php

の255行目あたりから始まる

			$event = array(
				'event_id'             => get_the_ID(),
				'occurrence_id'       => $post->occurrence_id,
				'event_title'         => get_the_title( ),
				'event_color'         => $colour,
				'event_color_light'   => eo_color_luminance( $colour, 0.3 ),
				'event_start_day'     => eo_get_the_start( 'j' ),
				'event_start_month'   => eo_get_the_start( 'M' ),
				'event_content'       => get_the_content(),
				'event_excerpt'       => get_the_excerpt(),
				'event_thumbnail'     => get_the_post_thumbnail( get_the_ID(), array( '200', '200' ), array( 'class' => 'aligncenter' ) ),
				'event_permalink'     => get_permalink(),
				'event_categories'    => get_the_term_list( get_the_ID(),'event-category', '#', ', #', '' ),
				'event_venue'         => ( $venue_id ? eo_get_venue_name( $venue_id ) : false ),
				'event_venue_id'      => $venue_id,
				'event_venue_city'    => ( $venue_id ? $address['city'] : false ),
				'event_venue_state'   => ( $venue_id ? $address['state'] : false ),
				'event_venue_country' => ( $venue_id ? $address['country'] : false ),
				'event_venue_url'     => ( $venue_id ? eo_get_venue_link( $venue_id ) : false ),
				'event_is_all_day'    => eo_is_all_day(),
				'event_cat_ids'       => $categories ? array_values( wp_list_pluck( $categories, 'term_id' ) ) : array( 0 ),
				'event_range'         => eo_get_the_start( $start_format ) . ' - ' . eo_get_the_end( $end_format ),
			);

に定義されるものが、single-event-board-item.html内で使用できます。
ので、カスタムフィールド等欲しい情報を新たに定義してあげます。

ここに下記のようなかんじで、定義しますと、

'some_name'   => get_field('カスタムフィールド名'),

single-event-board-item.htmlで以下のような記述で出力できます。

<%=some_name%>