Созданная постраничная навигация (по умолчанию или в шаблоне) не всегда вписывается в общий дизайн сайта и требует корректировки. Какие элементы кода и за что они отвечают, где их искать? Этот вопрос постает практически у каждого, кто решил изменить внешний вид и структуру навигации
За внешний вид и работу постраничной навигации (так называемой — пагинации) в CMS Joomla отвечает файл pagination.php , который расположен в самой системы ( корень_сайта/libraries/joomla/html/ ) или в используемом шаблоне. Чтобы настроить навигацию по страницам материалов сайта, прежде всего, необходимо разобраться в структуре файла pagination.php и выяснить функции основных его элементов.
Структура pagination.php
Основные ключевые элементы файла pagination.php рассмотрим на примере стандартного файла, который находится по адресу \libraries\joomla\html . Сейчас, навигация на сайте имеет следующий вид
Правда не очень привлекательна? Но ничего, поскольку на этом этапе нас интересуют только элементы и их функции, начнем анализ, и редактирование.
За отображение общего количества страниц (сейчас их 10-ть) отвечает строка вида (94-98 строка)
$displayedPages
=
10
;
Чтобы установить свое количество страниц, вместо 10-ки поставить свое число, или же если необходимо отображать все страницы, то тогда — $this->total
Надписи «Начало» «Предыдущая» «Следующая» «Последняя» выводятся строками (481-482,483-484.497-498, и 499-500)
$data
-&
gt
;
start
=
new
JPaginationObject
(
JText::
_
(
'Start'
));
$data
-&
gt
;
previous
=
new
JPaginationObject
(
JText::
_
(
'Prev'
));
$data
-&
gt
;
next
=
new
JPaginationObject
(
JText::
_
(
'Next'
));
$data
-&
gt
;
end
=
new
JPaginationObject
(
JText::
_
(
'End'
));
Соответственно, чтобы убрать, одно или все эти слова из навигации, приведенные строки(-у) необходимо закомментировать.
Если есть необходимость просто заменить сами слова на какие-то другие, тогда открываем русско-язычный файл
\language\ru-RU\ru-RU.ini
и вместо стандартных, вносим свои.
Да! Чуть не забыл. Если необходимо изменить текст всплывающей подсказки, например, при наведении курсора на «Следующая» хотим видеть в подсказке «Вперед», то для этого обратимся к
функции str_replace()
. И так, находим строку
$html
.=
$list
['next']['data'];
и перед ней устанавливаем следующее условие
$list
['next']['data']=str_replace(
"title=\"Следующая\""
,
"title=\"Вперед \""
,
$list
['next']['data'] );
Сохраняем файл (все помним, что кодировка файла должна быть только UTF-8(без BOM)) и смотрим на результат.
Как убрать кавычки << >> ? За их отвечают строки, которые в файле pagination.php в районе 420-ой строки. Стоит подчеркнуть, что кавычкам отвечает символы > , < и для того чтобы их удалить с постраничной навигации, удаляем эти символы, примерно вот так
$html
.=
' '
;
$html
.=
$list
[
'start'
][
'data'
];
$html
.=
' '
;
$html
.=
$list
[
'previous'
][
'data'
];
foreach
(
$list
[
'pages'
]
as
$page
) {
$html
.=
' '
.
$page
[
'data'
];
}
$html
.=
' '
.
$list
[
'next'
][
'data'
];
$html
.=
' '
;
$html
.=
' '
.
$list
[
'end'
][
'data'
];
$html
.=
' '
;
Многих раздражает строка — «Страница 1 из 10». Чтобы убрать раздражитель, необходимо закомментировать 150-152 строку
$html
.= JText::
sprintf
(
'JPAGE_CURRENT_OF_TOTAL'
,
$this
-&
gt
;get(
'pages.current'
)
,
$this
-&
gt
;get(
'pages.total'
));
Вот пожалуй и все ключевые узлы. Но удалить или изменить надпись – этого не достаточно для создания красивой навигации. Для этого, необходимо еще пошалить с правилами их отображения – CSS.
Как сделать постраничную навигацию?
Чтобы не показывать на пальцах, предварительно оговорим, что допустим, необходимо создать постраничную навигацию следующего вида
Ну что же, приступим. Убираем символы << и >>, а так же надписи «Первая», «Предыдущая», «Следующая», «Последняя» — функция pagination_list_render, комментируем такие строки (двойной слеш // вначале строки)
function pagination_list_render($list)
{
$html = "
<
div
class
=
\"page_navi\"
>
\n";
//$html .= "
<
span
>
";
//$html .= '
<
span
>
«
</
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
>
»
</
span
>
';
//$html .= "
</
span
>
";
$html .= "\n
</
div
>
";
return $html;
}
Почву подготовили, теперь поправим правила отображения – стили, файл style.css (или template.css)
/* СSS */
.page_navi
{
font-size
:
14
px
;
/*размер шрифта*/
font-weight
:
bold
;
/*толщина шрифта*/
}
.page_navi
span
{
width
:
25
px
;
/*ширина рамки активной страницы*/
height
:
25
px
;
/*высота рамки активной страницы*/
border
:
2
px solid
#ff9900
;
/*рамка активной страницы*/
-webkit-border-radius
:
5
px
;
-moz-border-radius
:
5
px
;
border-radius
:
5
px
;
display
:
inline-block
;
margin
:
0
2
px
;
color
:
#ffffff
;
/*цвет шрифта активной страницы*/
background-color
:
#336633
;
/*цвет фона*/
padding
:
1
px
0
0
0
;
}
.page_navi
a
{
width
:
25
px
;
/*ширина рамки неактивной страницы*/
height
:
25
px
;
/*высота рамки неактивной страницы*/
border
:
1
px solid
#000000
;
/*цвет рамки неактивной страницы*/
-webkit-border-radius
:
5
px
;
-moz-border-radius
:
5
px
;
border-radius
:
5
px
;
display
:
inline-block
;
margin
:
0
2
px
;
color
:
#57a480
;
/*цвет шрифта неактивной страницы*/
background-color
:
#336633
;
/*цвет фона*/
font-weight
:
bold
;
padding
:
1
px
0
0
0
;
}
.page_navi
a
:hover
{
color
:
#ff9900
;
}
Вот и все манипуляции с постраничной навигацией. Сохраняем, смотрим, сравниваем с примером.
На страницах одного из Интернет-магазинов очень приглянулась постраничная навигация, которая имеет следующий вид
Попытаемся ее воспроизвести. Для экономии Вашего времени, комментирую строки непосредственно в исходном файле
<?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
3
px
;
padding
:
4
px
10
px
;
border-radius
:
4
px
;
-moz-border-radius
:
4
px
;
-webkit-border-radius
:
4
px
;
}
.vm-pagination
ul
li
a
,
.pagenav
a
,
div
.pagination
a
{
border
:
1
px 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
:
1
px solid
#ff9e34
;
color
:
white
;
background
:
#ff9e34
;
box-shadow
:
inset
0
0
4
px
rgba(
0
,
0
,
0
,
0.1
)
;
-moz-box-shadow
:
inset
0
0
4
px
rgba(
0
,
0
,
0
,
0.1
)
;
-webkit-box-shadow
:
inset
0
0
4
px
rgba(
0
,
0
,
0
,
0.1
)
;
}
ul
.pagenav
,
div
.pagination
{
margin
:
10
px
0
0
;
padding
:
0
;
}
ul
.pagenav
li
,
div
.pagination
li
{
list-style
:
none
;
display
:
inline-block
;
}
Вот собственно и весь винигрет. Единственное, что необходимо отметить, так это то, что в последнем варианте приведены описание стилей для Интернет-магазина. Соответственно, если желаете установить такую же пагинацию на свой сайт, просмотрите свои стили и при необходимости, вместо приведенных — установите свои.
Апрель 3rd, 2015 в 13:50
Спасибо за подробное описание, спасибо!
У меня такая проблема, не правильно работает постраничная навигация в блоге материалов, срабатывает 301 редирект на главную категорию,
и никак по другому. Смена шаблона не помогает. Но если выбрать отображение категории — избранные материалы, то все работает. Помогите разобраться, пожалуйста. )
Апрель 3rd, 2015 в 15:09
Сначала определим пациента. Для начала, в общих настройках сайта отключите -Использовать mod_rewrite (ЧПУ) и посмотрите результат. Если все заработало, то правим строки в .htaccess, если же нет — смотрим исходный код пагинации
Апрель 4th, 2015 в 05:09
Отключение чпу в настройках сайта не дало результат.. Сейчас отключили чпу страниц навигации для работоспособности, и они имеют стандартный вид
Это на ftp файл pagination.php в шаблоне?
Апрель 4th, 2015 в 16:24
файл pagination может быть как в шаблоне (это зависит от самого шаблона и его структуры) так и в самой системе (тут он точно есть). Можно сделать подмену pagination-шаблона — или на пагинацию системы Joomla или же позаимствовать с какого-то другого (проверенного) шаблона
Июнь 20th, 2015 в 06:18
Здравствуйте
Спасибо за данное решение.
А как можно в данной функции увеличить отображение числа страниц? К примеру, у вас в начале 2 и пре переключении 3 отображается страницы, а вывести нужно чтоб отображалось по 5 страниц.
Заранее благодарен за любой ваш ответ.
Июнь 26th, 2015 в 15:45
Добрый день! Алгоритм отображения задается вот в этом блоке
// Далее отрисовываем пагинацию так, как нам захочется
Попробуйте изменить выходные параметры
Январь 15th, 2016 в 12:18
На сайте на главной странице нет навигации, а в разделе Новости есть.
Как добавить навигацию на главную страницу?
Январь 18th, 2016 в 18:47
Какие настройки главной страницы? Если на странице новости есть пагинация, значит в системе она присутствует и отображается