В этой статье я попытаюсь объяснить как работает Ajax загрузка постов на WordPress (ajax load more), то есть без перезагрузки страницы , а также приведу работающий пример, который установлен на некоторых сайтах.

Для осуществления задуманного нам придётся создать кнопку «Загрузить ещё» по клику на которую будут подгружаться посты, а также написать код в js файле нашей темы(шаблона) и код в php. Начнём пожалуй с простого — а именно с кнопки «Загрузить ещё». Сейчас покажу вам код кнопки и опишу некоторые параметры которые там установлены дата атрибутами.

Код кнопки «Загрузить ещё»

  • параметр «data-container»  — нужно указать класс или id html контейнера куда будут подгружаться посты, данном случае класс  «.portfolioContainer»
  • параметр «data-query» — параметры текущего запроса
  • параметры «data-ajaxurl, data-query, data-action, data-paged» являются служебными, их изменять не рекомендуется, только если понимаете, на свой страх и риск
  • параметр «data-paged» — указывает страницу пагинации на которой мы находимся, его не нужно менять
  • параметр «data-template» — путь к шаблону php внутри текущей темы, используется в функции

И самое главное это дата атрибут кнопки data-action=»loadmore», который обязательно нужно указать, чтобы кнопка работала!

Код Javascript

Этот небольшой кусок кода поможет отправить параметры на сервер и оттуда получить код подгружаемых постов.

 

PHP код

Обычно, самый рекомендуемый способ вставлять php код в файл под названием «functions.php» который находится в корне вашей темы. Вот эти функции и хуки помогают получить посты и вывести нужный нам контент.

В этом коде есть два параметра которые нужно изменить под себя:

  1. Внутри вызова класса «WP_Query» параметр ‘post_type’  необходимо заменить на название типа записи, который нужно вывести. У WordPress стандартный тип записи носит название «post’
  2. Указать путь к шаблону так называемого лупа внутри цикла «while»  —  get_template_part( ‘loop’, get_post_type() ) или написать код как альтернатива.

Вот и всё. Я постарался выразиться кратко, возможно вы дополните эту статью в комментариях. Могу напоследок пожелать только хорошей работы вашему коду!

Пример работы   Пример работы

Обновления кода:

  • 20.07.2018 — сделал возможность указывать настройки в самой кнопке «Загрузить ещё» в виде дата атрибутов.
  • 30.08.2018 — модификация с целью улучшения работы

Оставить комментарий

  Подписаться  
Уведомление о