Макеты Joomla. Как сделать ваш сайт максимально уникальным.

Сегодня я хочу представить вашему вниманию очень интересную статью. Используя технику, которая в ней описывается, вы сможете придать вашему сайту, сделанному на Joomla, максимальную гибкость и уникальность. Что я имею ввиду? Только представьте:  оформление каждого модуля, каждой категории, да хоть каждого материала вы можете сделать неповторимым. Интересно? Тогда читаем дальше…

Итак, в чем же фокус? Дело в переопределении макетов или создании собственных уникальных макетов и их привязке к определенным элементам Joomla. Многие поклонники Joomla знают о возможности переопределения макетов. Мы можем переопределять и изменять под себя на сайте практически всё. Но давайте подробнее.

Что такое макет?

Начнем с основ. Мы привыкли, что в Joomla есть некоторые общие элементы. Это материал, категория, модуль, компонент, шаблон, плагин и пункт меню. Давайте представим, что у нас есть следующая задачка:

Заказчик хочет, чтобы в статье категория, автор, дата создания и иконки кнопок появлялись не перед, а после основного текста материала.

Конечно, можно хорошенько поработать с CSS и поменять блоки местами с помощью позиционирования. Но есть и более простой вариант – переопределение макета.

В Joomla, есть шаблоны. В стандартном варианте они изменяют только общую конструкцию сайта. Проще говоря, с помощью шаблона Joomla мы меняем редактируем шапку, подвал, центральную часть, задаем позиции модулей и общее оформление. А если нам нужно заглянуть в конструкцию статьи? В шаблоне Joomla указывается только то, что мы вызываем компонент. Для изменения конструкции статей, категорий, модулей, как раз и используются макеты. Макет Joomla (Joomla layout) – это как бы шаблон в шаблоне. Это шаблон контента Joomla. 

Для решения нашей задачки нам необходимо отредактировать макет статьи, изменив в ней последовательность элементов.

Где находятся макеты Joomla?

"Хорошо" – скажете вы – "Но где искать эти макеты? В шаблоне же их нет". Да, действительно. В шаблоне по умолчанию макетов нет. Макет - элемент присущий расширению Joomla, которое может отображаться на сайте. Обычно макеты бывают у модулей и компонентов. Плагинам Joomla макеты свойственны редко, но бывает и такое.

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

1. Понять, макет чего мы ищем: компонента или модуля. Если это контент в центре сайта, который меняется от странице к странице, то, вероятно, мы ищем компонент. Если это блок с информацией, которая остается одинаковой или близкой для разных страниц, и располагается не в центре, а в колонке, шапке или подвале сайта, то скорее всего это модуль. В конце концов можно просто посмотреть в админке где именно расположен тот или иной контент.
2. Если нам нужен макет компонента, ищем его в /components/НАЗВАНИЕ_КОМПОНЕНТА/views/
3. Если нам нужен макет модуля, ищем его в /modules/НАЗВАНИЕ_МОДУЛЯ/tmpl/

Хорошо, файл макета мы нашли. Что дальше?

Переопределение макетов в Joomla

Просто так вносить изменения в макет Joomla нельзя. Почему? Дело в том, что мы создадим хак. Если говорить коротко, после внесения изменений в системные файлы Joomla они могут быть стерты при обновлении CMS, т.к. файл с изменениями будет перезаписан файлом из обновления.

Из-за проблемы хаков как раз и появился такой термин, как "Переопределение макетов Joomla" (Joomla layout overrides).

Под переопределением макета подразумевается копирование его файла в используемый на сайте шаблон Joomla.

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

Куда нужно скопировать макет, чтобы он считался переопределенным? Есть жесткая декларация:

1. Макет модуля должен быть помещен в /templates/ВАШ_ШАБЛОН/html/НАЗВАНИЕ_МОДУЛЯ/
2. Макет компонента должен быть помещен в /templates/ВАШ_ШАБЛОН/html/НАЗВАНИЕ_КОМПОНЕНТА/ПОДПАПКА_МАКЕТОВ_КОМПОНЕНТА/

Давайте рассмотрим пару реальных примеров:

1. Переопределение макета модуля последних новостей. Копируем файл:/modules/mod_articles_latest/tmpl/default.php в /templates/ВАШ_ШАБЛОН/html/mod_articles_latest/
2. Перепределение макета статьи Joomla. Копируем файл: /components/com_content/views/article/tmpl/default.php в /templates/ВАШ_ШАБЛОН/html/com_content/article/

