Question

我有一个带图片库的页面。每个图像都链接在一起，在画廊上方的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中加载的模板？我无法更改原始帖子模板，因为我希望它在原始页面上保持完整。

同样感兴趣的是，如果有更好的方法可以实现同样的体验。

任何帮助表示赞赏。感谢。

Answer 1

评论帮助我走上正轨但必须解决其他一些问题才能完成。谢谢您的帮助。如果有人需要以这种方式将url更改为id，我就是这样做的。

图片链接：

-class告诉脚本这是链接。你会把帖子塞进href。

<a href="SlugOfPostGoesHere" class="ajax" </a>

在同一页面上，这个div将从脚本加载自定义php页面：

<div id="tabs">

</div>

标题中的脚本：

-Pulls slug from href并创建变量。（在这种情况下为postslug）

- 加载时在div #tabs中加载“loading ...”。

- 在同一页面的div #tabs中加载自定义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中传递的slug中获取帖子的ID：

-First Line从url中的变量slugid获取post slug并将其设置为变量$ slug。

- 第二行从slug创建完整的URL。

- 第三行为您提供来自网址的帖子ID。

<?php
$slug = $_GET['slugid'];
$url = ("http://www.yourwebsite.com/" .$slug);
$postid = url_to_postid($url);
?>

现在您可以编写页面以使用帖子ID在div中加载您想要的内容。

Answer 2

您真的不需要自定义模板。使用href属性加载所需页面，然后通过指定选择器选择要显示的部分：

例如： $（＆＃34;＃Div-That-Loads-Post＆＃34;）。load（post_url +＆＃34; .ngg-gallery-thumbnail＆＃34;）;

请注意空格。＆＃34; .ngg画廊缩略图＆＃34;不行。

参考：http://api.jquery.com/load/

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

2 个答案: