Меняем вид списка категорий Редактируем шаблон Разбиваем список на колонки

Нередко стандартные методы оформления в Joomla заставляют нас задуматься о других способах расположения и дизайна контента на сайте. Не исключением стал и шаблон списка категорий. Эта статья поможет Вам изменить внешний вид шаблона списка категорий, на ее основе Вы сможете расположить список категорий в одну, две или даже в три колонки.

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

Сосредоточились? Вперед!

За оформление и формирование контента материалов отвечает стандартный компонент com_content. Чтобы реализовать задуманное, необходимо будет изменить некоторые файлы шаблона. С подробным описанием стандартного компонента com_content можно ознакомиться здесь.

Файл, в котором нам потребуется изменить скрипт лежит в корневой папке сайта:

components\com_content\views\section\tmpl\default.php

Небольшое замечание: Иногда при использовании некоторых шаблонов для сайта файл default.php может лежать в папке самого шаблона. К примеру в templates\папка шаблона\html\com_content\section\default.php

Перед началом правки сделайте обязательно резервную копию файла!

1. Меняем код файла default.php на следующий:

<?php // no direct access
defined('_JEXEC') or die('Restricted access');
$cparams =& JComponentHelper::getParams('com_media');
?>
<?php if ($this->params->get('show_page_title', 1)) : ?>
<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
 <?php echo $this->escape($this->params->get('page_title')); ?>
</div>
<?php endif; ?>
<table  width="100%" cellpadding="0" cellspacing="0" border="0" align="center"  class="contentpane<?php echo  $this->escape($this->params->get('pageclass_sfx')); ?>">
<tr>
 <td valign="top" class="contentdescription<?php echo  $this->escape($this->params->get('pageclass_sfx')); ?>"  colspan="2">
 <?php if ($this->params->get('show_description_image') && $this->section->image) : ?>
 <img src="/<?php echo $this->baseurl . '/' .  $cparams->get('image_path') . '/'.   $this->section->image;?>" align="<?php echo  $this->section->image_position;?>" hspace="6" alt="<?php  echo $this->section->image;?>" />
 <?php endif; ?>
 <?php if ($this->params->get('show_description') && $this->section->description) : ?>
 <?php echo $this->section->description; ?>
 <?php endif; ?>
 </td>
</tr>
<tr>
 <td colspan="2">
 <?php if ($this->params->get('show_categories', 1)) : ?>
 <ul id="category-list">
 <?php foreach ($this->categories as $category) : ?>
 <?php if (!$this->params->get('show_empty_categories') && !$category->numitems) continue; ?>
 <li>
 <a href="/<?php echo $category->link; ?>" class="category">
 <?php echo $this->escape($category->title);?></a>
 <?php if ($this->params->get('show_cat_num_articles')) : ?>
  
 <span class="small">
 ( <?php if ($category->numitems==1) {
 echo $category->numitems ." ". JText::_( 'item' );}
 else {
 echo $category->numitems ." ". JText::_( 'items' );} ?> )
 </span>
 <?php endif; ?>
 <?php if ($this->params->def('show_category_description', 1) && $category->description) : ?>
 <br />
 <a href="/<?php echo $category->link; ?>" title="<?php echo $this->escape($category->title);?>">
<?php echo $category->description; ?>
</a>
 <?php endif; ?>
 </li>
 <?php endforeach; ?>
 </ul>
 <?php endif; ?>
 </td>
</tr>
</table>

Сохраняем.

2. Открываем файл шаблона CSS. Вы сможете его найти в панели администратора в меню Extensions (Расширения) | Templates (Шаблоны).

В конец файла добавляем следующие строки:

ul#category-list li {float:left}
ul#category-list {list-style:none; padding:0; font-weight: bold;}
ul#category-list li {float: left; width: 42%; text-align: center; height: 160px}

Сохраняем.

Можете поэкспериментировать со значениями width: 42% и height: 160px, это повлияет на количество колонок и их размер.

3. Ну и наконец, избавимся от "фильтра" и "нумерации строк":

Для этого будем менять содержимое файла
\components\com_content\views\category\tmpl\default_items.php

Перед началом правки сделайте обязательно резервную копию файла!

Меняем на следующий код:

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script language="javascript" type="text/javascript">

 function tableOrdering( order, dir, task )
 {
 var form = document.adminForm;

 form.filter_order.value     = order;
 form.filter_order_Dir.value    = dir;
 document.adminForm.submit( task );
 }
</script>
<form action="<?php echo $this->action; ?>" method="post" name="adminForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<?php foreach ($this->items as $item) : ?>
<tr  class="sectiontableentry<?php echo ($item->odd +1 ) .  $this->escape($this->params->get('pageclass_sfx')); ?>" >
 <td align="center">
 <?php echo $this->pagination->getRowOffset( $item->count ); ?>
 </td>
 <?php if ($this->params->get('show_title')) : ?>
 <?php if ($item->access <= $this->user->get('aid', 0)) : ?>
 <td>
 <a href="/<?php echo $item->link; ?>">
 <?php echo $this->escape($item->title); ?></a>
 <?php $this->item = $item; echo JHTML::_('icon.edit', $item, $this->params, $this->access) ?>
 </td>
 <?php else : ?>
 <td>
 <?php
 echo $this->escape($item->title).' : ';
 $link = JRoute::_('index.php?option=com_user&view=login');
 $returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($item->slug, $item->catslug, $item->sectionid), false);
 $fullURL = new JURI($link);
 $fullURL->setVar('return', base64_encode($returnURL));
 $link = $fullURL->toString();
 ?>
 <a href="/<?php echo $link; ?>">
 <?php echo JText::_( 'Register to read more...' ); ?></a>
 </td>
 <?php endif; ?>
 <?php endif; ?>
 <?php if ($this->params->get('show_date')) : ?>
 <td>
 <?php echo $item->created; ?>
 </td>
 <?php endif; ?>
 <?php if ($this->params->get('show_author')) : ?>    
 <?php endif; ?>
 <?php if ($this->params->get('show_hits')) : ?>
 <?php endif; ?>
</tr>
<?php endforeach; ?>
<?php if ($this->params->get('show_pagination')) : ?>
<tr>
 <td colspan="5"> </td>
</tr>
<tr>
 <td align="center" colspan="4" class="sectiontablefooter<?php  echo $this->escape($this->params->get('pageclass_sfx'));  ?>">
 <?php echo $this->pagination->getPagesLinks(); ?>
 </td>
</tr>
<tr>
 <td colspan="5" align="right">
 <?php echo $this->pagination->getPagesCounter(); ?>
 </td>
</tr>
<?php endif; ?>
</table>

<input type="hidden" name="id" value="<?php echo $this->category->id; ?>" />
<input type="hidden" name="sectionid" value="<?php echo $this->category->sectionid; ?>" />
<input type="hidden" name="task" value="<?php echo $this->lists['task']; ?>" />
<input type="hidden" name="filter_order" value="" />
<input type="hidden" name="filter_order_Dir" value="" />
<input type="hidden" name="limitstart" value="0" />
<input type="hidden" name="viewcache" value="0" />
</form>

Сохраняем, обновляем страницу сайта и наслаждаемся результатом.

До новых встреч!

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