WordPress使用The Events Calendar如何在月视图事件标题下显示特色图

之前修改不生效的原因 #

• 直接修改插件目录下的源文件不符合插件的模板重载规则，插件更新会直接覆盖修改内容，部分版本还会优先读取主题内的自定义模板，导致源文件修改不生效
• 你使用的$event_id变量在对应模板上下文内未定义，无法正确获取当前事件ID，因此图片代码无输出

正确操作步骤 #

1. 创建主题模板重载目录 #

进入当前使用的WordPress主题根目录，按层级创建文件夹：
wp-content/themes/你的当前主题名/tribe-events/month/

2. 复制目标模板到主题目录 #

从插件原始目录拷贝event-calendar/src/views/month/single-event.php文件，粘贴到上一步创建的month文件夹内，后续所有修改都针对这个拷贝后的文件操作。

3. 修改模板插入特色图代码 #

打开拷贝后的single-event.php文件，找到事件标题的输出代码（一般是tribe_events_get_the_title()相关的输出逻辑），在标题代码的下方插入以下代码：

<?php echo tribe_event_featured_image( get_the_ID(), 'medium', false ); ?>

参数说明：

• 第一个参数用get_the_ID()即可正确获取当前循环内的事件ID
• 第二个参数可替换为你需要的图片尺寸，可选值包括thumbnail/medium/large或自定义尺寸，不建议用full避免拖慢月视图加载速度
• 第三个参数设为true会给图片加上事件详情页链接，设为false则仅显示纯图片

4. 适配样式 #

如果插入后图片排版错位，可在主题自定义CSS面板添加样式调整，示例：

/* 适配新版The Events Calendar v5+ */
.tribe-events-calendar-month__calendar-event .tribe-event-featured-image {
    max-width: 60px;
    height: auto;
    margin: 5px 0;
    border-radius: 2px;
}

如果是v5以下的旧版本，可通过浏览器审查元素获取对应class名替换即可。

内容的提问来源于stack exchange，提问作者mfn_ofc