Пытаюсь совместить infinity-scroll и описанный
в этой статье вывод динамического архива записей.
Входные условия:
0. Wordpress + Open Server (т. е. всё крутится у меня на компьютере)
1. Создан произвольный тип контента "work"
2. Для этого типа контента создана таксономия "view" (по сути - теги).
Задача следующая:
1. На страницу site.name/portfolio/ выводить все термины таксономии view (к примеру "все", "только а" и "только б"). Термины могут добавляться, удаляться, меняться и т.д. (всё в админке)
2. Загружать первые n постов, относящихся к термину "все"
3. Если в базе больше постов, чем загружены, отображать кнопку "загрузить ещё"
4. После загрузки очередной порции постов - проверять, остались ли ещё посты в базе. Если нет - скрывать кнопку.
5. При нажатии на другой термин - убирать то что загружено ранее и загружать первые n постов, относящихся к этому термину. Ну и далее тот же принцип работы кнопки "загрузить ещё".
Как решал задачу:
1. Вывод терминов:
$terms = get_terms('view');
$term_count = count($terms);
if($term_count > 0){
foreach ($terms as $term) {
$term_info = get_term_by( 'slug', $term->slug, 'view');
$count = $term_info->count;
echo '<input type="radio" name="type" id="'.$term->slug.'" value="'.$term->name.'" data-count="'.$count.'"><label for="'.$term->slug.'">'.$term->name.'</label>';
}
}
Выводу все термины в виде radio-input'ов (тут думаю не принципиально, можно и обычными кнопками было сделать, например). Каждому input'у присваиваю id и value по слагу термина. (далее использовать значение value)
Сразу получаю количество постов с данным термином и записываю его в дата-атрибут.
На данном этапе загружается пустая страница с полоской radio-input'ов.
Сама страница:
<div id="test">
<div id="archive_browser">
тут термины
</div>
<ul id='archive_pot'>
сюда загружаются работы
</ul>
<div style="text-align:center; padding:30px; display: none;" id="loader"><img src="/ajax-loader.gif"></div>
<input type="button" value="ещё" id="more" style="display: none;">
</div>
2. Загрузка постов (комментарии в коде)
$(document).ready(function() {
$("#archive_browser input[type='radio']:eq(0)").attr('checked', true);
gater();
});
3. Сама функция
function gater() {
$('#archive_pot').empty();
var busy = false;
var offset = 0;
var number = 1;
var type = $("#archive_browser input[type='radio']:checked").attr("value");
var max_count = $("#archive_browser input[type='radio']:checked").attr("data-count");
function getData() {
busy = true;
$.ajax({
type: 'POST',
url: 'путь до archive_getter.php',
data: 'type=' + type + '&number=' + number + '&offset=' + offset,
cache: false,
beforeSend: function(xhr){
$('#loader').show();
},
success: function(data){
$('#archive_pot').append(data);
if(number+offset < max_count) {
$('#more').show();
}
else {
$('#more').hide();
}
offset = offset+number;
busy = false;
},
complete: function(){
$('#loader').hide();
}
});
}
getData();
$('#more').click(function() {
if(busy == false) {
busy = true;
getData();
}
});
}
4. archive_getter.php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
$type = htmlspecialchars(trim($_POST['type']));
$number = htmlspecialchars(trim($_POST['number']));
$offset = htmlspecialchars(trim($_POST['offset']));
global $post;
$args = array(
'post_type' => 'work',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'view',
'field' => 'slug',
'terms' => $type
),
),
'posts_per_page' => $number,
'offset' => $offset,
);
$posts = get_posts($args);
foreach( $posts as $post ){ setup_postdata($post);
echo '<li">';
echo the_post_thumbnail();
echo the_permalink();
echo '</li>';
}
wp_reset_postdata();
5. Выполнение функции при переключении radio-inputa
$('#archive_browser').change(function() {
gater();
});
Результат
1. Оно работает!
2. Оно работает криво:
- Сразу после загрузки, на первом термине, всё срабатывает как задумано
- Если переходить с термина на термин, загружая каждый раз все работы до конца, то первые 2-3 круга всё работает как задумано, но с каждым разом растёт скорость загрузки
- Если пройтись по терминам, не загружая на каждом все посты (2-3 круга), а потом, к примеру, на первом термине нажать кнопку "загрузить ещё" - он загрузить все вторые посты каждого термина, такое количество раз, сколько кругов было проделано.
Прошу помощи!
Где ошибка? Что не учёл?
Средний