近1000的观点，而不是一个单一的评论。那么，我也需要这个，并决定做到这一点。我已经分享了下面的JavaScript和Wordpress代码供将来使用的人使用。它看起来很多，但是这是因为我已经定义了一些jQuery函数，您可以稍后使用它们以.extend。它所做的只是寻找一个select元素（一个下拉列表），其中CSS类.content-filter。
一旦发现，它采用了下拉的id的GET变量设置为当前选择的值，然后将其重定向到这个相同的URL，并增加了这些GET变量。例如，如果下拉的ID为product_filter，这一点也值设置为date，那就设置GET变量product_filter=date。这很好，因为它不关心你的Wordpess的细节 - 所关心的是select元素。
// 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。此代码要求提供类似“发布”或“产品”的帖子类型，并制作select元素。然后它会返回GET变量，如果没有设置，那么它默认为'newest'。请注意，$fields数组设置了您想要支持的所有不同orderby values。您可以随时通过$_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;
我使用了自定义后型“产品”，但如果你使用的“后”只是更换。有人可能应该把它变成一个插件，如果他们还没有：P