Пагинация wordpress


Постраничная навигация

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

Используя постраничную навигацию, пользователь может сразу переходить на страницу 6 или 8, не переходя последовательно со страницы на страницу. Такая навигация также полезна для SEO, поисковики предпочитают такую навигацию, она позволяет ботам легко переходить по записям на страницах сайта. С помощью бесплатных плагинов WordPress, приведённых в этой статье, вы можете установить постраничную навигацию на ваш веб-сайт.

1 – WP Page Navi


[wp-pic type=»plugin» slug=»wp-pagenavi» layout=»large» ]

WP Page Navi – популярный плагин, который позволит посетителям вашего сайта с лёгкостью переходить со страницы на страницу. Он заменит опцию «Старые записи»/«Новые записи» на навигацию с пронумерованными страницами. Плагин не требует больших ресурсов и не влияет на скорость загрузки страниц.

Этот плагин совместим с большинством существующих тем.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Требует мало ресурсов.
  • Дружественный к SEO.
  • Очень популярный.

2 – WP Paginate

[wp-pic type=»plugin» slug=»wp-paginate» layout=»large» ]

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

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

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Использует навигацию по комментариям.
  • Дружественный к SEO.
  • Удобный для пользователей.

3 – Simple Pagination

[wp-pic type=»plugin» slug=»simple-pagination» layout=»large» ]


Simple Pagination – это плагин, который позволит вам иметь навигацию как по вашим записям, так и по комментариям. Как подсказывает название, этот плагин очень прост в использовании. Вы можете даже подобрать стиль навигации, соответствующий теме вашего блога, с использованием таблиц стилей.

Имеется 6 таблиц стилей для соответствия вашему сайту, а также поддержка двух языков.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Использует навигацию по комментариям.
  • Имеются таблицы стилей для разных типов отображения.
  • Имеются 6 типов стилей.

4 – Page Links Plus

[wp-pic type=»plugin» slug=»page-links-single-page-option» layout=»large» ]

Page Links Plus – плагин, который выполняет функцию добавления навигации в запись. Бывают случаи, когда ваша запись становится такой большой, что вам надо разделить её на части. В таких случаях вам поможет плагин Page Links Plus, который разобьёт вашу запись на страницы, показывая связь между ними, позволяющую посмотреть всю запись целиком.

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

Основные моменты и особенности:

  • Позволяет нумеровать записи и страницы.
  • Имеется опция для просмотра всей записи.
  • Имеется множество настроек.
  • Имеется доступная Pro версия.

5 – Alphabetic Pagination

[wp-pic type=»plugin» slug=»alphabetic-pagination» layout=»large» ]

Alphabetic Pagination будет нумеровать записи и страницы вашего сайта в алфавитном порядке. Если вы занимаетесь продажами товаров на вашем сайте WordPress, то этот плагин будет творить чудеса, он будет нумеровать все ваши товары в алфавитном порядке.

Он может быть использован в любом месте вашего сайта с помощью шорткода.

Основные моменты и особенности:

  • Имеется навигация по алфавиту.
  • Имеется поддержка торговли.
  • Может быть размещён в любом месте с помощью шорткода.
  • Может показать список пользователей в алфавитном порядке.

6 – Gallery Pagination for WordPress

[wp-pic type=»plugin» slug=»byrev-gallery-pagination-for-wordpress» layout=»large» ]

Плагин Gallery Pagination for WordPress поможет вам в навигации по галереям изображений вашего WordPress сайта. Он будет отображать все изображения в галерее, что поможет пользователю перейти непосредственно к любому изображению без необходимости прокрутки изображений одного за другим.

Поддержка CDN поможет вам сделать галереи изображений дружественными для SEO. Имеется также кэширование для того, чтобы увеличить скорость загрузки страницы, а также Ajax, чтобы делать изменения без необходимости перезагрузки страницу.

Основные моменты и особенности:

  • Имеется навигация по галереям изображений.
  • Имеется поддержка CDN.
  • Дружественный к SEO.
  • Имеется кэширование.

7 – Advanced Post Pagination

[wp-pic type=»plugin» slug=»advanced-content-pagination» layout=»large» ]

