如何在侧边栏中的帖子标题被点击时使用AJAX在索引页面上加载帖子内容

时间:2011-08-21 作者:Sebastian

我正在写一个新的博客,在侧边栏的列表中显示一些类别和它们的帖子。在索引页面的“主要内容”中,我列出了其他类别“新”的一些帖子标题。

我需要的是:当我点击侧栏上的一个帖子链接,通过ajax或JQuery在主要内容中显示帖子内容时。

3 个回复
最合适的回答,由SO网友:Chris_O 整理而成

您需要创建一个WordPress函数来加载帖子内容,并将其挂接到wp\\u ajax\\u nopriv中。您还需要jQuery ajax函数通过ajax将$\\u POST数据发送到WordPress函数,并将返回的内容输出到您想要显示的空div中。

一种简单的方法是在类或ID div标记中使用post ID,这样就可以使用jQuery轻松地将其取出。

使用Steven答案中的边栏代码的示例:

 echo \'<ul id="sidebar-ajax">\';
  foreach($sidebar_posts as $post):
    echo \'<li id="\' .get_the_ID(). \'">\';
    echo \'<a class="ajax-click" href="#">.\'get_the_title().\'</a>\';
    the_title(\'<h3>\',\'</h3>\');
    echo \'</li>\';
  endforeach;
  echo \'</ul>\';
示例jQuery(这应该在单独的文件中,并使用wp_enqueue_script 因此,可以使用以下表达式将ajax url定义为javascript命名空间变量wp_localize_script:

将脚本排队并设置ajax url变量:

wp_enqueue_script( \'my-ajax-request\', plugin_dir_url( __FILE__ ) . \'js/ajax.js\', array( \'jquery\' ) );
wp_localize_script( \'my-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
ajax的内容。js文件:

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

        $(".ajax-click").click(function() {
            $("#loading-animation").show();
            var post_id = $(this).parent("li").attr("id");
            var ajaxURL = MyAjax.ajaxurl;

            $.ajax({
            type: \'POST\',
            url: ajaxURL,
            data: {"action": "load-content", post_id: post_id },
            success: function(response) {
                $("#empty_div_in_content").html(response);
                $("#loading-animation").hide();
            return false;
        }
    });    
   });
)};
*注意:在帖子最终显示的位置添加加载动画图形,并给它一个div id“;加载动画“;并将其设置为显示:无。

WordPress函数将帖子内容返回到ajax调用:

add_action ( \'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\' );
    function my_load_ajax_content () {
        $post_id = $_POST[ \'post_id\' ];
     
        $post = get_post( $post_id, OBJECT);
        $response = apply_filters( \'the_content\', $post->post_content );
  
        echo $response;
        die(1);
    }

SO网友:Steven

只需使用以下内容:

if (is_home) {
 // This retrieves 5 psots with the category "some-category"
 $sidebar_posts = get_posts("category=some-category&orderby=date&numberposts=5");
} else {
 $sidebar_posts = get_posts("category=some-other-category&orderby=date&numberposts=5");
}
然后在侧边栏部分中,使用如下内容:

  echo \'<ul>\';
  foreach($sidebar_posts as $post):
    echo \'<li>\';
    echo \'<a href="\'.get_the_permalink().\'">.\'get_the_title().\'</a>\';
    the_title(\'<h3>\',\'</h3>\');
    echo \'</li>\';
  endforeach;
  echo \'</ul>\';
我想这就是你要找的?

SO网友:krialex21

当从侧栏类别中选择帖子并单击帖子时,此答案是解释帖子加载的最佳答案之一,帖子会显示出来,但帖子可以是注册/登录或未注册/公开的目标,如:

add_action(\'wp_ajax_load-content\', \'my_load_ajax_content\'); // for users logged-in
add_action(\'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\');//for users that are not logged in.
我在使用它时遇到了一个问题,但后来通过阅读其他WordPress ajax作品来解决这个问题。

结束

相关推荐

Jquery in IE, fully messed up

我正在使用nivo slider 在我的一个网站上,滑块在Firefox中看起来很完美,但在IE 7、8中,它的高度增加到1006px,滑块可以工作,但高度增加了很多,我已经停用了所有插件,它的视图仍然相同,但在我的localhost中它也可以在IE中工作,但我无法区分其中的实际问题,这里是网站http://www.marqueehireauckland.net.nz/有人能帮我吗?我的nivo滑块代码是<script type=\"text/javascript\" src=\"<?php