使用不同的模板在Div中加载Wordpress Post


Load Wordpress Post In Div Using A Different Template

我有一个带有图片库的页面。每个图片都被链接到库上方的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/