Урок 6. Виведення списку постів на сторінку та пагінація

Сьогодні публікуємо завершальну статтю з серії уроків щодо розробки автокомпліт плагіна. У зв’язку з розширенням функціоналу плагіна було внесено багато правок. Тож доведеться повністю переглянути код з самого початку, але без зайвих подробиць. Якщо коротко, то було додано два додаткові шорткоди для більш гнучкого управління виводом результатів. Один шорткод — для виводу списку записів, другий — для відображення пагінації.

Невелике відступлення. Використання git у власних проєктах значно спрощує життя і майже не потребує часу, а фінансових затрат — тим більше (привіт bitbucket і gitlab). Переглядаючи код, чітко видно що і де було змінено.

А тепер переходимо до справи

Додаємо до властивостей класу дві змінні:

private $QueryPosts;
private $posts_per_page = 10;

Що нам це дає?
$QueryPosts — ми будемо використовувати в інших шорткодах (пагінація і вивід даних), тому об’єкт WP_Query виноситься у властивості класу.
$posts_per_page — містить кількість постів на одній сторінці. Так, ми могли б дублювати десятку в кількох місцях. Але... керувати цим краще централізовано. Наприклад, якщо ми захочемо розширити базовий шорткод “[post-autocomplete-form]”, додавши до нього параметр “posts_per_page”. Наприклад, так — “[post-autocomplete-form posts_per_page=10]”.

І додаємо в конструктор два нові шорткоди:

add_shortcode('post-autocomplete-posts', array($this, 'shortcode_post_autocomplete_posts'));
add_shortcode('post-autocomplete-pagination', array($this, 'shortcode_post_autocomplete_pagination'));

Шорткод форми

За шорткод “[post-autocomplete-form]” відповідає метод:

public function shortcode_post_autocomplete_form()
{
	global $post;

	$content = '';
	if(is_a($post, 'WP_Post'))
	{
		$content .= '<form action="' . get_permalink($post -> ID) . '" class="post-autocomplete-form" method="GET">';
		$content .= '<input type="text" name="text" class="post-autocomplete__field" placeholder="Введіть текст для пошуку" value="'.filter_input(INPUT_GET, 'text', FILTER_SANITIZE_STRING).'">';
		$content .= '</form>';
	}

	return $content;
}

До форми ми додали атрибут action з посиланням на поточну сторінку, і для уникнення помилок — перевірку глобальної змінної $post.

Шорткод, що виводить список знайдених записів

Я назвав його “[post-autocomplete-posts]”, і за нього відповідає метод:

public function shortcode_post_autocomplete_posts()
{
	//Sets
	$content = '';
	$page = max(1, get_query_var('paged'));
	$text_search = filter_input(INPUT_GET, 'text', FILTER_SANITIZE_STRING);
	$offset = $this -> posts_per_page * ($page - 1);

	if(empty($text_search))
	{
		return '';
	}

	$this -> QueryPosts = new WP_Query();
	$Posts = $this -> QueryPosts -> query([
		'posts_per_page' => $this -> posts_per_page,
		'offset' => $offset,
		's' => $text_search,
		'orderby' => 'title',
		'order' => 'ASC',
	]);

	if($this -> QueryPosts -> have_posts())
	{
		$content .= '<div>Знайдено записів: '.$this -> QueryPosts -> found_posts.'</div>';
		$content .= '<ul class="post-autocomplete-posts">';
		foreach($Posts as $Post)
		{
			$content .= '<li>';
			$content .= '<a href="'.get_permalink($Post -> ID).'">';
			$content .= esc_attr($Post -> post_title);
			$content .= '</a>';
			$content .= '</li>';
		}
		$content .= '</ul>';
	}
	else
	{
		$content .= '<div class="post-autocomplete-nofound">';
		$content .= 'Нічого не знайдено';
		$content .= '</div>';

		return $content;
	}
	wp_reset_postdata();


	return $content;
}

Розберемо код детальніше:

$page = max(1, get_query_var('paged'));
$text_search = filter_input(INPUT_GET, 'text', FILTER_SANITIZE_STRING);
$offset = $this -> posts_per_page * ($page - 1);

1. Якщо це перша сторінка пагінації — WP повертає 0, а для другої — 2, третьої — 3 і т.д. Щоб уникнути цього, використовуємо max().
2. Отримуємо значення з GET.
3. Обчислюємо зміщення для пагінації.

Запит до БД через core-об'єкт WP_Query:

$this -> QueryPosts = new WP_Query();
$Posts = $this -> QueryPosts -> query([
	'posts_per_page' => $this -> posts_per_page,
	'offset' => $offset,
	's' => $text_search,
	'orderby' => 'title',
	'order' => 'ASC',
]);

Сортуємо результати за назвою (від А до Я).

Зазвичай я використовую get_posts, бо коротше. Але тут потрібна кількість знайдених постів — для пагінації.
Далі в коді йде перевірка — якщо знайдено записи, то формуємо список. Якщо ні — виводимо повідомлення.

Шорткод для відображення пагінації

Щоб відобразити пагінацію, додайте на сторінку або в кінець статті шорткод “[post-autocomplete-pagination]”.
Метод “shortcode_post_autocomplete_pagination()” виглядає так:

//Sets
$content = '';

if(!empty($this -> QueryPosts))
{
	$big = 999999999;
	$result = paginate_links([
		'base' => str_replace($big, '%#%', get_pagenum_link($big)),
		'format' => '',
		'current' => max(1, get_query_var('paged')),
		'total' => ceil($this -> QueryPosts -> found_posts / $this -> posts_per_page)
	]);

	$content .= str_replace('/page/1/', '', $result);
}

return $content;

Як бачимо, перевіряємо, чи заповнений об'єкт $this->QueryPosts, і далі викликаємо paginate_links() — стандартну функцію WordPress.

Ми явно задаємо параметри, щоб не бралися значення з глобального $wp_query, бо ми використовуємо свій запит.

Тестуємо плагін автокомпліту

Створюємо сторінку в адмінці та вставляємо в неї наступний код:

[post-autocomplete-form']

Давно відомо, що при оцінці дизайну і композиції, текст відволікає увагу. Тому Lorem Ipsum — це стандартний наповнювач, який забезпечує реалістичний вигляд абзаців.

[post-autocomplete-posts]

[post-autocomplete-pagination]

Зберігаємо і переглядаємо результат. Вводимо пошуковий текст — бачимо автокомпліт. Якщо щось знайдено в БД — натискаємо на результат. Сторінка оновлюється, бачимо пост. Далі тестуємо — вводимо “а”, “о” або іншу літеру — enter — оновлення, і бачимо більше записів. Якщо їх понад 10 — з’являється пагінація. Якщо навіть на останній сторінці вона працює — значить усе реалізовано правильно.

На цьому все. Повний код плагіна можна знайти в репозиторії за цим посиланням. Дякую за увагу і до зустрічі!

Список усіх уроків теми

• Урок 1. Як самому написати плагін для WordPress
• Урок 2. Розробка шорткода для плагіна WP Post Autocomplete
• Урок 3. Підключення стилів і JS скриптів до плагіна автокомпліта
• Урок 4. Робота з Ajax у плагіні автокомпліта постів
• Урок 5. Підключення jQuery Autocomplete до плагіна автокомпліта
• Урок 6. Вивід списку постів на сторінку і пагінація