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请求中调用机器可读的主题。这有点复杂。

Answer 2

所以，我来到这里寻找与OP [cmplieger]提出的解决方案类似的解决方案。

我之前使用过sudowned描述的方法。我做了一个WordPress主题。页面使用标题检测，可选地加载标题然后加载内容，可选择页脚它是一个很棒的主题，加载速度超快。这真的是最好的方法......

...然而

我认为只有在浏览器方面有效的东西才会很棒，所以这篇文章激励我写下它：

注意：这不是我这样做的方式。我真的建议上面提到的方式。但是，在某些情况下，您可能没有别的办法，

Soooo ....

/* requires jQuery */
// some assumptions:
// you are using jQuery
// the pages you are calling are inside
// the same domain as the page calling them.
//

一片HTML
<div id="content"> <div id="list"> <ul> <li name="//fiddle.jshell.net/isme/j4ygp3nn/show/">Page 1</li> <li name="//fiddle.jshell.net/isme/gmvj0ohg/show/">Page 2</li> </ul> </div> </div>

CSS的引人注目：
#list ul { list-style-type: none;} #popc { margin-top: 20px; margin-left: 20px;} #list ul li { text-decoration: underline; color: #343434; margin-bottom: 5px; cursor: pointer;} #popcontent { background: #ffffff; border: 1px solid #000000; width: 80%; min-width: 80%; margin-left: auto; margin-right: auto; height: 80%; min-height: 300px; position: absolute; display: none; top: 10%; left: 10%; border-radius: 12px;} #x_it { text-align: center; float: right; width: 17px; border: solid 2px #000000; color: #000000; background: red; border-radius: 12px; padding-left: 0px; padding-right: 1px; padding-top: 2px; padding-bottom: 0px; margin-right: 10px; font-family: sans-serif; font-weight: bold; cursor: pointer;}

传播jQuery的自由层：

   jQuery("#content").after("\  
      <div id=\"popcontent\">\  
           <p id='x_it'>X</p>\  
 <div id='popc'></div></div>");  

   popc = jQuery("#popc");  
   popcontent = jQuery("#popcontent");  
  jQuery("#x_it").click(function() {  
     popcontent.fadeOut("fast");  
   });  

jQuery("#list ul li").click(function()  
                                 {  
                     popc.html("");  
                     popc.load(jQuery(this).attr("name") + \  
                     " #main_content");  
                     popcontent.fadeIn("fast");  
                                 });

`

我在小提琴上发布了一个工作演示： https://jsfiddle.net/isme/jjok5kus/34/

这里的真正诀窍是加载调用第二个参数是＆＃34;＃main_content＆＃34;。这告诉加载函数只将该元素加载到您选择的div中。请参阅jQuery.load()

的手册

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

2 个答案: