我几天前发布了一个关于如何在我正在开发的自定义Wordpress模板中Scroll to Single Post的问题。我在坚果壳中需要的是在单击特定链接时将单个帖子加载到定义的DIV中，然后向下滚动到保存新加载内容的DIV。考虑到Wordpress或任何其他CMS的动态内容性质，该链接的URL不能是绝对的。
不幸的是，那段时间没有任何具体的答案，所以我决定窥探一下。由于主要问题是动态加载内容，我决定放大我在Wordpress上使用AJAX的方式：
到目前为止，我从Emanuele Feronato的一篇精彩文章（Loading WordPress posts with Ajax and jQuery）中得到了一个小小的想法。他基本上将帖子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函数中？
答案 0 :(得分：26)
好吧，幸运的是，喝了一些带香烟的咖啡，我设法解决了这个问题：
这就是我的所作所为：
<强> 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_link变量。这使我能够简单地将该变量放入.load（）函数中，替换显然不起作用的http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}。
VOILA！问题解决了。
虽然我还没有对此进行测试，但我相信在这种情况下使用固定链接实际上不需要按照Emanuele Feronato在post中的指示更改Wordpress中的永久链接结构。
因此，如果有人有意图将Wordpress帖子动态加载到已定义的DIV中，您可以试试这个！
答案 1 :(得分：7)
而不是使用：
var post_id = $(this).attr("rel");
你应该直接获取href。他们都是一样的。
var post_id = $(this).attr("href");
这有两件事：