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

【问题标题】：Load Wordpress Post In Div Using A Different Template使用不同的模板在 Div 中加载 Wordpress 帖子
【发布时间】：2014-04-14 21:22:10
【问题描述】：

我有一个带有图片库的页面。每个图像都链接到在画廊上方的 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：

<div id="Div-That-Loads-Post">

</div>

就像我说的那样，它将页面加载到 div 中。如何指定它在 div 中加载的模板？我无法更改原始帖子模板，因为我希望它在原始页面上保持不变。

如果有更好的方法来获得同样的体验，也很感兴趣。

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

【问题讨论】：

在你的 ajax 中调用一个自定义的 php 文件。该文件可以包含您喜欢的任何内容。我建议您将 postID 发布到此文件，然后使用它通过 get_post() 提取您想要的详细信息；
这是有道理的。使格式化 div 内容变得容易。我遇到的问题是我正在从 postname 加载页面。因为我使用 /%postname%/ 作为我的永久链接，所以我没有使用我知道的帖子 ID。我正在手动将 post slug 输入到后端的图像链接中。然后链接将其传递给脚本，以便它可以在 div 中加载该帖子。有没有办法发布帖子名以使用自定义 php 文件加载内容，或者我错过了什么？我无法使用自定义 php 文件在 div 中加载任何内容。谢谢。

标签： php jquery ajax wordpress

【解决方案1】：

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

图片链接：

-class 告诉脚本这是链接。你会把帖子的slug放在href。

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

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

<div id="tabs">

</div>

标题中的脚本：

-从href中拉出slug并创建变量。（在这种情况下为postslug）

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

-在同一页面上的 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。

-第三行给出来自 url 的帖子 ID。

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

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

【讨论】：

【解决方案2】：

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

例如： $("#Div-That-Loads-Post").load(post_url + ".ngg-gallery-thumbnail");

请注意空格。 “.ngg-gallery-thumbnail”将不起作用。

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

【讨论】：