Постановка задачи:

Сделать сайт с форумом, каталогом организаций (который имеет фильтрацию по колонкам и поиск), статьями (новости, одиночные материалы, события), фото галереей, рейтингом статей, комментированием и личным кабинетом.

1) В качестве форума был выбран компонент “Agora”.

2) Так как будет необходим рейтинг статей, точная средняя оценка статей (для выявления победителя при  участии в конкурсах), также добавление статей пользователями, то стандартный компонент материалов не подойдёт, поэтому я выбрал компонент “com_resource” от “Mighty Extensions”. Там есть возможность всего этого, да к тому же отпадет необходимость устанавливать дополнительные компоненты галерей и видео, потому что всё это можно настроить в “com_resource”.

Также в нём можно будет гибко реализовать личный кабинет и настроить любые типы материалов и поля в них.

3) Был предоставлен HTML шаблон, купленный на templatemonsters.com

Начало разработки:

Для начала я изучил шаблон, на следующем скриншоте я выделил блоки, которые изменил в первую очередь.блоки вёрстки
Пункты 1,2 – текст логотипа и слоган, где слоган должен генерироваться каждый раз разный. Текст логотипа я сделал через переменную “$mainframe->getCfg(’sitename’)” – она берёт текст из конфигурации сайта, т.е. переменная содержит название сайта.

Случайно выводящийся слоган был сделан следующим образом:
В административной панели, через менеджер модулей был установлен модуль ‘Произвольный HTML-код’, в котором были размещены слоганы, разделённые двумя символами “точка с запятой”. Чтобы слоган начал выводиться, был создан стиль модуля в файле “имя_шаблона/html/modules.php“

  1.  
  2. function modChrome_slogan($module, &$params, &$attribs)
  3. {
  4.         $headerLevel = isset($attribs[‘headerLevel’]) ? (int) $attribs[‘headerLevel’] : 3;
  5.         if (!empty ($module->content)) :
  6.                         $text = $module->content;
  7.                         $texts = explode(";;",$text);
  8.                         $num = mt_rand(0,count($texts)-1);
  9.                         echo $texts[$num];
  10.                 endif;
  11. }
  12.  

Чтобы в шаблоне вывести модуль с определённым стилем, нужно вывести следующий код:

<jdoc:include type="modules" name="slogan" style="slogan" />

Где имя стиля это название функции после “modChrome_” в файле “имя_шаблона/html/modules.php“. После этих манипуляций у нас будет выводиться случайный слоган на странице.

Следующим пунктом было меню, оно, естественно не влазило в вёрстку, в силу особенностей длины слов. Пришлось разделить меню на две строки, однако лучше было поставить несколько пунктов в первую строку. Для этого, в обычном меню после нескольких пунктов был вставлен тип пункта меню “Разделитель” и соответственно отстилизован так, чтобы последующие пункты “сползли” вниз.

Под четвертым пунктом скриншота подразумевалась стилизация стандартного модуля меню под структуру слайдера. В меню всё также, как обычно создаём пункты, единственное в пункте “Параметры – Система” нужно выбрать картинку для слайдера. Эти изображения должны быть загружены в папку “\images\stories”, чтобы была возможность выбрать их.
В созданном модуле для этого меню, в пункте “Другие Параметры” нужно поставить “Да”, напротив “Показывать иконки меню”.
Также, чтобы подогнать структуру меню под структуру шаблона слайдера, был написан небольшой jQuery скрипт:

  1.                 jQuery(function(){
  2.         jQuery(‘ul#sliderul’).addClass(‘kwicks horizontal’).removeClass(‘menu’);
  3.         var num = jQuery(‘#sliderul li’).size();
  4.  
  5.         for (var i = 1; i < num+1; i++)
  6.         {
  7.         var n = i-1;
  8.         var text = jQuery(‘ul#sliderul li:eq(’+ n +‘) a span’).html();
  9.         var img = jQuery(‘ul#sliderul li:eq(’+ n +‘) img’).attr(’src’);
  10.         var link = jQuery(‘ul#sliderul li:eq(’+ n +‘) a’).attr(‘href’);
  11.         jQuery(‘ul#sliderul li:eq(’+ n +‘) a’).replaceWith("<a href=’"+ link +"’><img src=’" + img + "’ /></a><span><b>" + text + "</b></span>");
  12.         jQuery(‘ul#sliderul li:eq(’+ n +‘)’).attr(‘id’,"kwick_"+ i);
  13.         }
  14. });

Модуль новостей из 5 пункта меню в скриншоте сделан из стандартного модуля “mod_latestnews“, но там по умолчанию выводится только ссылка на новость. Чтобы сделать вывод текста и даты в этом модуле, нужно немного поправить хэлпер этого модуля “modules\mod_latestnews\helper.php“, а именно, после строки

  1. $lists[$i]->text = htmlspecialchars( $row->title );

Вставить следующий код:

  1.  
  2. $lists[$i]->intro = $row->introtext;
  3. $lists[$i]->full = $row->fulltext;
  4. $lists[$i]->publish = $row->publish_up;
  5.  

Эти переменные передадут в шаблон модуля вступительный текст, полный текст и дату публикации. После всего этого нужно сделать дату нужного нам формата и обрезать вступительный текст, думаю следующий код (шаблон модуля новостей) будет понятен и без объяснений:

  1. <?php // @version $Id: default.php 10381 2008-06-01 03:35:53Z pasamio $
  2. defined(‘_JEXEC’) or die(‘Restricted access’);
  3. jimport( ‘joomla.utilities.date’ );
  4. ?>
  5.  
  6. <?php if (count($list)) : ?>
  7. <!– <ul class="latestnews<?php echo $params->get(’pageclass_sfx’); ?>"><li class="latestnews<?php echo $params->get(’pageclass_sfx’); ?>"></li></ul> –>
  8. <ul class="list-2">
  9.         <?php foreach ($list as $item) : ?>
  10.         <?php
  11.                 $publish = $item->publish;
  12.                 $datePub = new JDate($publish);
  13.                
  14.                 $fullText = strip_tags($item->intro.$item->full,‘p’);
  15.                 $full = mb_substr($fullText,0,185,‘utf-8′);
  16.         ?>
  17. <li><strong> <em><?php echo $datePub->toFormat(‘%d’); ?></em> <i><?php echo $datePub->toFormat(‘%b’); ?></i> </strong> <a href="<?php echo $item->link; ?>"><b><?php echo $item->text; ?></b></a><p><?php echo $full.‘…’; ?></p></li>
  18.         <?php endforeach; ?>
  19. </ul>
  20. <a href="<?php echo JRoute::_(’index.php?option=com_content&view=section&id=3&Itemid=4′); ?>" class="link">Все новости</a>
  21. <div class="clear"></div>
  22. <?php endif;
  23.  

Продолжение следует…