Доброго времени суток дорогие читатели сайта. В этой статье я хотел бы Вам рассказать про то, как можно очень быстро и просто сделать постраничную навигацию на своем WordPress сайте без использования плагинов.

Стандартная навигация WordPress позволяет передвигаться по страницам только вперед или назад, то есть, перейти на конкретную страницу при такой навигации будет проблематично. Для этих целей мы будем использовать встроенную функцию paginate_links.

Да, можно пойти довольно простым способом для многих – это установить специальный плагин, который позволит это сделать, например WP PageNavi. Но поверьте, что данный способ, который будет использован в нашей статье еще легче и проще, тем более не будем загружать сайт лишними плагинами.

На все действия для создания постраничной навигации подобным образом Вам понадобится не более пяти минут, а внешний вид Вашего ресурса значительно преобразиться, поэтому лучше бы было это сделать, ведь посетителям будет намного удобнее перемещаться по Вашему ресурсу.

Для начала нам необходимо открыть файл 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;
}