使用下拉菜单动态过滤 Wordpress 帖子(使用 php 和 ajax)

Once found, it uses the dropdown's id to set a GET variable to the value currently selected, then it redirects to this the same URL and adds these GET variables. For example, if the id of the dropdown was product_filter, and this had a value set to date, then it would set the GET variable product_filter=date. It's great because it doesn't care about your Wordpess details - all it cares about is the select element.

// A bunch of helper methods for reading GET variables etc from the URL
jQuery.extend({
    urlGetVars : function() {
        var GET = {};
        var tempGET = location.search;
        tempGET = tempGET.replace('?', '').split('&');
        for(var i in tempGET) {
            var someVar = tempGET[i].split('=');
            if (someVar.length == 2) {
                GET[someVar[0]] = someVar[1];
            }
        }
        return GET;
    },
    urlGetVar : function(name) {
        return $.urlGetVars()[name];
    },
    serializeUrlVars : function(obj) {
        var str = [];
        for(var p in obj)
         str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    currentUrl : function() {
        return window.location.href.slice(0,window.location.href.indexOf('?'));
    }
});

// Adds functionality to filter content using a dropdown
var ContentFilter = function ($) {
    $(document).ready(function() {
        // Return to a scroll position if exists
        var scroll = $.urlGetVar('scroll');
        if (typeof scroll != 'undefined') {
            $(window).scrollTop(scroll);
        }
        // Prepare the filter dropdowns
        $('.content-filter').each(function(){
            var me = $(this);
            // e.g. content-filter-product
            var id = me.attr('id');
            // Refresh with selected filter on change
            var refresh = function() {
                var GET = $.urlGetVars();
                GET[id] = me.val();
                // Save scroll position, return to this position on load
                GET['scroll'] = $(window).scrollTop();
                var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);
                window.location = newVar;
            };
            me.change(refresh);
        });
    });
}(jQuery);

现在是 Wordpress 代码.我们真正需要的是生成具有某种 id 的 select 并将类设置为 .content-filter.此代码要求提供类似post"或product"的帖子类型，并生成 select 元素.为方便起见，它然后返回 GET 变量，如果没有设置，则默认为最新".请注意，$fields 数组设置了所有不同的orderby 值喜欢支持.根据您的类型，您始终可以使用 $_GET['product_filter'] 或 $_GET['post_filter'] 在模板中的任何位置访问它.这意味着在任何给定页面上只能存在一个，但您需要这样做 - 否则 jQuery 将不知道该使用哪个.您可以扩展此代码以设置自定义 ID 或您以后喜欢的任何内容.

function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {
    $dropdown = '<div class="content-filter-wrapper">';
    // The dropdown filter id for this post type
    $filter_id = $post_type_id.'_filter';
    // The actual dropdown
    $dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">';
    // The available ways of filtering, to sort you'd need to set that in the WP_Query later
    $fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');
    $filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'
    foreach ($fields as $field_value=>$field_name) {
        $dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>';
    }
    $dropdown .= '</select></div>';
    // Print or return
    if ($echo) {
        echo $dropdown;
    } else {
        return $dropdown;
    }
}

// This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist
ak_content_filter('product', $product_filter);
$args = array('post_type' => 'product', 'orderby' => $product_filter);
// This is just an example, you can use get_pages or whatever supports orderby
$loop = new WP_Query( $args );

// OR, to avoid printing:
$dropdown = ak_content_filter('product', $product_filter, FALSE);
// ... some code ...
echo $dropdown;