Как загрузить только содержимое сообщения Wordpress с помощью ajax

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 Theme/PHP.

Благодарим за помощь!

Answer 1

Вы можете использовать шаблон, но вам нужно будет написать свой собственный, и это будет немного затруднительно. Комментарий Эндрю М. о решении 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. На странице использовалось определение заголовка, возможно, загрузили заголовки, а затем загрузили контент, а затем нижний колонтитул.
Это отличная тема и очень быстро загружается. Это действительно лучший способ ...

однако ...

Я подумал, что было бы здорово иметь что-то, что работает на стороне браузера только, хотя, так этот пост вдохновил меня написать это:

сведению : Это не так, как я бы сделал это. Я действительно предлагаю, как это было сказано выше. Однако могут быть некоторые ситуации, которые вы не могли бы иметь никакого другого пути,

Тааак ....

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

Распространение либерального слоя jQ uery:

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()