Загрузка статей по Ajax в WordPress – полное руководство
Загрузка статей по Ajax – можно сказать уже полностью стандартный функционал для многих блогов. Сегодня в этой статье мы рассмотрим данный способ, который прекрасно реализован на нашем сайте – Как Вы прекрасно видите, на нашем сайте отлично работает этот способ, и после нажатия на кнопку “Читать далее” подгружаются следующие статьи. Удобно? Безусловно. Итак приступим.
Для примера я рассмотрю вариант, если нам необходимо сделать данную подгрузку на странице блога, это index.php или category.php (все файлы располагаются в папке Вашей темы), обычно эти файлы есть всегда. Ищем вывод из базы наших статей, обычно это что-то в таком вот виде.
|
1 2 3 4 5 6 7 8 9 10 |
<?php while ( have_posts() ) : the_post(); ?> <div class="adv_block"> <div class="img_block"><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) {the_post_thumbnail(array(300, 300),array("class"=>"alignleft post_thumbnail"));} else { ?><img src="<?php echo get_template_directory_uri() ?>/img/scul.gif"/><?php } ?></a></div> <div class="post_block"> <div class="title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'striped' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div> <div class="price"><?php the_time('j.m.y'); ?> <?php if ( get_post_meta($post->ID, 'patch', true) ) : ?>| Патч: <?php echo get_post_meta($post->ID, 'patch', true) ?><?php endif; ?></div> <div class="text"><a href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a></div> </div> </div> <?php endwhile; ?> |
Как Вы заметили данный код выводит в цикле все записи. Сразу же после этого кода вставляем нашу кнопку “Загрузить еще”.
|
1 2 3 4 5 6 7 8 9 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <script> var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php'; var true_posts = '<?php echo serialize($wp_query->query_vars); ?>'; var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>; var max_pages = '<?php echo $wp_query->max_num_pages; ?>'; </script> <div class="more_block"><div class="btn_more_blocks" id="true_loadmore">Показать больше материалов</div></div> <?php endif; ?> |
Прекрасно, все внедрили. Данный код проверяет, сколько у нас страниц содержит блог наш, если больше одной, выводит кнопку, меньше, не выводит.
ajaxurl – Это обработчик AJAX-запросов в WordPress.
true_posts – Сериализованный массив, содержащий все необходимые параметры запроса, является свойством класса WP_Query.
current_page – Номер текущей страницы.
Но думаю тут все понятно, по оформлению кнопки думаю сами разберетесь, как хотите, так ее и оформляйте. Итак, кнопку мы имеем, правда ничего не происходит если ее нажать, не работает ничего – но не переживайте – переходим к следующему этапу.
Подключение скриптов
Чтобы у нас все красиво работало нам необходимо подключить jQuery. Если Вы этого еще не сделали, в чем лично я сомневаюсь, то подключайте. А нижний код добавляем в файл нашей темы functions.php – если у Вас нету такого файла, такое может быть, если Вы сами создавали тему, то создайте этот файл прямо у себя в директории Вашей темы и туда добавьте следующий код.
|
1 2 3 4 |
function true_loadmore_scripts() { wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' ); |
Скрипт асинхронной загрузки постов WordPress
Итак, теперь мы дошли до самого интересного, чтобы наша кнопка отлично работала ей нужно показать, как работать и что загружать. Для этого в папке темы создаем файл скрипта, давайте назовем его loadmore.js. И впишем в этот файл следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
jQuery(function($){ $('#true_loadmore').click(function(){ $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер var data = { 'action': 'loadmore', 'query': true_posts, 'page' : current_page }; $.ajax({ url:ajaxurl, // обработчик data:data, // данные type:'POST', // тип запроса success:function(data){ if( data ) { $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты current_page++; // увеличиваем номер страницы на единицу if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку } else { $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку } } }); }); }); |
Сразу спешу наперед. Данный код я позаимствовал их открытых источников в интернете. Но все работает очень круто, поэтому пусть автор не сердится на меня, но код просто потрясный. Все работает как часики.
Загрузка статей по Ajax – финальный штрих
Ну и последнее, скрипт асинхронно достает данные из php, остался последний штрих, добавить скрипт в functions.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function true_load_posts(){ $args = unserialize(stripslashes($_POST['query'])); $args['paged'] = $_POST['page'] + 1; // следующая страница $args['post_status'] = 'publish'; $q = new WP_Query($args); if( $q->have_posts() ): while($q->have_posts()): $q->the_post(); /* * Со строчки 13 по 27 идет HTML шаблон поста, максимально приближенный к теме TwentyTen. * Для своей темы вы конечно же можете использовать другой код HTML. */ ?> <div class="blogContainer"> <div class="data"><?php echo get_the_date(); ?></div> <div class="imgBlog"> <div class="img"> <a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) {the_post_thumbnail('thumbnail');} ?></a> </div> </div> <div class="contentBlog"> <h3 class="titleBlog"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="postBlog"> <?php echo content(60); ?> <?php the_tags('Метки: ', ', '); ?> </div> </div> <a href="<?php the_permalink(); ?>" class="linkMore">Читать далее</a> </div> <?php endwhile; endif; wp_reset_postdata(); die(); } add_action('wp_ajax_loadmore', 'true_load_posts'); add_action('wp_ajax_nopriv_loadmore', 'true_load_posts'); |
Отличный скрипт, просто потрясный, меняйте в скрипте, как должен отображаться Ваш один пост из ленты постов и все будет отлично работать. Вопросы, лайки и взаимные подписки приветствуются. Всем спасибо за внимание.
P.S. Если нужно удалять записи и вместо удаленных вставлять новые. В этом случае Вам необходимо изменить код в loadmore.js. А именно удалять блоки, которые уже есть. Для этого воспользуйтесь вот таким кодом, просто замените им свой код в loadmore.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
jQuery(function($){ $('#true_loadmore').click(function(){ $('сюда вставляем класс элементов которые надо удалять').hide(); $(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер var data = { 'action': 'loadmore', 'query': true_posts, 'page' : current_page }; $.ajax({ url:ajaxurl, // обработчик data:data, // данные type:'POST', // тип запроса success:function(data){ if( data ) { $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты current_page++; // увеличиваем номер страницы на единицу if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку } else { $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку } } }); }); }); |
Обратите внимание. В коде есть запись, куда надо вставить класс тех элементов, которые Вы хотите удалить. Вставляем его туда и будет Вам счастье. По всем вопросам – пишите комментарии.
Свяжитесь с нами уже сейчас
- +7 (906) 272-38-19
Tel./ WhatsApp/ Viber - info@cruelten.ru
- Cruelten
- Cruelten
- Cruelten
Перед тем как обращаться по контактам, указанным здесь, мы настоятельно просим Вас сравнить цены и условия наших конкурентов. Это даст Вам более широкую картину того, сколько стоят услуги в области разработки сайта под ключ, как много времени занимает создание интернет-магазина или сайта-визитки. Кстати, у нас это займет не более 3 недель. Спасибо.
Комментарии: