创建filter筛选页面

Filter的HTML

<?php
// Template part for download filter system

// Get all download categories
$download_categories = get_terms([
    'taxonomy' => 'download_category',
    'hide_empty' => false
]);

?>
<div class="filter-area product-filter-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form id="download-filter-form" class="setting_form">
                    <div class="filter-bar">
                        <!-- Category Filter -->
                        <div class="filter__option filter--dropdown">
                            <div class="form-group">
                                <div class="select-wrap select-wrap2">
                                    <select name="download_category" id="download-category" class="text_field">
                                        <option value="">选择资源类型</option>
                                        <?php foreach ($download_categories as $category) : ?>
                                            <option value="<?php echo esc_attr($category->term_id); ?>">
                                                <?php echo esc_html($category->name); ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <span class="lnr icon-arrow-down"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Sort Filter -->
                        <div class="filter__option filter--select">
                            <div class="select-wrap">
                                <select name="filter_by" id="filter-by">
                                    <option value="">Filter by</option>
                                    <option value="trending-items">最多点赞</option>
                                    <option value="popular-items">最多查看</option>
                                    <option value="most-download">最多下载</option>
                                    <option value="new-items">最新产品</option>
                                </select>
                                <span class="icon-arrow-down"></span>
                            </div>
                        </div>

                        <!-- Items Per Page -->
                        <div class="filter__option filter--select">
                            <div class="select-wrap">
                                <select name="per_page" id="per-page">
                                    <option value="9">每页9个</option>
                                    <option value="18">每页18个</option>
                                    <option value="27">每页27个</option>
                                </select>
                                <span class="icon-arrow-down"></span>
                            </div>
                        </div>
                    </div>
                    <?php wp_nonce_field('download_filter_nonce', 'download_filter_nonce'); ?>
                </form>
                <div id="download-results"></div>
            </div>
        </div>
    </div>
</div>

PHP执行回调

<?php
// Add this to your functions.php or a separate plugin file

// Register AJAX actions
add_action('wp_ajax_filter_downloads', 'handle_download_filter');
add_action('wp_ajax_nopriv_filter_downloads', 'handle_download_filter');

function handle_download_filter() {
    check_ajax_referer('download_filter_nonce', 'nonce');

    $category = isset($_POST['category']) ? intval($_POST['category']) : 0;
    $filter_by = isset($_POST['filter_by']) ? sanitize_text_field($_POST['filter_by']) : '';
    $per_page = isset($_POST['per_page']) ? intval($_POST['per_page']) : 9;
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;

    $args = array(
        'post_type' => 'download',
        'posts_per_page' => $per_page,
        'paged' => $paged
    );

    // Add category filter
    if ($category) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'download_category',
                'field' => 'term_id',
                'terms' => $category
            )
        );
    }

    // Add sorting
    switch ($filter_by) {
        case 'trending-items':
            $args['meta_key'] = 'likes_count';
            $args['orderby'] = 'meta_value_num';
            $args['order'] = 'DESC';
            break;
        case 'popular-items':
            $args['meta_key'] = 'view_count';
            $args['orderby'] = 'meta_value_num';
            $args['order'] = 'DESC';
            break;
        case 'most-download':
            $args['meta_key'] = 'download_count';
            $args['orderby'] = 'meta_value_num';
            $args['order'] = 'DESC';
            break;
        case 'new-items':
            $args['orderby'] = 'date';
            $args['order'] = 'DESC';
            break;
    }

    $query = new WP_Query($args);
    
    ob_start();
    if ($query->have_posts()) :
        echo '<div class="row">';
        while ($query->have_posts()) : $query->the_post();
            get_template_part('template-parts/content', 'download');
        endwhile;
        echo '</div>';
        
        // Pagination
        echo '<div class="pagination">';
        echo paginate_links(array(
            'total' => $query->max_num_pages,
            'current' => $paged,
            'format' => '?paged=%#%',
            'show_all' => false,
            'type' => 'plain',
            'end_size' => 2,
            'mid_size' => 1,
            'prev_next' => true,
            'prev_text' => __('«'),
            'next_text' => __('»')
        ));
        echo '</div>';
    else :
        echo '<p>No downloads found.</p>';
    endif;
    wp_reset_postdata();
    
    $content = ob_get_clean();
    wp_send_json_success($content);
}

// Enqueue necessary scripts
function enqueue_download_filter_scripts() {
    if (is_post_type_archive('download')) {
        wp_enqueue_script('download-filter', get_template_directory_uri() . '/js/download-filter.js', array('jquery'), '1.0', true);
        wp_localize_script('download-filter', 'downloadFilter', array(
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('download_filter_nonce')
        ));
    }
}
add_action('wp_enqueue_scripts', 'enqueue_download_filter_scripts');

JS执行AJAX

// Save this as download-filter.js in your theme's js directory
jQuery(document).ready(function($) {
    var filterForm = $('#download-filter-form');
    var resultsDiv = $('#download-results');
    var currentPage = 1;
    
    // Function to load filtered results
    function loadFilteredResults(page = 1) {
        var formData = new FormData(filterForm[0]);
        formData.append('action', 'filter_downloads');
        formData.append('nonce', downloadFilter.nonce);
        formData.append('paged', page);

        $.ajax({
            url: downloadFilter.ajaxurl,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                resultsDiv.addClass('loading');
            },
            success: function(response) {
                if (response.success) {
                    resultsDiv.html(response.data);
                    currentPage = page;
                    
                    // Update URL with filter parameters
                    var params = new URLSearchParams();
                    formData.forEach(function(value, key) {
                        if (value) params.append(key, value);
                    });
                    window.history.pushState({}, '', '?' + params.toString());
                }
            },
            complete: function() {
                resultsDiv.removeClass('loading');
            }
        });
    }

    // Handle form changes
    filterForm.find('select').on('change', function() {
        loadFilteredResults();
    });

    // Handle pagination clicks
    resultsDiv.on('click', '.pagination a', function(e) {
        e.preventDefault();
        var page = $(this).attr('href').match(/paged=(\d+)/);
        if (page) {
            loadFilteredResults(page[1]);
        }
    });

    // Load initial results
    loadFilteredResults();
});