AEDStudio Joomla! Direction

Вы здесь: Статьи Статьи по Joomla! Хак постраничной навигации сайта на CMS Joomla!

Хак постраничной навигации сайта на CMS Joomla!

21.05.2008 23:22 Администратор
Эта статья поможет Вам модернизировать и видоизменить до неузнаваемости иногда очень незаметный но порой такой важный элемент вашего сайта на CMS Joomla!, как постраничная навигация. Казалось бы – мелочь, ан нет. Из мелочей складывается картина. Поэтому я предлагаю уделить вашей навигации наипристальнейшее внимание.
В линейке 1.0.x CMS Joomla! постраничная навигация имеет стандартный вид, и даже малоопытному хакеру достаточно просто взлянуть на нее чтобы понять на каком движке построен сайт.

 

<< В начало < Предыдущая 1 2 3 4 5 Следующая > В конец >>

 

По прочтению данной статьи вы без особого труда сможете сделать любую постраничную навигацию, которая будет ограничена лиш вашей собственной фантазией

 

1.Для начала нам нужно сделать небольшой хак файла includes/pageNavigation.php предварительно сделав его резервную копию(!). Для упрощения модификации прилагаю уже хакнутый файл pageNavigation.php которым вам достаточно заменить оригинальный (скачать можно в файловом архиве где-то здесь, там же и готовые стрелочки для навигации). Саму же суть хака мы рассмотрим чуть ниже.

 

2.Скопируйте следующие описания стилей и вставте их в низ файла template_css.css (templates/название_шаблона/css/template_css.css) вашего шаблона и сохраните его.

 

 
/******************************************************/
/*PAGENAV*/
/******************************************************/
#flash_pagenavL {
background-position :top left;
background-repeat : no-repeat;
height: 17px;
}
#flash_pagenavR {
display:block;
margin-left:12px;
background-position :top right;
background-repeat : no-repeat;
padding-right:12px;
height: 17px;
}
#flash_pagenavR a:link,#flash_pagenavR a:visited,#flash_pagenavR a:hover {
display:inline-block;
font-family : sans-serif;
text-decoration:none;
}
a.pagenavA:link, a.pagenavA:visited{
color:#000000;
margin-right:1px;
margin-left:1px;
/*font-weight : bold;*/
font-family : sans-serif;
border-bottom:3px solid #2E98C3;
width:10px;
}
#flash_pagenavR a:hover{
border-bottom:3px solid #ff6633;
}
.pagenavS{
display:inline-block;
margin-right:1px;
margin-left:1px;
width:10px;
font-family : sans-serif;
border-bottom:3px solid #ff6633;
}
#flash_pagenavR .pagenavLLast,
#flash_pagenavR .pagenavPrev10,
#flash_pagenavR .pagenavPrev1,
#flash_pagenavR .pagenavRLast,
#flash_pagenavR .pagenavNext10,
#flash_pagenavR .pagenavNext1{
margin-right:2px;
margin-left:2px;
padding-right:2px;
padding-left:2px;
}
#flash_pagenavR .pagenavLLast{
background: url(../images/leftlast.gif) no-repeat left ;}
#flash_pagenavR .pagenavPrev10{background: url('/../images/left10.gif') no-repeat left ;
}
#flash_pagenavR .pagenavPrev1{
background: url(../images/left1.gif) no-repeat left ;
}
#flash_pagenavR .pagenavRLast{
background: url(../images/rightlast.gif) no-repeat right ;
}
#flash_pagenavR .pagenavNext10{
background: url(../images/right10.gif) no-repeat right ;
}
#flash_pagenavR .pagenavNext1{
background: url(../images/right1.gif) no-repeat right ;
}
 
3.Скопируйте изображения стрелочек в папку images вашего шаблона (templates/название_шаблона/images/).


4. Вуаля!:) У вас должна получится следующая навигация. Наслаждайтесь. В некоторых браузерах после изменений нужно очистить кэш либо ctrl+F5.


Также аналогично и для прочих панелей навигации. Повторяем все последовательные действия начиная с п.2 (поскольку хакнутый файл pageNavigation.php общий для всего сайта и всех шаблонов).