Если каких-либо каталогов в шаблоне не хватает для соответствия заданным путям, вы должны создать их в самостоятельно.

Помимо ручного переопределения макетов, есть также автоматическое, доступное из админки Joomla. Чтобы воспользоваться им, в админке Joomla вы должны перейти в "Расширения -> Шаблоны -> Шаблоны", кликнуть по названию вашего шаблона Joomla, и в открывшемся окне перейти на вкладку "Создать переопределение". 

В нем показаны все макеты компонентов и модулей Joomla. Для создания переопределения вам достаточно кликнуть но ссылке с нужным макетом.

У сторонних расширений Joomla, например, у Virtuemart, также есть макеты и они переопределяются в шаблон тем же способом и по тем же причинам, что и стандартные макеты Joomla.

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

Альтернативные макеты Joomla

Передпределение макетов это хорошо, но что делать, если для разных страниц сайта нам нужны разные макеты?

Рассмотрим задачку 2

Заказчик хочет, чтобы в статье1 категория, автор, дата создания и иконки кнопок появлялись перед основным текстом, а в статье2 – после основного текста материала.

Если использовать только стандартный макет Joomla, это будет большой проблемой. Но кроме переопределений есть и другая техника. Макет можно не только переопределять, но и создавать еще один, альтернативный макет. Альтернативный макет можно назначать для отдельных единиц контента прямо в админке. Например, вы можете задать для одной статьи один макет, а для другой – другой.

Мы можем создать несколько файлов одного и того же макета с различной структурой, назвав их уникальными именами. Вы могли заметить, что в настройках материалов, категорий и модулей Joomla есть опция «Альтернативный макет». Если в шаблоне существует несколько макетов, она позволяет выбрать любой из них. Благодаря этой опции, в Joomla мы можем задавать собственные макеты хоть для каждого материала и модуля, а также, как мы увидим далее, и для каждого пункта меню.

Далее мы рассмотрим основные типы стандартных макетов Joomla и способы создания альтернативных макетов для них.

Какие бывают макеты?

Все макеты, имеющиеся в Joomla, можно разделить на несколько категорий:

• Макеты компонентов
• Макеты категорий
• Макеты пунктов меню
• Макеты модулей

Есть и некоторые другие типы макетов, но они используются очень редко и на данном этапе ими можно принебречь.

Рассмотрим каждую категорию подробнее.

Макеты компонентов

Описание

Макеты компонентов позволяют изменять структуру компонентов, созданных по концепции MVC. Все стандартные компоненты Joomla могут быть перестроены. Рассмотрим пример на компоненте com_content – перестроим статью.

Алгоритм создания

Предположим, что у нас используется шаблон Beez_20.

1) В корневой папке шаблона создаем подпапку html

2) В папке html, созданной в п.1, создаем подпапку com_content

3) В папке com_content, созданной в п.2. создаем подпапку article

4) Заходим в папку components\com_content\views\article\tmpl и копируем файл default.php в папку article, созданную в п.3.

5) Для создания альтернативного макета изменяем название файла default.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, myarticle.php

6) Если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.5, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _myarticledop1.php

7) Редактируем файл myarticle.php, изменяя его структуру под свои нужды.

8) Если мы хотим, чтобы данный файл применялся для всех статей по умолчанию, в настройках менеджера материалов в опции «альтернативный макет» выбираем myarticle.php

9) Если мы хотим, чтобы данный макет применялся только для одной статьи, в настройках статьи в опции «альтернативный макет» выбираем myarticle.php

10) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:

TPL_BEEZ_20_COM_CONTENT_ARTICLE_LAYOUT_myarticle="Название макета"

11) Если макет не применился, смотрим ограничения, описанные ниже, думаем, анализируем.

Ограничения

Альтернативные макеты могут использоваться только при соблюдении двух правил:

• Они были указаны в параметрах компонента (в нашем случае статьи или настройки статей)
• Нет пункта меню для этого компонента. Например если вы используете один или несколько пунктов меню типа "Материал", то альтернативный макет для этого материала не будет использоваться. Это объясняется тем, что параметры пункта меню являются более приоритетными, чем параметры материала, и они будут перекрывать их.

Макеты категорий

Описание

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

Алгоритм создания

Предположим, что у нас используется шаблон Beez_20.

1) В корневой папке шаблона создаем подпапку html