Плагин Advanced Post Pagination будет осуществлять навигацию по вашим записям. Если ваша запись слишком большая, вы можете с помощью этого плагина разбить её на несколько страниц. Чтобы не запутаться в привычных цифровых кнопках, с помощью этого плагина вы можете поместить на кнопки текст и картинки. Вы можете использовать шорткод для того, чтобы разбивать запись на страницы так, как вам нравится.

Ajax поможет вам перейти к разделу без необходимости перезагрузки всей страницы.

Основные моменты и особенности:

  • Разбиение отдельной записи.
  • Использование текста и картинок на кнопках.
  • Использование шорткодов.
  • Использование Ajax.

8 – WP Smart Pagination

[wp-pic type=»plugin» slug=»wp-smart-pagination» layout=»large» ]

WP Smart Pagination – это удобный способ отображения записей с разделением на страницы, вместе с полем, в которое вы можете ввести номер страницы, что позволит вам моментально оказаться на нужной странице. Это очень полезно, если у вас на сайте много записей, что затрудняет пользователям переход к странице, которая находится очень далеко. В том случае, если у вас в наличии 4000 страниц записей, а пользователь хочет посмотреть 2555 страницу, этот плагин может оказать вам неоценимую услугу.

Основные моменты и особенности:

  • Использует простую навигацию по страницам.
  • Имеется поле для прямого перехода к нужной странице.
  • Соответствие темам.
  • Имеется модификация стилей.

9 – jPages Pagination For WordPress

[wp-pic type=»plugin» slug=»wp-pagination» layout=»large» ]

Это jQuery плагин, вдохновлённый jPages, с помощью которого вы без труда сможете разбить на страницы ваши галереи изображений и комментарии. Это в полной мере отзывчивый плагин, который будет осуществлять навигацию по контенту для всех видов устройств с различными размерами экрана. jPages Pagination For WordPress – небольшой плагин, который позволит легко интегрировать навигацию с jQuery.

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

Основные моменты и особенности:

  • Используется jQuery.
  • Отзывчивый плагин.
  • Имеется поддержка основными браузерами.
  • Простая интеграция.

Заключение

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


Если вам понравилась данная статья, вы можете поделиться ею, а также оставить комментарий в поле ниже.

clubwp.ru

Старый способ — использование функции paginate_links

На самом деле в Wordpess давно уже  присутствуют некие  средства  для  создания пагинации. Я  имею в виду   paginate_links(), появившуюся еще в WordPress 2.1, о чем, кстати, многие вообще не знали, используя плагины. С помощью этой функции вполне возможно сделать навигацию, правда кода получится не одна строчка, иногда это довольно сложный код. Если представить простой вариант, получится что-то подобное

paginate_links принимает в примере массив из параметров

  • base — строка для замены по формату. get_pagenum_link содержит url на соответствующую страницу пагинации, $big заменяется на строку формата '%#%'
  • current — номер текущей страницы пагинации, который возвращается с помощью ф-ции get_query_var('paged')
  • total — общее количество страниц пагинации, для его определения используется свойство max_num_pages объекта  $wp_query

Кроме того, нужно избавиться от лишней части '/page/1', появляющейся в конце адресной строки первой страницы, см. строчку 7 примера.

Как видите не очень просто пользоваться данным методом. Но есть и другое, альтернативное  решение.

Новый способ — функция the_posts_pagination

Разработчики позаботились о выходе функции  the_posts_pagination(), которая значительно удобнее рассмотренной ранее. Давайте посмотрим, как можно использовать ее на сайте.

Параметры, которые принимает the_posts_pagination()

show_all
Вывод полностью всех страниц. По умолчанию отключен (равен false).
prev_next
Предыдущая-Следующая. По умолчанию включен (true).
end_size
Количество страниц, которое отображается в начале и конце списка страниц. По умолчанию 1.
mid_size
Количество страниц, отображающихся слева  и справа от текущей. По умолчанию 1.
before_page_number
Произвольный текст или символ перед  номером каждой страницы. По умолчанию отсутствует.
after_page_number
Произвольный текст или символ после номера каждой страницы. По умолчанию отсутствует.
prev_text
Текст ссылки на предыдущую страницу.
next_text
Текст ссылки на следующую страницу
screen_reader_text
Параметр, содержащий информацию для устройств чтения с экрана (скринридеров), предназначенных для пользователей с ослабленным зрением. Для визуальных браузеров обычно задаются стили, скрывающие этот текст.

