使用下拉菜单动态过滤Wordpress帖子(使用php和ajax)

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 =&al =&city =&radius = 0&spec1 = 1&spece2 = 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 =任何&maxfee =任何&AV1 = 1&关键字=&国家= CA&排序=费&resultsperpage = 10

如果有人能帮助我解决这个问题需要的javascript/Ajax,我将非常感激.

Answer 1

差不多1000次观看而不是单一评论.好吧,我也需要这个,并决定成功.我已经在下面分享了JavaScript和Wordpress代码,供不久的将来使用.它看起来很多,但那是因为我已经定义了一些你以后可以使用的jQuery函数.extend.所有它正在寻找一个selectCSS类的元素(下拉列表).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代码.我们真正需要的是生成select带有某种id并将类设置为.content-filter.此代码要求提供类似"post"或"product"的帖子类型并生成select元素.然后它返回GET变量以方便使用,如果没有设置,则默认为"newest".请注意,该$fields数组设置了您要支持的所有不同的orderby值.您可以随时在任何地方访问它在模板$_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;

我使用自定义帖子类型'产品',但如果您使用'post',只需替换它.有人应该把它变成一个插件,如果他们还没有:P