使用 AJAX 将 WordPress 文章内容加载到 DIV 中

Question

我几天前在StackOverflow上发布了一个问题，关于如何在我正在开发的自定义Wordpress模板中滚动到单个文章。简而言之，当单击特定链接时，我需要将单个帖子加载到已定义的DIV中，然后滚动到包含新加载内容的DIV。考虑到WordPress或任何其他CMS的动态内容性质，该链接的URL不能是绝对的。

不幸的是，在那个时候还没有任何具体的答案，所以我决定四处寻找一下。由于主要问题是动态加载内容，所以我决定重点研究如何在Wordpress上使用AJAX进行操作：

到目前为止，我从Emanuele Feronato的一篇优秀文章（使用Ajax和jQuery加载WordPress文章）中获得了一些想法。他基本上将帖子ID存储在可点击链接的rel属性中，然后调用它。好吧，还有一些其他步骤需要使其工作，但我现在仅提及文章ID的原因是因为它似乎是等式中唯一不正确的部分；文章ID加载到链接的rel属性中，但未加载到.load函数中。

为了让您对我在标记中得到的更好的想法有所了解： 头部文件中的AJAX / JQUERY

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
    return false;
    });

});

INDEX.PHP

<?php get_header();?>

<!--home-->
<div id="home">

<!--home-bg-->
<img class="home-bg" src="<?php bloginfo('template_url');?>/images/home-bg.jpg" />
<!--home-bg-->

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>">

        <div class="box element col<?php echo rand(2,4); ?>" id="<?php $category = get_the_category(); echo $category[0]->cat_name; ?>">               

            <?php the_post_thumbnail(); ?>

            <span class="title"><?php the_title(); ?></span>    

            <span class="ex"><?php the_excerpt(); ?></span>

        </div>

    </a>

    <?php endwhile; endif; ?>

</div>
<!--home-->

<div id="single-home-container"></div>

SINGLE-HOME.PHP（这是一个自定义模板）

<?php

    /*
    Template Name: single-home
    */

?>    

<?php

    $post = get_post($_POST['id']);

?>

    <!--single-home-->
    <div id="single-home post-<?php the_ID(); ?>">

    <!--single-home-bg-->
    <div class="single-home-bg">

    </div>
    <!--single-home-bg-->

    <?php while (have_posts()) : the_post(); ?>

        <!--sh-image-->
        <div class="sh-image">

            <?php the_post_thumbnail(); ?>

        </div>
        <!--sh-image-->

        <!--sh-post-->
        <div class="sh-post">

            <!--sh-cat-date-->
            <div class="sh-cat-date">

                <?php

                    $category = get_the_category(); 
                    echo $category[0]->cat_name;

                ?>

                - <?php the_time('l, F jS, Y') ?>

            </div>
            <!--sh-cat-date-->

            <!--sh-title-->
            <div class="sh-title">

                <?php the_title();?>

            </div>
            <!--sh-title-->

            <!--sh-excerpt-->
            <div class="sh-excerpt">

                <?php the_excerpt();?>

            </div>
            <!--sh-excerpt-->

            <!--sh-content-->
            <div class="sh-content">

                <?php the_content();?>

            </div>
            <!--sh-content-->

    </div>
    <!--sh-post-->        

    <?php endwhile;?>

    <div class="clearfix"></div>    

    </div>
    <!--single-home-->

仅供记录：当文章ID无法加载时，我尝试安装了Emanuele Feronato演示中使用的特定Kubrick主题，并根据他的指南进行了必要的更改，但没有任何作用。

有人知道发生了什么或者是否有其他方法在.load函数中动态加载文章ID吗？

- vynx

---

有一种首选的方法可以利用内置的WP ajax功能-您可以在这里查看它：5 tips for using AJAX in WordPress。 - random_user_name

我在这里编写了一份详尽的指南，介绍如何在WordPress中使用AJAX。链接 - davidcondrey

Answer 1

幸运的是，在喝了咖啡和抽了烟之后，我设法解决了这个问题：

这就是我所做的：

1. 测试是否在 rel 属性中捕获并成功加载了文章 ID 并存储在 post_id 变量中

我在 AJAX / JQUERY 代码片段中插入了一个警告回调来查看文章 ID 是否正确地加载到 post_id 变量中。代码如下：

$(document).ready(function(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_id = $(this).attr("rel");
        alert(post_id);
        $("#single-home-container").html("loading...");
        $("#single-home-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id});
    return false;
    });

});

当我点击链接时，回调返回了与帖子相关的准确帖子ID。这使得问题被隔离到了.load()函数中定义的URL上。似乎仅使用帖子ID无法将帖子加载到定义的DIV中。

2. 将链接的rel属性从帖子ID更改为帖子永久链接

我决定既然帖子ID明显无效，我会改用帖子的永久链接标签来替换链接的rel属性。以下是之前链接的rel属性的样子：

<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a>

现在它的外观如下所示：

<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a>

3. 编辑 .load() 函数的 URL / 值

接着上面的内容，我需要对 AJAX / JQUERY 代码片段进行更改，以便不再使用帖子ID：

$(document).ready(function(){

        $.ajaxSetup({cache:false});
        $(".trick").click(function(){
            var post_link = $(this).attr("rel");
            $("#single-home-container").html("loading...");
            $("#single-home-container").load(post_link);
        return false;
        });

    });

正如您从上面看到的那样，我已经获取了链接的rel属性值（现在是帖子的永久链接），并将其放入post_link变量中。这使我可以简单地取出该变量并将其放入.load()函数中，替换掉http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}，显然这不起作用。

瞧！问题解决了。

虽然我还没有测试过，但我相信在这种情况下使用永久链接实际上可以省去在Wordpress中更改永久链接结构的需要，就像Emanuele Feronato在他的文章中指导的那样。

因此，如果有人想要动态加载WordPress帖子到一个定义好的DIV中，您可能可以尝试这个方法！

- vynx

---

问题：您会如何编写用于此 Ajax 加载页面的地址栏的 URL？ - Matthew Woodard

不幸的是，这是一个我自己还没有弄清楚的问题。我相当确定有办法根据加载的内容更新URL，但即使可以做到，您也需要考虑这样一种情况：用户转到更新后的URL，但由于没有触发点击事件来加载数据，所以看不到预期的内容。 - vynx

@M.Woodard，我已经找到了一种方法来为URL设置哈希值，并根据这些值的存在或缺失，触发事件/动画/ajax加载。虽然我的解决方案可能不是最优的方式，但如果您能创建一个新主题，我仍然很愿意分享。 - vynx

非常有帮助的答案 :) - fool-dev

Answer 2

使用以下方式替代：

var post_id = $(this).attr("rel");

你应该直接获取 href。它们是相同的。

var post_id = $(this).attr("href");

这有两个好处：

1. 减少HTML中的标记
2. 避免使用rel作为数据属性，这在现在的HTML5中不是一个明智的选择。（阅读此处）

- Cosmin

---

你说得很好。你绝对是正确的，不必将永久链接URL放入rel属性中，只需使用HREF即可，因为它们都保存着相同的值。加一！ - vynx

这对我来说有效，首先要感谢你。问题是：你会如何编写加载此AJAX页面的URL到地址栏中？ - Matthew Woodard