2. Копируем следующее описание стилей css и вставляем их в низ файла template_css.css (templates/название_шаблона/css/template_css.css) вашего шаблона и сохраняем его.

 
/******************************************************/
/*PAGENAV*/
/******************************************************/
#flash_pagenavL{
background-position :top left;
background-repeat : no-repeat;
height: 17px;
}
#flash_pagenavR{
display:block;
margin-left:12px;
background-position :top right;
background-repeat : no-repeat;
padding-right:12px;
height: 17px;
}
#flash_pagenavR a:link,#flash_pagenavR a:visited,#flash_pagenavR a:hover{
color:#ffffff;
display:inline-block;
font-family : sans-serif;
text-decoration:none;
background-color: #ff9933;
padding-right:2px;
padding-left:2px;
}
a.pagenavA:link, a.pagenavA:visited{
color:#ffffff;
/*margin-right:1px;*/
margin-left:1px;
font-weight : bold;
font-family : sans-serif;
border:1px solid #7e7e7e;
width:10px;
}
#flash_pagenavR a:hover{
border:1px solid #7e7e7e;
}
.pagenavS{
color:#ff9933;
display:inline-block;
/*margin-right:1px;*/
margin-left:1px;
padding-right:2px;
padding-left:2px;
width:10px;
font-weight : bold;
font-family : sans-serif;
border:1px solid #7e7e7e;
}
#flash_pagenavR .pagenavLLast,
#flash_pagenavR .pagenavPrev10,
#flash_pagenavR .pagenavPrev1,
#flash_pagenavR .pagenavRLast,
#flash_pagenavR .pagenavNext10,
#flash_pagenavR .pagenavNext1{
width:8px;
border:1px solid #7e7e7e;
/*margin-right:1px;*/
margin-left:1px;
padding-right:4px;
padding-left:4px;
}
#flash_pagenavR .pagenavLLast{
background: url(../images/leftlast.gif) no-repeat left ;
}
#flash_pagenavR .pagenavPrev10{
background: url(../images/left10.gif) no-repeat left ;
}
#flash_pagenavR .pagenavPrev1{
background: url(../images/left1.gif) no-repeat left ;
}
#flash_pagenavR .pagenavRLast{
background: url(../images/rightlast.gif) no-repeat right ;
}
#flash_pagenavR .pagenavNext10{
background: url(../images/right10.gif) no-repeat right ;
}
#flash_pagenavR .pagenavNext1{
background: url(../images/right1.gif) no-repeat right ;
}
 

3. Копируем изображения стрелочек в папку images вашего шаблона (templates/название_шаблона/images/).


4. В этот раз у нас вышла следующая панелька навигации сайта:




Создание индивидуальной навигации


Для создания индивидуальной постраничной навигации вашего сайта на CMS Joomla! вам помогут следующие иллюстрации:



Хак файла pageNavigation.php

Теперь подробнее рассмотрим непосредственно модификацию файла, который отвечает в CMS Joomla! за вывод постраничной навигации.



Оригинал модифицируемой функции в pageNavigation.php (примерно 109 строка для версии Joomla_1.0.10-RE):

 
function writePagesLinks( $link ) {
    $txt = '';
 
    $displayed_pages = 10;
    $total_pages = ceil( $this->total / $this->limit );
    $this_page = ceil( ($this->limitstart+1) / $this->limit );
    $start_loop = (floor(($this_page-1)/$displayed_pages))*$displayed_pages+1;
    if ($start_loop + $displayed_pages - 1 < $total_pages) {
      $stop_loop = $start_loop + $displayed_pages - 1;
    } else {
      $stop_loop = $total_pages;
    }
 
    $link .= '&amp;amp;limit='. $this->limit;
 
        if (!defined( '_PN_LT' ) || !defined( '_PN_RT' ) ) {
            DEFINE('_PN_LT','&amp;lt;');
            DEFINE('_PN_RT','&amp;gt;');
        }
        if (_PN_LT || _PN_RT) $pnSpace = " ";
 
    if ($this_page > 1) {
      $page = ($this_page - 2) * $this->limit;
      $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=0" ) .'
" class="pagenav" title="'. _PN_START .'">'. _PN_LT . _PN_LT . $pnSpace . _PN_START .'</a> ';
      $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=$page" ) .'
" class="pagenav" title="'. _PN_PREVIOUS .'">'. _PN_LT . $pnSpace . _PN_PREVIOUS .'</a> ';
    } else {
      $txt .= '<span class="pagenav">'. _PN_LT . _PN_LT . $pnSpace . _PN_START .'</span> ';
      $txt .= '<span class="pagenav">'. _PN_LT . $pnSpace . _PN_PREVIOUS .'</span> ';
    }
 
    for ($i=$start_loop; $i <= $stop_loop; $i++) {
      $page = ($i - 1) * $this->limit;
      if ($i == $this_page) {
        $txt .= '<span class="pagenav">'. $i .'</span> ';
      } else {
        $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $page ) .'
" class="pagenav"><strong>'. $i .'</strong></a> ';
      }
    }
 
    if ($this_page < $total_pages) {
      $page = $this_page * $this->limit;
      $end_page = ($total_pages-1) * $this->limit;
      $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $page ) .' 
