Только представьте: оформление каждого модуля, каждой категории, да хоть каждого материала вы можете сделать неповторимым. Интересно? Тогда читаем дальше…
Макеты 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, и в открывшемся окне перейти на вкладку "Создать переопределение". На рисунках ниже показано, как добраться до этого окна:

m1

Если вы все сделали правильно, то увидите такое окно:

m2

В нем показаны все макеты компонентов и модулей 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

1

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

2

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

3

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

4

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.:

5

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

Описание

Макеты модулей позволяют изменять структуру модулей. Перестроены могут быть любые модули. Рассмотрим пример на модуле 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

6

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

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

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

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

Об авторе
Об авторе
Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.
Основной профиль – создание сайтов и расширений на CMS Joomla.

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Комментарии  

0 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.slovoblud 12.10.2011 07:52
У семерочки функционал конечно по круче. Жаль только что под virtuemart пока мало расширений.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.granik 12.10.2011 13:44
Спасибо за статью. Не знал о такой особенности. Буду с удовольствием пользоваться.
Ответить | Ответить с цитатой | Цитировать
+2 # ОтличноVARion 14.10.2011 06:54
Спасибо!
Хорошо разложил в статье всё по полочкам, что и куда. Думаю дальше у людей может возникнуть только вопрос как изменять php под свои нужды...
P.S. Водяные знаки тоже хорошо получились.
Ответить | Ответить с цитатой | Цитировать
0 # Класс!Magnum79 17.10.2011 06:25
Какие водяные знаки?
Осталось только изменить интерфейс добавления статей с фронта и добавить отдельную загрузку главной картинки для статей и всё. К2 не нужен!
Спасибо за статью.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.demis 07.11.2011 08:10
Подскажите, почему пример "Макеты пунктов меню" не работает для шаблона "Список всех категорий", делаю все аналогично но пункт меню не подхватывается, работает тот что поумолчанию ...
Ответить | Ответить с цитатой | Цитировать
0 # CSSМихаил 07.11.2011 19:48
А как css цеплять - не могу разобраться
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.Михаил 07.11.2011 21:34
Цитирую Михаил:
А как css цеплять - не могу разобраться

все классы переопределил в основном css шаблона. и с суффиксами разобрался. Зря воздух сотряс сорри.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.Andrey 14.02.2012 13:28
Спасибо за статью. Всё понятно и доходчиво написано. Но как же перенести и какая строка отвечает за измение порядка вывода материала. Как сделать чтоб дата публикации была перед материалом, но после оглавления, А просмотры и автор после материала?
Ответить | Ответить с цитатой | Цитировать
0 # RE: RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.Wedal 15.02.2012 01:35
Andrey, порядок вывода материалов устанавливается в настройках пункта меню, который выводит список этих материалов. По поводу дат, просмотров и авторов, вам нужно отредактировать соответствующий макет. Если речь идет о блоге, то макет блога, если о материале, то материала.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.weaver 30.04.2012 04:31
спасибо за статью, очень полезная
Ответить | Ответить с цитатой | Цитировать
0 # RE: Макеты Joomla 1.7. Как сделать ваш сайт максимально уникальным.Мотвей 27.10.2012 17:12
а не подскажите как создать макет блога категории чтобы работало при переходе из пункта меню. У меня либо 500 - Layout newsblog_item not found либо никакой реакции. Чтобы это заработало, нужно создавать макет и для меню и для категории? Все перепробовал, не получается.
Ответить | Ответить с цитатой | Цитировать
0 # Макетыowl 07.11.2013 20:09
Про макеты поняла, не стала создавать тему на форуме... ) Спасибо за сайт - очень много полезного.
Ответить | Ответить с цитатой | Цитировать
0 # МакетыАлександр Киор 17.01.2014 16:04
Все сделал как написано в статье для Joomla 3 не работет ранее делал для 2.5 все нормально работало не подскажете где копать
Ответить | Ответить с цитатой | Цитировать
0 # RE: МакетыWedal 20.01.2014 03:45
Александр, что именно не работает? Вообще, должно работать. Возможно появились какие-то небольшие детали и отличия. Переопределения макетов модулей и компонентов работают точно также. Это точно. А вот макеты статей, в том виде, как описано здесь, не знаю. Не проверял. Не было необходимости.
Ответить | Ответить с цитатой | Цитировать
0 # Проблема с Joomla 3.3Герман 06.05.2014 18:17
Здравствуйте, Wedal!

Собственный, созданный с нуля шаблон для Joomla 3.3..

Подключены 2 языковых файла:
ru-Ru.tpl_nametemplate.ini
ru-Ru.tpl_nametemplate.sys.ini

Создан макет блога категории - COM_CONTENT_CATEGORY_VIEW_BLOG2_TITLE

Не работает перевод этой константы, если кладу ее в ru-Ru.tpl_nametemplate.sys.ini.

В чем может быть проблема?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Проблема с Joomla 3.3Wedal 07.05.2014 07:50
Герман, файлы, содержащие в себе .sys. , используются для перевода констант админки. У вас, если я правильно понимаю, константа на фронтенде, а значит нужно переводить ее в файле:
ru-Ru.tpl_nametemplate.ini
Ответить | Ответить с цитатой | Цитировать

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

Для отправки комментария введите код с картинки:
Защитный код
Обновить