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

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

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

Шаг 1

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

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

max_num_pages > 1) : ?>

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

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

// Заменить это var true_posts = "query_vars); ?>"; // На это $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 , добавить в него скрипт, а потом его подключить в подвале, указав правильный путь, так:

Или так, добавив код в functions.php :

Function loadmore_scripts_gs() { wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); } add_action("wp_enqueue_scripts", "loadmore_scripts_gs");

Шаг 4

Теперь сам скрипт. Копируем и вставляем в зависимости от выбранного Вами способа.

JQuery(function($){ $(window).scroll(function(){ var bottomOffset = 2000; var data = { "action": "loadmore", "query": true_posts, "page" : current_page }; if($(document).scrollTop() > ($(document).height() - bottomOffset) && !$("body").hasClass("loading")){ $.ajax({ url:ajaxurl, data:data, type:"POST", beforeSend: function(xhr){ $("body").addClass("loading"); }, success:function(data){ if(data) { $("#load_more_gs").before(data); $("body").removeClass("loading"); current_page++; } else { $("#load_more_gs").remove(); } } }); } }); });

В 3 строке есть значение 2000 . Это значение, отступ от нижней границы сайта, доскролив до которого, начнется подгрузка новых записей. Можете уменьшить, но не перестарайтесь, чтобы подгрузка не пропала.

В 19,24 строке указан блок с айди load_more_gs , вдруг вы захотите изменить имя блоку, то это нужно сделать не только в цикле и стилях, но и в скрипте.

Шаг 5

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(); ?>

" rel="bookmark" title="">

Данный код нужно изменить в зависимости от Вашей темы. Вы должны заменить строки - 9, 10, 11, на HTML код, который у Вас внутри цикла в любом из файлов, где мы выполняли ШАГ №1. Если у Вас не HTML, а в PHP написан вывод записей, то нужно заменить 8, 9, 10, 11, 12 строки. То есть это код, который отвечает за вывод миниатюры, названия записи, текст тизера, и тд. Если Вы этого не сделаете, то все будет криво и отличаться от оформления Ваших постов.

После того, как Вы заменили часть кода на свой, можно попробовать проверить работу автоподгрузки. Если у Вас не было нигде ошибки, то Вы увидите первый результат. Теперь переходим ко второму виду подгрузки.

Подгрузка записей при нажатии на кнопку - Показать еще

Шаг 1

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

//вместо этого

//вставить это

Показать еще - это текст кнопки, если хотите, можно поменять.

Шаг 2

Теперь добавим новые стили для кнопки. Если вы добавляли стили для первого метода, можете их удалить.

#loadmore_gs{ background:#63a63e; color:#fff; padding:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; width:150px; margin:0 auto; cursor:pointer; }

Шаг 3

Точно такой же как и в прошлом методе, если уже делали его, пропускайте, если нет, то делайте аналогично первому методу.

Шаг 4

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

JQuery(function($){ $("#loadmore_gs").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) { $("#loadmore_gs").text("Показать еще").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); } else { $("#loadmore_gs").remove(); } } }); }); });

Тут можно настраивать текст кнопки или поменять имя айди, если Вы решили его сменить везде. В 3 строке есть слово - . Это выведется, когда Вы нажмете на кнопку и обработчик AJAX начнет свою работу.

В 15 строке текст - Показать еще , этот текст появится после подгрузки. Если Вы изменили текст из первого шага, то измените и здесь.

Шаг 5

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

По второму методу, тоже все. Как и с первым, если все шаги выполнены правильно, результат не заставит себя ждать.

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

На этом все, спасибо за внимание. 🙂

Все мы видели архивы, в которых при выборе месяца нас перекидывало на страницу с записями за этот месяц. В WordPress такой вывод архивных ссылок реализуется с помощью функции wp_get_archives() . Аналогичный архив записей получается и при выводе обычных рубрик WordPress, только записи группируются по категориям.

Сегодня я хочу рассказать вам, как сделать динамическую архивную страницу . "Динамическая" значит, что при выборе месяца, результаты будут показываться на той же странице , при помощи AJAX - технологии Javascript. Так как библиотека jQuery предоставляет удобный API по работе с Ajax, то будем использовать этот фреймворк. К тому же, куда сегодня без jQuery? Он ведь используется сплошь и рядом, и наверняка в вашем проекте он уже подключен.

Перед написанием этой статьи я сделал динамическую архивную страницу для этого блога, предлагаю взглянуть (ДЕМО) .

Чтобы реализовать динамический архив нам нужно пройти 4 этапа:

Я буду показывать создание динамической страницы архивов на примере базовой темы WordPress: "twentyten".

