Intereting Posts
.post внутри jQuery.validator.addMethod всегда возвращает false Хранение массива переменных PHP $ _POST в виде массива PHP Crypt () Сравнение двух зашифрованных строк Создание многомерного вложенного массива из результата MySQL с повторяющимися значениями (PHP) PHP получает реальный IP (определение прокси) PHPMailer, отправляющий на несколько адресов, разделенных символом a, Доступ к некоторым свойствам объекта SimpleXMLElement Является array_key_exists ('submit_input_name', $ _ POST) лучше, чем ($ _POST == "submit_input_name") Поиск с полным именем вместо имени или фамилии PHP Stripe получает идентификатор транзакции после успешной покупки PHP XML: Недопустимое смещение, но оно в массиве? Неустранимая ошибка: превышено максимальное время выполнения 300 секунд Как создать новую модель с Sylius через SyliusResourceBundle Php: автозаполнение формы с использованием переменных $ _SESSION с несколькими php-файлами Когда использовать filter_input ()

Загрузка дополнительных сообщений Ajax Button в WordPress

Я просмотрел старые вопросы и попробовал много разных методов, которые, похоже, должны это сделать. Самое близкое, что мне нужно для работы, это вот здесь: Как реализовать разбиение на страницы на пользовательский WP_Query Ajax

Я пробовал все, и он просто не работает. На странице ничего не меняется. Если вы проверите кнопку «Загрузить еще» и щелкните по ней, jquery <a id="more_posts">Load More</a> действие «Загрузка дополнительной кнопки», поскольку оно изменяется с <a id="more_posts">Load More</a> в <a id="more_posts" disables="disabled">Load More</a> который даже не кажется мне правильным. Это не добавление сообщений, я думаю, что мне не хватает чего-то простого, но для жизни я не могу это исправить.

Код в моем файле шаблона:

 <div id="ajax-posts" class="row"> <?php $postsPerPage = 3; $args = [ 'post_type' => 'post', 'posts_per_page' => $postsPerPage, 'cat' => 1 ]; $loop = new WP_Query($args); while ($loop->have_posts()) : $loop->the_post(); ?> <div class="small-12 large-4 columns"> <h1><?php the_title(); ?></h1> <p><?php the_content(); ?></p> </div> <?php endwhile; echo '<a id="more_posts">Load More</a>'; wp_reset_postdata(); ?> </div> 

Код в моем файле функций:

 function more_post_ajax(){ $offset = $_POST["offset"]; $ppp = $_POST["ppp"]; header("Content-Type: text/html"); $args = [ 'suppress_filters' => true, 'post_type' => 'post', 'posts_per_page' => $ppp, 'cat' => 1, 'offset' => $offset, ]; $loop = new WP_Query($args); while ($loop->have_posts()) { $loop->the_post(); the_content(); } exit; } add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); 

И мой JQuery в нижнем колонтитуле:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready( function($) { var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>"; // What page we are on. var page = 5; // Post per page var ppp = 3; $("#more_posts").on("click", function() { // When btn is pressed. $("#more_posts").attr("disabled",true); // Disable the button, temp. $.post(ajaxUrl, { action: "more_post_ajax", offset: (page * ppp) + 1, ppp: ppp }) .success(function(posts) { page++; $("#ajax-posts").append(posts); // CHANGE THIS! $("#more_posts").attr("disabled", false); }); }); }); </script> 

Может ли кто-нибудь увидеть что-то, чего я не могу или не могу помочь?

ОБНОВЛЕНИЕ 24.04.2016.

Я создал учебное пособие на своей странице https://madebydenis.com/ajax-load-posts-on-wordpress/ о внедрении этой темы на Twenty Sixteen, поэтому не стесняйтесь проверить это 🙂

РЕДАКТИРОВАТЬ

Я тестировал это в двадцать пять, и он работает, поэтому он должен работать на вас.

В index.php (предполагая, что вы хотите показывать сообщения на главной странице, но это должно работать, даже если вы помещаете его в шаблон страницы) Я положил:

  <div id="ajax-posts" class="row"> <?php $postsPerPage = 3; $args = array( 'post_type' => 'post', 'posts_per_page' => $postsPerPage, 'cat' => 8 ); $loop = new WP_Query($args); while ($loop->have_posts()) : $loop->the_post(); ?> <div class="small-12 large-4 columns"> <h1><?php the_title(); ?></h1> <p><?php the_content(); ?></p> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <div id="more_posts">Load More</div> 

Это приведет к выходу 3 сообщений из категории 8 (у меня были сообщения в этой категории, поэтому я использовал их, вы можете использовать все, что захотите). Вы даже можете запросить категорию, в которой вы находитесь,

 $cat_id = get_query_var('cat'); 

Это даст вам идентификатор категории, который будет использоваться в вашем запросе. Вы можете поместить это в свой загрузчик (загрузите больше div) и потяните с помощью jQuery

 <div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div> 

И вытащите категорию с помощью

 var cat = $('#more_posts').data('category'); 

Но пока вы можете это исключить.

Далее в functions.php я добавил

 wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'noposts' => __('No older posts found', 'twentyfifteen'), )); 

