使用 AJAX 将 Wordpress 帖子内容加载到 DIV

Posted 2023-02-24

【中文标题】使用 AJAX 将 Wordpress 帖子内容加载到 DIV

【英文标题】：Load Wordpress post content into DIV using AJAX

【发布时间】：2011-11-23 11:26:24

【问题描述】：

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

不幸的是，当时没有任何具体的答案，所以我决定稍微打听一下。而且由于主要问题是动态加载内容，我决定放大我如何在 Wordpress 上使用 AJAX 来完成它：

到目前为止，我从 Emanuele Feronato 的一篇很棒的帖子 (Loading WordPress posts with Ajax and jQuery) 中得到了一个小小的想法。他基本上是将post ID存储在可点击链接的rel属性中，然后调用它。好吧，还有其他一些步骤可以完成这项工作，但我现在只提到帖子 ID 的原因是因为它似乎是等式中唯一不正确的部分；帖子 ID 加载到链接的 rel 属性中，但无法加载到 .load 函数中。

只是为了让您更好地了解到目前为止我在标记中得到了什么：

HEADER.PHP 中的 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 主题，并根据他的指南进行了必要的更改，但没有任何效果。

有谁知道发生了什么，或者是否有任何其他方法可以将帖子 ID 动态加载到 .load 函数中？

【问题讨论】：

有一种使用内置 WP ajax 功能的首选方法 - 您可以在此处查看：5 tips for using AJAX in WordPress

I wrote a thorough walkthrough on how to get AJAX working in Wordpress here.

【参考方案1】：

好吧，靠运气和一些咖啡和香烟，我设法解决了这个问题：

这就是我所做的：

1.测试是否在 rel 属性中捕获帖子 ID 并在 post_id 变量中正确加载

我在 AJAX / JQUERY sn-p 上插入了一个警报回调，以查看帖子 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 sn-p 进行更改，以便它不再使用帖子 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。

瞧！问题解决了。

虽然我还没有对此进行测试，但我相信在这种情况下使用永久链接实际上无需按照 Emanuele Feronato 在其post 中的指示更改 Wordpress 中的永久链接结构。

因此，如果有人打算将 Wordpress 帖子动态加载到定义的 DIV 中，您可能可以尝试一下！

【讨论】：

问题：对于这个 ajax 加载页面，你会如何将 url 写入地址栏？

不幸的是，这是一个我自己还没有弄清楚的问题。我很确定有一些方法可以根据已加载的内容更新 URL，但即使这是可行的，您也需要考虑用户访问更新后的 URL 而没有查看预期的内容，因为没有触发点击事件来加载数据。

@M.Woodard 我想出了一种方法来为 URL 设置哈希值，并根据这些值的存在与否，我能够触发事件/动画/ajax 加载。虽然我的解决方案可能不是最佳方式，但如果您能够为此创建一个新主题，我仍然很乐意分享。

非常有帮助的答案:)

【参考方案2】：

而不是使用：

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

你应该直接获取href。他们都是一样的。

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

这有助于两件事：

HTML 中的标记更少 您远离使用 rel 作为数据属性，这在当今 HTML5 中不是一个非常明智的选择。 (read here)

【讨论】：

好点在那里。你是绝对正确的，而不是将永久链接 URL 扔到 rel 属性中，只使用 HREF 就足够了，因为它们都持有相同的值。 +1 ！

这对我有用，所以首先谢谢你。问题：您将如何将 url 写入这个 ajax 加载页面的地址栏？