1. Подключение jQuery в WordPress

Правильный вариант подключения jQuery скрипта - это использование функции wp_enqueue_script() . Такое подключение обезопасит вас от конфликтов с подключением этого же скрипта в плагинах. Скрипт будет подключен один раз.

Вставлять этот код нужно в файл темы functions.php.

Вариант 2

В первом варианте мы подключили скрипт с нашего сервера, имеющийся в файлах WordPress. Однако, можно изменить ссылку на файл jQuery и подключить его с CDN Google. Преимущество такого подхода в том, что, если в браузере посетителя уже загружен этот файл, то при заходе на ваш сайт браузер уже не будет загружать скрипт/ Загрузка страницы увеличится. Кроме того, в CDN скрипт отдается в сжатом виде, за счет чего файл легче на несколько килобайт:

Function my_scripts_method() { wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("jquery"); } add_action("wp_enqueue_scripts", "my_scripts_method");

Вариант 3

Самый древний и так называемый "жесткий" вариант подключения jQuery - это прописать ссылку на него в файле шаблона header.php , внутри тега . Вставляем такой html код:

2. Загрузим картинку пред-загрузчик

В период ожидания, когда запрос отправляется серверу с помощью AJAX нам нужно показать картинку, уведомив пользователя, что что-то происходит. Такие картинки вы наверняка видели в сети и не раз, альтернативой такой картинки выступает текст: "Загрузка...".

Чтобы в дальнейшем у нас была такая картинка, давайте скачаем её, например, от сюда: Анимированные gif (сервис мне понравился), переименуем её в ajax-loader.gif и загрузим в папку images , которая находится в каталоге нашей темы WordPress. В итоге у нас получиться такой пусть до картинки: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif . Ниже мы его используем в коде.

3. Создание шаблона постоянной страницы

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

"Шаблон архивов" - это название нашего шаблона, которое мы увидим в админ-панели WordPress, при создании постоянной страницы.

Давайте создадим новый файл в папке темы, с названием tpl_archive.php и вставим туда вышеприведенный код. Затем зайдем в админ-панель WordPress и создадим постоянную страницу, назначив ей, только что созданный, шаблон.

Теперь, заполним этот файл необходимым кодом.

1. В первую очередь, нам нужно вывести выпадающие списки , создадим мы их с помощью функций WordPress: wp_get_archives() и wp_dropdown_categories() :

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

Пустой блок

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

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

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


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

Разберем немного код:
Все что внутри $("#archive_browser select").change(function(){...} будет срабатывать при изменении выпадающих списков.

/images/ajax-loader.gif - путь до файла-картинки (загрузка...), которая будет подгружаться в период запроса.

/scripts/archive_getter.php - путь до файла обработчика запроса, который мы создадим на следующем этапе.

$.post(...); - Функция jQuery, создающая запрос браузера к серверу, используя AJAX технологию.

Полные код шаблона постоянной страницы

Файл шаблона постоянной страницы (создаем файл в папке темы и копируем туда этот код):

4. Создание файла-обработчика

AJAX подразумевает "общение" браузера с сервером без перезагрузки страницы, средствами Javascript. Скрипт сам по себе не может получить никаких данных, ведь он находится на компьютере пользователя, а данные на сервере, поэтому чтобы скрипт получил данные он должен обратится к серверу, в данном случае такой диалог будет поддерживать файл-обработчик.

Давайте создадим папку scripts в каталоге темы, в ней создадим файл archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) и заполним этот файл следующим кодом:

"; } else { // Получаем данные с помощью query_posts query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); // выводим данные в Цикле WordPress if(have_posts()){ while(have_posts()){ the_post(); ?> "; } ?>

Пожалуйста, выберите дату/категорию из списка выше.
">
Ничего не найдено.

Небольшой разбор кода:

Сначала мы подгружаем среду WordPress (все настройки, функции, плагины). Делается это для того, чтобы нам стали доступны функции WordPress, в частности query_posts() , которую мы используем в этом файле для получения данных.

Условием if(($year=="") && ($month=="") && ($cat=="-1")){...} мы проверяем существуют ли какие-либо данные, которые мы позднее можем использовать в функции query_posts() , если дынных нет, то выводим сообщение.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); и все что ниже это привычный Цикл WordPress .

Вот и все, страница готова!

Вот что у меня получилось (правда, это всего-лишь картинка. Живой пример ):

Модные тенденции на веб-дизайн изменяются не реже, чем на одежду. И постоянно что-то новое оказывается в тренде. Одним из актуальных на сегодня приёмов веб-дизайна – это бесконечная прокрутка. Рассмотрим, как реализовать вывод записей WordPress бесконечным списком.

