В этой статье я рассказывал, как получить набор данных из таблицы БД, соответствующей выбранной пользователем странице. В этой же статье мы разберём вывод Pagination на PHP . Pagination - это список самих страниц. В Интернете есть различные варианты, но все они страдают одним - огромное количество кода для создания бесконечного числа вариантов. Но Вам разве нужна бесконечность? Вам нужен только 1 вариант, который и будет стоять на сайте. В этой статье мы с Вами создадим относительно сложный pagination , но при этом кода будет совсем не много.
Чтобы создать Pagination на PHP , нам необходимо иметь на входе несколько параметров:
- count_pages - количество страниц.
- active - текущая активная страница.
- count_show_pages - количество отображаемых страниц. Например, если будет 1000 страниц, то вывести их все весьма проблемно. Поэтому отображаться будет только заданное количество в этом параметре.
- url - адрес страницы, для которой и создаётся Pagination .
- url_page - адрес страницы с параметром page без значения на конце . Например, "/abc.php?func=create&page= ".
Теперь мы можем создавать Pagination , вот так это выглядит на PHP :
/* Входные параметры */
$count_pages = 50;
$active = 15;
$count_show_pages = 10;
$url = "/index.php";
$url_page = "/index.php?page=";
if ($count_pages > 1) { // Всё это только если количество страниц больше 1
/* Дальше идёт вычисление первой выводимой страницы и последней (чтобы текущая страница была где-то посредине, если это возможно, и чтобы общая сумма выводимых страниц была равна count_show_pages, либо меньше, если количество страниц недостаточно) */
$left = $active - 1;
$right = $count_pages - $active;
if ($left < floor($count_show_pages / 2)) $start = 1;
else $start = $active - floor($count_show_pages / 2);
$end = $start + $count_show_pages - 1;
if ($end > $count_pages) {
$start -= ($end - $count_pages);
$end = $count_pages;
if ($start < 1) $start = 1;
}
?>
Страницы:
" title="Первая страница"><<<
" title="Предыдущая страница"><
">
" title="Следующая страница">>
" title="Последняя страница">>>>
Сразу скажу, что кода хоть и немного, но он достаточно сложный для новичков. Года 3 назад я потратил очень много времени, чтобы сделать нечто подобное и тогда кода получилось раза в 2 больше .
А дальше можно этот Pagination через CSS украшать так, как Вы пожелаете. Можно и вёрстку изменить при желании (например, вместо угловых скобок "Предыдущая страница " и аналогичных поставить красивые картинки), главное, не трогать PHP-код .
Вот такой весьма удобный Pagination реализован на этом сайте, а так же на некоторых моих других сайтах.
В данной статье я хочу показать вам, как добавить числовую пагинацию в WordPress к вашему блогу без каких-либо плагинов. Числовая пагинация, которую я собираюсь реализовать, используется на данном сайте (если вы перейдете в раздел блога и прокрутите в самый низ, то вы поймете, о чем я веду речь; примечание переводчика – примерно такая же реализация используется и на данном блоге, только через плагин). Я написал этот пост, поскольку я считаю, что людям обычно трудно добавить постраничное разбиение (пагинацию) к существующему сайту. Я регулярно сталкиваюсь с темами на форумах WordPress.org, где пользователи задают похожие вопросы: «Как мне добавить пагинацию к моей странице блога?», «Как мне добавить эти циферки в самом низу страницы, чтобы пользователи могли перемещаться по записям?» или «Как мне разбить мой блог на многочисленные страницы?» Складывается впечатление, что большинство пользователей выбирает для себя именно числовое разбиение на страницы в WordPress вместо навигации с помощью стандартных ссылок «Предыдущая страница» и «Следующая страница», которая в реальности никак не говорит о том, где именно пользователь находится в данный момент.
Базовая пагинация с помощью двух ссылок «Следующая страница» и «Предыдущая страница» достаточно просто реализуется, о чем прекрасно написано в кодексе, однако эта навигация не является самой удобной. Представьте себе, что пользователь пришел на ваш сайт, добрался до 8 страницы с нужной записью и ушел. Затем он вернулся обратно и решил получить тот же пост на 8 странице – для этого ему понадобится пролистать кучу страниц. Представьте себе, насколько это раздражающее действие. Это говорит о плохом юзабилити, и такого подхода желательно избегать, если вы не хотите, чтобы пользователи больше к вам не возвращались.
Базовая настройка: произвольный запрос WP_Query
Первый – и самый важный – шаг создания пагинации заключается в корректной настройке WP_Query. Нужно убедиться в том, что запрос возвращает данные записи. Вот базовый пример выполняемого запроса:
6, "paged" => $paged); $custom_query = new WP_Query($args); while($custom_query->have_posts()) : $custom_query->the_post(); ?>
-
" rel="bookmark">
Written by: /author/"> on #comments ">">
Примечание: код выше используется для примера. Если вы просто скопируете его и вставите в свой файл, то все стили будут нарушены. При необходимости код можно скорректировать, чтобы он отвечал вашим требованиям. Также обратите внимание на переменную, которую мы используем для хранения нашего запроса, $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. Никаких изменений совершать не нужно:
max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "
Вывод числовой пагинации в WordPress
Теперь, когда все настроено, мы можем вывести пагинацию на сайте. Добавьте следующий блок кода напрямую в свою тему или шаблон (в зависимости от того, где именно нужно вывести пагинацию).
max_num_pages); } ?>
Решил описать такой на первый взгляд простой но очень интересный момент в web программирование как пагинация.
Наверное каждый web программист хоть раз да и сталкивался с пагинацией, и понимает что универсального решения нет! По этому я предлагаю посмотреть те простые решения которые сам использую.
P.s. В топике приведен пример пагинации на php, без использования AXAJ и тд. Это сделано для того что б продемонстрировать саму суть, так сказать сделать каркас.
Поехали!
И так начнем. Представим что у нас есть большое количество какого то контента контента (заметки, товары и тд). И вот в один момент мы понимаем что отображать все это на одной странице, неправильно и не хорошо. По этому мы решаем этот контент разбить на части (страницы).
Но для того что б нам это сделать нам нужно знать несколько значений.
- Количество всех страниц.
- Количество отображаемых страниц в пагинации.
- Текущую страницу
Если честно то данных нам нужно немножко больше, но все это зависит от того какую именно пагинацию мы хотим сделать, так что об остальных данных мы поговорим чуть позже.
Допустим количество всех страниц нам известно и оно 45. Текущую страницу мы будем брать с $_GET"а, а если её там нет, то задавать она будет ровна 1.
А вот с количеством отображаемых страниц все интересней, я решил дать нашему скрипту немного гибкости, так что мы могли сами задать количество ссылок с лева и права от текущей странице, выглядит это примерно так:
/*текущая страница*/
$iCurr = (empty($_GET["page"]) ? 1: intval($_GET["page"]));
/*всего страниц или конечная страница*/
$iLastPage = 45;
/*левый и правый лимиты*/
$iLeftLimit = 4;
$iRightLimit = 5;
/*вызов функции*/
makePager($iCurr, $iLastPage, $iLeftLimit, $iRightLimit) ;
Ну вот все данные у нас уже есть и можно заняться самой функцией пагинации.
Наша функция называеться «makePager», и она ожидает от нас 4 параметра:
- текущая страница - $iCurr
- всего страниц или конечная страница - $iLastPage
- левый лимит - $iLeftLimit
- правый лимит- $iRightLimit
Код:
function makePager($iCurr, $iEnd, $iLeft, $iRight)
{
if($iCurr > $iLeft && $iCurr < ($iEnd-$iRight))
{
for($i=$iCurr-$iLeft; $i<=$iCurr+$iRight; $i++)
{
//вывод
}}
Elseif($iCurr<=$iLeft)
{
$iSlice = 1+$iLeft-$iCurr;
for($i=1; $i<=$iCurr+($iRight+$iSlice); $i++)
{
//вывод
}}
else
{
<=$iEnd; $i++)
{
//вывод}}}
Я специально убрал вывод, что б не засорять код, но он мог выглядеть например так:
if($iCurr > $iLeft && $iCurr < ($iEnd-$iRight))
{
for($i=$iCurr-$iLeft; $i<=$iCurr+$iRight; $i++)
{
echo "".($i == $iCurr ? "".$i."
" : $i)."" ;
}}
Давай посмотрим код поближе.
Первый вариант развития событий, это если наша страница находиться где то в центре (например страница 8), и количество страниц с лева и с права могут свободно отображаться, это самый простой вариант из возможных.
If($iCurr > $iLeft && $iCurr < ($iEnd-$iRight))
{
for($i=$iCurr-$iLeft; $i<=$iCurr+$iRight; $i++)
{
//вывод
}}
А что же будет если мы находиться например на странице номер 2?
Ведь в условии мы задали что нужно отображать с лева 4 ссылки.
Тогда нам на помощь приходит следующий код:
Elseif($iCurr<=$iLeft)
{
$iSlice = 1+$iLeft-$iCurr;
for($i=1; $i<=$iCurr+($iRight+$iSlice); $i++)
{
//вывод
}}
$iSlice - это количество элементов которые не будут показаны с лева, и которые соотвецтвенно нужно добавить справа, что количество ссылок оставалось постоянным.
Можно было б if"ом запретить вывод страницы если она меньше 1 и больше макс. странице но это б было так не красиво.
Ну и последний вариант, что если мы находимся например на 44 странице, и показать с права 5 мы не можем тк, страниц всего 45?
И код:
else {
$iSlice = $iRight-($iEnd - $iCurr);
for($i=$iCurr-($iLeft+$iSlice); $i<=$iEnd; $i++)
{
//вывод
}}
Вот так все просто.
P.S.
Еще несколько вариаций на тему:Если нам не важно что б количество выводимых ссылок было одинаковое то можно 2 и 3 условия заменить такими:
//второе условия:
elseif($iCurr<=$iLeft)
{
for($i=1; $i<=$iCurr+$iRight; $i++)
{
//вывод
} }
//третье условия:
Else{
for($i=$iCurr-$iLeft; $i<=$iEnd; $i++)
{
//вывод
} }
Теги: php, пагинация, пагинатор.
Всем привет! Есть в SEO, как кажутся, элементарные и очевидные вещи, но если немного разобраться в них, возникает много вопросов и нюансов, которые беспокоят владельцев проектов. Сегодня я хочу поговорить про страницы пагинации (или еще их называют страницами листинга). Хочется написать развернутый урок: что, зачем и почему, чтобы все разъяснить, как удалось это сделать с уроком .
Я уже рассказывал на своем блоге, (там же и рассказывал, что такое постраничная навигация). Теперь пришло время показать, что нужно с ними делать с точки зрения SEO. Многих беспокоят следующие вопросы:
- стоит ли их закрывать индексацию пагинации в robots.txt;
- может стоит закрыть их с помощью meta name="robots";
- или лучше использовать rel=canonical;
- а может вообще их оставить открытыми для индексации;
- ну и другие вопросы.
Итак, поехали!
Страницы
пагинации
- это страницы, которые создаются, когда список постов или товаров разбиваются на несколько страниц. Вот пример постраничной навигации на моем блоге, эти ссылки ведут на страницы пагинации:
Как вы уже поняли постраничная навигация может быть на страницах, где размещено большое количество:
- карточек товаров;
- информационных постов;
- обсуждения на форумах.
Индексация пагинации
Лучше страницы пагинации не запрещать от индексирования, чтобы роботы доходили до как можно большего количества товаров/постов (особенно важно, когда у вас очень много товаров). Но опять же, несмотря на то, что страницы открыты для индексирования, я бы рекомендовал сделать так, чтобы они не участвовали в основном поиске. Я противник низкокачественных страниц в индексе и считаю, что в поиске должны быть только нужные страницы, и важность подобных страниц будет выше, нежели будет полно низкосортного контента. Как же тогда быть?
Вся сложность заключается в том, что у двух наиболее крупных поисковиков на нашем рынке (Яндекс и Google) разные требования. Давайте разберем их.
Требования Яндекса
Причем в данном случае проблем с индексацией товаров или постов не будет, так как rel=canonical не запрещает ходить роботам по страницам, но в индексе будет только основная страница в обоих поисковиках.
Требования Google
То есть Гугл не рекомендует, как это делает Яндекс, ставить каноникал на первую страницу, также он говорит, что это неправильно. Но по опыту замечено, что, если ставить rel=canonical на первую страницу, ничего критичного не происходит, сайты хорошо чувствуют себя в обоих поисковых системах.
И да, есть такой момент: Яндексу все равно на теги rel=prev и rel=next, он не понимает их и просто игнорирует.
А что же говорят SEOшники?
Мнений на эту тему очень много, приведу парочку.
Кто-то говорит, что каждую страницу пагинации нужно подтачивать под разные запросы. К примеру, первую страницу под "Купить ноутбук", вторую под "Купить ноутбук недорого", третью под "Купить ноутбук в интернет-магазине" и так далее. Не делайте так. Поисковики не настолько тупые, может быть это еще и работало лет 5-8 назад, но сейчас однозначно так не стоит делать.
А кто-то говорит запретить в robots.txt или использовать тег meta name="robots" content="noindex,follow". Я раньше тоже так делал, но это не совсем правильно, так как поведенческие факторы со страниц пагинации не будут передаваться. Да и Яндекс также говорит:
Я не продвигаю страницы категорий на блоге (а зря, я рассказывал про пользу правильной ), все руки не доходят, как-нибудь доберусь обязательно, уберу "noindex, follow". Тем, кто продвигает категории, рекомендую использовать инструкцию выше.
Дублирование в пагинации
Кстати, если Яндекс считает, что страницы пагинации - это дубли, то Google так не считает, ему главное указать rel=prev и rel=next. Если вы используете тег rel=canonical на основную страницу, то в индексе будет только она. Если же использовать только rel=prev и rel=next, страницы пагинации будут попадать в индекс поисковых систем.
Теги prev и next показывают роботу, что страницы связаны в логической последовательности, как бы это одна большая страница. Именно поэтому одновременно использовать rel prev/next и rel canonical на основную страницу - неправильно. То есть, если вы хотите указать и каноникал, и prev/next, тогда каноникал указываем только на саму страницу (саму на себя).
Как оформить страницы пагинации
Текст описания рубрики/категории нужно выводить только на первой странице, на остальных страницах пагинации не выводим. Это чтобы не было сильного дублирования, да и текста в первую очередь все равно выводятся для роботов. И пользователи, уже перешедшие на вторую и др. страницы, уже не заинтересованы в текстах + улучшение юзабилити.
Если у вас интернет-магазин, можно добавить ссылку на страницу "Все товары" данной категории. Это позволит просмотреть страницу сразу, без переходов на другие страницы. В этом случае rel=canonical поисковики рекомендуют ставить rel=canonical на эту страницу со всеми товарами без пагинации. Но здесь нужно быть аккуратным, потому что если выводить много товаров/постов, то страница подгружается дольше, а поисковики любят как можно более быстрые сайты.
И еще, если мы находимся на второй или любой другой странице, ссылка на первую страницу должна идти сразу на основную, а не на /page/1, вот пример:
Повторюсь, закрывать от индексации страницы пагинации не нужно. Опять же скриншот комментария "Платона" и ссылку на него уже приводил выше.
Кто-то делает бесконечный скроллинг (товары/посты подгружаются по мере пролистывания страницы вниз). Если вы делаете это, снова нужно быть аккуратным. Либо кто-то выводит кнопки "Показать еще":
Бесконечный скроллинг и прочие javascript/ajax использовать можно, но чтобы не было проблем, я бы рекомендовал сделать так, чтобы все элементы индексировались и отдавались роботу. И все же, я бы продублировал бесконечный скроллинг цифрами 1,2,3,4, так как некоторым пользователям так удобнее. Вот пример:
Также, когда страниц очень много, можно сделать разбивку по 10 страниц для того, чтобы индексирующему роботу "бегать" по страницам было легче, да и страницы будут располагаться в меньшем количестве кликов. То есть выводим примерно так:
1, 2, 3 ... 10, 20, 30, 40, 50, 60, 70...79.
Вывод - как же в итоге поступить правильно?
На мой взгляд есть 3 варианта наиболее правильных развития событий:
- Если вам важен Яндекс или интересны оба поисковика (практически для всех проектов под Россию), то делаем каноникал на первую страницу.
- Если интересует только Гугл (например, ваш сайт находится в странах СНГ, где в некоторых из них трафика в Яндексе практически нет, или зарубежные проекты), то делаем rel canonical саму на себя и прописываем prev/next.
- Если у вас есть страница, где выводятся все товары, можно указать рел каноникал на нее, использовать rel=prev и rel=next. Тогда будет правильно для обоих поисковых систем. Но в таком случае, напомню, минусы тоже есть: если у вас имеются категории, где выводятся больше количество товаров, то это замедлит скорость загрузки сайта, а это влияет на ранжирование.
Во всех случаях запрета на индексирование не требуется (ни в robots.txt, ни в meta name="robots"). Не забываем, что текст размещаем только на 1-ой странице, чтобы не было дублей с большим количеством совпадений. Вы можете проследить за изменения страниц в индексе в панели вебмастеров Яндекса и Google.
Если делать подобные шаги для оптимизации сайта, результат не заставит себя ждать. Вот свежий пример из последних наших работ (это суммарный трафик с поисковых систем, начали работать в октябре 2017-го года, кликните, чтобы увеличить):
Ребята, кто успел попасть на предзапись моего SEO-марафона, я почти всем ответил на вопросы, осталось еще чуть-чуть, вопросов пришло очень много, разгребаю. 🙂 Если вдруг вы не успели записаться на предзапись марафона, ждите новостей на блоге (подпишитесь на рассылку по почте, чтобы не пропустить старт продаж), в феврале стартуем!
Ну и вопрос: а что вы делаете со страницами пагинации на своих проектах?