The Events Calendarの月表示にアイキャッチを追加する方法【WordPressプラグインカスタマイズ】

2025.02.13

はるるるｒ

WordPressの人気イベント管理プラグイン The Events Calendar。
しかし、標準の月表示では、イベントのアイキャッチ画像（サムネイル）が表示されません。
今回は、スマホでカレンダーを見たときに各イベントのアイキャッチを表示する方法をご紹介します。

カスタマイズの流れは以下の通りです。

The Events Calendarのテンプレートファイルを特定
アイキャッチを表示するコードを追加
CSSでスマホ向けのデザイン調整
変更を反映

この手順に沿って設定すれば、スマホでもイベントのアイキャッチ画像が一覧表示されるようになります。
では、実際のカスタマイズ方法を詳しく解説していきます。

Contents

1 1.テンプレートファイルを特定
2 2.アイキャッチを表示するコードを追加
3 3.CSSでスマホ向けのデザイン調整
4 4.変更を反映
5 まとめ

1.テンプレートファイルを特定

アイキャッチを表示するには、適切なテンプレートファイルをカスタマイズする必要があります。

（編集するテンプレートの場所）
以下のディレクトリにある event.php をカスタマイズします。

wp-content/plugins/the-events-calendar/src/views/v2/month/mobile-events/mobile-day/mobile-event.php

このファイルを編集すると、スマホでカレンダーの日付をタップしたときのイベント一覧にアイキャッチを追加できます。
直接編集するとプラグインのアップデートで消えてしまうため、テーマフォルダにコピーして編集しましょう。

（カスタマイズ用に以下の場所にコピー）

[your-theme]/tribe/events/v2/month/mobile-events/mobile-day/mobile-event.php

2.アイキャッチを表示するコードを追加

コピーした mobile-event.php に、アイキャッチを表示するコードを追加します。

（修正するコード）

<div class="tribe-mobile-event">
<a href="<?php echo esc_url( tribe_get_event_link( $event ) ); ?>">
<?php if ( has_post_thumbnail( $event->ID ) ) : ?>
<div class="event-thumbnail">
<?php echo get_the_post_thumbnail( $event->ID, 'thumbnail' ); ?>
</div>
<?php endif; ?>
<h3 class="event-title"><?php echo get_the_title( $event->ID ); ?></h3>
<p class="event-time"><?php echo tribe_get_start_date( $event->ID, false, 'g:i a' ); ?></p>
</a>
</div>

（このコードでできること）

get_the_post_thumbnail( $event->ID, 'thumbnail' )

でアイキャッチを表示

tribe_get_event_link( $event )

でイベント詳細ページへリンク

3.CSSでスマホ向けのデザイン調整

追加したアイキャッチ画像が適切に表示されるように、CSSを設定します。

（追加するCSS（style.css または「追加CSS」に記述））

@media (max-width: 768px) {
.tribe-mobile-event {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #ddd;
padding: 10px 0;
}

.event-thumbnail {
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 5px;
}

.event-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.event-title {
font-size: 14px;
font-weight: bold;
}

.event-time {
font-size: 12px;
color: #666;
}
}

（このCSSでできること）
スマホでアイキャッチとイベント名を横並びにする
画像のサイズを 50px × 50px に統一
画像の角を丸め、オーバーフローを防ぐ