我有一个带有图片库的页面。每个图片都被链接到库上方的div中打开一个wordpress帖子。我有这个工作,但它加载了整个页面,包括页眉和页脚。
我需要的是使用自定义页面模板来只显示我需要的页面部分。比如从div中加载的页面中删除页眉和页脚。我知道如何创建模板,但不知道如何在div中获得帖子以使用该页面模板。
以下是我如何设置的。
标头中的脚本:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("a.ajax").click(function(){
var post_url = $(this).attr("href");
$("#Div-That-Loads-Post").html("loading...");
$("#Div-That-Loads-Post").load(post_url);
return false;
});
});
</script>
图库中的链接:
<div class="ngg-gallery-thumbnail" >
<a href="../<?php echo $image->ngg_custom_fields["Link"]; ?>"
class="ajax"
title="<?php echo $image->description ?>"
<?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image-> thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</div>
在该页面上的帖子/画廊上方潜水:
<div id="Div-That-Loads-Post">
</div>
就像我说的,它在div中加载页面。我该如何指定它在div加载的模板?我无法更改原始帖子模板,因为我希望它在原始页面上保持原样。
同样感兴趣的是,是否有更好的方式来实现同样的体验。
感谢您的帮助。谢谢
Comment帮助我走上了正轨,但还必须解决其他一些问题。谢谢你的帮助。如果有人需要以这种方式将url更改为id,我就是这样做的。
图像链接:
-类告诉脚本这是链接。你将为href投递一段邮件。
<a href="SlugOfPostGoesHere" class="ajax" </a>
在同一页面上,这个Div将从脚本加载自定义php页面:
<div id="tabs">
</div>
页眉中的脚本:
-从href中提取段塞并创建变量。(在这种情况下是postslog)
-加载时在div#选项卡中加载"loading…"。
-在同一页面的div#选项卡中加载自定义php页面,并将变量附加到url。(你不会在浏览器中看到这个)
-滚动到页面顶部。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$("a.ajax").click(function(){
var postslug = $(this).attr("href")
$("#tabs").html("loading...");
$("#tabs").load("../custom-page.php?slugid=" + postslug);
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
然后在您的自定义PHP页面上,您需要放置:
<?php require( "wp-load.php" ); ?>
(或者指向wordpress页面的任何路径,以便您可以使用wp功能)
还有这个代码,从你在URL中传递的消息中获取帖子的ID:
-First Line从url中的变量slugid中获取post slug,并将其设置为变量$slug。
-第二行从slug创建完整的URL。
-第三行提供了来自url的帖子ID。
<?php
$slug = $_GET['slugid'];
$url = ("http://www.yourwebsite.com/" .$slug);
$postid = url_to_postid($url);
?>
现在,您可以对页面进行编码,使用post ID在div中加载您想要的内容。
您实际上并不需要自定义模板。使用href属性加载所需页面,并通过指定选择器选择要显示的部件:
例如:$("#Div That Loads Post").load(Post_url+".ngg图库缩略图");
请注意空格。".ngg图库缩略图"将不起作用。
参考:http://api.jquery.com/load/