Бесконечная прокрутка Супер плагин WordPress. Технология Ajax для WordPress: плагины и их назначение Бесконечная прокрутка записей плагин WordPress

Как Вы уже, наверное, догадались, сегодня речь пойдет о беспрерывной подгрузке новых записей при прокрутке на WordPress. То есть, вместо постраничной навигации, записи появятся автоматически при прокрутке. Достигается подгрузка новых записей без перезагрузки, с помощью AJAX . сделаем все это, без использования плагинов.

Сейчас я покажу два способа такой подгрузки. По сути это один и тот же способ, но немножко с разными свойствами. Подгрузка будет совершатся или автоматически при прокрутке или же при нажатии на кнопку, например - Показать еще . Что именно подходит для Вашего сайта, решать тоже Вам.

Автоматическая подгрузка записей при прокрутке Шаг 1

Для начала нужно найти, где у Вы хотите вывести автоподгрузку. Чаще всего ее нужно установить везде, где есть вывод цикла с постраничной навигацией. Например, у меня это файл content.php . Так же это может быть - index.php , archive.php , loop.php , category.php , search.php и тд. В этих файлах может быть стандартная навигация WordPress, или уже самодельная функция. Примеры есть в статье - .

Так вот, если у вас есть что-то на подобии такого, оно располагается в самом конце цикла. Вместо него надо вставить следующий код.

var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var current_page = ; var max_pages = "";

Верхнюю часть кода трогать не нужно, а вот нижняя отвечает за анимацию во время загрузки. Если Вам она не надо просто удалите все, что внутри блока - load_more_gs , или замените все что внутри него, не сам load_more_gs, а именно его содержимое на свой код и у Вас будет своя анимация.

UPD .Если после внедрения подгрузки она будет отлично работать на странице категорий, но не на странице поиска, можете попробовать заменить 4 строку в коде выше на новые две:

// Заменить это var true_posts = ""; // На это $str = serialize($wp_query->query_vars); var true_posts = "";

Шаг 2

Теперь добавим стили для нашей анимации. Если Вы ее удалили, этот пункт можно пропустить.

#load_more_gs{ width: 53px; padding:50px 0; margin:0 auto; } .cssload-container{ position:relative; } .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool::after { position: absolute; top: 50%; left: 50%; border: 1px solid rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px; -o-border-radius: 974px; -ms-border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; } .cssload-whirlpool { margin: -24px 0 0 -24px; height: 49px; width: 49px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite; -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; } .cssload-whirlpool::before { content: ""; margin: -22px 0 0 -22px; height: 43px; width: 43px; animation: cssload-rotate 1150ms linear infinite; -o-animation: cssload-rotate 1150ms linear infinite; -ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; } .cssload-whirlpool::after { content: ""; margin: -28px 0 0 -28px; height: 55px; width: 55px; animation: cssload-rotate 2300ms linear infinite; -o-animation: cssload-rotate 2300ms linear infinite; -ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; } @keyframes cssload-rotate { 100% { transform: rotate(360deg); } } @-o-keyframes cssload-rotate { 100% { -o-transform: rotate(360deg); } } @-ms-keyframes cssload-rotate { 100% { -ms-transform: rotate(360deg); } } @-webkit-keyframes cssload-rotate { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes cssload-rotate { 100% { -moz-transform: rotate(360deg); } }

Шаг 3

Теперь нам нужен скрипт асинхронной загрузки. Тут 2 пути решения. Или вставить скрипт в подвал Вашей темы зажав его в теги:

//тут скрипт

Или создать файл, например - moreload.js , добавить в него скрипт, а потом его подключить в подвале, указав правильный путь, так:

Месяцы - Рубрики

get_header(); и get_footer(); получают шапку и подвал шаблона соответственно. get_sidebar(); я вырезал намеренно, чтобы он не мешался в понимании кода. Остальная часть кода выводит выпадающие списки Месяцев и Рубрик.

Пустой блок - это контейнер куда будут выводится результаты запроса, т.е. записи.

2. Оформим выпадающие списки через CSS, для этого добавим такой код сразу после вызова шапки ():

#archive_browser >

На этом этапе у меня получилось следующее:


3. Добавим JavaScript код , который будет выполнять запрос к серверу и выводить его в блок archive_pot (код добавляем после css стилей):