Пагинация страниц WordPress без плагина

Пагинация страниц в WordPress — удобное средство для разбивки контента на несколько страниц и облегчения навигации по сайту. Некоторые темы по умолчанию предоставляют стандартную навигацию типа «Следующая страница» и «Предыдущая страница», но это устаревший подход.

Вместо установки дополнительного плагина, вы можете воспользоваться встроенной функцией paginate_links() в WordPress. Она проста в использовании и хорошо справляется с задачей разбивки контента на страницы. Таким образом, вы можете легко создать собственную пагинацию страниц для вашего сайта без лишних плагинов.

Устанавливаем пагинацию страниц на WordPress

Для установки пагинации на страницы без использования плагина, следуйте этим шагам:

Шаг 1:

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

function paginate() {
        global $wp_query, $wp_rewrite;
        $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
        
        $pagination = array(
                'base' => @add_query_arg('page','%#%'),
                'format' => '',
                'total' => $wp_query->max_num_pages,
                'current' => $current,
                'show_all' => False,
                'type' => 'list',
                'next_text' => 'Далее',
                'prev_text' => 'Назад',
                //'prev_next' => false//удаляет "Далее", "Назад"
                );
        
        if( $wp_rewrite->using_permalinks() )
                $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
        
        if( !empty($wp_query->query_vars['s']) )
                $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
        
        echo paginate_links( $pagination );
}

Шаг 2:

Откройте файл style.css вашей темы и добавьте стили для оформления пагинации. Вы можете изменить фон, размер шрифта и другие стили, чтобы соответствовать внешнему виду вашего сайта.

/* Pagination */        
        
ul.page-numbers {
        margin: 20px 0;
        padding: 0;
        clear: both;
        float: left;
}

ul.page-numbers li {
        float: left;
        list-style-type: none;
}

ul.page-numbers a,
ul.page-numbers span {
        border-radius: 3px;
        background: #fff;
        padding: 8px 14px;
        margin: 2px;
        text-decoration: none;
        color: #777;
        transition: .3s;
}
ul.page-numbers a:hover,
ul.page-numbers span.current {
        background: #F15F5F;
        color: #fff;
}

Шаг 3:

Теперь нужно заменить стандартную пагинацию на нашу. Для этого откройте файлы index.php, archive.php, search.php, category.php и остальные, где выводится стандартная пагинация. Замените ее на нашу, используя следующий код:

<?php paginate(); ?>

Теперь пагинация будет работать на вашем сайте без использования плагинов.

10 комментариев
  1. Спасибо большое! Вы мне очень помогли, это то, что мне было нужно, так как плагины навигации не работали с моей темой. Теперь всё получилось! А как же убрать стандартную навигацию? А то теперь у меня двойная навигация на сайте

    1. Не за что! Всегда рад помочь! А чтобы убрать стандартную навигацию, то поищите в файлах: index.php, archive.php, search.php вывод стандартной нав. Выглядит примерно так: <?php twentythirteen_paging_nav(); ?> это из темы twentythirteen. Если сами не сможете найти, то скажите какая у вас тема, и я помогу найти.

      1. Нашла в своей теме такие строчки удалила. Работает. Еще раз благодарю Вас, Андрей! Только Вы мне помогли! З.Ы. Извините за предыдущий комментарий, ребенок подтолкнул)

      2. Ничего страшного) Обращайтесь, всегда рад буду помочь)

  2. Доброго времени! Не скажите как можно применить эти стили к постраничной навигации к стилям по умолчанию плагина. WP Show Post

    Если быть точней вот класс оформления постраничной пагинации у плагина

    <a href="#" rel="nofollow">← Previous</a> <a href="#" rel="nofollow">1</a> 2 <a href="#/page/3" rel="nofollow">3</a> … <a href="#/page/11" rel="nofollow">11</a> <a href="#/page/3" rel="nofollow">Next →</a>

    Как их можно объединить?

    С уважением.

      1. WordSmall,

        Простите не увидел тег кога

        <code><a href="https" rel="nofollow">← Previous</a> <a href="https:" rel="nofollow">1</a> 2 <a href="https://" rel="nofollow">3</a> … <a href="https:///page/11" rel="nofollow">11</a> <a href="" rel="nofollow">Next →</a>

        Что куда подставить если можно?:)

  3. Подскажите пожалуйста как можно удалить слова далее и назад? Я уже убирала их, писала false, null — не помогло.

    1. Это удалите:

      'next_text' => 'Далее',
      'prev_text' => 'Назад'
      

      А это добавьте:

      'prev_next' => false
      

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *