Як додати сторінкову навігацію на WordPress

Для пошуку старих постів на WordPress за промовчанням використовуються посилання, які перенаправляють або на Наступну сторінку, або на Попередню. Тобто можна перегортати лише посторінково. Якщо ви бажаєте додати на свій сайт навігацію за номером сторінки, використовуйте вбудовану функцію paginate_links.

Звичайно, ви можете встановити готовий плагін для цієї можливості, але в цьому короткому уроці ми розповімо, як це зробити самостійно. Повірте, це найпростіше!

Дивіться також:

• Як самому написати код навігації, що прокручується.
• Навігаційна панель Bootstrap для WordPress-теми
• Як використовувати жести під час навігації в постах WordPress
• Teleport — навігація у WordPress за допомогою клавіатури

Вся процедура займе від сили хвилин п'ять часу, а зовнішній вигляд та юзабіліті для ваших відвідувачів значно покращаться.

Отже, просто додайте цей код у файл functions.php вашої поточної теми:

// Numbered Pagination
function wplift_pagination() {
	global $wp_query;
		$big = 999999999; // need an unlikely integer
			echo paginate_links( array(
			'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
			'format' => '?paged=%#%',
			'current' => max( 1, get_query_var('paged') ),
			'total' => $wp_query->max_num_pages
		) );
}

Цим кроком ми включили можливість посторінкової навігації. Тепер потрібно вивести панель із номерами сторінок.

Розмістіть наступний код у файлі того шаблону, де ви хочете відобразити навігацію посторінков. Наприклад, для головної сторінки – це index.php, для сторінки з архівами та рубриками - archive.php і так далі. Якщо ви бажаєте відобразити панель внизу сторінки, код слід вставити десь у самому кінці шаблону.

<?php wplift_pagination(); ?>

Тепер залишилося лише оформити навігаційну панель, додавши кілька нових стилів у файл. style.css у папці з вашою темою:

/* Pagination */
.page_nav .page-numbers{
        background:#BCBCBC;
	color:#fff;
	display:block;
	width:auto;
	float:left;
	margin: 4px 4px 4px 0;
	padding:15px 18px 14px 18px;
	text-decoration:none;
}

.page_nav .page-numbers:hover{
	background: #24221D;
	color:#fff;
	text-decoration: none;
}

.page_nav .current{
        background: #24221D;
	color:#fff;
        padding:15px 18px 14px 18px;
}

Джерело: wplift.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/