2026年9月26日

The Events Calendarのエラーを解決する方法

プラグイン関連

はじめに

The Events Calendarでイベント一覧ページが404エラーになる・カレンダーのレイアウトが崩れる・繰り返しイベントが表示されない・tribe_get_events()が正しい結果を返さないといった問題は、パーマリンクの設定・テーマとの競合・プラグインの設定が原因です。

症状・原因

/events/にアクセスすると404エラーになる
カレンダービューでイベントが表示されない（リストビューでは表示される）
繰り返しイベント（Recurring Events）がカレンダーに表示されない
イベントの日時がタイムゾーンの影響でずれて表示される

解決手順

ステップ1：The Events Calendarの状態を確認する

# プラグインのバージョンと設定を確認
wp eval "
if (defined('TRIBE_EVENTS_FILE')) {
    echo 'TEC version: ' . Tribe__Events__Main::VERSION . PHP_EOL;
}
// イベントページのスラッグを確認
\$events_slug = tribe_get_option('eventsSlug', 'events');
echo 'Events slug: ' . \$events_slug . PHP_EOL;
echo 'Events URL: ' . tribe_get_events_link() . PHP_EOL;
"

# イベント一覧を確認
wp eval "
\$events = tribe_get_events([
    'posts_per_page' => 5,
    'start_date'     => date('Y-m-d'),
    'end_date'       => date('Y-m-d', strtotime('+30 days')),
]);
echo 'Upcoming events: ' . count(\$events) . PHP_EOL;
foreach (\$events as \$event) {
    printf('  %s | %s' . PHP_EOL,
        tribe_get_start_date(\$event->ID, false, 'Y-m-d H:i'),
        \$event->post_title
    );
}
"

# パーマリンクをリセット
wp rewrite flush --hard
echo "Rewrite rules flushed"

ステップ2：パーマリンクとURLの問題を修正する

# The Events Calendarのリライトルールを再生成
wp eval "
// TECのリライトルールを強制リセット
tribe_update_option('rewriteRules', 0);
flush_rewrite_rules(true);
echo 'TEC rewrite rules reset' . PHP_EOL;
"

# イベントアーカイブのURLを確認
wp eval "
echo 'Events archive URL: ' . get_post_type_archive_link('tribe_events') . PHP_EOL;

// カスタムスラッグを設定している場合の確認
\$slug = tribe_get_option('eventsSlug', 'events');
\$single_slug = tribe_get_option('singleEventSlug', 'event');
echo 'Archive slug: /' . \$slug . '/' . PHP_EOL;
echo 'Single slug: /' . \$single_slug . '/{event-name}/' . PHP_EOL;
"

// functions.php: The Events Calendarのパーマリンク設定

// ① イベントスラッグをカスタマイズ
add_action('init', function(): void {
    // TECのオプションでスラッグを変更する場合は管理画面から
    // Events → Settings → General → Event URL Slug
    // ここでは設定を確認するだけ
    $slug = tribe_get_option('eventsSlug', 'events');
    if (empty($slug)) {
        tribe_update_option('eventsSlug', 'events');
    }
});

// ② イベントページタイトルをカスタマイズ
add_filter('tribe_events_title_tag', function(string $title): string {
    if (tribe_is_month()) {
        return date('Y年n月') . 'のイベント | ' . get_bloginfo('name');
    }
    if (tribe_is_list_view()) {
        return 'イベント一覧 | ' . get_bloginfo('name');
    }
    return $title;
});

ステップ3：テンプレートとCSSの問題を解決する

// functions.php: The Events Calendarのテンプレートカスタマイズ

// ① テンプレートの読み込みパスを追加
add_filter('tribe_events_template_paths', function(array $paths): array {
    // 子テーマのtribeディレクトリからテンプレートを読み込む
    $paths[] = get_stylesheet_directory() . '/tribe/';
    return $paths;
});

// ② TECのCSSを制御（テーマとの競合対策）
add_action('wp_enqueue_scripts', function(): void {
    if (tribe_is_event_query()) {
        // テーマの競合CSSを除外
        wp_dequeue_style('theme-main-style');

        // カスタムCSSを追加
        wp_enqueue_style(
            'custom-events-style',
            get_stylesheet_directory_uri() . '/css/events.css',
            ['tribe-events-calendar-style'],
            '1.0.0'
        );
    }
}, 20);

// ③ イベントカードのカスタム情報を追加
add_action('tribe_events_after_the_meta', function(): void {
    $event_id = get_the_ID();
    $venue    = tribe_get_venue($event_id);
    $cost     = tribe_get_cost($event_id, true);

    if ($cost) {
        echo '<div class="event-cost">参加費: ' . esc_html($cost) . '</div>';
    }
    if ($venue) {
        echo '<div class="event-venue">会場: ' . esc_html($venue) . '</div>';
    }
});

ステップ4：イベントをプログラムで操作する

// functions.php: tribe_get_eventsを使ったカスタムクエリ