Бесконечная прокрутка используется на многих сайта, например, в Google в поиске по картинкам. Также большинство имеют уже встроенную такую важность. Сейчас мы вам расскажем, как сделать вывод записей WordPress бесконечным списком, даже если установленный шаблон не поддерживает это.

Easy Load More

Вывод записей WordPress бесконечным списком может быть реализован двумя вариантами: автоматический – когда новые записи подгружаются самостоятельно; и с кнопкой – когда новые записи будут подгружаться только после нажатия на соответствующею кнопку. Плагин Easy Load More способен реализовать второй вариант бесконечно прокрутки.

Скачиваем, устанавливаем и активируем плагин, потом переходим в его настройки в пункте «Настройки» и подпункте «Easy Load More». Здесь две вкладки, и первая из них «Standart», в которой содержатся основные настройки:

• Post List Wrap Selector. Здесь нужно указать класс, с помощью которого осуществляется вывод записей WordPress. Для каждого шаблона он может быть разный.
• Buttaon text . Текст, который будет написан на кнопке для подгрузки следующих записей. Например, «Загрузить ещё», «Показать ещё» и т.п.
animation. 9 эффектов анимации. Выбирать необходимо одну из радиокнопок. Они обозначенный буквами английского алфавита. А ниже можно взглянуть, как та или иная анимация будет выглядеть.
• Button text color. Опция определяется цвет текста на кнопке для загрузки следующих записей. Цвет той надписи, которую написали в «Button text».

Следующая вкладка «Advanced», в которой собраны дополнительные настройки:

• Disable Plugin Styles. Можно отключить CSS стили плагин, и оформить кнопку для вывода записей WordPress по собственному желанию, использую собственные стили.
• Disable Plugin Javascript. Отключает у плагина использование Java script.

Когда все настройки определены, можно посмотреть, как работает вывод записей WordPress бесконечным списком, и подправить что-то, если необходимо.

Надо заметить, что не всем пользователям будет удобен такой вывод записей WordPress. Так, например, если кто-то изучает ваш сайт, и читает статьи, то он, скорее всего, будет запоминать, на какой странице остановился, чтобы в другой раз продолжить оттуда. А если список записей будет бесконечным, то и страниц там не будет. В данном случае такой способ не подойдёт и лучше использовать стандартную пагинацию, например, как .

Ajax Load More is the ultimate WordPress infinite scroll plugin for lazy loading posts, single posts, pages, comments and more with Ajax powered queries.

Build complex custom WordPress queries with the Ajax Load More shortcode builder then add the generated shortcode to your page via the content editor or directly into your template files.

Ajax Load More is compatible for endless scrolling with popular eCommerce plugins such as WooCommerce and Easy Digital Downloads.

Особенности

• Shortcode Builder — Create your own custom Ajax Load More shortcode by adjusting the various WordPress query parameters in our easy-to-use shortcode builder (see Shortcode Parameters).
• Query Parameters — Ajax Load More allows you to query WordPress by many different content types. Query by Post Type, Post Format, Date, Category, Tags, Custom Taxonomies, Search Term, Authors and more!
• Repeater Templates — Edit and extend the functionality of Ajax Load More by creating your own repeater template to match the look and feel of your website (see screenshots).
• Multiple Instances — You can include multiple instances of Ajax Load More on a single page, post or template.
• Ajax Filtering — The Ajax Load More custom filtering method will allow you to filter and update your Ajax query results.
• Multisite Compatibility — Manage repeater templates across all sites in your network.
• Setting Panel — Customize your version of Ajax Load More by updating various plugin settings.

