Здравствуйте друзья! В предыдущей заметке мы затронули тему wordpress, здесь же будем рассматривать joomla, а именно как создать и переопределить шаблоны вывода. Нет, нет, не общий шаблон сайта (хотя работать будем с ним), а нечто другое, чем многие разработчики, к сожалению, просто пренебрегают. Но обо всем по порядку.
Ка устроена шаблонизация в Joomla?
Давайте сначала разберем, как устроена шаблонизация в joomla. Я объясню в общих чертах, но так, чтобы вам стало понятно о каких шаблонах я веду речь. Все мы знаем, что у сайта есть шаблон, который мы можем изменить на любой, какой захотим. Так вот в данном шаблоне могут содержаться как бы под-шаблоны, а именно шаблоны расширений. Представьте, вы хотите изменить стиль вывода, к примеру, какого либо модуля, возьмем, модуль вывода последних материалов. Модуль может быть как родным встроенным, так и сторонним, в принципе не важно, суть одна. Представьте нам нужно поменять местами заголовок статьи и картинку анонса, т.е. было — сначала идет заголовок статьи, потом под ним картинка, потом дата, потом текст и т.д. А нам дизайнер нарисовал так — картинка выше, а заголовок ниже. Как мы будем менять? Вот тут самое интересное… Многие разработчики, не задумываются о том, что joomla это быстроразвивающаяся система, которой свойственно частое обновление. Но многие разработчики находят эти самые строчки в файлах модуля и меняют их как им нужно. А разве так нельзя? Почему, можно, только после обновления модуля или движка, если это родной модуль — плакали ваши изменения и все ваши труды уйдут в никуда. Т.е., измененные файлы просто затрутся при обновлении. Так вот, разработчики предусмотрели это и придумали систему шаблонизации и на мой взгляд это очень правильный и удобный подход.
Так каким же образом происходит переопределение шаблонов? Joomla, как и большинство современных движков работает по модели MVC — модель, вид, контроллер. Не буду сейчас углубляться, но скажу, что данная модель предусматривает отделение логики от шаблона. Так вот, как раз данный шаблон и выносится в главный шаблон joomla. Joomla так устроена, что если в главном шаблоне сайта в папке «html» не будут найдены шаблоны расширений, то она выведет их из ядра. Чтобы было понятно приведу один пример.
Возьмем стандартный компонент com_content — это компонент статьи joomla. Попробуем переопределить вид избранных статей. Выведем их, к примеру, на главной странице. Для этого нам необходимо вынести шаблон вывода избранных статей компонента в главный шаблон joomla. Для этого создаем в корне главного шаблона сайта папку html, далее в ней папку «com_content», далее в ней папку «featured» (избранные материалы), т.е. путь будет примерно следующим — /templates/ваш шаблон/html/com_content/featured. Теперь идем по следующему пути — /components/com_content/views/featured/tmpl/ и копируем файлы default.php, default_links.php и default_item.php в созданную папку «featured» вашего шаблона. Теперь редактируете данные файлы так, как нам нам необходимо. Изменения сразу же сможете увидеть на сайте. Теперь при обновлении joomla ваши изменения останутся нетронутыми.
Таким образом можно переопределить шаблон вывода практически любого компонента или модуля, как встроенных, так и сторонних. У плагинов шаблонов нет. Переопределение шаблонов может показаться с одной стороны рутиной — создавать папки в определенной последовательности, если что то неправильно сделаем шаблоны работать не будут. В последних версиях joomla, начиная с joomla 3.2 появилась возможность создавать переопределения автоматически прямо из админки сайта. Для этого идем в Расширения -> Менеджер шаблонов -> в списке шаблонов напротив используемого шаблона в колонке «Шаблон» жмем по названию шаблона и попадаем в редактор шаблона.
Далее, переходим на вкладку «Создать переопределение» и перед нами откроется три столбца списка расширений для которых доступно переопределение: модули, компоненты и макеты.
Теперь достаточно щелкнуть по интересующему расширению и переопределения автоматически создадутся в папке выбранного шаблона. На мой взгляд это очень упрощает жизнь, т.к. не надо париться какие папки создавать, что куда вкладывать и т.д.
Также, помимо шаблонов компонентов и модулей мы можем переопределить вид макетов. Что такое макеты? Например, нам надо изменить шаблон постраничной навигации. Для этого достаточно в админке создать шаблон макета «Pagination» и изменить его так, как нужно. Макеты — это новинка, которая появилась в joomla 3.
Альтернативный макет
Теперь мы понимаем, что прежде, чем менять оформление вывода определенного расширения необходимо создать его шаблон. Но представьте, что одному и тому же модулю необходимо задать несколько оформлений, т.е. в одном разделе сайта оформление одно, в другом разделе оформление другое. Как здесь быть? Скажу, что и это разработчики предусмотрели и создали специальную опцию под названием «Альтернативный макет». Такую опцию вы можете увидеть в настройках модуля или компонента. Вот, например, в настройках модуля это выглядит так.
Давайте для примера переопределим шаблон модуля формы авторизации на сайте и создадим два шаблона. Чтобы было понятно, чем они отличаются друг от друга сделаем кнопку входа в одном шаблоне оранжевой, по умолчанию кнопка входа в шаблоне «Protostar» синяя. Для этого сначала идем в менеджер шаблонов и создадим переопределение для модуля «mod_login» — Расширения -> Менеджер шаблонов -> в колонке «Шаблон» выбираем наш шаблон, у меня это шаблон «Protostar» -> вкладка «Создать переопределение» и в колонке «Модули» щелкаем по ссылке «mod_login».
Далее получаем сообщение, что переопределение создано и следующее, что мы сделаем это перейдем в папку шаблона «Protostar» (если сайт на хостинге, то лучше воспользоваться ftp-клиентом, например, total commander’ом) и видим, что в корне шаблона появилась папка «html», открываем данную папку, далее папку «mod_login» и видим два файла шаблона: default.php и default_logout.php. Мы можем изменить данные файлы так, как мы этого хотим и результат сразу же можем пронаблюдать на сайте после обновления страницы. Но данные изменения пременятся сразу ко всем созданным модулям «mod_login», а нам надо создать два разных оформления.
Для того, чтобы понять суть альтернативного макета идем в настройки модуля Login Form -> вкладка «Дополнительные параметры» и убеждаемся, что в выпадающем списке «Альтернативный макет» присутствует только шаблон по умолчанию и все.
Теперь создадим копии шаблонов переопределения в папке mod_login шаблона сайта (выделяем файл, жмем ctrl+с, затем ctrl + v), у нас появятся файлы с приставкой » — копия». Переименуем оба файла, заменив приставку » — копия» на, например, «-alternative» (названия файлов должны быть строго латиницей и не содержать знаки нижнего подчеркивания), т.е. у нас должны появиться два дополнительных файла: default-alternative.php и default-alternative_logout.php. Теперь ищем код кнопки в файле default-alternative.php с классом «btn btn-primary» и меняем «btn-primary» на «btn-warning» (класс кнопки предупреждения в twitter bootstrap), т.е. вот так — class=»btn btn-warning».
Теперь идем в настройки модуля mod_login и видим, что в списке «Альтернативный макет» появился дополнительный шаблон «default-alternative».
Все, теперь мы можем клонировать наш модуль и выбрать в опции «Альтернативный макет» шаблон «default-alternative». Теперь данный шаблон будет выводится на сайте с оранжевой конопочкой входа.
Альтернативный макет категорий и статей
Также, как и модулям статьям и категориям также можно назначить свой альтернативный макет вывода. Мы можем переопределить вывод любой статьи или категории. При создании сайта часто приходится прибегать к таким методам, особенно, если это большой сайт и на нем много всякой различной информации.
Альтернативный макет мы можем назначить отдельной категории и отдельной статье.
Стоит отметить сразу, что альтернативный макет категории сработает, только в том случае, если категория не привязана к пункту меню с типом «Блог категории» или «Список материалов категории». Чтобы вывести альтернативный макет категории, которая привязана к пункту меню воспользуемся другим методом, но об этом ниже…
Альтернативный макет отдельной статьи
Давайте создадим альтернативный макет отдельному материалу. Например, в отдельном материале я задал заголовку H2 класс pageTitle, таким образом данный материал стал уникальным по отношению к другим. Как этого можно достичь? Просто создаем альтернативный макет страницы и присваиваем его нужной статье. Для этого сначала создадим переопределение для статьи: Расширения -> Менеджер шаблонов -> колонка «Шаблон», выбираем ваш шаблон -> Создать переопределение -> в колонке «Компоненты» находим «com_content», раскрываем список и щелкаем по ссылке «article».
Теперь идем в директорию — /templates/ваш шаблон/html/com_content/article/ и создаем копию файла default.php. Далее переименовываем данный файл, например, так — default-alt.php. Вносим необходимые правки в шаблон (я задал заголовку страницы класс pageTitle, если помните). Теперь назначим данный шаблон нужной статье — Материалы -> Менеджер материалов -> выбираем нужный материал -> Параметры отображения материала -> спускаемся вниз и в поле «Альтернативный макет» выбираем наш макет — default-alt.
Теперь, если перезагрузить страницу мы сможем увидеть наши изменения.
Давайте теперь нашему альтернативному макету «default-alt» дадим адекватное название. Например, назовем так — Мой альтернативный макет. Для этого мы должны добавить константу с переводом — TPL_НАЗВАНИЕ ВАШЕГО ШАБЛОНА_COM_CONTENT_ARTICLE_LAYOUT_НАЗВАНИЕ ФАЙЛА АЛЬТЕРНАТИВНОГО МАКЕТА=»Мой альтернативный макет» — в файл локализации шаблона — ru-RU.tpl_название шаблона.sys.ini.
Я использую стандартный шаблон «protostar» и название файла альтернативного макета у меня — default-alt.php. В моем случае я для перевода добавил константу TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_DEFAULT-ALT=»Мой альтернативный макет» в файл ru-RU.tpl_protostar.sys.ini (/language/ru-RU/). Теперь при выборе альтернативного макета у меня выводится мое название.
Существует более простой метод локализации альтернативного макета посредством переопределения языковых констант joomla. Об этом я писал в данной статье, можете также почитать. Перевод создается из админки и в файлы залезать не нужно. Для этого идем — Расширения -> Менеджер языков -> Переопределение констант. Далее в поле «Фильтр» переключаемся на область панели управления с нужным языком (у меня русский, в многоязычном сайте придется создавать для каждого языка).
Теперь жмем на кнопочку «Создать» и в поле «Языковая константа» вводим нашу константу, у меня это — TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_DEFAULT-ALT. В поле «Текст» вводим ее перевод — Мой альтернативный макет. Жмем сохранить. Все, макет также будет переведен.
Хотелось бы добавить, что наш альтернативный макет можно определить и глобально, т.е. по умолчанию будет применяться ко всем материалам. Для этого идем в настройки материалов — Менеджер материалов -> щелкаем по кнопке «Настройки» в правом верхнем углу -> в первой вкладке «Материалы» в самом вверху видим поле «Выбор макета».
Альтернативный макет категории
Примерно также, как и для статьи создается альтернативный макет категории. Создаем переопределение шаблона списка статей категории (при создании переопределения щелкаем уже по ссылке «category»). Далее, идем в наш шаблон и открываем созданную папку переопределения — category. В данной папке находим файлы: blog.php, blog_item.php и blog_children.php и создаем их копии (выделяем, CTRL+C -> CTRL+V). Переименуем копии данных файлов, я назвал их так: myblog.php, myblog_item.php и myblog_children.php. Вы можете заменить префикс «myblog_» своим именем, но последовательность действий должна быть именно такой, иначе могут возникнуть ошибки. Теперь в админке сайта открываем категорию, которой хотим назначить альтернативный макет и во вкладке «Параметры» находим поле «Альтернативный макет». Раскрыв список мы увидим созданный нами макет (по умолчанию уже присутствуют два макета: Блог и Список).
Еще раз напомню! Данный альтернативный макет будет применен только в том случае, если категория не привязана к пункту меню с типом блог категории или список категории.
Также можно дать адекватное название макету, создав языковую константу — TPL_НАЗВАНИЕ ШАБЛОНА_COM_CONTENT_CATEGORY_LAYOUT_НАЗВАНИЕ ФАЙЛА МАКЕТА (копия файла blog.php). В моем случае это будет — TPL_PROTOSTAR_COM_CONTENT_CATEGORY_LAYOUT_MYBLOG, в поле перевод я дал свое название — Мой блог.
Итак мы переопределили шаблон вывода блога категории, но если вы заметили в папке category переопределения существуют еще и файлы: default.php, default_item.php и default_children.php — это у нас файлы шаблона списка категории. Так, что если хотите создать альтернативный макет списка категории, то вам необходимо создать копии именно данных файлов. Остальное все аналогично.
Казалось бы все, но тут есть еще один момент, о котором я тоже хочу рассказать. Вот представьте у нас список материалов категории, выводятся они в формате блога. Давайте теперь изменим заголовок материала в списке категории. По умолчанию он H2, а мы его переделаем в H3. Правки вносятся в файл blog_item.php, но я буду изменения вносить в альтернативный макет, в файл myblog_item.php. Так вот если мы откроем данный файл, то выяснится, что некоторые блоки вынесены в отдельные файлы, включая наш заголовок статьи. Вспомните третью колонку «Макеты» при создании переопределения в шаблоне. Так вот, сейчас как раз мы и обратимся к данной колонке. Нам необходимо создать переопределения макетов стандартного компонента статьи joomla. Для этого мы идем в переопределения и в колонке «Макеты» щелкаем по ссылке «content». Теперь переходим в папку нашего шаблона, далее папка «html» и видим, что там появилась еще одна папка — «layouts». Отлично! Теперь зайдем в данную папку -> joomla -> content и здесь нам необходимо найти файл, который содержит заголовок нашей статьи. Для этого вернемся в наш файл myblog_item.php (в моем случае) и ищем строчки, где у нас выводится заголовок. У меня это 23 строка. Выглядит она следующим образом:
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
Исходя из данного кода, мы видим, что у нас подключается файл с названием — blog_style_default_item_title, вот как раз его и будем искать в папке layouts. У меня данный файл присутствует — blog_style_default_item_title.php. Можно сразу открыть его и отредактировать, но я предлагаю также создать альтернативный макет данного шаблона заголовка. Для этого создаем копию данного файла и переименуем его, например, я его назвал так — myblog_style_default_item_title.php. Теперь переходим в файл myblog_item.php и меняем строчку
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
на
<?php echo JLayoutHelper::render('joomla.content.myblog_style_default_item_title', $this->item); ?>
Теперь, файл шаблона myblog_style_default_item_title.php можно менять как угодно и изменения будут применены именно в той категории, которой назначен альтернативный макет категории. Вот так вот все устроено. Таким же образом переопределяются и другие шаблоны колонки «Макеты».
Данный альтернативный макет также можно определить глобально, т.е. по умолчанию будет назначаться всем категориям. Идем в настройки стандартного компонента статьи joomla и во вкладке «Категория» выбираем нужный макет.
Альтернативный макет пункта меню
Теперь давайте рассмотрим другой вариант создания альтернативного макета с привязкой к пункту меню. Идем в директорию — /templates/ваш шаблон/html/com_content/categoty и создаем копию файла blog.xml и далее переименовываем на (в моем случае) myblog.xml. Теперь давайте откроем данный файл. В начале файла мы увидим структуру следующего вида:
<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION"> <help key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG" /> <message> <![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]> </message> </layout>
Это структура как раз и определяет пункт меню для нашего макета. Изменим следующие константы на свои, заменив выделенный фрагмент в соответствии с созданным альтернативным шаблоном и создадим для них переопределения в языковых файлах:
COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG
COM_CONTENT_CATEGORY_VIEW_BLOG_DESC
Я назвал их следующим образом:
COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_MYBLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_MYBLOG
COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC
Идем в менеджер языков и создаем переопределения констант для области панель управления с нужным вам языком. Мне хватило создать переопределения для двух констант: COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE и COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC.
Создаем новый пункт меню, выбираем тип «Материалы» и видим, что там появился новый тип созданного нашего альтернативного макета. Я назвал его «Альтернативный макет блога категории».
Теперь вывод статей в данном пункте меню будет отображаться в соответствии с созданным макетом.
Хочу предупредить, что если вы создаете альтернативный макет пункта меню, то данный альтернативный макет выбрать глобально или из категории у вас уже не получится, т.к. он будет уже не доступен.
Стиль модуля
Давайте вернемся к нашим модулям и посмотрим, что еще там можно сделать, чтобы упростить нам жизнь. До сих пор мы разбирали внутренние макеты каждого расширения, говорили о том, что их можно переопределить, но у модулей есть как бы еще и внешняя оболочка, которая была нам недоступна при вышесказанных методах. Что это за оболочка такая? Это, например, блок с классом moduletable, который окутывает каждый модуль со стандартным стилем вывода xhtml. Также сюда можно включить еще и заголовок модуля, который по умолчанию выводится в теге H3. Теперь представьте ситуацию — вам нужно одному из модулей, вернее его заголовку изменить тег H3 на обычный div-блок с определенным классом, скажем, класс moduleTitle, + еще добавить внутрь данного блока тег span, т.е. обрамить заголовок еще дополнительным тегом span. Это касалось отдельного модуля. А что, если вам нужно вывести таким образом все модуля в определенной модульной позиции?
Давайте будем разбираться. Мы можем создать уникальную обертку и назначить ее любому модулю. Для этого создаем файл modules.php в папке вашего шаблона, а именно полный путь выглядит так — /templates/ваш шаблон/html/modules.php. Открываем данный файл и вставляем в него следующий код:
<?php /** * @package Joomla.Site * @subpackage Template.system * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ defined('_JEXEC') or die; /* * xhtml */ function modChrome_xhtml($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>"> <?php if ((bool) $module->showtitle) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; }
Но не спешите сохранять, нам надо его еще отредактировать, а если быть точнее создать уникальный стиль модуля, иначе на сайте выскочит ошибка в виде белого экрана (при отключенном отображении ошибок), т.к. данный стиль уже существует. Нас интересует функция «modChrome_xhtm» дадим ей уникальное имя, я назвал так — «modChrome_myStyle». Все, теперь содержимое функции можно подредактировать так, как нам это нужно. В результате, если осуществить задуманное я модернизировал код следующим образом:
<?php /** * @package Joomla.Site * @subpackage Template.system * * @copyright Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ defined('_JEXEC') or die; /* * myStyle */ function modChrome_myStyle($module, &$params, &$attribs) { if (!empty ($module->content)) : ?> <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>"> <?php if ((bool) $module->showtitle) : ?> <div class="moduleTitle"><span><?php echo $module->title; ?></span></div> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; }
Теперь можно сохранить данный файл. Следующее, что мы сделаем, идем в менеджер модулей и открываем на редактирование нужный модуль. Переходим на вкладку «Дополнительные параметры», спускаемся вниз и в последнем фильтре «Стиль модуля» видим, что у нас появился дополнительный стиль — у меня это myStyle.
Выбираем данный стиль и наблюдаем результат. Если проинспектировать Firebug’ом видим, что вместо обычного заголовка H3 у нас появился div-блок с классом moduleTitle, содержащий еще и внутренний тег span.
Эта особенность назначать уникальный стиль каждому модулю появилась в joomla 3. В joomla 2.5 я такой возможности не видел. Так, что обновитесь до joomla 3, если вы этого еще не сделали.
Теперь давайте рассмотрим, как сделать вывод всех модулей по заданному стилю в определенной модульной позиции. Модульная позиция в шаблоне вставляется следующий образом:
<jdoc:include type="modules" name="header" style="layout_xhtml" />
name=»header» — вместо header вводите свое название модульной позиции.
Если вы заметили в данной позиции выводится стандартный стиль — xhtml. Заменим его на наш созданный — myStyle, т.е. вот так:
<jdoc:include type="modules" name="header" style="layout_myStyle" />
Все, теперь все модуля в данной модульной позиции будут выводиться по нашему стилю. Респект разработчикам, что дали такую возможность так гибко настраивать шаблон!
Дополнительные возможности
Если вы заметили в той же вкладке модуля «Дополнительные параметры» помимо полей «Альтернативный макет» и «Стиль модуля» присутствуют также такие поля, как, «Суффикс CSS-класса модуля», «Кэширование», «HTML-тег модуля», «Размер Bootstrap», «HTML-тег заголовка», «CSS-класс заголовка». Ну, поле «Кеширование» к шаблонизации отношения не имеет, поэтому пока его опустим. Рассмотрим остальные поля.
Суффикс CSS-класса модуля — добавляет суффикс к блоку с классом moduletable. Дополнительный класс можно задать, как через пробел, так и через дефис или вовсе написать слитно. Таким образом, мы можем уникализировать класс блока модуля и писать для него такие стили, какие хотим.
HTML-тег модуля — работает, если мы выберем стиль модуля html5. Данный стиль создан по умолчанию. Опция позволяет заменить стандартный div-блок на один из выбранных элементов html5 — section, nav, article и т.д.
Размер Bootstrap — работает при выбранном стиле модуля html5. Данная опция актуальна только в том случае, если вы в своем шаблоне сайта используете фреймворк Twitter Bootstrap. Указывает размер модуля, выбирая соответствующую цифру. Например, если выберем цифру 2, то в наш блок с классом moduletable добавится через пробел класс span2. Если вы знакомы с данным фреймворком, то знаете что блок с классом span2 имеет свою определенную ширину и данная ширина адаптируется в зависимости от размера экрана окна браузера.
HTML-тег заголовка — работает при выбранном стиле модуля html5. Если помните, по умолчанию тег заголовка у модуля — H3. Так вот, данный тег можно переопределить уровнем заголовка от H1 до H6 или выбрать тег параграфа — p.
CSS-класс заголовка — также, данная опция будет работать при выбранном стиле html5. Задает класс заголовку модуля.
Вот в принципе и все, что я знаю о шаблонах joomla и о чем я вам хотел рассказать. Если всплывет еще что то, то обязательно добавлю в данную статью.
Напоследок напомню — всегда переопределяйте стандартные шаблоны при верстке шаблона, иначе рискуете потерять все изменения при обновлении движка или расширений!
На этом все. Всем пока! Жду ваших комментариев.