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

2022-07-24 0 ∞

Это руководство описывает реализацию пользовательского цикла пагинации 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.