В этой статье я рассказывал, как получить набор данных из таблицы БД, соответствующей выбранной пользователем странице. В этой же статье мы разберём вывод 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); } ?>
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Пагинация на сайте - это навигационный ссылочный блок, который облегчает для пользователей переход и просмотр товарных позиций, страниц каталога, публикаций и так далее
.Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Пагинация - это ограничение показа информации, который используется для разбиения солидного массива данных на отдельные веб-страницы.
Чтобы понять, что из себя представляет пагинация, разберем простую аналогию. Когда мы используем справочную литературу или печатный каталог, мы видим, что информация в нем представлена в упорядоченном виде. Товарные позиции или профессиональная информация не представлены сплошным перечнем. Это позволяет облегчить использование издания и быстро найти то, что нужно. Пагинация решает аналогичные задачи: упростить просмотр товаров, сделать его удобнее.
Сегодня пагинации бывают нескольких типов:
- Прямая нумерация («1», «2», «3»...).
- Прямая с указанием позиций в списке («1-10», «10-20» ...).
- Обратная с позициями («40-30», «30-20», «20-10» ...).
Зачем нужна пагинация
Сегодня ведущие интернет магазины применяют пагинацию. Она значительно упрощает использование сайта. Представьте, что на одной странице размещен весь ассортимент, несколько тысяч изделий. Это определенно можно сделать, ведь интернет-страница безгранична, чего нельзя сказать о бумажной. Но нельзя забывать, что скорость соединения лимитирована, следовательно: чем больше товарных позиций на странице, тем дольше она загружается.
Таким образом, постраничная навигация используется для улучшения юзабилити сайта и увеличения скорости загрузки страниц.
Как сделать пагинацию
Разберем, как сделать пагинацию на скриптовом языке PHP, так как он сегодня чаще всего используется для разработки веб-приложений.
Итак, у нас есть много контента (перечень товарных позиций, различные заметки и так далее). Нам нужно организовать его для удобного представления на страницах сайта, то есть разбить его.
Для начала определяем, сколько у нас будет страниц, сколько из них будет отображаться в пагинации и какова текущая. Возьмем 45 страниц, текущую возьмем с $_GET"а (если ее нет, она равна 1). Число страниц, отображаемых в пагинации, оставляем гибким, чтобы корректировать число ссылок справа и слева от текущей.
Мы прописали сами данные, приступим к разработке пагинации. Она реализуется с помощью специальной функции - makePage, которая задается 4 параметрами: $iCurr (текущая страница), $iLastPage (последняя страница), $iLeftLimit (лимит слева), $iRightLimit (лимит справа).
Прописываем код:
Вывод при этом может иметь следующий вид:
Рассмотрим написанный код. Наиболее простым вариантом из возможных является ситуация, когда мы в центре (к примеру, на странице 8), справа и слева свободно отображаются страницы.
Если мы находимся в начале, используем другой код:
При этом $iSlice - это число элементов, которые не показываются с левой стороны, их нужно добавить с правой стороны.
И последний вариант. Представим, что мы находимся в конце пагинации. Прописываем другой код:
На этом все.
Проблемы с пагинацией при SEO
Как вы выяснили, для юзабилити ресурса, пагинация - это всегда большой плюс. А вот для успешного СЕО продвижения пагинация может стать препятствием. Необходима правильная пагинация, в противном случае ресурс рискует потерять позиции в результатах поисковиков:
- Поисковики могут применить штрафные санкции за повторение контента.
- Товарные позиции долго индексируются, их трудно или вовсе нельзя найти через поиск.
Робот поисковиков находится на сайте ограниченное время. Представим, что бот зашел в интернет-магазин мужской одежды, где на каждой странице представлено 30-40 позиций, отличие позиций заключается лишь в наименовании брендов. Робот может просто не дойти до нужной позиции, потому что она находится на нижнем уровне. Однако владельцу интернет-ресурса нужно обратное, чтобы страницы были проиндексированы.
Если говорить о повторяющемся контенте, позиция поисковиков к нему резко отрицательная. Объясняется это просто: каждой странице должен соответствовать релевантный контент. Если контент схож, например, список товаров + описание групп одинаковые либо похожи, поисковику трудно определить релевантную страницу из представленных.Значимость страниц распыляется и теряется, главная страница уже не выделяется на фоне остальных. Следовательно, в выдаче поисковика сайт теряет позиции.
SEO и пагинация
Наша задача составить пагинацию таким образом, чтобы она нВ худшем раскладе не вредила СЕО, а в лучшем - улучшала позиции сайта в результатах выдачи поисковиков. Сделать это можно несколькими способами.
Закрыть пагинацию для индексации
Многие задаются вопросом, как закрыть страницы пагинации от индексации. Для этого есть несколько решений.
- Использовать мета-тег NOINDEX.
Здесь в «головную» секцию каждой страницы, кроме первой, мы вставляем строчку: . Таким образом мы не разрешаем роботу индексировать данную страничку, но позволяем проходить по ее ссылкам.
Здесь важно проработать XML карту ресурса. Если страницы ресурса динамичные, то есть можно использовать фильтры, ссылка первой веб-страницы должна выглядеть так: название домена/catalog. Со страниц «название домена/catalog?page=1» делаем редирект 301 на веб-страницу «название домена/catalog».
Важно учитывать ряд нюансов. Тег NOINDEX воспринимается индексом, однако Google его не читает. Если сайт обладает внушительном количеством динамичных страниц, на каждый из них нужно прописать NOINDEX. Весь контент при этом исключается из пагинации, кроме контента первой страницы.
- Использовать файл robots.txt.
Страницы пагинации имеют определенный вид «вид http://название домена/category/page/n», в которых n- номер страниц. Необходимо прописать robots.txt, присвоить ему определенную команду: «Disallow: /category/page». Данный способ универсален и подходит для любых поисковиков. Однако нюанс сохраняется: весь контент со страниц пагинации, кроме контента первой, будет исключен.
Применять страницу «Смотреть все» и тег CANONICAL
Смысл в следующем: создается веб-страница, где будут отображаться все имеющиеся товары. Для поисковиков данная страница указывается как каноническая через тег CANONICAL.
Здесь также не обойтись без нюансов: если товаров много, такая страница будет загружаться долго. Зато тег распознается всеми поисковиками (Google считает его приоритетным) и контент будет полностью проиндексирован.
Есть и минусы: имеются ограничения объема и качества контента, а при большом количестве товарных позиций и фильтров, необходимо прописать CANONICAL для каждой динамической страницы.
Решил описать такой на первый взгляд простой но очень интересный момент в 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, пагинация, пагинатор.
Loading...