Не обязательно перечислять все параметры в скобках функции. Указываем выборочно те, которые представляют интерес или не указываем ничего — в этом случае  будут выводиться параметры по умолчанию.  Помещаем код с  the_posts_pagination в файл index.php темы WordPress после цикла, не забывая заключить в дескрипторы <?php ?>.

пагинация

Так выглядит стандартная навигация нового шаблона Twenty Fifteen (появившегося в версии 4.1.), созданная при помощи этой функции.

navigation

Классы, отвечающие за настройку внешнего вида

Функция генерирует html код, добавив к которому соответствующие стили, можно получить пользовательскую постраничную навигацию.

Итак, мы располагаем несколькими классами, для которых требуется создать правила в файле  style.css  темы WordPress.

  • nav.pagination — тег-обертка пагинации. Используется новый тег html5, созданный специально для навигации.

  • div.nav-links — класс блочного элемента, содержащего непосредственно всю совокупность ссылок на страницы
  • .page-numbers — класс для настройки отображения номеров со страницами
  • span.current — строчный элемент содержащий номер текущей страницы
  • a.prev — ссылка на предыдущую страницу
  • a.next — ссылка на следующую страницу

навигация

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

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

Помимо пагинации (разбиению на страницы) рекомендую вам также использовать альтернативный вид навигации  — хлебные крошки, например реализованный с помощью плагина Prime Strategy Bread Crumb.

nikel-blog.ru

Следует ли закрывать страницы пагинации от индексации

Мнение автора:

В следствие того, что даже Яндекс теперь отображает в вебмастере ссылки с nofollow, смею предложить, что некоторый вес даже по закрытым ссылкам передаётся страницам. Тем самым страницы пагинации имеют хоть небольшую, но всё же значимость, которую могут передать статьям находящимся в разделах с пагинацией. Вес страниц пагинации собирается из количества ссылок, при предложенной мной функции:


  • первая и последняя страница могут иметь довольно большое количество внутренних ссылок (зависит от количества страниц пагинации в разделе)
  • любая другая страница:

    2 ссылки при 'mid_size' => 2;
    4 ссылки при 'mid_size' => 3;
    и так далее.

Самая высокая значимость и вес страницы отдаётся первой странице, так как на неё ведёт больше всего ссылок и уровень вложенности выше всех остальных.

marseo.ru

Что такое пагинация

Пагинация — это разбиение информации на страницы. Также под этим понятием подразумевают порядковую нумерацию страниц, обозначаемых цифрами, располагаемыми внизу, вверху или сбоку страницы.

WP-PageNavi — плагин пагинации WordPress

Самым популярным плагином пагинации для WordPress является WP-PageNavi. По-совести говоря, он настолько хорошо справляется с поставленной задачей пагинации, что обсуждать и сравнивать остальные плагины нет никакого смысла.

Пагинация wordpress без плагина

Для того чтобы сделать пагинацию на сайте без плагинов мы воспользуемся встроенной WordPress функцией the_posts_pagination(). В нужном нам месте необходимо вставить следующий код (как правило это файлы index.php, category.php и им подобные):

  <?php the_posts_pagination(); ?>  

Результатом работы функции the_posts_pagination() будет примерно такой HTML код:

  <nav class="navigation pagination" role="navigation">   <h2 class="screen-reader-text">Навигация по записям</h2>   <div class="nav-links"><span class="page-numbers current">1</span>   <a class="page-numbers" href="http://domainname.tld/page/2/">2</a>   <span class="page-numbers dots">…</span>   <a class="page-numbers" href="http://domainname.tld/page/98/">98</a>   <a class="page-numbers" href="http://domainname.tld/page/99/">99</a>   <a class="next page-numbers" href="http://domainname.tld/page/2/">Следующая страница</a>   </div>  </nav>  

Удаляем заголовок H2 из пагинации

