在Single.php的选项卡式侧边栏中加载更多帖子(AJAX)

时间:2013-11-25 作者:user11898019

我正在尝试使用这种方法https://wordpress.stackexchange.com/a/56349/18144 要在单条上的侧栏中创建“加载更多”按钮。php。我想能够加载更多的帖子在侧栏选项卡后点击加载更多按钮。

我错过了一些东西,因为它不起作用。但是控制台中没有错误,所以我真的不知道从哪里开始。

单曲侧边栏。php具有以下(简化)结构:

<aside id="sidemenu-container">

<div id="side-top">....</div>

<div id="side-tabs">
<div class="tab_container">
<div id="new" class="tab_content">
<li>...</li>
</div>
<div id="must-see" class="tab_content">
<li>...</li>
</div>

</div>


<div id="side-bottom">
<li>Up | My Fav\'s |<a id="#blog-more" href="#" class="button radius">Load More</a></li>
</div>


</div>
</aside>
到目前为止,我得到了:

在函数中。我添加了php:

add_action( \'wp_enqueue_scripts\', \'wpa56343_scripts\', 100 );

function wpa56343_scripts() {
wp_enqueue_script(
    \'wpa56343_script\',
    get_template_directory_uri() . \'/js/ajaxscripts.js?ver=1.0\',
    array( \'jquery\' ),
    null,
    false
);
wp_localize_script(
    \'wpa56343_script\',
    \'WPaAjax\',
    array(
        \'ajaxurl\' => admin_url( \'admin-ajax.php\' )
    )
);
}

add_action(\'wp_ajax_wpa56343_more\', \'wpa56343_more\');
add_action(\'wp_ajax_nopriv_wpa56343_more\', \'wpa56343_more\');

function wpa56343_more(){
global $wp_query;

$offset = $_POST[\'postoffset\'];
$args = array(
    \'offset\' => $offset,
    \'posts_per_page\' => 10
);
$wp_query = new WP_Query( $args );

get_template_part( \'includes/ajaxsidebar\');
exit;
}
Ajax脚本。js包含:

jQuery(document).ready(function($){

$(\'#blog-more\').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    var postoffset = 5;
    $.get(
        WPaAjax.ajaxurl,
        {
            action : \'wpa56343_more\',
            postoffset : postoffset
        },
        function( response ) {
            $(\'#new\').append( response );
        }
    );
});

});
ajaxsidebar的模板部分包含:

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail() ?><?php the_title(); ?></a></li>
           <?php endwhile; ?>
 <?php endif; ?>

1 个回复
SO网友:Kevin

对于任何一个像我通过Googlez那样遇到这个问题的人来说,我是在尝试将新文章加载到一个单篇文章的底部。php页面(无限滚动)。

我发现,通过向“offset”值添加一个增量,然后使用$。post()而不是$。get(),我可以做到这一点。

按照上面概述的代码(以及随后的更改),我完成了这样的操作,基本的post实现(只是标题)将在稍后修复:

in functions.php:

add_action( \'wp_enqueue_scripts\', \'wpa56343_scripts\', 100 );

function wpa56343_scripts() {
    wp_enqueue_script(
        \'wpa56343_script\',
        get_template_directory_uri() . \'/javascripts/ajaxscripts.js?ver=1.0\',
        array( \'jquery\' ),
        null,
        false
    );
    wp_localize_script(
        \'wpa56343_script\',
        \'WPaAjax\',
        array(
            \'ajaxurl\' => admin_url( \'admin-ajax.php\' )
        )
    );
}

add_action(\'wp_ajax_wpa56343_more\', \'wpa56343_more\');
add_action(\'wp_ajax_nopriv_wpa56343_more\', \'wpa56343_more\');

function wpa56343_more(){
    global $wp_query;

    $offset = $_POST[\'postoffset\'];

    $args = array(
        \'offset\' => $offset,
        \'posts_per_page\' => 1
    );
    $wp_query = new WP_Query( $args );

    get_template_part( \'recent-posts\');
    exit;
    }

in ajaxscripts.js

jQuery(document).ready(function($){
var postoffset = 0;
$(\'#blog-more\').click(function(e){ // <- added
    e.preventDefault(); // <- added to prevent normal form submission
    postoffset = postoffset + 1;
    $.post(
        WPaAjax.ajaxurl,
        {
            action : \'wpa56343_more\',
            postoffset : postoffset,
        },
        function( response ) {
            //alert(response);
            $(\'#new\').append( response );
        }
    );
});

});

in recentposts.php

<?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>    
<a href="<?php the_permalink() ?>" rel="bookmark"><?php //the_post_thumbnail() ?><?php the_title(); ?></a><br>
           <?php endwhile; ?>
 <?php endif; ?>
当你到达页面顶部时,我会将“onclick”改为“onclick”,但难的部分已经结束,这是儿童游戏。

感谢他作品的原始海报和他们的评论。

结束

相关推荐

使用wp_ajax和wp_ajax_nopriv挂接

我想发送一个ajax请求,如果用户登录,我想处理它。因此,我想使用以下两个挂钩,但我不确定是否正确使用了它们。使用相同的功能是否正确take_action_function 对于两个挂钩,然后检查该功能是否用户已登录?或者我应该创建two different functions, 一个用于执行操作,另一个仅用于返回用户应登录的消息?add_action(\'wp_ajax_nopriv_test-action\', \'take_action_function\'); add_action(\'w