Меняем постраничную навигацию

Думаю многих как и меня не устраивает дизайн постраничной навигации в Joomla. Мне долго приходилось искать плагины для решения этой проблемы, но итогом поисков были либо не рабочие плагины, либо не устраивающие меня. Так что оказалось проще переделать встроенный плагин постраничной навигации, для облегчения поисков всех необходимых кодов и файлов в joomla я поведаю Вам где что находится, а для примера возьму постраничную навигацию на данном ресурсе.

Основной файл, который отвечает за формирование постраничной навигации в Joomla 1.5 располагается в директории "[ваш сайт]/libraries/joomla/html/", для Joomla 3.x файл находится в директории "[ваш сайт]/libraries/cms/pagination/" Файл называется "pagination.php". В нем находятся 2 сроки которые могут Вам пригодится, например:

$displayedPages = 10;

Данная строка отвечает за количество выводимых страниц, по умолчанию там стоит 10, это значит, что при наличии 11 страниц показано будет только 10, что бы открыть остальное нужно будет нажать на кнопку "->".

Функция getPagesCounter 

function getPagesCounter()

Эта функция отвечает за вывод снизу количества страниц и страницы, которая сейчас открыта.

Если вы не хотите, чтобы отображалось количество страниц, то закомментируйте примерно 151 строчку. Например, вот так:

//$html .= 'JText::sprintf('JPAGE_CURRENT_OF_TOTAL', $this->get('pages.current'), $this->get('pages.total'));//

Языковой файл, из директории "[ваш сайт]\language\ru-RU" под названием "ru-RU.ini", в нем находятся переменные и слова присвоенные данным переменным. Переменные отвечающие за постраничную навигацию находятся на: строка 183 - END=Последняя, строка 233 - NEXT=Следующая, строка 258 - PREV=Предыдущая, строка 282 - START=Первая. Изменяя слова присвоенные переменным, Вы измените их при выводе в постраничной навигации.

Теперь об изменениях которые нам нужно сделать что бы получить постраничную навигацию как на данном ресурсе. Для начала в файле "pagination.php" по адресу "[ваш сайт]/libraries/joomla/html/" меняем 151 строку на: 

$html .= '<div class="pagcount">'.JText::sprintf('JPAGE_CURRENT_OF_TOTAL', $this->get('pages.current'), $this->get('pages.total')).'</div>';

Далее идем в папку с шаблоном, для которого хотим изменить вид постраничной навигации "[ваш сайт]/templates/ваш шаблон". Создайте тут папку "html", если ее нету и создадим в ней файл "pagination.php" с таким содержимым:

<?php 
defined('_JEXEC') or die('Restricted access'); 
function pagination_list_footer($list) 
{ 
$html = "<div class=\"list-footer\">\n"; 

$html .= "\n<div class=\"limit\">".JText::_('Display Num').$list['limitfield']."</div>"; 
$html .= $list['pageslinks']; 
$html .= "\n<div class=\"counter\">".$list['pagescounter']."</div>"; 

$html .= "\n<input type=\"hidden\" name=\"limitstart\" value=\"".$list['limitstart']."\" />"; 
$html .= "\n</div>"; 

return $html; 
} 

function pagination_list_render($list) 
{ 
// Initialize variables 
$html = "<span class=\"pagination\">"; 
$html .= $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>"; 
return $html; 
} 

function pagination_item_active(&$item) { 
return "<a href=\"".$item->link."\" title=\"".$item->text."\" class=\"pagactiv\">".$item->text."</a>"; 
} 

function pagination_item_inactive(&$item) { 
return "<span class=\"paginactiv\">".$item->text."</span>"; 
} 
?> 
<style>
.pagactiv {
border:#999;
border-style:solid;
border-width:1px;
padding:5px;
margin:2px;
background:-o-repeating-linear-gradient(90deg, #CCC, #fff);
background:-webkit-linear-gradient(90deg, #CCC, #fff);
background:-moz-linear-gradient(90deg, #CCC, #fff);
background /*\**/:#dddddd\9;
}

.pagactiv:hover {
background:-o-repeating-linear-gradient(90deg, #fff, #CCC);
background:-webkit-linear-gradient(90deg, #fff, #CCC);
background:-moz-linear-gradient(90deg, #fff, #CCC);
background /*\**/:#cccccc\9;
}

.paginactiv {
border:#999;
border-style:solid;
border-width:1px;
padding:5px;
margin:2px;
background:-o-repeating-linear-gradient(90deg, #900, #f00);
background:-webkit-linear-gradient(90deg, #900, #f00);
background:-moz-linear-gradient(90deg, #900, #f00);
color:#FFFFFF;
background /*\**/:#FF0000\9;
}

.pagcount {
border:#999;
border-style:solid;
border-width:1px;
padding:5px;
margin-top:-12px;
width:50px;
background:-o-repeating-linear-gradient(90deg, #900, #f00);
background:-webkit-linear-gradient(90deg, #900, #f00);
background:-moz-linear-gradient(90deg, #900, #f00);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ff0000, endColorstr=#990000)";
color:#FFFFFF;
}
?>

Где функция "pagination_list_render($list)" - отвечает за вывод строки с номерами страниц и ссылок на первую и последнюю страницу.

Функция "pagination_item_active(&$item)" - отвечает за вывод активных (тех, на которые можно нажать) страниц и ссылок в постраничной навигации.

 

Функция "pagination_item_inactive(&$item)" - отвечает за вывод неактивных (тех, на которые нельзя нажать) ссылок в постраничной навигации, либо той страницы, на которой находимся.

 

Между тегами <style></style> находятся стили для постраничной навигации написанные с использованием css3, к сожалению сss3 может не работать в браузере internet explorer, если конечно разработчики не соизволили модернизировать свой браузер и Вы не оказались одним из счастливчиков получивших его.

Рассмотрим подробнее первую функцию: на первом шаге открывается тэг <span></span> с классом ".pagination".

$html = "<span class=\"pagination\">";


На втором шаге "пристыковывается" следующая часть строки: пристыковываются открывающие ковычки («) и ссылка на первую страницу (<strong>$list['start']['data']</strong>).

$html .= $list['start']['data'];


В следующей строчке функции к переменной $html пристыковывается ссылка на предыдущую страницу.

$html .= $list['previous']['data'];

 
Далее идет цикл foreach, в котором к переменной $html по очереди пристыковываются номера всех страниц. Причем выводятся они в тэге <strong></strong>, т.е. жирным кеглем.

 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']; 

 
После всех ссылок пристыковываются закрывающие ковычки и закрывающий тэг </span>. Это закрывается тэг с классом ".pagination", который открывался в самом начале.

 $html .= "</span>";

 
Ну и в конце весь этот венегред выводится на страницу вот такой вот командой:

return $html; 

 
Соответственно, мы можем изменить структуру и место вывода ссылок на страницы. Можем положить нужные ссылки в div-ы, задать нужный класс. Результат изменения постраничной навигации таким образом вы можете увидеть на данном ресурсе.

А для ленивых предлагаю уже готовые файлы которые можно скачать внизу. Папки "language" и "libraries" нужно поместить в корневую директорию вашего сайта заменив содержимое ваших папок на содержимое этих, а папку "html" поместить в папку вашего шаблона по адресу "[ваш сайт]/templates/ваш шаблон".Внимание перед заменой файлов сделайте копии старых.

Печать

Добавить комментарий

Защитный код
Обновить