Сразу бросается в глаза H2-заголовок «Навигация по записям». Которому в большинстве случаев не место на сайте. Чтобы от него избавиться добавим следующий код в файл functions.php:

  /* Удаляем H2 из пагинации */   add_filter('navigation_markup_template', 'my_navigation_template', 10, 2 );  function my_navigation_template( $template, $class ){   return '   <nav class="%1$s" role="navigation">   <div class="nav-links">%3$s</div>   </nav>    ';  }  

Настраиваем страницы пагинации

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Например так:

  <?php   the_posts_pagination( array(   'mid_size' => 2,   'end_size' => 2,  ) );   ?>  

Стили пагинации CSS

Если вам не нравятся текстовые ссылки, то их можно приукрасить, например так:

  .page-numbers {  padding: 1% 2%;  box-shadow: 0 0 10px #ccc;  margin: 0 1% 0 0;  background: #fff;  border-radius: 3px;  }  

Выглядеть ссылки на страницы пагинации при таких стилях будут следующим образом:
Пример оформления постраничной навигации

Впечатления о встроенной функции пагинации WordPress

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

moonback.ru

В данной статье я хочу показать вам, как добавить числовую пагинацию в WordPress к вашему блогу без каких-либо плагинов. Числовая пагинация, которую я собираюсь реализовать, используется на данном сайте (если вы перейдете в раздел блога и прокрутите в самый низ, то вы поймете, о чем я веду речь; примечание переводчика – примерно такая же реализация используется и на данном блоге, только через плагин). Я написал этот пост, поскольку я считаю, что людям обычно трудно добавить постраничное разбиение (пагинацию) к существующему сайту. Я регулярно сталкиваюсь с темами на форумах WordPress.org, где пользователи задают похожие вопросы: «Как мне добавить пагинацию к моей странице блога?», «Как мне добавить эти циферки в самом низу страницы, чтобы пользователи могли перемещаться по записям?» или «Как мне разбить мой блог на многочисленные страницы?» Складывается впечатление, что большинство пользователей выбирает для себя именно числовое разбиение на страницы в WordPress вместо навигации с помощью стандартных ссылок «Предыдущая страница» и «Следующая страница», которая в реальности никак не говорит о том, где именно пользователь находится в данный момент.

Базовая пагинация с помощью двух ссылок «Следующая страница» и «Предыдущая страница» достаточно просто реализуется, о чем прекрасно написано в кодексе, однако эта навигация не является самой удобной. Представьте себе, что пользователь пришел на ваш сайт, добрался до 8 страницы с нужной записью и ушел. Затем он вернулся обратно и решил получить тот же пост на 8 странице – для этого ему понадобится пролистать кучу страниц. Представьте себе, насколько это раздражающее действие. Это говорит о плохом юзабилити, и такого подхода желательно избегать, если вы не хотите, чтобы пользователи больше к вам не возвращались.

Базовая настройка: произвольный запрос WP_Query

Первый – и самый важный – шаг создания пагинации заключается в корректной настройке WP_Query. Нужно убедиться в том, что запрос возвращает данные записи. Вот базовый пример выполняемого запроса:

<?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1   $args = array(  'posts_per_page' => 6,  'paged' => $paged );   $custom_query = new WP_Query( $args );   while($custom_query->have_posts()) :   $custom_query->the_post();	 ?>  <div> 	<ul> 	 <li> 	 <h3><a class="blog-title" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3> 		<span>Written <i>by:&nbsp;</i> <a class="link" href="<?php bloginfo('url'); ?>/author/<?php the_author(); ?>"> <?php the_author(); ?></a> <i>on</i> <?php the_time('F j, Y'); ?> <a class="link" href="<?php the_permalink(); ?>#comments "><?php comments_number( '', '- 1 comment', '- % comments' ); ?></a></span> 		<div> 		 <ul> 			<div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div> 		 </ul> 		 <ul> 			<li class="work-description"><?php echo the_excerpt(); ?></li> 		 </ul>				 		</div>	 		<div><?php the_tags(); ?>			 	 </li> 	</ul>  </div> <!-- end blog posts -->	    <?php endwhile; ?>		  </div>

Примечание: код выше используется для примера. Если вы просто скопируете его и вставите в свой файл, то все стили будут нарушены. При необходимости код можно скорректировать, чтобы он отвечал вашим требованиям. Также обратите внимание на переменную, которую мы используем для хранения нашего запроса, $custom_query, поскольку она будет использоваться, чтобы вывести на экран пагинацию для данного конкретного запроса.

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

Стили пагинации

Следующие стили помещаются непосредственно в основной файл .CSS вашей темы. Эти стили определяют способ вывода на экран пагинации вашего сайта.

/* Pagination */ .pagination {  clear:both;  position:relative;  font-size:11px; /* Pagination text size */  line-height:13px;  float:right; /* Pagination float direction */ }   .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; /* Pagination text color */  background: #555; /* Pagination non-active background color */  -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 background on hover */ }   .pagination .current{  padding:6px 9px 5px 9px;  background: #6AAC70; /* Current page background */  color:#fff; } 

Я добавил комментарии в коде, чтобы вы могли легко поменять цвета для соответствия вашей теме.

Функция Pagination

Код ниже – это весь код, который требуется нам для того, чтобы пагинация корректно работала. Именно здесь обрабатываются возвращенные данные запроса и формируется наша красивая пагинация. Скопируйте и вставьте этот код в ваш файл functions.php. Никаких изменений совершать не нужно:

<?php // numbered pagination 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";  } } ?>

oddstyle.ru

Как это будет работать?

Сначала мы должны получить информацию о том, какую страницу (номер страницы) нам нужно отобразить. Затем мы отправляем запрос, в котором передаём имя CPT, количество постов, которое мы отображаем на одной странице и номер отображаемой страницы:

Далее идёт стандартная конструкция вывода постов:

if ( $projects->have_posts() ) :  while ( $projects->have_posts() ) : $projects->the_post();  // здесь HTML разметка поста  endwhile;  endif;

На этом почти всё. Единственное, что нам осталось сделать — это написать условия, при каких должна появляться пагинация и собственно вывести её в нужное место:

<?php  if ( $projects->max_num_pages > 1 ) : // если максимальное количество страниц больше 1, то выводим пагинацию   // если это не последняя страница и не первая, то выводим ссылки на следующую и предыдущую страницу  if ( $projects->max_num_pages > $current_page && $current_page > 1 ) : ?>   <a href="<?php prevlink($current_page) ?>">Предыдущая страница</a>  <a href="<?php nextlink($current_page) ?>">Следующая страница</a>   // если текущая страница является первой страницей, выводим только ссылку на следующую страницу  <?php elseif ( $current_page == 1 ) : ?>    <a href="<?php nextlink($current_page) ?>">Следующая страница</a>   // если текущая страница - это последняя страница, выводим ссылку только на предыдущую страницу  <?php elseif ( $current_page == $projects->max_num_pages ) : ?>   <a href="<?php prevlink($current_page) ?>">Предыдущая страница</a>   <?php endif;   endif; ?>

Функция, вставляющая ссылки на нужные страницы выглядит так:

<?php  // ссылка на следующую страницу  function nextlink($current){  echo '?page=' . ($current + 1);  }   // ссылка на предыдущую страницу  function prevlink($current){  echo '?page=' . ($current - 1);  } ?>

На этом всё. Постраничная навигация в URL будет выглядеть так:

site-name./projects?page=2

Код получился очень простым и в то же время рабочим, не пришлось использовать различные манипуляции, которые я находил в сети.

Это решение будет работать не только с произвольными типами записей, но и со стандартными.

Полный код выглядит вот так:

<?php   $current_page = $_GET['page']; // текущая страница  $post_type = 'projects'; // имя custom post type   // если GET параметр пустой, то принимаем, что текущая страница равна 1  if ( empty($current_page) ) {  $current_page = 1;  }   // аргументы, передаваемые в запрос  $args = array(  'post_type' => $post_type, // custom post type  'posts_per_page' => 10, // количество постов на одной странице  'paged' => $current_page, // задаем номер страницы, которую хотим отобразить  );   $projects = new WP_Query( $args ); // отправляем запрос   if ( $projects->have_posts() ) :   while ( $projects->have_posts() ) : $projects->the_post(); ?>   // здесь HTML разметка поста   <?php endwhile;    // если максимальное количество страниц больше 1, то выводим пагинацию  if ( $projects->max_num_pages > 1 ) :    // если это не последняя страница и не первая, то выводим ссылки на следующую и предыдущую страницу  if ( $projects->max_num_pages > $current_page && $current_page > 1 ) : ?>    <a href="<?php prevlink($current_page) ?>">Предыдущая страница</a>  <a href="<?php nextlink($current_page) ?>">Следующая страница</a>   // если текущая страница является первой страницей, выводим только ссылку на следующую страницу  <?php elseif ( $current_page == 1 ) : ?>    <a href="<?php nextlink($current_page) ?>">Следующая страница</a>   // если текущая страница - это последняя страница, выводим ссылку только на предыдущую страницу  <?php elseif ( $current_page == $projects->max_num_pages ) : ?>    <a href="<?php prevlink($current_page) ?>">Предыдущая страница</a>   <?php endif;   endif;   endif; ?>

andrewyou.ru

Делаем без плагина

Сейчас я покажу способ, после которого у вас будет точно такая же постраничная навигация WordPress, как и у меня. Делается все очень просто. Потребуется 2 части кода, которые нужно будет разместить в файлах шаблона, а затем прописать стили, чтобы задать оформление. Приступим!

Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.

Я разместил код в самое начало файла после открывающего тега <?php.

«>

В данном коде мы можем отрегулировать некоторые параметры:

  • Строка 10 — если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например «Страница 3 из 45». Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
  • Строки 11 и 12 — слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.

Далее необходимо разместить вторую часть кода.

Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:

  • Главная страница — index.php;
  • Страницы рубрик и архивов — category.php и archive.php;
  • Страница поиска — search.php.

Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.

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

Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.

«>

У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.

Когда найдете, то смело удаляете данное содержимое из файла и на его место копируете нужный код, выводящий постраничную навигацию.

«>

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

Кстати, если у вас имеются проблемы с данным процессом, то можете обратиться ко мне за помощью в комментариях. Постараюсь помочь.

Далее нужно прописать стили, чтобы навигация имела должное оформления. Даю вам свои стили. Можете их смело разместить в своем файле style.css.

Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. Скачайте их отсюда. Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же использую Filezilla.

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

«>

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

Способ без плагина мы разобрали. Уверен на все 100%, если все сделали, как описал выше, то у вас должно все работать на ура. Был еще второй вариант без плагина, но просмотрев его я понял, что по сути это тот же самый вариант, только немного измененный. Поэтому, я перехожу к способу реализации постраничной навигации с помощью плагина.

Плагин WP-PageNavi

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

«>

После установки плагина нужно будет также разместить код, который выведет навигацию внизу страницы.

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

Теперь плагин будет выполнять свою задачу и номера страниц будут иметь следующее оформление.

«>

С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.

«>

Касаемо первого пункта настроек «Шаблоны списка страниц», то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту «Настройки списка страниц».

«>

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

  • Использовать стиль — если поставим значение «No», то стили плагина уберутся и номера страниц не будут оформлены;

«>

  • Стиль списка страниц — кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;

«>

  • Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
  • Количество страниц для показа — отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
  • Диапазон страниц для показа — если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить  номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
  • Коэффициент для диапазонов страниц — если выстави значения 5, то диапазон страниц будет иметь вид — 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.

Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.

Идем дальше и рассмотрим варианты, как можно изменить оформление списка номеров страниц в данном плагине.

Самый простой вариант — установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин Wp Pagenavi Style.

После его установки в админ-панели WordPress появляется новый пункт.

«>

После перехода в него сразу можем выбрать уже имеющиеся заготовки дизайна.

«>

Если же хотим настроим стили индивидуально, то в первом пункте настроек «Select Stylesheet» выбираем вариант «Custom» и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).

