Как использовать класс 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"><?phpwhile($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); }?>

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

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

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

Следующий программный код необходим для пользовательской возможности пагинации записей 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_Query, чтобы реализовать разбиение на страницы в WordPress

Заключение

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

Добавить комментарий

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