Всем доброго дня! Мы продолжаем цикл статей о тонкостях работы с Joomla и сегодня я хочу рассказать вам о том, как легко можно изменить стиль и структуру пагинации (разбиение информации на страницы) в Джумле.
Но давайте сначала разберёмся, зачем это нужно? Стандартная структура пагинации Joomla выглядит так:
В категории на скриншоте 24 страницы, но больше десяти за раз Джумла не отрисовывает (догадывайся как хочешь), хотя бы троеточие в конце добавили.., но дело даже не в этом. Сегодня большинство сайтов показывает лишь небольшую часть доступных страниц, а остальные скрывает троеточием. Например, на скриншоте ниже мы находимся на первой странице:
Здесь на четвёртой:
И пример, если мы находимся на последней:
Так вот сегодня я научу вас, как сделать точно такую же пагинацию, но это ещё не всё. Предпосылки для создания собственной пагинации в Джумле сделаны очень удобно, вы с лёгкостью можете реализовать абсолютно любую структуру, совсем необязательно как в примере выше. Однако для этого необходимы хотя бы минимальные знания PHP, которые вы можете почерпнуть из соответствующего раздела этого блога.
Приступим
Для начала необходимо зайти в папку html вашего шаблона Джумлы (/templates/ваш_шаблон/html/) и внутри неё создать пустой файл под названием pagination.php. Если папки html у вас ещё нет, не бойтесь создать её самостоятельно. Я ценю ваше время, поэтому для тех, кто торопиться, я сразу выложу готовый вариант, а только потом объясню, как это работает. Итак, в только что созданный файл pagination.php копируем этот код:
<?php defined( '_JEXEC' ) or die; // защита // главная функция этого файла, имя этой функции изменять нельзя function pagination_list_render($list){ $html = ''; $gwpages = array(); // перебираем массив со всеми кнопками пагинации foreach ($list['pages'] as $number => $page) { if($page['active'] === false){ $current = $number; } $countPages = $number; } // конец перебора массива // Далее отрисовываем пагинацию так, как нам захочется if($current > 1) $html .= GWaddRow(&$gwpages, $list['previous'], 'pagination-previous'); $html .= GWaddRow(&$gwpages, $list['start'], 'pagination-start'); if($current > 3) $html .= '...'; if(isset($list['pages'][$current-1])) $html .= GWaddRow(&$gwpages, $list['pages'][$current-1]); $html .= GWaddRow(&$gwpages, $list['pages'][$current]); if(isset($list['pages'][$current+1])) $html .= GWaddRow(&$gwpages, $list['pages'][$current+1]); if($current < ($countPages - 2)) $html .= '...'; $html .= GWaddRow(&$gwpages, $list['end'], 'pagination-end'); if($current < $countPages) $html .= GWaddRow(&$gwpages, $list['next'], 'pagination-next'); return '<ul>'.$html.'</ul>'; } // конец главной функции // Вспомогательная функция, она необязательна, но в данном случае было удобно делать с помощью неё function GWaddRow(&$pages, $page, $class = ''){ if(in_array($page, $pages)){ return; } $row = '<li'; $row .= ($class)? ' class="'.$class.'">' : '>'; $row .= $page['data']. '</li>'; $pages[] = $page; return $row; } ?>
Далее в ваш CSS файл копируем:
.vm-pagination ul li a,.vm-pagination ul li span.pagenav,.pagenav a,div.pagination a,div.pagination span{display:inline-block;margin:0 3px;padding:4px 10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;} .vm-pagination ul li a,.pagenav a,div.pagination a{border:1px solid #d4d4d4;background: #fefefe;text-decoration:none;color:#27292c; background: -moz-linear-gradient(top, #fefefe 0%, #f0f0f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#f0f0f0)); background: -webkit-linear-gradient(top, #fefefe 0%,#f0f0f0 100%); background: -o-linear-gradient(top, #fefefe 0%,#f0f0f0 100%); background: -ms-linear-gradient(top, #fefefe 0%,#f0f0f0 100%); background: linear-gradient(to bottom, #fefefe 0%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f0f0f0',GradientType=0 );} .vm-pagination ul li span.pagenav,div.pagination span{border:1px solid #ff9e34;color:white;background: #ff9e34;box-shadow:inset 0 0 4px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);} ul.pagenav,div.pagination{margin:10px 0 0;padding:0;} ul.pagenav li,div.pagination li{list-style:none;display:inline-block;}
Этот CSS стилизует пагинацию Virtuemart2, а также материалов и категорий Joomla 2.5. Если у вас установлены другие версии или даже другие компоненты, всё что вам нужно, это просто изменить селекторы.
Готово! Но кем бы я был, если бы не объяснил, как это работает? В коде выше используется специально зарезервированное имя функции pagination_list_render(), механика Джумлы сама знает, в каком месте нужно вызвать эту функцию, поэтому наша задача, назвать её именно так. Внутри этой функции мы и программируем нашу пагинацию так, как нам нужно.
Код прокомментирован, но чтобы лучше понять структуру данных, с которыми нам приходится работать, я хочу показать вам результат работы функции var_dump($list):
Как я и говорил в самом начале статьи, в пределах одной страницы храниться максимум 9 соседних страниц, а также кнопки Вперёд, Назад, В начало, В конец и... кнопка которая есть, но ничего не делает, нигде не используется и не показывается – «Посмотреть все».