" class="pagenav" title="'. _PN_NEXT .'">'. _PN_NEXT . $pnSpace . _PN_RT .'</a> ';
      $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $end_page ) .' 
" class="pagenav" title="'. _PN_END .'">'. _PN_END . $pnSpace . _PN_RT . _PN_RT .'</a>';
    } else {
      $txt .= '<span class="pagenav">'. _PN_NEXT . $pnSpace . _PN_RT .'</span> ';
      $txt .= '<span class="pagenav">'. _PN_END . $pnSpace . _PN_RT . _PN_RT .'</span>';
    }
    return $txt;
  }
 

Теперь приведем хакнутую версию. Как видите, тут переменная $txt, которая будет на выходе функции, обрамлена тегом table и span. Так же все элементы внесены в классы. 
 
function writePagesLinks( $link ) {
    $txt = '';
    $displayed_pages = 10;
    $total_pages = ceil( $this->total / $this->limit );
    $this_page = ceil( ($this->limitstart+1) / $this->limit );
    $start_loop = (floor(($this_page-1)/$displayed_pages))*$displayed_pages+1;
    if ($start_loop + $displayed_pages - 1 < $total_pages) {
      $stop_loop = $start_loop + $displayed_pages - 1;
    } else {
      $stop_loop = $total_pages;
    }
 
    if ($start_loop > $displayed_pages) {
    $page = ($this_page - 2) * $this->limit;
    $page_p10 = ($start_loop * $this->limit)-2;
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=0" ) .'
" class="pagenavLLast" title="На первую">&amp;nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=$page_p10" ) .'
" class="pagenavPrev10"  title="Предыдущие '.$displayed_pages.'">&amp;nbsp;&amp;nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=$page" ) .'
" class="pagenavPrev1" title="Назад">&amp;nbsp;</a> ';
    }
    for ($i=$start_loop; $i <= $stop_loop; $i++) {
      $page = ($i - 1) * $this->limit;
      if ($i == $this_page) {
        $txt .= '<span class="pagenavS">'. $i .'</span> ';
      } else {
        $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $page ) .'
" class="pagenavA">'. $i .'</a> ';
      }
    }
    if ($i < $total_pages) {
    $page = $this_page * $this->limit;
    $page_p10 = $start_loop+($displayed_pages-1);
    $end_page = ($total_pages-1) * $this->limit;
    $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $page ) .' 
" class="pagenavNext1" title="Вперёд">&amp;nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( "$link&amp;amp;limitstart=$page_p10" ) .'
" class="pagenavNext10"  title="Следующие '.$displayed_pages.'">&amp;nbsp;&amp;nbsp;</a> ';
    $txt .= '<a href="'. sefRelToAbs( $link .'&amp;amp;limitstart='. $end_page ) .' 
" class="pagenavRLast" title="На последнюю ('.$total_pages.')">&amp;nbsp;</a>';
    }
 
    //adjustment
 
    $txt = '<table cellpadding="0" cellspacing="0" align="center">
<tr><td id="flash_pagenavL"><span id="flash_pagenavR">'.$txt.'</span></td></tr></table>';
 
    return $txt;
  }

 

Идея и исполнение --Svist--, joomlaforum.ru

top-iconВверх

< Предыдущая   Следующая >

Комментарии  

Коммент от
Сен 06, 2010
Комментатор
Илюха
+7 повторюсь - очень очень надо для 1.5 )) Ну и спасибо большое за ваш труд :)
Цитировать
Коммент от
Апр 21, 2011
Комментатор
vadim
+1 Большое спасибо за подробное объяснение. Я две ночи пытался самостоятельно разобраться а с твоей статьей за час осилил.
Цитировать
Коммент от
Июл 02, 2011
Комментатор
Вадим
0 спасибо оргомное за статью, :D я давно искал внятное втолкование как изменить навигацию в джумле 8) !! сайт ваш просто прелесть адми молодэц! :lol:
Цитировать

Оставить комментарий

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

Популярные файлы

1.
Компонент Миграции с Joomla! 1.0.x на Joomla! 1.5.x
3024
2.
Хак постраничной навигации сайта на CMS Joomla! 1.0
1639
3.
rt-reaction
816

Последние комментарии

  • Темный шаблон то что надо. Респект! Подробнее..
    От Dunko
  • Но я вам точно могу сказать, что человек, сделавш... Подробнее..
    От Ломалкин
  • Обновлять нужно и саму Джумлу и те модули, которы... Подробнее..
    От Ломалкин

Популярные статьи

уличное освещение для парков . Сдают номера для Вас лучшие отели Москвы, бронируйте их у нас.