WordPress: Как сделать пагинацию с цифрами вместо ссылок «Предыдущие», «Следуюшие»

По умолчанию WordPress предлагает весьма неудобный паттерн смены страниц через ссылки «Предыдущая» и «следующая». Более того, если вы не постоянный читатьель сайтов созданных на дефолтных настройках WP то вас вообще может ввести в заблуждение кнопка «предыдущие записи». Так как с точки зрения посетителя это следующие записи, в отличие от еврита, мы читаем не задом наперёд и не с права на лево, соответственно такая пагинация нам непривычна и неудобна.

Итак, давайте исправим то, что нам на говнокодили разработчики wordpress, для начала в файле functions.php вашей темы необходимо добавить нашу собственную логику пагинации:

/**
* ADD Numeric pagination
**/

function fx_numeric_posts_nav() {
 
    if( is_singular() )
        return;
 
    global $wp_query;
 
    /** Stop execution if there's only 1 page */
    if( $wp_query->max_num_pages <= 1 )
        return;
 
    $paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
    $max   = intval( $wp_query->max_num_pages );
 
    /** Add current page to the array */
    if ( $paged >= 1 )
        $links[] = $paged;
 
    /** Add the pages around the current page to the array */
    if ( $paged >= 3 ) {
        $links[] = $paged - 1;
        $links[] = $paged - 2;
    }
 
    if ( ( $paged + 2 ) <= $max ) {
        $links[] = $paged + 2;
        $links[] = $paged + 1;
    }
 
    echo '<nav class="paginator"><ul>' . "\n";
 
    /** Previous Post Link */
    if ( get_previous_posts_link() )
        printf( '<li class="text_link">%s</li>' . "\n", get_previous_posts_link() );
 
    /** Link to first page, plus ellipses if necessary */
    if ( ! in_array( 1, $links ) ) {
        $class = 1 == $paged ? ' class="active"' : '';
 
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );
 
        if ( ! in_array( 2, $links ) )
            echo '<li>…</li>';
    }
 
    /** Link to current page, plus 2 pages in either direction if necessary */
    sort( $links );
    foreach ( (array) $links as $link ) {
        $class = $paged == $link ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
    }
 
    /** Link to last page, plus ellipses if necessary */
    if ( ! in_array( $max, $links ) ) {
        if ( ! in_array( $max - 1, $links ) )
            echo '<li>…</li>' . "\n";
 
        $class = $paged == $max ? ' class="active"' : '';
        printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
    }
 
    /** Next Post Link */
    if ( get_next_posts_link() )
        printf( '<li class="text_link">%s</li>' . "\n", get_next_posts_link() );
 
    echo '</ul></nav>' . "\n";
 
}

Теперь в вашей теме вашего сайта в файле index.php необходимо найти строку:

the_posts_navigation();

И заменить её на вызов нашей функции для навигации:

fx_numeric_posts_nav();

Вот и всё! Теперь у вас есть прекрасная и удобная навигация по сайту в которой видно на какой странице вы находитесь и сколько ещё материалов вас ждёт впереди.

Не забудьте написать ваши CSS стили, что бы ваш сайт выглядел подобающим образом. Я в своём блоге использую максимально простые стили:

.paginator ul {
	margin: 0;
	padding: 0;
}

.paginator ul li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.paginator ul li a {
	padding: 15px;
	font-weight: normal;
	text-decoration: underline;
	text-decoration-color: #ccc;
}