近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