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

Question

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

不幸的是，那时没有任何具体的答案，所以我决定稍作观察。由于主要问题是动态加载内容，因此我决定放大如何在Wordpress上使用AJAX来实现：

到目前为止，我从Emanuele
Feronato的一篇很棒的帖子（用Ajax和jQuery加载WordPress帖子）中得到了一点想法。他基本上将帖子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;
    });

});

索引库

<?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函数中？

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属性中使用帖子的永久链接标签。这是链接的关联看起来像以前的样子：

<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}显然不起作用的变量。

瞧！问题解决了。

尽管我尚未对此进行测试，但我相信在这种情况下使用永久链接实际上消除了按Emanuele
Feronato的帖子中的指示在Wordpress中更改永久链接结构的需要。

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