几天前,我发布了一个有关如何在我正在开发的自定义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函数中?
好吧,通过运气和一些带香烟的咖啡,我设法解决了这个问题:
这是我所做的:
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}显然不起作用的变量。
http://<?php echo $_SERVER[HTTP_HOST]; ?>/single-home/",{id:post_id}
瞧!问题解决了。
尽管我尚未对此进行测试,但我相信在这种情况下使用永久链接实际上消除了按Emanuele Feronato的帖子中的指示在Wordpress中更改永久链接结构的需要。
因此,如果有人打算将Wordpress帖子动态加载到定义的DIV中,则可以尝试一下!