0

我正在使用 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。

谢谢你的帮助！

4

2 回答 2

4

您可以使用模板，但您需要自己编写模板，而且会有点繁琐。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 请求中的机器可读主题。这有点复杂。

于 2012-09-09T22:59:43.180 回答
0

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

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

然而...

我认为只有在浏览器端才能工作的东西会很棒，所以这篇文章启发了我写它：

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

呜呜呜……

/* 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/

这里真正的技巧是在加载调用中。
第二个参数是“#main_content”。这告诉加载函数只将该元素加载到您选择的 div 中。请参阅jQuery.load()的手册

于 2016-12-29T22:22:28.990 回答