«>

Переведу вам все параметры.

  • Heading Color — цвет текста «Страница 3 из 45»;
  • Background Color — цвет фона;
  • Active/Current Background color — цвет фона активного номера страницы;
  • Font Size — размер шрифта;
  • Link Color — цвет ссылки;
  • Link Mouse Hover/ Active Hover — цвет ссылки при наведении мышки на номер и при активности номера;
  • Link Border Color — цвет границы;
  • Link Border Mouse Hover/Active Color — цвет границы при наведении курсора мышки и пи активности номера;
  • Align Navigation — расположение навигации (слева, справа, центр).

Значения цветов вы можете искать в интернете или же в программе Photoshop, когда выбираете нужный цвет для заливки.

«>

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

Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге — pagenavi-css.css.

«>

«>

Данный файл подключается, когда в настройках плагина активна настройка «Использовать стиль pagenavi-css.css». Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:

  1. Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
  2. Отключить настройку «Использовать стиль pagenavi-css.css»;
  3. Разместить эти стили в основном файле стилей шаблона оформления style.css.

Таким образом эти стили будут работать независимо от плагина. И при обновлении они не будут сбиваться. Это, пожалуй, самый лучший вариант оформления навигации в данном плагине, который я сам бы сделал. Но, к счастью, я использую вариант без плагина, что и вам совету.

Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.

