Почти 1000 просмотров и ни одного комментария. Ну, я тоже нуждался в этом и решил сделать это. Я поделился кодом JavaScript и Wordpress ниже для людей в далеком будущем, чтобы использовать. Это выглядит много, но это потому, что я определил некоторые функции jQuery, которые вы можете использовать позже с .extend. Все, что он делает, ищет элемент select (раскрывающийся список) с классом CSS .content-filter.
Найдя его, он использует идентификатор раскрывающегося списка, чтобы установить для переменной GET значение, выбранное в данный момент, затем перенаправляет на тот же URL-адрес и добавляет эти переменные GET. Например, если идентификатор раскрывающегося списка был 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. Все, что нам действительно нужно, это сгенерировать select с каким-то идентификатором и установить класс на .content-filter. Этот код запрашивает тип записи, такой как «post» или «product», и создает элемент select. Затем он возвращает переменную GET для удобства, и, если ни одна из них не установлена, то по умолчанию используется «newest». Обратите внимание, что массив $fields устанавливает все различные значения orderby , которые вы хотели бы поддерживать. Вы всегда можете получить к нему доступ в любом месте шаблона с помощью $_GET['product_filter'] или $_GET['post_filter'] в зависимости от вашего типа. Это означает, что только одна может существовать на любой странице, но вы этого хотите - иначе jQuery не будет знать, какой использовать. Вы можете расширить этот код, чтобы установить пользовательский идентификатор или что-нибудь, что вам понравится позже.
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;
Я использовал пользовательский тип записи «product», но если вы используете «post», просто замените его. Кто-то, вероятно, должен превратить это в плагин, если он еще этого не сделал: P