Навигация материалов (страниц) в Joomla 2.5

В процессе наполнения сайта информационными материалами владельцы Интернет-ресурсов начинают обращать внимание на навигацию страниц. В первую очередь это владельцы интернет-магазинов, работающих на Virtuemart, новостных порталов – тех сайтов, которые быстро наполняются информацией. Дело в том, что в Virtuemart да и в Joomla вообще навигация по страницам выглядит не совсем так, как хотелось бы. В стандартном варианте это выглядит так: <<Первая < Предыдущая 1 2 3 4 Следующая > Последняя>>. Для тех, кого не устраивает такое положение дел написана эта статья.

Я опишу свой вариант настройки навигации.

Те, кому нужен другой вид, смогут по крайней мере понять, что и где надо изменить для того, чтобы настроить навигацию материалов в Joomla по-своему. Так как в Virtuemart да и вообще в Joomla пока нет специальных настроек изменяющих вид навигации, придется изменить некоторые файлы. В деле настройки навигации материалов можно пойти двумя путями: править общий для всего сайта файл pagination.php, расположенный в корень_сайта/libraries/joomla/html/ или настроить навигацию только для текущего шаблона. Мы пойдём по второму пути, так как в этом случае наши настройки не будут «затираться» при обновлении Joomla. Для достижения цели нам нужно скопировать файл pagination.php в директорию корень_сайта/templates/шаблон/html/. Но копировать мы будем не общий файл pagination.php, о котором говорилось выше, а вот этот – он полегче. Скопировали? Начинаем редактировать.
Находим и убираем символы << и >>, а так же надписи «Первая», «Предыдущая», «Следующая», «Последняя». Для этого находим функцию pagination_list_render и комментируем следующие строки:

function pagination_list_render($list)
{
    $html = "<div class=\"page_navi\">\n";
    //$html .= "<span>";
    //$html .= '<span>&laquo;</span>'.$list['start']['data'];
    //$html .= $list['previous']['data'];
    foreach( $list['pages'] as $page )
    {
        if($page['data']['active']) {
            $html .= '<strong>';
        }
        $html .= $page['data'];
        if($page['data']['active']) {
            $html .= '</strong>';
        }
    }
    //$html .= $list['next']['data'];
    //$html .= $list['end']['data'];
    //$html .= '<span>&raquo;</span>';
    //$html .= "</span>";
    $html .= "\n</div>";
    return $html;
}

 

Теперь настроим внешний вид, используя таблицу стилей нашего шаблона. Обычно файл таблицы стилей шаблона находится здесь: корень_сайта /templates/папка_шаблона/css/. Он может называться template.css, style.css и т. д. Открываем его и добавляем в конец несколько стилей:

/* Навигация по статье с aitishnik.ru */
.page_navi {
    font-size:14px; /*размер шрифта*/
    font-weight:bold; /*толщина шрифта*/
}    
.page_navi span {
    width:25px; /*ширина рамки активной страницы*/
    height:25px; /*высота рамки активной страницы*/
    border:2px solid #ff9900; /*рамка активной страницы*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display:inline-block;
    margin:0 2px;
    color: #ffffff; /*цвет шрифта активной страницы*/
    background-color:#336633; /*цвет фона*/
    padding: 1px 0 0 0;
}
.page_navi a {
    width:25px; /*ширина рамки неактивной страницы*/
    height:25px; /*высота рамки неактивной страницы*/
    border:1px solid #000000; /*цвет рамки неактивной страницы*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display:inline-block;
    margin:0 2px;
    color: #57a480; /*цвет шрифта неактивной страницы*/
    background-color:#336633; /*цвет фона*/
    font-weight:bold;
    padding: 1px 0 0 0;
}
.page_navi a:hover {color:#ff9900;}

 

Это пример оформления, он адаптирован к сайту aitishnik.ru. Подстраиваем цвета, размеры и отступы под дизайн своего сайта. Сохраняем изменения и обновляем страницу. Теперь на сайте навигация настроена по вашему вкусу.