Как изменить структуру (разметку) паганации?

Question

[Aleksandr Yurchenko]

Здравствуйте.
Как поменять стандартную разметку паганации:

<nav class="navigation %1$s" role="navigation">
		<h2 class="screen-reader-text">%2$s</h2>
		<div class="nav-links">%3$s</div>
	</nav>

На разметку, которая используется в макете (макет сверстан на bootstrap 4) и имеет стандартный вид:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Назад</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    ...
    <li class="page-item"><a class="page-link" href="#">Далее</a></li>
  </ul>
</nav>

Пробовал воспользоваться приемом, приведенным на wp-kama (где удаляется h2) и адаптировать под себя:

add_filter('navigation_markup_template', 'my_navigation_template', 10, 2 );
function my_navigation_template( $template, $class ){
	return '
	<nav aria-label="...">
		<ul class="pagination">
			<li class="page-item">
				<a class="page-link">%3$s</a>
			</li>
		</ul>
	</nav>  
	';
}

Получается не совсем то, что нужно:


Есть возможность поменять разметку, без использования плагинов?

Answer 1

[Aleksandr Yurchenko]

За неимением готовых решений пришлось слепить свое :).

Может кому пригодиться, в принципе, если скорректировать массив $replaceто можно реализовать любую разметку пагинации.

функция ya_custom_navigation

function ya_custom_navigation() {
	$nav     = get_the_posts_pagination();
	$search  = [
		'screen-reader-text',
		'<nav class="navigation pagination" role="navigation">',
		'<div class="nav-links">',
		'</div>',
		'<a class=\'page-numbers\'',
		'<a class="prev page-numbers"',
		'<a class="next page-numbers"',
		'</a>',
		'<span aria-current=\'page\' class=\'page-numbers current\'>',
		'<span class="page-numbers dots">',
		'</span>',
		';<span class="sr-only">(current)</span></span></li>'
	];
	$replace = [
		'screen-reader-text small-title',
		'<nav>',
		'<ul class="pagination justify-content-center">',
		'</ul>',
		'<li class="page-item"><a class="page-link"',
		'<li class="page-item"><a class="page-link"',
		'<li class="page-item"><a class="page-link"',
		'</a></li>',
		'<li class="page-item active"><span aria-current="page" class="page-link">',
		'<li class="page-item disabled"><span class="page-link">',
		'<span class="sr-only">(current)</span></span></li>',
		';</span></li>'
	];
	$nav  = str_replace( $search, $replace, $nav );
	return $nav;
}

Из стандартной html разметки:

<nav class="navigation pagination" role="navigation">
    <h2 class="screen-reader-text">Навигация по записям</h2>
    <div class="nav-links">
        <span aria-current='page' class='page-numbers current'>1</span>
        <a class='page-numbers' href='http://ya.loc/blog/page/2/'>2</a>
        <span class="page-numbers dots">&hellip;</span>
        <a class='page-numbers' href='http://ya.loc/blog/page/4/'>4</a>
        <a class="next page-numbers" href="http://ya.loc/blog/page/2/">Далее</a></div>
</nav>

Делает, разметку, согласно разметки bootstrap 4.3:

<nav>
    <h2 class="screen-reader-text small-title">Навигация по записям</h2>
    <ul class="pagination justify-content-center">
        <li class="page-item active">
            <span aria-current="page" class="page-link">1<span class="sr-only">(current)</span></span>
        </li>
        <li class="page-item">
            <a class="page-link" href='http://ya.loc/blog/page/2/'>2</a>
        </li>
        <li class="page-item disabled">
            <span class="page-link">&hellip;</span>
        </li>
        <li class="page-item">
            <a class="page-link" href='http://ya.loc/blog/page/4/'>4</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="http://ya.loc/blog/page/2/">Далее</a>
        </li>
    </ul>
</nav>