Загрузка...

Уроки по созданию сайтов

Красивая, удобная и компактная пагинация для Joomla 2.5

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

Но давайте сначала разберёмся, зачем это нужно? Стандартная структура пагинации 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 соседних страниц, а также кнопки Вперёд, Назад, В начало, В конец и... кнопка которая есть, но ничего не делает, нигде не используется и не показывается – «Посмотреть все».

{

Напишите нам

}