ОБНОВЛЕНИЕ СУХОЙ
<script type="text/javascript"> jQuery(function($){ function fetchBlogPosts(){ $.post( ajaxUrl, {'action' : 'post_blog', 'security' :'<?php echo wp_create_nonce('load_more_posts'); ?>' }, function(response){ }); } $('.load-more').click(function(){ fetchBlogPosts(); }); }); </script> ОБНОВЛЕНИЕ ФУНКЦИЙ PHP
add_action('wp_ajax_post_blog', 'blog_post_data_fetch'); add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch'); function blog_post_data_fetch(){ check_ajax_referer('load_more_posts', 'security'); ob_clean(); get_template_part( 'inc/blog','posts' ); wp_die(); }
После прочтения нескольких учебников AJAX и, честно говоря, AJAX с WordPress все еще меня смущает 🙁 Я застрял со следующим кодом, который работает.
Тем не менее, мне просто хотелось бы добавить дополнительные записи в существующий цикл, а не повторять одни и те же записи.
Другими словами, начальная страница загружает цикл ниже, а затем, когда я нажимаю кнопку «.load-more», она должна загружать больше сообщений через AJAX, но смещать их уже существующими сообщениями, которые уже отображаются.
Как это можно сделать?
functions.php
add_action('wp_ajax_post_blog', 'blog_post_data_fetch'); add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch'); function blog_post_data_fetch(){ get_template_part('inc/blog','posts'); }
ШАБЛОН БЛОГА
<?php $the_query = new WP_Query( array( 'post_type' => 'blog', )); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> <div class="carousel-cell"> <div class="blog-item"> <div class="featured-image"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ) : the_post_thumbnail('blog-thumb'); else : ?> <img src="<?php bloginfo('template_url'); ?>/img/blog-thumb.jpg" alt=""> <?php endif; ?> </a> </div><!--/featured-image--> <div class="post"> <h1><a href="#"><?php the_title(); ?>hello</a></h1> <?php the_excerpt(); ?> </div><!--/post--> </div><!--/blog-item--> </div><!--/carousel-cell--> <?php endwhile; endif; ?>
Jquery
function fetchBlogPosts(){ $.post( ajaxUrl, { 'action' : 'post_blog' }, function(response){ }); } $('.load-more').click(function(){ fetchBlogPosts(); });
Вам нужно добавить wp_die() или die() в конец вашего обратного вызова PHP. PHP должен знать, что он обработан. Кроме того, событие nopriv неверно.
add_action('wp_ajax_post_blog', 'blog_post_data_fetch'); add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch'); /** * Processes the Ajax request for the action: post_blog. * * @since 1.0.0 * * @return void */ function blog_post_data_fetch(){ // You need to check the nonce here first! // Let's keep our web pages safe. // Then if the nonce is correct, you can do the // processing. ob_clean(); get_template_part( 'inc/blog','posts' ); // When you're done, make sure you exit PHP wp_die(); }
Позвольте мне объяснить, что происходит.
Сервер обработал бизнес-логику, построил разметку и активы HTML, а затем отправил их в браузер. Теперь сервер выполнен.
AJAX дает вам возможность перезвонить на сервер и сделать для вас больше обработки. Цикл:
В вашем случае вы вернете вызов на сервер с $.post . WordPress получает запрос, а затем запускает 2 события:
wp_ajax_{your ajax action} wp_ajax_nopriv_{your ajax action} Первое событие срабатывает и дает доступ, если пользователь вошел в систему. Второй (то есть nopriv) срабатывает независимо от того, вошли ли они в систему или нет.
Затем WordPress запускает ваш обратный вызов, который вы зарегистрировали для названий событий. Обратный вызов вашего примера – blog_post_data_fetch() .
Теперь в вашем коде вам нужно добавить проверку nonce, чтобы сохранить ее в безопасности. Если это пройдет, вы можете обработать запрос. Если вы возвращаете строку, вы можете отозвать ее (или просто вызвать файл view / template). Если это массив, вам нужно его сериализовать, например json_encode .
PHP выполняется, когда он выполняет конструкцию die() или wp_die() .
Теперь ответ отправляется обратно в jQuery. $.post получает ответ. Теперь вы можете что-то с этим сделать.
В вашем случае ваша отправка обратно HTML-разметки. Вы захотите решить, где добавить эту разметку на веб-страницу.
Для реализации WordPress AJAX доступно множество обучающих программ:
Я дал вам код для PHP-стороны (минус проверка безопасности nonce). Затем вам нужно добавить следующее в скрипт jQuery:
Также убедитесь, что вы локализуете параметры , отправив URL-адрес AJAX (и, возможно, nonce) из WordPress в ваш скрипт.