На данной ноте уже хочу поскорей закончить этот пост, так как сил он отнял уйму. Это я и сделаю. Попрощаюсь и пойду отдыхать, а затем уткнусь в написание нового контента.

Пока!

С уважением, Константин Хмелев!

Пагинация wordpress

kostyakhmelev.ru

the_posts_pagination()

Функция the_posts_pagination() вставляет блок пагинации в тему WordPress:

<?php paginate_links(); ?>

В качестве единственного параметра функция the_posts_pagination() принимает массив, который передается в функцию paginate_links(). Это значит, что весь функционал который мы ранее выполняли с помощью paginate_links(), также легко реализовать и с помощью новой упрощенной функции the_posts_pagination().

Например, можно добавить символ № перед каждым номером страницы:

the_posts_pagination( array(    'before_page_number' => '&#8470;',   ) );

По умолчанию the_posts_pagination() отображает первую и последнюю страницу, а также по одной странице вокруг текущей. Все остальные заменяются многоточием. Это поведение можно изменить с помощью аргументов:

  • show_all — показывать все страницы
  • end_size — количество страниц в начале и конце списка
  • mid_size — количество страниц слева и справа от текущей страницы

Например:

the_posts_pagination( array(   'end_size' => 2,   'mid_size' => 2,  ) );  

