Ajax пагинация с сохранением ссылок

Есть 2 вида Ajax пагинации: с сохранением ссылок и без сохранения. В этой статье расскажу как сделать первый вариант. Решение по второму варианту смотрите у Миши Рудастых. Для любителей поковырятся в коде, в той же статье есть решение по бесконечному скроллу.

Теперь к делу. Итак Ajax пагинация с сохранением — ссылок (решение не мое, я его из премиум темы вытащил). Про разницу в видах и установку, смотрим в видео

Шаг 1. Подключаем функцию

Для начала следует в файл function.php добавить такую функцию

Надписи можете поменять на свои, если есть желание…

Шаг 2. Устанавливаем привязку для ajax пагинации

Если у вас используется не штатная функция вордпресс по выводу постраничной навигации такого вида the_posts_pagination();, то можно использовать такую конструкцию

Ее располагаем в нужных файлах: index.php, archive.php и тд. Одним словом все файлы, где выводит лента записей.

Шаг 3. Загружаем нужные файлы

Для правильной работы, требуется загрузить в файлы темы 2 js-плагина. Итак, скачиваем архив с файлами

Скачать: Ajax Paginations
Скачано: 122, размер: 9.5 KB, дата: 20.Мар.2017

Распаковываем архив и файлы ajax.js, history.js заливаем в файлы тему в папку js

Внимание! Если вы скопировали файлы в другую папку, то следует изменить путь подключения в первом шаге

Шаг 4. Настраиваем файл ajax.js

Полный разбор файла ajax.js смотрим в видео. Есть пара важных моментов.

Первый момент

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

ajax-1

Второй момент

Необходимо указать селектор отдельной записи в ленте записей. Как правило, записи в ленте формируются через тег article. На данном сайте это выглядит так

ajax-3

Берете класс, который встречается во всех тегах article  и указываете в файле ajax.js

ajax-2

При правильном подключении все должно работать и вам останется только кнопку стилями разукрасить)

Вопросы пишем в комментариях. Всем удачи!

Ваш, Артем.

29 комментариев

  1. Виталий 09.06.2016
  2. Денис 04.07.2016
    • Денис 04.07.2016
    • Артем 04.07.2016
      • Денис 04.07.2016
      • Денис 04.07.2016
  3. Fata Morgana 26.07.2016
    • Артем 26.07.2016
  4. Fata Morgana 27.07.2016
  5. Сергей 04.12.2016
    • Артем 04.12.2016
      • Сергей 04.12.2016
        • Артем 04.12.2016
          • Сергей 04.12.2016
  6. Сергей 04.12.2016
    • Артем 04.12.2016
  7. Владимир 25.03.2017
    • Артем 27.03.2017
  8. Евгений 17.05.2017
    • Артем 21.05.2017
  9. Мастер 30.05.2017
  10. Анна 04.08.2017

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

Нажимая на кнопку отправить, я принимаю условия пользовательского соглашения , а также ознакомлен и согласен с политикой конфиденциальности и даю согласие на обработку моих персональных данных

Подписывайся!

Подписывайся!

Подписывайтесь на новости сайта, чтобы ничего не пропустить

Спасибо, что подписались!