php 使用 AJAX 将 Wordpress 帖子内容加载到 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7526113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load Wordpress post content into DIV using AJAX
提问by vynx
I posted a question a couple of days ago on how to Scroll to Single Postin a custom Wordpress template that I'm developing. What I need in the nut shell is to load a single post into a defined DIV when a particular link is clicked and then scroll down to that DIV holding the newly loaded content. Considering the dynamic content nature of Wordpress or that of any other CMS, the URL of that link cannot be an absolute one.
几天前我发布了一个关于如何在我正在开发的自定义 Wordpress 模板中滚动到单个帖子的问题。我在坚果壳中需要的是在单击特定链接时将单个帖子加载到定义的 DIV 中，然后向下滚动到包含新加载内容的 DIV。考虑到 Wordpress 或任何其他 CMS 的动态内容性质，该链接的 URL 不能是绝对的。
Unfortunately, there wasn't any concrete answer around at that point of time, so I decided to snoop around a little bit. And since the main issue was loading the content in dynamically, I decide to zoom in on how I can do it with AJAX on Wordpress:
不幸的是，当时没有任何具体的答案，所以我决定稍微窥探一下。由于主要问题是动态加载内容，我决定放大如何在 Wordpress 上使用 AJAX 执行此操作：
So far, I have gotten a slight idea from a great post (Loading WordPress posts with Ajax and jQuery) by Emanuele Feronato. He basically stores the post ID in the rel attribute of the clickable link and then calls it. Well, there are a few other steps to make this work, but the reason I'm only mentioning the post ID right now is because it seems it's the only part of the equation that isn't right; the post ID loads into the link's rel attribute but fails to load into the .load function.
到目前为止，我从Emanuele Feronato 的一篇很棒的帖子（使用 Ajax 和 jQuery 加载 WordPress 帖子）中得到了一些想法。他基本上是将帖子ID存储在可点击链接的rel属性中，然后调用它。好吧，还有其他一些步骤可以使这项工作发挥作用，但我现在只提到帖子 ID 的原因是因为它似乎是等式中唯一不正确的部分；帖子 ID 加载到链接的 rel 属性中，但无法加载到 .load 函数中。
Just to give you a better idea of what I've gotten in my markup so far:
只是为了让您更好地了解到目前为止我在标记中得到的内容：
THE AJAX/JQUERY IN HEADER.PHP
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 (THIS IS A CUSTOM TEMPLATE)
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-->
Just for the record: When the post ID failed to load, I tried installing that particular Kubrick theme used in Emanuele Feronato's demo and made the necessary changes according to his guide but nothing worked.
仅作记录：当帖子 ID 加载失败时，我尝试安装 Emanuele Feronato 演示中使用的特定 Kubrick 主题，并根据他的指南进行了必要的更改，但没有任何效果。
Does anyone have any idea what's going on or if there is any other way to dynamically load the post ID into the .load function?
有没有人知道发生了什么，或者是否有任何其他方法可以将帖子 ID 动态加载到 .load 函数中？
采纳答案by vynx
Well, by a stroke of luck and some coffee with cigarettes, I managed to resolve the issue:
好吧，靠运气和一些带香烟的咖啡，我设法解决了这个问题：
Here's what I did:
这是我所做的：
1. Test if post ID is captured in the rel attribute and loaded properly in the post_id variable
1.测试是否在rel属性中捕获了post ID并在post_id变量中正确加载
I inserted an alert call back on the AJAX / JQUERY snippet to see if the post ID was even loading into the post_id variable right. This is how it looked like:
我在 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;
});
});
So when I clicked on the link, the call back gave the accurate post ID associated with the post. This kinda isolated the problem right down to the URL defined in the .load() function. It seemed that the post ID was just not sufficient to load the post into defined DIV.
所以当我点击链接时，回调给出了与帖子相关的准确帖子 ID。这有点将问题隔离到 .load() 函数中定义的 URL。似乎帖子 ID 不足以将帖子加载到定义的 DIV 中。
2. Change link's rel attribute from post ID to post permalink
2. 将链接的 rel 属性从 post ID 更改为 post permalink
I decided that since the post ID was clearly not working I would instead use the post's permalink tag in the link's rel attribute. This is how it link's rel looked like previously:
我决定因为帖子 ID 显然不起作用，所以我会在链接的 rel 属性中使用帖子的永久链接标签。这是它链接的 rel 以前的样子：
<a class="trick" rel="<?php the_ID(); ?>" href="<?php the_permalink();?>"></a>
And this is how it looks like now:
这就是它现在的样子：
<a class="trick" rel="<?php the_permalink ?>" href="<?php the_permalink();?>"></a>
3. Edit .load() function URL / value
3. 编辑 .load() 函数 URL/值
Following on from there, I had to make a change to the AJAX / JQUERY snippet so that it will not use the post ID anymore:
从那里开始，我不得不对 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;
});
});
As you can see from the above, I've taken the link's rel attribute value (which is now the post's permalink) and thrown it into the post_link variable. This enables me to simply take that variable and place it into the .load() function, replacing http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}which obviously didn't work.
从上面可以看出，我已经获取了链接的 rel 属性值（现在是帖子的永久链接）并将其放入 post_link 变量中。这使我能够简单地将该变量放入 .load() 函数中，替换http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}它显然不起作用。
VOILA! Problem solved.
瞧！问题解决了。
Though I have yet to test this, I believe that using the permalink in this instance actually cuts out the need to change the permalink structure in Wordpress as instructed by Emanuele Feronato in his post.
虽然我还没有对此进行测试，但我相信在这种情况下使用永久链接实际上可以消除 Emanuele Feronato 在他的帖子中所指示的更改 Wordpress 中永久链接结构的需要。
So if anyone has the intent to dynamically load Wordpress posts into a defined DIV, you can probably try this out!
因此，如果有人打算将 Wordpress 帖子动态加载到定义的 DIV 中，您可以尝试一下！
回答by Cosmin
Instead of using:
而不是使用：
var post_id = $(this).attr("rel");
you should directly fetch the href. They're both the same.
你应该直接获取href。他们都是一样的。
var post_id = $(this).attr("href");
This helps with 2 things:
这有助于两件事：
- Less markup in your HTML
- You stay away from using rel as a data attribute, which is not a very wise choice nowadays with HTML5. (read here)
- 减少 HTML 中的标记
- 您避免使用 rel 作为数据属性，这在当今的 HTML5 中并不是一个非常明智的选择。（在这里阅读）
