You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

自定义文章类型mep_events分类模板问题:缩略图不显示+过滤无名额分类

解决WpEvently插件mep_events分类页面的两个问题

问题1:分类缩略图无法显示

步骤1:开启自定义分类的缩略图支持

WpEvently的活动分类默认未开启缩略图支持,需在主题的functions.php中添加代码开启:

// 开启mep_event_cat分类的缩略图支持
add_action('init', 'enable_mep_event_category_thumbnails');
function enable_mep_event_category_thumbnails() {
    add_theme_support('post-thumbnails');
    
    // 为mep_event_cat分类添加缩略图元框
    add_meta_box(
        'mep_event_cat_thumbnail',
        '分类缩略图',
        'render_mep_event_cat_thumbnail_meta_box',
        'mep_event_cat',
        'side',
        'default'
    );
}

// 渲染分类缩略图元框
function render_mep_event_cat_thumbnail_meta_box($term) {
    $thumbnail_id = get_term_meta($term->term_id, '_thumbnail_id', true);
    ?>
    <div id="mep-category-thumbnail">
        <?php if ($thumbnail_id) : ?>
            <?php echo wp_get_attachment_image($thumbnail_id, 'thumbnail', false, array('id' => 'current-thumbnail')); ?>
        <?php endif; ?>
        <input type="hidden" id="_thumbnail_id" name="_thumbnail_id" value="<?php echo esc_attr($thumbnail_id); ?>">
        <p>
            <button type="button" class="button upload-thumbnail-btn">上传/更换图片</button>
            <button type="button" class="button remove-thumbnail-btn" style="<?php echo $thumbnail_id ? '' : 'display:none;'; ?>">移除图片</button>
        </p>
    </div>
    <?php
}

// 加载媒体库脚本
add_action('admin_enqueue_scripts', 'enqueue_mep_category_thumbnail_scripts');
function enqueue_mep_category_thumbnail_scripts($hook) {
    if ($hook !== 'term.php' && $hook !== 'edit-tags.php') return;
    
    wp_enqueue_media();
    wp_add_inline_script('media-editor', '
        jQuery(document).ready(function($) {
            let mediaFrame;
            $(".upload-thumbnail-btn").on("click", function(e) {
                e.preventDefault();
                if (mediaFrame) {
                    mediaFrame.open();
                    return;
                }
                mediaFrame = wp.media({
                    title: "选择分类缩略图",
                    button: { text: "使用此图片" },
                    multiple: false
                });
                mediaFrame.on("select", function() {
                    const attachment = mediaFrame.state().get("selection").first().toJSON();
                    $("#_thumbnail_id").val(attachment.id);
                    $("#current-thumbnail").attr("src", attachment.sizes.thumbnail.url).show();
                    $(".remove-thumbnail-btn").show();
                });
                mediaFrame.open();
            });
            $(".remove-thumbnail-btn").on("click", function(e) {
                e.preventDefault();
                $("#_thumbnail_id").val("");
                $("#current-thumbnail").hide();
                $(this).hide();
            });
        });
    ');
}

// 保存分类缩略图
add_action('created_mep_event_cat', 'save_mep_event_category_thumbnail');
add_action('edited_mep_event_cat', 'save_mep_event_category_thumbnail');
function save_mep_event_category_thumbnail($term_id) {
    if (isset($_POST['_thumbnail_id'])) {
        update_term_meta($term_id, '_thumbnail_id', absint($_POST['_thumbnail_id']));
    }
}

步骤2:在模板中调用分类缩略图

替换模板中原有缩略图代码为:

// 获取当前分类的缩略图ID
$thumbnail_id = get_term_meta($category->term_id, '_thumbnail_id', true);

if ($thumbnail_id) {
    // 显示缩略图,可调整尺寸参数(如'large'、'medium')
    echo wp_get_attachment_image($thumbnail_id, 'medium', false, array(
        'class' => 'mep-category-thumb',
        'alt' => esc_attr($category->name)
    ));
} else {
    // 显示默认占位图(替换为你的默认图路径)
    echo '<img src="' . esc_url(get_template_directory_uri() . '/images/default-category-thumb.png') . '" alt="' . esc_attr($category->name) . '" class="mep-category-thumb">';
}

问题2:过滤无可用名额活动的分类

通过查询每个分类下是否存在至少一个有剩余名额的活动,过滤无效分类:

替换模板中获取分类的代码为以下逻辑:

// 先获取所有mep_event_cat分类
$all_categories = get_terms(array(
    'taxonomy' => 'mep_event_cat',
    'hide_empty' => false, // 先获取全部分类,再手动过滤
    'orderby' => 'name',
    'order' => 'ASC'
));

// 过滤出包含可用活动的分类
$valid_categories = array();
foreach ($all_categories as $cat) {
    // 查询该分类下是否有发布状态且剩余名额>0的活动
    $has_valid_events = new WP_Query(array(
        'post_type' => 'mep_events',
        'posts_per_page' => 1, // 只需验证存在至少一个即可
        'post_status' => 'publish',
        'tax_query' => array(
            array(
                'taxonomy' => 'mep_event_cat',
                'field' => 'term_id',
                'terms' => $cat->term_id
            )
        ),
        'meta_query' => array(
            // 检查剩余名额大于0(WpEvently默认用mep_available_tickets存储剩余名额)
            array(
                'key' => 'mep_available_tickets',
                'value' => 0,
                'type' => 'numeric',
                'compare' => '>'
            )
        )
    ));

    if ($has_valid_events->have_posts()) {
        $valid_categories[] = $cat;
    }
    wp_reset_postdata();
}

// 循环显示过滤后的分类
foreach ($valid_categories as $category) {
    // 你的分类展示代码(名称、链接、缩略图等)
    echo '<div class="mep-category-item">';
    // 调用上面的缩略图代码
    $thumbnail_id = get_term_meta($category->term_id, '_thumbnail_id', true);
    if ($thumbnail_id) {
        echo wp_get_attachment_image($thumbnail_id, 'medium', false, array('class' => 'mep-category-thumb', 'alt' => esc_attr($category->name)));
    } else {
        echo '<img src="' . esc_url(get_template_directory_uri() . '/images/default-category-thumb.png') . '" alt="' . esc_attr($category->name) . '" class="mep-category-thumb">';
    }
    echo '<h3><a href="' . get_term_link($category) . '">' . esc_html($category->name) . '</a></h3>';
    echo '<p>' . esc_html($category->description) . '</p>';
    echo '</div>';
}

注意事项

  • 若WpEvently未使用mep_available_tickets字段,可查看数据库wp_postmeta表中mep_events文章的元数据,找到剩余名额字段名替换meta_query中的key值。
  • 若需通过总票数-已售票数计算剩余名额,可将meta_query替换为:
    'meta_query' => array(
        'relation' => 'AND',
        array(
            'key' => 'mep_sold_tickets',
            'value' => get_post_meta(get_the_ID(), 'mep_total_tickets', true),
            'type' => 'numeric',
            'compare' => '<'
        )
    )
    

内容的提问来源于stack exchange,提问作者peresm

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 18:30:53