Данный код будет отображать первую, вторую, предпоследнюю и последнюю страницы, независимо от текущей. А вокруг текущей страницы будет по две страницы с каждой стороны. На примере темы Twenty Fifteen это будет выглядеть следующим образом:

Функция the_posts_pagination() добавляет ряд дополнительных классов к разметке, с помощью которых можно изменять внешний вид каждого элемента пагинации.

the_posts_navigation

Функция the_posts_navigation() является менее привлекательной альтернативой функции the_posts_pagination(). Она выводит лишь ссылки на следующую и предыдущую страницы относительно текущей.

До WordPress 4.1 данные ссылки можно получить с помощью функций get_next_posts_link() и get_previous_posts_link(), которыми на сегодняшний день пользуются большинство авторов тем для WordPress. Начиная с версии 4.1 авторы могут существенно упростить вывод подобных ссылок:

<?php the_posts_navigation(); ?>

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

the_post_navigation

Функцию the_post_navigation() можно использовать в шаблоне вывода одной записи. Данная функция отображает ссылки на следующую и предыдущую записи относительно текущей. Она также хорошо подходит для использования в шаблонах прикрепленных файлов.

<?php the_post_navigation(); ?>

Аргументами prev_text и next_text можно изменить текст, куда строкой %title можно вставить заголовок следующей или предыдущей статьи:

the_post_navigation( array(   'next_text' => 'Следующая запись: %title',   'prev_text' => 'Предыдущая запись: %title',  ) );  

Заключение

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

Следует отметить, что все три функции выводят результат сразу на экран. Если вы хотите записать результат в переменную, сделать это можно добавив префикс get_ к любой из них, например get_the_posts_pagination().

Напоминаем, что WordPress версии 4.1 выйдет в декабре 2014 года вместе с новой стандартной темой Twenty Fifteen.

wpmag.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.