如何创建仅搜索媒体库视频的WordPress搜索表单（按标签/分类/标题）

嘿，针对你这个WordPress视频门户的搜索需求，我结合你已经实现的jQuery分类筛选功能，整理了一套完整的解决方案，分步骤来：

1. 搭建前端搜索表单 #

首先在你的视频列表页面添加一个搜索表单，同时保留你已有的分类筛选按钮，让两者可以联动：

<!-- 搜索表单 -->
<form id="video-search-form" method="get" class="video-search-container">
    <input 
        type="text" 
        name="video_search" 
        id="video-search-input" 
        placeholder="搜索视频（标题、标签、分类）..." 
        value="<?php echo isset($_GET['video_search']) ? esc_attr($_GET['video_search']) : ''; ?>"
    >
    <button type="submit">搜索</button>
</form>

<!-- 你已有的分类筛选按钮，记得给每个按钮加data-category属性 -->
<div class="category-filters">
    <button class="category-filter-btn active" data-category="all">全部</button>
    <button class="category-filter-btn" data-category="美食">美食</button>
    <button class="category-filter-btn" data-category="健康">健康</button>
    <!-- 其他分类按钮 -->
</div>

这里用esc_attr()处理搜索框的回显值，避免XSS风险。

2. 修改WordPress查询逻辑 #

你原来的查询是获取所有video/mp4类型的附件，现在要加入搜索条件，支持标题、标签、分类的模糊匹配：

<?php
// 基础查询参数
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'video/mp4',
    'posts_per_page' => 12, // 建议分页，避免大量数据加载影响性能
    'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
);

// 处理搜索关键词
if (isset($_GET['video_search']) && !empty(trim($_GET['video_search']))) {
    $search_term = sanitize_text_field(trim($_GET['video_search']));
    
    // 搜索标题（用WP原生的s参数）
    $args['s'] = $search_term;
    
    // 同时搜索标签和分类（替换成你实际的分类法名称）
    $args['tax_query'] = array(
        'relation' => 'OR',
        // 搜索标签（默认post_tag，如果你用了自定义标签就替换）
        array(
            'taxonomy' => 'post_tag',
            'field' => 'name',
            'terms' => $search_term,
            'operator' => 'LIKE'
        ),
        // 搜索视频分类（替换成你已有的分类法，比如video_category）
        array(
            'taxonomy' => 'video_category',
            'field' => 'name',
            'terms' => $search_term,
            'operator' => 'LIKE'
        )
    );
}

// 执行查询
$video_query = new WP_Query($args);
?>

⚠️ 注意：如果你的视频分类是自定义分类法，注册时必须设置'object_type' => array('attachment')，否则分类不会关联到附件。

3. 视频项添加数据属性 #

在循环输出视频时，给每个视频项添加data-*属性，方便jQuery读取标题、标签、分类信息做前端过滤：

<?php if ($video_query->have_posts()) : ?>
    <div class="video-grid">
        <?php while ($video_query->have_posts()) : $video_query->the_post(); ?>
            <?php
            // 获取视频标签，转成字符串
            $tag_list = wp_get_post_tags(get_the_ID());
            $tag_names = array_map(function($tag) {
                return $tag->name;
            }, $tag_list);
            $tag_string = implode(',', $tag_names);
            
            // 获取视频分类
            $cat_list = wp_get_post_terms(get_the_ID(), 'video_category');
            $cat_name = !empty($cat_list) ? $cat_list[0]->name : '未分类';
            ?>
            <div 
                class="video-item" 
                data-title="<?php echo esc_attr(get_the_title()); ?>"
                data-tags="<?php echo esc_attr($tag_string); ?>"
                data-category="<?php echo esc_attr($cat_name); ?>"
            >
                <!-- 视频缩略图 -->
                <img src="<?php echo wp_get_attachment_image_url(get_the_ID(), 'medium'); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
                <!-- 视频标题 -->
                <h4><?php the_title(); ?></h4>
            </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>
<?php endif; ?>

4. jQuery联动搜索与分类筛选 #

修改你已有的jQuery代码，让搜索和分类筛选可以互相叠加，比如搜索"health"后，再点击分类按钮只会显示该分类下符合搜索条件的视频：

jQuery(document).ready(function($) {
    // 标记当前活跃的分类
    let activeCategory = $('.category-filter-btn.active').data('category');

    // 分类筛选逻辑
    $('.category-filter-btn').on('click', function() {
        // 更新活跃分类
        $('.category-filter-btn').removeClass('active');
        $(this).addClass('active');
        activeCategory = $(this).data('category');
        
        // 执行筛选
        filterVideos();
    });

    // 搜索表单提交（含实时搜索）
    let searchTimeout;
    $('#video-search-input').on('keyup', function() {
        // 延迟300ms执行，避免频繁触发
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(filterVideos, 300);
    });

    // 核心筛选函数
    function filterVideos() {
        const searchTerm = $('#video-search-input').val().toLowerCase().trim();
        
        // 先显示所有视频
        $('.video-item').show();

        // 分类筛选
        if (activeCategory !== 'all') {
            $('.video-item:not([data-category="' + activeCategory + '"])').hide();
        }

        // 关键词筛选
        if (searchTerm) {
            $('.video-item:visible').each(function() {
                const title = $(this).data('title').toLowerCase();
                const tags = $(this).data('tags').toLowerCase();
                const category = $(this).data('category').toLowerCase();
                
                // 只要有一个匹配就保留
                const isMatch = title.includes(searchTerm) || tags.includes(searchTerm) || category.includes(searchTerm);
                if (!isMatch) {
                    $(this).hide();
                }
            });
        }
    }

    // 页面加载时执行一次筛选（如果有搜索关键词或默认分类）
    filterVideos();
});

• 性能优化：如果视频数量较多，建议开启分页，避免一次性加载所有视频；也可以考虑用AJAX异步加载搜索结果。
• 分类法兼容：确保你的视频分类法支持附件类型，注册分类法时添加'object_type' => array('attachment')。
• 安全防护：始终用WordPress的sanitize_*和esc_*函数处理用户输入和输出，防止XSS和注入风险。

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