• repeater — Choose a repeater template (Add-on available). Default = ‘default’
• post_type — Comma separated list of post types. Default = ‘post’
• sticky_posts — Preserve sticky post ordering in Ajax listing. Default = false
• post_format — Query by post format. Default = null
• category — A comma separated list of categories to include by slug. Default = null
• category__and — A comma separated list of categories to include by ID. Default = null
• category__not_in — A comma separated list of categories to exclude by ID. Default = null
• tag — A comma separated list of tags to include by slug. Default = null
• tag__and — A comma separated list of tags to include by ID. Default = null
• tag__not_in — A comma separated list of tags to exclude by ID. Default = null
• taxonomy — Query by custom taxonomy name. Default = null
• taxonomy_terms — Comma separated list of custom taxonomy terms(slug). Default = null
• taxonomy_operator
• taxonomy_relation — The logical relationship between each taxonomy when there is more than one. (AND/OR). Default = ‘AND’
• day — Day of the week. Default = null
• month — Month of the year. Default = null
• year — Year of post. Default = null
• taxonomy_operator — Operator to compare Taxonomy Terms against (IN/NOT IN). Default = ‘IN’
• meta_key — Custom field key(name). Default = null
• meta_value — Custom field value. Default = null
• meta_compare — Operator to compare meta_key and meta_value against. Default = ‘IN’
• meta_type — Custom field type. Default = ‘CHAR’
• meta_relation — Used with multiple custom field entries (AND/OR). Default = ‘AND’
• author — Comma separated list of authors by id. Default = null
• post__in — Comma separated list of post ID’s to include in query. Default = null
• post__not_in — Comma separated list of post ID’s to exclude from query. Default = null
• search — Query search term (‘s’). Default = null
• custom_args — A semicolon separated list of value:pair arguments. e.g. tag_slug__and:design,development; event_display:upcoming. Default = null
• post_status — Select status of the post. Default = ‘publish’
• order — Display posts in ASC(ascending) or DESC(descending) order. Default = ‘DESC’
• orderby — Order posts by date, title, name, menu order, author, post ID or comment count. Default = ‘date’
• offset — Offset the initial query (number). Default = ’0′
• posts_per_page — Number of posts to load with each Ajax request. Default = ’5′
• scroll — Load more posts as the user scrolls the page (true/false). Default = ‘true’
• scroll_distance — The distance from the bottom of the screen to trigger the loading of posts while scrolling. Default = ‘150’
• scroll_container — Constrain Ajax Load More infinite scrolling to a parent container. Default = null
• max_pages — Maximum number of pages to load while user is scrolling (activated on when scroll = true). Default = ‘0’
• pause_override — Allow scrolling to override the Pause parameter and trigger the loading of posts on scroll. Default = null
• pause — Do not load posts until user clicks the Load More button (true/false). Default = ‘false’
• transition — Choose a posts reveal transition (fade/masonry/none). Default = ‘fade’
• transition_container — Display the Ajax Load More (.alm-reveal) loading container. Default = ‘true’
• transition_container_classes — Add classes to the .alm-reveal transition div.
• masonry_selector — The target classname of each masonry item. Default = null
• masonry_animation — Select a loading transition type for Masonry items. (default/zoom-out/slide-up/slide-down/none). Default = default
• masonry_horizontalorder — Maintain horizontal order. Default = true
• images_loaded — Wait for all images to load before displaying ajax loaded content (true/false). Default = ‘false’
• destroy_after — Remove ajax load more functionality after ‘n’ number of pages have been loaded. Default = null
• progress_bar — Display progress bar indicator at the top of the window while loading Ajax content. Default = ‘false’
• progress_bar_color — Enter the hex color of the progress bar. Default = ‘ed7070’
• button_label — The label text for Load More button. Default = ‘Older Posts’
— Update the text of the Load More button while content is loading. Default = null
• container_type — Override the global Container Type that was set on ALM Settings page. Default = null
• css_classes — Add custom CSS classes to the Ajax Load More container. Default = null
• id — A unique ID for the Ajax Load More instance.
• nested — Is this a nested Ajax Load More instance. Default = false

Example Ajax Load More Shortcode

Example Demos

• Default — Out of the box functionality and styling.
• Advanced Custom Fields — Infinite scroll Advanced Custom Fields data with Ajax Load More.
• Attachments — Endless scroll post attachments.
• Destroy After — Remove Ajax Load More functionality after ‘n’ number of pages.
• Event Listing — Ordering and listing events by custom field date.
• Filtering — Reset and filter an Ajax Load More instance.
• Flexbox — Creating a responsive Ajax Load More grid with Flexbox.
• Infinite Scroll — A look at the new loading functionality and styles.
• Images Loaded — Download images before displaying ajax loaded content.
• Masonry — Creating a flexible grid layout with Masonry JS.
• Multiple Instances — Include multiple Ajax Load More’ on a single page.
• Paging URLs — Generate unique paging URLs for every Ajax Load More query with the SEO add-on.
• — Posts will not load until initiated by the user.
• Preloaded Posts — Easily preload an initial set of posts before completing any Ajax requests to the server.
• Progress Bar — Display a progress bar load indicator with each Ajax request.
• Search Results — Returning results based on search terms.
• Scroll Container — Constrain Ajax Load More to a parent container.
• SEO & Paging — Combine these two add-ons to create one powerful navigation system.
• Slideshow Gallery — Create a gallery of posts with Ajax Load More and the Paging add-on.
• Table Layout — Ajax Load More will display query results in a table format.