Подгрузка новых постов в WordPress на AJAX (jQuery)
18 Февраль 2011Если в нашем блоге доскроллить страницу почти до самого низа — начинается подгрузка новых постов.
В этом посте я хочу рассказать о том, как сделать так в своем блоге на WordPress.
Для этого нам придется редактировать текущую тему блога. Темы хранятся в папка_блога/wp-content/themes/название_темы/
Краткое описание работы
С помощью JavaScript мы проверяем, доскроллил ли пользователь до конца страницы. Если да, то отправляем AJAX запрос PHP скрипту, который отдаем нам нужные посты. При этом будем передавать доп. параметры, например: количество постов, номер страницы, смещение и прочее.
JQuery
Начнем с JQuery. Скачайте скрипт, если у вас его еще нет. Подключаем JQuery в шапку блога. Для этого редактируем файл header.php.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jquery.js"></script>
У нас используется такой путь. Файл jquery.js должен лежать в одной папкой с темой блога.
Теперь переходим к файлу functions.php. Может получится так, что у вас этого файла нет. В этом случае создайте его в папке темы.
В WordPress есть так называемые экшены (actions), которые можно привязать к выполнению какой-либо функции. Нам необходимо добавить наш JavaScript в тег head наших страниц. Начнем с добавления экшена (он может быть расположен после функции) и добавления функции.
<?php
add_filter('wp_head', 'javascript_page');
function javascript_page() {
global $query_string;
?>
<script type="text/javascript">
/* Наш код будет размещен здесь */
</script>
<?php
}
?>
Добавляем JavaScript вместо комментария. Объявляем несколько полезных переменных и проверяем не доскроллил ли еще пользователь до конца страницы.
$(document).ready(function() {
var number = 5; //количество постов
var offset = 0; //смещение постов
var page_number = 2; //номер страницы
var busy = false;
var loc = '<?php echo $query_string; ?>';
if(loc==""){
$(window).bind('scroll', function(e) {
if($(window).scrollTop() + $(window).height() > $(document).height() - 250 && !busy) {
busy = true;
$.post('<?php bloginfo('siteurl') ?>/wp-admin/admin-ajax.php', {
action: 'and_action',
off: offset+number,
pagenumber: page_number,
query_string: '<?php echo $query_string; ?>'
}, function(data) {
if(data == "") {
//больше нет постов
}
else {
offset = offset+number;
$('.content').append(data);
busy = false;
page_number += 1;
}
});
}
});
}
});
Если в вашей теме есть отдельные файлы под каждую страницу — главная, один пост и прочее, то можно убрать эту проверку:
var loc = '<?php echo $query_string; ?>';
if(loc==""){
У нас в теме только один файл, который выводит все страницы сразу.
В этой строке $(document).height() – 250 можно установить в какой момент вы хотите начинать подгружать новые посты. Например, у нас это 250 px до конца страницы.
PHP
Продолжаем работать в functions.php
Переходим в верхнюю часть файла и добавляем два экшена (один для людей с правами администратора, второй для всех остальных) и функцию для получения новых постов.
add_action('wp_ajax_and_action', 'get_posts_page');
add_action('wp_ajax_nopriv_and_action', 'get_posts_page');
function get_posts_page() {
/* Описание функции будет здесь */
}
Обратите внимание, мы вызываем and_action, который мы ранее отправляли в функции JQuery $.post(). Теперь нам нужно написать функцию, которая выбирает все подходящие посты и выводит их в нашей верстке.
Объявляем глобальную переменную (класс) $wpdb, формируем строку запроса и в цикле выводим все наши посты.
$query_string = $_POST['query_string']; global $wpdb; query_posts($query_string . '&posts_per_page=5&post_status=publish&offset='.$_POST['off']); //получаем посты if ( have_posts() ) : while ( have_posts() ) : the_post(); /* Вывод постов в цикле */ endwhile; endif; die();
На место моего комментария в цикл необходимо вставить HTML код вывода поста. Его нужно скопировать из файла index.php
У нас он вот такой:
<div class="post" id="post-<?php the_ID(); ?>">
<h2 class="storytitle">
<?php if (!is_single() && !is_page() ) { echo '<a href="'; the_permalink() ; echo '">';}; the_title();
if ( !is_single() && !is_page() ) echo '</a>'; ?>
</h2>
<em class="date"><?php the_time('j F Y') ?></em>
<div class="storycontent">
<?php the_content(); ?>
<div class="feedback">
<!-- Я убрал отсюда социальные кнопки, чтобы сократить код -->
<span class="author"><?php the_author() ?></span>
<?php wp_link_pages(); ?>
<span class="comment"><?php comments_popup_link(__('0 комментариев'), __('1 комментарий'), __('% комментариев')); ?></span>
</div>
</div>
</div>
<?php comments_template( '', true ); ?>
Вот и все.
Скачать
Скачать файл functions.php в архиве можно здесь. Демо можно посмотреть на главной странице нашего блога.
