wordpress ajax 调用单个帖子答案

【问题标题】：wordpress ajax call single postwordpress ajax 调用单个帖子
【发布时间】：2023-03-26 13:55:01
【问题描述】：

我尝试在我的 wordpress 循环中进行 ajax 调用，基本上我想在单击标题后将主页中的帖子内容加载到 div 中。调用 ajax 似乎工作，但我有加载整个页面的问题，我想只加载具有特定 id 的 div 的内容。

这是我的代码：index.php

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">
       <?php the_title(); ?> 
    </a>
    <?php endwhile; endif; ?>
<div id="single-post-container"></div>

这是single.php

<?php $post = get_post($_POST['id']); ?>
    <div id="single-post post-<?php the_ID(); ?>">
    <?php while (have_posts()) : the_post(); ?>
                <?php the_title();?>
                <?php the_content();?>
    <?php endwhile;?> 
    </div>

这是js

   jQuery(document).ready(function(){

        jQuery.ajaxSetup({cache:false});
        jQuery(".post-link").click(function(){
            var post_link = jQuery(this).attr("href");

            jQuery("#single-post-container").html("content loading");
            jQuery("#single-post-container").load(post_link);
        return false;
        });

    });

我尝试在 post_link 之后添加 id #single-post，如下所示：

  jQuery("#single-post-container").load(post_link #single-post);

但是当我运行 gulp 时，我遇到了一个阻止我的错误。我怎样才能达到这个范围？

有人可以给我帮助或建议吗？

【问题讨论】：

什么是 post_link？您的 AJAX 调用调用的实际 url 是什么？如果您只是调用 single.php，首先要做的是调用 header() - 因此您可能会得到整个页面。但我可能完全走错了路。
post_link 是我点击的帖子的网址。（如localhost:8888/blog/title-post）。链接的 attr("href")
所以如果你在浏览器的地址栏中输入你会看到整个页面 - 帖子和标题等？

标签： javascript php jquery ajax wordpress

【解决方案1】：

我认为这可能是答案，但前提是我正确理解了问题：

什么是post_link？您的 AJAX 调用调用的实际 url 是什么？如果您只是调用 single.php，首先要做的是调用 header() - 因此您可能会得到整个页面。查看您的 index.php，我认为这可能是正在发生的事情。

如果是这样。您需要查看如何在 WordPress 中进行 AJAX 调用。您必须使用 add_action('wp_ajax_my_action', mycallback) 之类的内容添加 AJAX 回调。然后你的回调可以通过 get_post() 获取单个帖子。您的 AJAX 调用应该调用的实际 url 类似于：

您的域/wp-admin/admin-ajax.php?action=my_action&post_id=THEPOSTID。您可以使用 admin_url() 来帮助您构建正确的 url。

您可能需要将 THEPOSTID 注入您的 JavaScript。使用 wp_localize_script。或者您可以将其作为属性添加到 index.php 中并在您的 JavaScript 中获取。

然后您的回调 - mycallback() - 可以使用 get_post() 只获取帖子并在没有所有页面绒毛的情况下返回它。例如：

function mycallback()
{

   $postId = $_GET['post_id'];
   $postRow = get_post($postId);
   echo $postRow->post_content; 
   wp_die();
}

也许寻找一些关于如何使用 WordPress 进行 AJAX 的示例？例如http://wptheming.com/2013/07/simple-ajax-example/

更新：

添加了 wp_die();在 AJAX 回调结束时。您需要这样做以阻止 WordPress 吐出大量页面错误。事实上，这可能是您的 single.php 中缺少的部分。无论如何，使用 admin-ajax.php 可能会更好。

【讨论】：

【解决方案2】：

如果这可以帮助某人，我用这段代码解决了

//take the permalink of the single post
var post_permalink = locations[i].post_url + " #single-post";

// load post in the div
jQuery("#single-post-container").html("content loading");
jQuery('#single-post-container').load(post_permalink);

谢谢大家

【讨论】：