Динамически фильтровать сообщения Wordpress с помощью выпадающего меню (используя php и ajax)

Почти 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. Этот код запрашивает тип сообщения, такой как «сообщение» или «продукт», и делает элемент выбора. Затем для удобства возвращается переменная GET, и если она не установлена, по умолчанию используется «самая новая». Обратите внимание, что массив $fields устанавливает все различные значения порядка, которые вы хотели бы поддерживать. Вы всегда можете получить к нему доступ в любом месте шаблона с помощью $_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;

Я использовал пользовательский тип сообщения «продукт», но если вы используете «сообщение», просто замените его. Кто-то, вероятно, должен превратить это в плагин, если он еще этого не сделал: P