Сразу после существующего wp_localize_script . Это позволит загрузить wordpress собственный admin-ajax.php, чтобы мы могли использовать его, когда мы вызываем его в нашем вызове ajax.

В конце файла functions.php я добавил функцию, которая будет загружать ваши сообщения:

 function more_post_ajax(){ $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3; $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0; header("Content-Type: text/html"); $args = array( 'suppress_filters' => true, 'post_type' => 'post', 'posts_per_page' => $ppp, 'cat' => 8, 'paged' => $page, ); $loop = new WP_Query($args); $out = ''; if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post(); $out .= '<div class="small-12 large-4 columns"> <h1>'.get_the_title().'</h1> <p>'.get_the_content().'</p> </div>'; endwhile; endif; wp_reset_postdata(); die($out); } add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); add_action('wp_ajax_more_post_ajax', 'more_post_ajax'); 

Здесь я добавил выложенный ключ в массиве, так что цикл может отслеживать, на какой странице вы находитесь, когда загружаете свои сообщения.

Если вы добавили свою категорию в загрузчик, добавьте:

 $cat = (isset($_POST['cat'])) ? $_POST['cat'] : ''; 

И вместо 8 вы бы поставили $cat . Это будет в массиве $_POST , и вы сможете использовать его в ajax.

Последняя часть – сама ajax. В functions.js я помещаю внутри $(document).ready(); окружающая среда

 var ppp = 3; // Post per page var cat = 8; var pageNumber = 1; function load_posts(){ pageNumber++; var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax'; $.ajax({ type: "POST", dataType: "html", url: ajax_posts.ajaxurl, data: str, success: function(data){ var $data = $(data); if($data.length){ $("#ajax-posts").append($data); $("#more_posts").attr("disabled",false); } else{ $("#more_posts").attr("disabled",true); } }, error : function(jqXHR, textStatus, errorThrown) { $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown); } }); return false; } $("#more_posts").on("click",function(){ // When btn is pressed. $("#more_posts").attr("disabled",true); // Disable the button, temp. load_posts(); }); 

Сэкономил, протестировал его, и он работает 🙂

Изображения как доказательство (не против дрянной стилизации, это было сделано быстро). Также размещаемый контент – тарабарщина xD

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

ОБНОВИТЬ

Для «бесконечной нагрузки» вместо нажатия на кнопку на кнопке (просто сделайте ее невидимой, с visibility: hidden; ) вы можете попробовать

 $(window).on('scroll', function () { if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) { load_posts(); } }); 

Это должно запустить load_posts() когда вы находитесь на 100px в нижней части страницы. В случае учебника на моем сайте вы можете добавить чек, чтобы узнать, загружаются ли записи (чтобы предотвратить стрельбу ajax дважды), и вы можете запустить его, когда свиток достигнет верхней части нижнего колонтитула

 $(window).on('scroll', function(){ if($('body').scrollTop()+$(window).height() > $('footer').offset().top){ if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){ load_posts(); } } }); 

Теперь единственный недостаток в этих случаях состоит в том, что вы никогда не можете прокрутить до значения $(document).height() - 100 или $('footer').offset().top по какой-то причине. Если это произойдет, просто увеличьте число прокрутки.

Вы можете легко проверить это, поставив console.log s в свой код и увидеть в инспекторе то, что они выбрасывают

 $(window).on('scroll', function () { console.log($(window).scrollTop() + $(window).height()); console.log($(document).height() - 100); if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) { load_posts(); } }); 

И просто отрегулируйте соответственно;)

Надеюсь, это поможет 🙂 Если у вас есть вопросы, просто спросите.