wordpressのイベント情報の管理と表示に便利な「Event Organiser」。
Event Organiserで登録したイベント情報を、pinterest風にボックス表示できる「Event Organiser Posterboard」を使ってみました。
デフォルトの表示項目は、
- イベント開始日(フォーマットはM月d)
- イベントタイトル
- ベニュー
- 時間帯(終日が設定されていない場合)
- アイキャッチ画像
- 抜粋

画像引用元:https://wp-event-organiser.com/extensions/event-organiser-posterboard/
ですが、ここに、カスタムフィールドに設定した情報を表示したいと思いました。で、ハマったのでメモです。
テンプレートファイルとその中身
ちなみにテンプレートファイルは以下にあります。
/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%>