Как использовать класс WP_Query, чтобы реализовать разбиение на страницы в WordPress

Это руководство описывает реализацию пользовательского цикла пагинации WordPress. Я буду использовать класс WP_Query для подготовки запроса и отображения постов блога с разбивкой на страницы.

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

Пользовательский запрос

Это руководство основано на WP_Query. Я бы рекомендовал вам прочитать соответствующие разделы документации по движку, чтобы понять, как работает этот класс.

Пример выполнения запроса для пагинации WordPress без плагина:

<?php
/**
* Название шаблона: пользовательская страница
*/
get_header(); ?>

<?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; $args = array( 'posts_per_page' => 4, 'paged' => $paged ); $custom_query = new WP_Query( $args ); ?> <!----начало--------> <div class="wrap"> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main">
<?php while($custom_query->have_posts()) : $custom_query->the_post(); ?> <div> <ul> <li> <h3><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3> <div> <ul> <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div> </ul> <ul> <p><?php echo the_content(); ?></p> </ul> </div> <div> </li> </ul> </div> <!—окончание поста --> <?php endwhile; ?> <?php if (function_exists("pagination")) { pagination($custom_query->max_num_pages); } ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- .wrap --> <!---- конец --------> <?php get_footer();

Код разбиения на страницы

Поместите следующий код вывода пагинации WordPress в статическую пользовательскую страницу, создав файл шаблона с именем CusotmPage.php в папке темы.

<?php if (function_exists("pagination")) {

 pagination($custom_query->max_num_pages);

 } ?>

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

Функция разбиения на страницы

Следующий код необходим для пользовательской функции пагинации записей WordPress. Вставьте его в файл functions.php, расположенный в папке темы:

function pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;

global $paged; if(empty($paged)) $paged = 1;
if($pages == '') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class="pagination"><span>Page ".$paged." of ".$pages."</span>"; if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>"; if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";
for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<span class="current">".$i."</span>":"<a href='".get_pagenum_link($i)."' class="inactive">".$i."</a>"; } } if ($paged < $pages && $showitems < $pages) echo "<a href="".get_pagenum_link($paged + 1)."">Next &rsaquo;</a>"; if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>"; echo "</div>n"; } }

Стили для блока нумерации страниц

Откройте файл style.css, расположенный в папке темы и добавьте в него следующий код стилей пагинации страниц WordPress:

/* Блок нумерации страниц */

 .pagination {

 clear: both;

 position: relative;

 font-size: 11px; /* Размер текста */

 line-height: 13px;

 float: right; /* Направление выравнивания блока */

 }

 .pagination span, .pagination a {

 display: block;

 float: left;

 margin: 2px 2px 2px 0;

 padding:6px 9px 5px 9px;

 text-decoration: none;

 width: auto;

 color: #fff; /* Цвет текста нумерации */

 background: #555; /* Цвет фона номеров страниц */

 -webkit-transition: background .15s ease-in-out;

 -moz-transition: background .15s ease-in-out;

 -ms-transition: background .15s ease-in-out;

 -o-transition: background .15s ease-in-out;

 transition: background .15s ease-in-out;

 }

 .pagination a:hover{

 color: #fff;

 background: #6AAC70; /* Цвет фона номера страницы при наведении курсора мыши */

 }

 .pagination .current {

 padding:6px 9px 5px 9px;

 background: #6AAC70; /* Цвет фона текущего номера страницы */

 color: #fff;

 }

Вот результат работы кода разбиения на страницы:

Заключение

В этом руководстве я показал, как реализовать пользовательскую WP пагинацию. Для этого используется класс WP_Query.

Перевод статьи “How To Use WP_Query to Create Pagination in WordPress” был подготовлен дружной командой проекта Сайтостроение от А до Я.