使用 ajax 通过 WordPress 菜单在 div 中按类别加载最新帖子

Posted 2023-02-19

【中文标题】使用 ajax 通过 WordPress 菜单在 div 中按类别加载最新帖子

【英文标题】：Load the Latest Posts by Category in a div via WordPress Menu using ajax

【发布时间】：2017-06-30 09:15:55

【问题描述】：

我希望我的 index.php 在顶部有一个类别名称的水平列表，当我单击任何类别名称时，它会在特定 div 容器的索引页面中显示最新的 10 个帖子，而无需刷新。这在 Wordpress 中可行吗？

谢谢。

用我的代码更新：

分类菜单：

<?php $categories = get_categories(); ?>

<ul id="category-menu">
<?php foreach ( $categories as $cat )  ?>
<li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>
<?php  ?>

html div 占位符，将通过 ajax 加载帖子：

<div id="main-container">
<div id="loading-animation" style="display: none;"><img src="<?php bloginfo('url'); ?>/images/loading.gif"></div>
<div id="category-listing"></div>

jQuery 函数：

<script>
function cat_ajax_get(catID) 
 jQuery("a.ajax").removeClass("current");
 jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
 jQuery("#loading-animation").show();
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
 jQuery.ajax(
     type: 'POST',
     url: ajaxurl,
     data: "action": "load-filter", cat: catID ,
     success: function(response) 
         jQuery("#category-listing").html(response);
         jQuery("#loading-animation").hide();
         return false;
  
  );
  
  </script>

PHP函数：

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () 
$cat_id = $_POST[ 'cat' ];
     $args = array (
    'cat' => $cat_id,
    'posts_per_page' => 10,
    'order' => 'DESC'

    );

$posts = get_posts( $args );

ob_start ();

foreach ( $posts as $post ) 
setup_postdata( $post ); ?>

<div>
    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>/h1>
</div>

<?php  wp_reset_postdata();

$response = ob_get_contents();
ob_end_clean();

echo $response;
die(1);

但是当我点击类别时它不显示但是当我全选并查看源代码时，结果

加载无数据..

有什么帮助吗？

【问题讨论】：

是的，有可能，展示你的努力/你写的代码，你卡在哪里。所以不适合你问，我们继续写。

将我的代码插入我的问题中。现在有人可以帮忙吗？谢谢...

【参考方案1】：

在这种情况下，您不需要弄乱对象缓冲区或 post_attributes() 函数：

function prefix_load_cat_posts () 
    $cat_id = $_POST[ 'cat' ];
    $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'

    );
    $posts = get_posts( $args );
    if($posts) 
        foreach ($posts as $post)  ?>
            <div>
                <h1><a href="<?php echo get_the_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a></h1>
            </div>
        <?php 
    
    die();