Загрузка...

Итак вопрос, как создать шаблон joomla 3 самостоятельно мы начали с Вами рассматривать еще в первой части данной статьи и по итогам предыдущих уроков, мы реализовали следующий вид сайта.

1

Область левой боковой панели, используется для отображения информации модуля под названием mod_articles_category, который отображает материалы определенной категории по заданным условиям фильтрации. Соответственно внешний вид содержимого данного модуля, формируется непосредственно в его файловой структуре, а именно (как правило) в стандартном макете default.php, который располагается по адресу — \modules\mod_articles_category\tmpl\default.php. Поэтому в разрабатываемом шаблоне необходимо переопределить вышеуказанный макет, и таким образом изменить дизайн отображаемого содержимого на экран.

Для переопределения макета модуля, необходимо в каталоге html шаблона, создать папку, имя которой совпадает с именем модуля, макет которого подлежит переопределению, и в данной папке, создать файл default.php. Или же, если сказать более правильно – создать файл, имя которого совпадает с именем переопределяемого макета, так как для одного модуля, можно создать сколько угодно макетов.

Поэтому, скопируем файл default.php, то есть макет отображения данных модуля mod_articles_category, по адресу \modules\mod_articles_category\tmpl\default.php. Затем создадим в каталоге html папку mod_articles_category и в нее добавим скопированный файл. Таким образом, мы переопредели макет и теперь можем изменить дизайн отображения содержимого модуля.
Открыв данный файл в текстовом редакторе, Вы увидите что, он содержит достаточно большой объем кода.

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

Как Вы видите, код достаточно небольшой, но и скорее всего, не совсем понятен Вам, а значит, давайте поясню, некоторые моменты. В данном макете доступна переменная $list, которая содержит массив объектов, с информацией по выбранным материалам, которые будут отображаться на экране. Его структура следующая:

2

Таким образом, используя цикл foreach(), мы можем обойти данный массив и на каждой итерации, получить доступ к объекту, значения свойств которого, можно использовать для отображения необходимой информации на экран. Что собственно и сделано в макете. Обратите внимание, что свойство link, содержит путь на страницу просмотра содержимого материала, который можно использовать для создания ссылки “Читать далее”. Теперь обновив макет в браузере, мы увидим следующий результат.

3

То есть левая колонка, полностью завершена, а значит идем дальше.

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

Виды компонентов, как правило, располагаются в каталоге views.

4

При этом, компонент – это достаточно сложное расширение, если сравнивать с модулями и видов, может быть несколько, как в случае с компонентом com_content. Соответственно переопределить Вы можете, как отдельный макет, так и все сразу.

Для главной страницы нас интересует вид category, так как именно он, отображает список материалов определенной категории. Напомню, что на главной страницы мы отображаем материалы некой категории в виде блога.

Если перейти в данную папку мы увидим следующее.

5

В каталоге tmpl располагаются макеты, которые определяют оформление при отображении информации на экран.

6

Как Вы видите макетов много, но если присмотреться более внимательно, мы увидим некие общие черты в именах файлов. Смотрите, в данной папке содержатся два глобальных макета blog.php и default.php, все остальные – это дочерние макеты в соответствии с префиксом в имени.

При этом, так как на главной странице отображается список материалов категории в виде блога, значит нас интересует макет blog.php и все его дочерние макеты, в имени которых присутствует приставка blog_. Поэтому скопируем данные макеты.

Далее в каталоге html шаблона, создаем папку com_content, затем в ней – каталог category, то есть, переопределяем макет отображения списка материалов категории, а далее добавляем в него, только что скопированное содержимое из каталога tmpl. Теперь откроем в текстовом редакторе главный макет blog.php и заменим его содержимое на следующий код.

Теперь хотел бы отметить, что в данном макете Вы получаете доступ к объекту $this (ContentViewCategory Object), в котором содержится информация о материалах, отображаемых на главной странице. Структура данного объекта примерно следующая.

7

В свойстве lead_items, содержится массив объектов с материалами, которые должны отображаться во всю ширину страницы, а в свойстве intro_items – массив объектов материалов, которые могут отображаться в колонках, в соответствии с настройками. Поэтому, как Вы видите, я используя первое свойство, и зная что в нем содержится массив, используем цикл foreach() для обхода. Таким образом, на каждой итерации цикла в переменную $item, попадет объект в свойствах которого, содержатся данные по одному определенному материалу. При этом для его отображения на экран, мы задействуем дочерний макет blog_item.php, который подгружается при помощи вызова метода loadTemplate(‘item’) (в качестве первого аргумента необходимо передать имя интересующего макета, без префикса, указывающего родителя). Но так как в дочернем макете, так же открыт доступ к объекту $this, объект материала мы предварительно сохраняем в свойство item.

Код дочернего макета blog_item.php выглядит следующим образом.

Как Вы видите, обращаясь к свойствам объекта, хранящегося в $this->item мы отображаем необходимую информацию на экран (title — заголовок, introtext — вводный текст).

Для создания ссылки “Читать далее”, необходимо сформировать путь к странице детального просмотра информации по конкретному материалу. Для этого мы обращаемся к классу JRoute и вызываем на исполнение статический метод _(), который как раз и вернет интересующий путь, в виде ЧПУ. В качестве первого параметра при вызове данного метода, необходимо передать URL, который будет преобразован в ЧПУ. Для формирования данного URL, мы воспользуемся классом–хелпером ContentHelperRoute и вызовем его статический метод getArticleRoute(), который вернет путь к материалу определенной категории. И для его работы передаем следующие переменные:

$this->item->slug – так называемый слуг, то есть строка, состоящая из идентификатора материала и его псевдонима;

$this->item->catid – идентификатор категории материала;

$this->item->language – текущая локализация.

Таким образом, создав путь, мы формируем ссылку читать далее. В глобальном макете blog.php в самом низу расположен блок кода, который необходим для формирования элементов управления постраничной навигацией. Вот данный участок кода:

Теперь если обновить информацию в браузере мы увидим следующее.

8

Как Вы видите, макет спешно отображает информацию в требуемом дизайне. Более подробно, тема создания шаблонов для CMS Joomla раскрыта в курсе Joomla-Мастер. С нуля до премиум шаблона.

{

}