使用PHP和Ajax动态过滤WordPress文章的下拉菜单

Question

目标：我想制作一个动态页面，让访问者可以从下拉菜单中选择月份和年份，并根据所选值更改页面上的内容（文章）。

我目前正在使用以下代码显示特定月份和年份的特定类别的文章。

<?php query_posts("cat=3&monthnum=12&year=2011"); ?> <?php if (have_posts()) : ?>
     <ul>
    <?php while (have_posts()) : the_post(); ?>
        <li>
           <?php the_title(); ?>
           <?php the_excerpt(); ?>
        </li>
    <?php endwhile; ?>
     </ul><?php endif; ?>

它工作得很好，但我希望使页面动态化，以便访问者可以从下拉菜单中选择月份和年份，并根据所选值更改内容。我在这里发布了如何工作的图片：fivepotato.com/images/ex1.png 和 fivepotato.com/images/ex2.png。

为了使其工作，我知道我必须将monthnum的值设置为变量（从下拉列表中获取）。

<?php $monthvar = $_POST["month"]; query_posts("cat=3&monthnum=$monthvar&year=2011");?>

我对Ajax没有太多经验，但我认为我需要使用它来使内容在从下拉菜单中选择一个月份后重新过滤。 我在以下网站上找到了类似的查询：askthecssguy.com/2009/03/checkbox_filters_with_jquery_1.html

我找到了一个类似于我想要做的工作示例，位于：http://www.babycarers.com/search?ajax=0&searchref=37609&start=0&lat=&lon=&city=&radius=0&spec1=1&spec2=1&spec3=1&spec4=1&spec5=1&spec6=1&spec7=1&inst1=1&inst2=1&inst3=1&inst4=1&inst5=1&inst6=1&inst7=1&minfee=any&maxfee=any&av1=1&keywords=&country=CA&sort=fee&resultsperpage=10

如果有人能帮我完成所需的javascript/Ajax，我将非常感激。

- avandelay

Answer 1

几乎有1000次浏览，却没有一条评论。好吧，我也需要这个并决定制作它。我已经分享了JavaScript和WordPress代码供将来的人使用。看起来很多，但那是因为我定义了一些jQuery函数，您可以稍后使用.extend。它所做的就是查找带有CSS类.content-filter的select元素（下拉菜单）。

一旦找到，它就使用下拉菜单的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。此代码请求像“post”或“product”这样的文章类型，并创建选择元素。然后它返回 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

- Aram Kocharyan