通过AJAX将帖子加载到侧边栏并分页?

时间:2012-12-21 作者:JonnyPlow

是否可以在侧栏中分页或加载下一篇/上一篇文章,而不影响整个页面分页?比如AJAX?

现在,我正在查询自定义帖子类型的帖子,以加载最新的2篇帖子,并需要在其所在位置加载下一篇或上一篇。

有什么想法吗?

编辑:我试过班特网的建议,但还是没能奏效。

我在侧边栏中完全如图所示:

<?php $args = array(\'posts_per_page\' => 1);
$sidebar = new WP_Query($args); 
if ( $sidebar->have_posts() ) : 
    while ( $sidebar->have_posts() ) : $sidebar->the_post(); ?>
        <div class="story">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </div>

    <?php endwhile; 
 endif; ?>
    <span class="more_links"></span>
    <span class="get_more">
    <input type="hidden" name="offset" id="offset" value="1">
    <input type="submit" name="more" id="more" value="Get more links">
    </span>
    <script type="text/javascript" >
    $(document).ready(function($) {
        $(\'#more\').click(function() { 
            var data = {
                action: \'more_links\',
                offset: $( \'#offset\' ).val(),
                _ajax_nonce: <?php echo wp_create_nonce( \'more_links\' ); ?>
            };
            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            $.post(ajaxurl, data, function(response) {
                var res = wpAjax.parseAjaxResponse(response, \'ajax-response\');
                $.each( res.responses, function() { 
                    if (this.what == \'has\') {
                        //insert links
                        $(".more_links").append( this.data.html ); 
                        //update offset value
                        $("#offset").val(this.data.offset);
                        $(".more_links").fadeIn("fast");
                    }else{
                        //no more links found
                        $(".more_links").append( this.data.html );
                        $(".get_more").remove();
                    }
                    //end if
                    });//end each
            });
            return false;
        })
    });
    </script>
在我的职能中:

add_action(\'wp_ajax_nopriv_more_links\', \'my_AJAX_more_links_function\');

function my_AJAX_more_links_function(){
check_ajax_referer(\'more_links\');
$success_response = new WP_Ajax_Response();
$args = array(\'posts_per_page\' => 1 , \'offset\' => $_POST[\'offset\']);
$sidebar = new WP_Query($args);
if ( $sidebar->have_posts() ){ 
     while ( $sidebar->have_posts() ) {
        $sidebar->the_post(); 
        $out .= \'<div class="story">\';
        $out .= \'<a href="\'.the_permalink().\'" title="\'. the_title.\'">\'.the_title().\'</a></div>\';
    }
    $success_response->add(array(
                \'what\' => \'has\',
                \'data\' => array(\'html\' => $out, \'offset\' => $_POST[\'offset\'])
    ));
}else{
    $out = __(\'Sorry but No more!\');
    $success_response->add(array(
                \'what\' => \'none\',
                \'data\' => $out
            ));
}
$success_response->send();      
exit;   
}
add_action(\'wp_head\',\'add_scripts_121\');
function add_scripts_121(){
wp_enqueue_script(\'wp-ajax-response\');
}

1 个回复
SO网友:Bainternet

您需要用引号和而不是the_permalink()the_title() 使用get_permalink()get_the_title() 就像这样:

<?php $args = array(\'posts_per_page\' => 1);
$sidebar = new WP_Query($args); 
if ( $sidebar->have_posts() ) : 
    while ( $sidebar->have_posts() ) : $sidebar->the_post(); ?>
        <div class="story">
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </div>

    <?php endwhile; 
 endif; ?>
<span class="more_links"></span>
<span class="get_more">
<input type="hidden" name="offset" id="offset" value="1">
<input type="submit" name="more" id="more" value="Get more links">
</span>
<script type="text/javascript" >
$(document).ready(function($) {
    $(\'#more\').click(function() { 
        var data = {
            action: \'more_links\',
            offset: $( \'#offset\' ).val(),
            _ajax_nonce: \'<?php echo wp_create_nonce( \'more_links\' ); ?>\'
        };
        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            var res = wpAjax.parseAjaxResponse(response, \'ajax-response\');
            $.each( res.responses, function() { 
                if (this.what == \'has\') {
                    //insert links
                    $(".more_links").append( this.data.html ); 
                    //update offset value
                    $("#offset").val(this.data.offset);
                    $(".more_links").fadeIn("fast");
                }else{
                    //no more links found
                    $(".more_links").append( this.data.html );
                    $(".get_more").remove();
                }
                //end if
                });//end each
        });
        return false;
    })
});
</script>
函数应如下所示:

add_action(\'wp_ajax_nopriv_more_links\', \'my_AJAX_more_links_function\');

function my_AJAX_more_links_function(){
    check_ajax_referer(\'more_links\');
    $success_response = new WP_Ajax_Response();
    $args = array(\'posts_per_page\' => 1 , \'offset\' => $_POST[\'offset\']);
    $sidebar = new WP_Query($args);
    if ( $sidebar->have_posts() ){ 
         while ( $sidebar->have_posts() ) {
            $sidebar->the_post(); 
            $out .= \'<div class="story">\';
            $out .= \'<a href="\'.get_permalink().\'" title="\'. get_the_title.\'">\'.get_the_title().\'</a></div>\';
        }
        $success_response->add(array(
                    \'what\' => \'has\',
                    \'data\' => array(\'html\' => $out, \'offset\' => $_POST[\'offset\'])
        ));
    }else{
        $out = __(\'Sorry but No more!\');
        $success_response->add(array(
                    \'what\' => \'none\',
                    \'data\' => $out
                ));
    }
    $success_response->send();      
    die();
}

结束

相关推荐

Query posts by custom fields

我正在为一家酒店制作主题,我需要能够提供按以下自定义字段搜索的功能:位置和价格。我需要能够从查询字符串本身查询它们。。。ie:您的站点。com/?post\\u type=房间(&U);位置=南部您的站点。com/?post\\u type=房间(&U);价格=20.95您的站点。com/?post\\u type=房间(&U);位置=北(&N);价格=35我已经找到了许多不同的问题/答案,但似乎没有一个专门针对我的问题。值得注意的是,我认为这一点非常接近于解决我的问题:Query posts and f