Если в нашем блоге доскроллить страницу почти до самого низа — начинается подгрузка новых постов.
В этом посте я хочу рассказать о том, как сделать так в своем блоге на 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 в архиве можно здесь. Демо можно посмотреть на главной странице нашего блога.