题 使用AJAX将Wordpress后期内容加载到DIV中


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

不幸的是,在那个时间点没有任何具体的答案,所以我决定窥探一下。由于主要问题是动态加载内容,我决定放大我如何在Wordpress上使用AJAX来实现它:

到目前为止,我从一个伟大的帖子中得到了一个小小的想法(使用Ajax和jQuery加载WordPress帖子)Emanuele Feronato。他基本上将帖子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函数中?


27
2017-09-23 08:16


起源


有一种首选的方法利用内置的WP ajax功能 - 你可以在这里看到它: 在WordPress中使用AJAX的5个技巧 - cale_b
我在这里写了一篇关于如何在Wordpress中使用AJAX的全面演练。 - davidcondrey


答案:


好吧,幸运的是,一些咖啡加香烟,我设法解决了这个问题:

这是我做的:

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属性中使用post的永久链接标记。这就是它的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的永久链接)并将其抛入post_link变量。这使我能够简单地将该变量放入.load()函数中,替换它 http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}这显然不起作用。

瞧!问题解决了。

虽然我还没有对此进行测试,但我认为在这种情况下使用永久链接实际上是不需要按照Emanuele Feronato在他的指示中更改Wordpress中的固定链接结构。 岗位

因此,如果任何人有意图将Wordpress帖子动态加载到已定义的DIV中,您可以试试这个!


25
2017-09-23 09:15



问题:如何将URL写入此ajax加载页面的地址栏? - Matthew Woodard
不幸的是,这是一个我尚未弄明白的问题。我很确定有多种方法可以根据加载的内容更新URL,但即使这样做也是可行的,您需要考虑用户转到更新的URL的情况的可能性,而不是查看目标内容,因为没有触发加载数据的点击事件。 - vynx
@ M.Woodard我已经找到了一种方法来设置URL的哈希值,并根据这些值的存在与否,我能够触发事件/动画/ ajax加载。虽然我的解决方案可能不是最佳方式,但如果您能够创建一个关于此的新主题,我仍然会喜欢分享。 - vynx
非常有用的答案:) - fool-dev


而不是使用:

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

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

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

这有助于做两件事:

  1. HTML中的标记较少
  2. 您远离使用rel作为数据属性,这对于HTML5来说不是一个非常明智的选择。 (在这里阅读

7
2018-01-17 23:24



你有好处。你是绝对正确的,而不是将永久链接URL扔到rel属性中,只需使用HREF即可,因为它们都保持相同的值。 +1! - vynx
这对我有用,所以先谢谢你和formost。问题:如何将URL写入此ajax加载页面的地址栏? - Matthew Woodard