2) В папке html, созданной в п.1, создаем подпапку com_content

3) В папке com_content, созданной в п.2. создаем подпапку category

4) Заходим в папку components\com_content\views\category\tmpl и копируем файл blog.php в папку category, созданную в п.3.

5) Для создания альтернативного макета изменяем название файла blog.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, myblog.php

6) если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _myblogdop1.php

7) редактируем файл myblog.php, изменяя его структуру под свои нужды.

8) если мы хотим, чтобы данный файл применялся для всех категорий по умолчанию, в настройках менеджера материалов в опции «альтернативный макет» выбираем myblog.php

9) если мы хотим, чтобы данный макет применялся только для одной категории, в настройках категории в опции «альтернативный макет» выбираем myblog.php

10) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:

TPL_BEEZ_20_COM_CONTENT_CATEGORY_LAYOUT_myblog="Название макета"

11) если макет не применился, смотрим ограничения, описанные ниже, думаем, анализируем.

Ограничения

Альтернативные макеты могут использоваться только при соблюдении двух правил:

• Они были указаны в параметрах компонента(в нашем случае категории или настройки категорий)
• Нет пункта меню для этого компонента. Например если вы используете один или несколько пунктов меню типа "Блог категории", то альтернативный макет для этой категории не будет использоваться. Это объясняется тем, что параметры пункта меню являются более приоритетными, чем параметры категории, и они будут перекрывать их.

Макеты пунктов меню

Описание

Создание макетов пунктов меню отличается от создания макетов компонентов и категорий. Пункты меню имеют более высокий приоритет и будут перекрывать собой макеты компонентов и категорий. Рассмотрим пример создания макета пункта меню материала.

Алгоритм создания

Предположим, что у нас используется шаблон Beez_20.

1) В корневой папке шаблона создаем подпапку html

2) В папке html, созданной в п.1, создаем подпапку com_content

3) В папке com_content, созданной в п.2. создаем подпапку article

4) Заходим в папку components\com_content\views\article\tmpl и копируем файлы default.php и default.xml в папку article, созданную в п.3.

5) Для создания альтернативного макета изменяем название файлов default.php и default.xml на любые другие(совпадающие!), содержащие только английские буквы и цифры, но не имеющие в себе знака нижнего подчеркивания «_», например, mymenuarticleitem.php и mymenuarticleitem.xml

6) если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _mymenuarticleitem.php

7) редактируем файл mymenuarticleitem.php, изменяя его структуру под свои нужды. Редактируем файл mymenuarticleitem.xml, изменяя название пункта меню в третьей строке:

<layout title="mymenuarticleitem" option="com_content_article_view_default_option">

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

8) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:

mymenuarticleitem="Название макета".

9) создаем новый пункт меню и выбираем тип с названием, указанным в п.7.:

Макеты модулей

Описание

Макеты модулей позволяют изменять структуру модулей. Перестроены могут быть любые модули. Рассмотрим пример на модуле mod_login.

Алгоритм создания

Предположим, что у нас используется шаблон Beez_20.

1) В корневой папке шаблона создаем подпапку html

2) В папке html, созданной в п.1, создаем подпапку mod_login(название папки должно совпадать с оригинальным названием папки модуля)

3) Заходим в папку modules\mod_login\tmpl и копируем файл default.php в папку mod_login, созданную в п.3.

4) Для создания альтернативного макета изменяем название файла default.php на любой другое, содержащее только английские буквы и цифры, но не имеющее в себе знака нижнего подчеркивания «_», например, mylogin.php

5) Если наш макет требует подключения дополнительных файлов, то создаем их аналогично п.4, с тем отличием, что имя файла должно начинаться со знака нижнего подчеркивания «_», например, _mylogindop1.php

6) Редактируем файл mylogin.php, изменяя его структуру под свои нужды.

7) Чтобы макет применялся к модулю, в настройках модуля в опции «альтернативный макет» выбираем mylogin.php

 

8) Не обязательно. Для перевода названия макета добавляем в файл локализации шаблона (ru-RU.tpl_beez_20.sys.ini) следующую строчку:

TPL_BEEZ_20_MOD_LOGIN_LAYOUT_mylogin =" Название макета".

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

Используя шаблоны, макеты, и css-суффиксы Joomla, вы можете как угодно изменять ваш шаблон. Теперь это дело техники. И пусть после этого кто-нибудь попробует сказать, что шаблон Joomla не гибкий :-). Удачи!