Вантаження постів на ajax в wordpress

Блог / WordPress / Посторінкова навігація з асинхронної підвантаженням постів в WordPress. Нескінченна прокрутка постів.

Якщо на моєму сайті ви перейдете на сторінку Блог або в якусь рубрику, то в самому низу сторінки, поряд зі звичайною посторінковою навігацією, ви побачите кнопку Завантажити ще, яка дозволяє довантажувати наступні пости без оновлення сторінки.

Працювати будемо зі стандартною темою TwentySeventeen, по-перше, ця тема досить проста і буде неважко розібратися в коді, по-друге, ви завжди можете встановити її прямо з адмінки зі сховищ тим WordPress.

Що ми спробуємо зробити в цій посаді?

Крок 1. Додавання кнопки «Завантажити ще»

Для початку нам треба знайти файл, в якому додається посторінкова навігація. У TwentySeventeen цей файл - прямо index.php. Якщо ви не розумієте, в якому файлі треба шукати у вашій темі, рекомендую поглянути на цей туторіал.

Знайдіть відповідне місце в шаблоні за межами циклу while. тобто після того, як закінчується висновок постів (в TwentySeventeen це місце практично відразу після endwhile) і вставляємо туди код:

А тепер трохи стилів, які ми додамо на нашу кнопку, щоб вона круто виглядала (стилі можна вставити в стандартний style.css в папці з темою).

Успішним виконанням першого кроку буде вважатися ось така кнопка, яка повинна буде з'явитися на сторінці всіх ваших записів, але майте на увазі, що якщо записів недостатньо для двох сторінок, то кнопки не буде, для цього або створіть більше записів, або перейдіть в Налаштування> Читання і змініть кількість відображуваних на сторінці записів там.

Вантаження постів на ajax в wordpress

Найлегший крок позаду.

Крок 2. Підключення скриптів jQuery

Документація функцій wp_enqueue_script () і get_stylesheet_directory_uri () в допомогу. Про підключення скриптів я писав часто і детально, тому зараз на цьому зупинятися не будемо, якщо є проблеми - дивіться документацію. А цей код - в functions.php.

Крок 3. Скрипт асинхронної завантаження

Схожі статті