// ① 特定カテゴリのイベントを取得
function get_events_by_category(string $category_slug, int $limit = 10): array {
    return tribe_get_events([
        'posts_per_page'     => $limit,
        'start_date'         => current_time('Y-m-d'),
        'eventCategorySlug'  => $category_slug,
        'orderby'            => 'event_date',
        'order'              => 'ASC',
    ]);
}

// ② 次のイベントを取得（ウィジェット等に使用）
function get_next_events(int $count = 3): array {
    return tribe_get_events([
        'posts_per_page' => $count,
        'start_date'     => current_time('Y-m-d H:i:s'),
        'orderby'        => 'event_date',
        'order'          => 'ASC',
        'featured'       => false,
    ]);
}

// ③ イベントをプログラムで作成
function create_tribe_event(array $data): int {
    $post_id = wp_insert_post([
        'post_title'   => $data['title'],
        'post_content' => $data['description'] ?? '',
        'post_status'  => 'publish',
        'post_type'    => 'tribe_events',
    ]);

    if (is_wp_error($post_id)) return 0;

    // イベントの日時メタを設定
    update_post_meta($post_id, '_EventStartDate',    $data['start_date']);
    update_post_meta($post_id, '_EventEndDate',      $data['end_date']);
    update_post_meta($post_id, '_EventStartDateUTC', get_gmt_from_date($data['start_date']));
    update_post_meta($post_id, '_EventEndDateUTC',   get_gmt_from_date($data['end_date']));
    update_post_meta($post_id, '_EventTimezone',     wp_timezone_string());
    update_post_meta($post_id, '_EventCurrencySymbol', '¥');
    update_post_meta($post_id, '_EventCost',         $data['cost'] ?? '');

    return $post_id;
}

ステップ5：タイムゾーンとiCal連携を設定する

# タイムゾーン設定の確認
wp eval "
echo 'WP timezone: ' . wp_timezone_string() . PHP_EOL;
echo 'TEC timezone: ' . tribe_get_option('tribe_events_timezone_string', 'default') . PHP_EOL;

// イベントのタイムゾーン情報を確認
\$event_id = 789;
\$start_utc   = get_post_meta(\$event_id, '_EventStartDateUTC', true);
\$start_local = get_post_meta(\$event_id, '_EventStartDate', true);
echo 'Event start (local): ' . \$start_local . PHP_EOL;
echo 'Event start (UTC): ' . \$start_utc . PHP_EOL;
"

// functions.php: iCal フィードのカスタマイズ

// ① iCal フィードにカスタムフィールドを追加
add_filter('tribe_ical_feed_item', function(array $item, \WP_Post $event): array {
    $cost    = tribe_get_cost($event->ID, true);
    $contact = get_post_meta($event->ID, '_contact_email', true);

    if ($cost) {
        $item['DESCRIPTION'] .= '\n参加費: ' . $cost;
    }
    if ($contact) {
        $item['ORGANIZER'] = 'MAILTO:' . $contact;
    }

    return $item;
}, 10, 2);

// ② Google Calendar ボタンを追加
add_action('tribe_events_after_the_content', function(): void {
    $event_id  = get_the_ID();
    $title     = rawurlencode(get_the_title());
    $start     = tribe_get_start_date($event_id, false, 'Ymd\THis');
    $end       = tribe_get_end_date($event_id, false, 'Ymd\THis');
    $gcal_url  = "https://calendar.google.com/calendar/render?action=TEMPLATE&text={$title}&dates={$start}/{$end}";

    printf(
        '<a href="%s" target="_blank" class="gcal-button">Googleカレンダーに追加</a>',
        esc_url($gcal_url)
    );
});

注意事項

/events/が404エラーになる場合は「設定→パーマリンク」ページを一度開いて保存するだけで解決することが多いです。これによりThe Events CalendarのリライトルールがWordPressに再登録されます
The Events CalendarのテンプレートファイルをカスタマイズするにはWordPressのテンプレート階層と異なり、子テーマ内のtribe/events/ディレクトリにファイルを配置します（wp-content/themes/child-theme/tribe/events/）
イベントの日時は_EventStartDate（ローカル時間）と_EventStartDateUTC（UTC時間）の両方が保存されます。直接postmetaを変更する場合は必ず両方を更新してください

まとめ

The Events Calendar修復は①tribe_get_option('eventsSlug')でスラッグ確認・tribe_get_events()でイベント取得テスト・wp rewrite flush --hardでURL再生成、②tribe_events_template_pathsフィルターで子テーマからテンプレートを読み込みCSS競合をwp_dequeue_style()で解消、③tribe_get_events()でカテゴリ・日付フィルタリングを実装し_EventStartDate・_EventStartDateUTCを正確に設定、④tribe_ical_feed_itemフィルターでiCalフィードをカスタマイズ、⑤Googleカレンダー追加ボタンをtribe_events_after_the_contentフックで出力する手順で解決します。

Post Views: 8