如何使用ajax仅加载wordpress帖子的内容

Question

我正在使用 ajax 在 WordPress 中加载新帖子。这是基本代码：

function test(){
    var menuitem = document.getElementsByTagName('nav')[0].childNodes;
    for(var i= 0; i < menuitem.length; i++)
    {
        bindEvt(menuitem[i], "click", loadajax);
    }
};
function loadajax (event) {
    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange  = function(){
        var content = document.getElementsByTagName('article')[0];
        if(xhr.readyState  == 4){
            if(xhr.status  == 200) {
                content.innerHTML = xhr.responseText;
            } else{
                content.innerHTML = 'Cannot connect to server. Check your internet connection'}
        }
    }; 

    xhr.open('GET', this.href, true);
    xhr.send();

}
bindEvt(window, "load", test);

它工作正常，只是它加载了整个新帖子的菜单、页眉、页脚等......我只需要内容和评论。有没有办法使用ajax专门向wordpress询问这些内容，或者是唯一可能的方法来获取整个页面，然后仅从中提取我需要的内容并重新发布它？

也许为其制作一个特定的模板页面？但我该如何让它发挥作用呢？

我希望我已经说清楚了。如果没有请告诉我！第一次尝试 WordPress 主题/PHP。

感谢您的帮助！

Answer 1

您可以使用模板，但您需要编写自己的模板，这会变得有点繁琐。Andrew M. 关于 jQuery 解决方案的评论是正确的，您也是如此：您仍然会下载整个文档，但您只能很容易地插入您想要的部分。有关更多详细信息，请参阅加载页面片段部分，但为了方便起见：

$('#result').load('ajax/test.html #container');

将加载test.html#container并将该文档元素的内容插入到#result父页面上的元素中。易如反掌。

当然，这将导致与完全渲染源页面一样多的服务器负载和成本，但幸运的是，图像等只有在它们是渲染部分的一部分时才会被加载。不过，除非您有大量流量，否则不必担心这种开销。

假设您希望服务器首先发送您需要的数据：您如何处理这取决于您对 WordPress 实例的其他需求。

如果您只需要加载一页，并且没有人直接查看原始页面，那么很简单 - 编写一个仅包含以下内容的模板：

while ( have_posts() ) : the_post();
  echo '<h2>';
  the_title();
  echo '</h2>';
  the_content();
endwhile;

并为相关帖子设置该模板。

但是，如果您还需要人们查看源页面上的帖子，您将必须使用如上所述的单曲模板创建一个主题，并安装主题切换器插件，并传递必要的 mojo 来调用AJAX 请求中的机器可读主题。这有点复杂。