< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Joomla » Шаблонизация Joomla — альтернативный макет и переопределение шаблонов

Шаблонизация Joomla — альтернативный макет и переопределение шаблонов

Шаблонизация Joomla - альтернативный макет и переопределение шаблонов

Здравствуйте друзья! В предыдущей заметке мы затронули тему wordpress, здесь же будем рассматривать 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 появилась возможность создавать переопределения автоматически прямо из админки сайта. Для этого идем в Расширения -> Менеджер шаблонов -> в списке шаблонов напротив используемого шаблона в колонке «Шаблон» жмем по названию шаблона и попадаем в редактор шаблона.

Менеджер шаблонов joomla

Далее, переходим на вкладку «Создать переопределение» и перед нами откроется три столбца списка расширений для которых доступно переопределение: модули, компоненты и макеты.

Создание переопределний шаблонов в joomla

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

Также, помимо шаблонов компонентов и модулей мы можем переопределить вид макетов. Что такое макеты? Например, нам надо изменить шаблон постраничной навигации. Для этого достаточно в админке создать шаблон макета «Pagination» и изменить его так, как нужно. Макеты — это новинка, которая появилась в joomla 3.

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

Теперь мы понимаем, что прежде, чем менять оформление вывода определенного расширения необходимо создать его шаблон. Но представьте, что одному и тому же модулю необходимо задать несколько оформлений, т.е. в одном разделе сайта оформление одно, в другом разделе оформление другое. Как здесь быть? Скажу, что и это разработчики предусмотрели и создали специальную опцию под названием «Альтернативный макет». Такую опцию вы можете увидеть в настройках модуля или компонента. Вот, например, в настройках модуля это выглядит так.

Альтернативный макет модуля в Joomla 3

Давайте для примера переопределим шаблон модуля формы авторизации на сайте и создадим два шаблона. Чтобы было понятно, чем они отличаются друг от друга сделаем кнопку входа в одном шаблоне оранжевой, по умолчанию кнопка входа в шаблоне «Protostar» синяя. Для этого сначала идем в менеджер шаблонов и создадим переопределение для модуля «mod_login» — Расширения -> Менеджер шаблонов -> в колонке «Шаблон» выбираем наш шаблон, у меня это шаблон «Protostar» -> вкладка «Создать переопределение» и в колонке «Модули» щелкаем по ссылке «mod_login».

Создание переопределения в менеджере шаблонов Joomla 3Далее получаем сообщение, что переопределение создано и следующее, что мы сделаем это перейдем в папку шаблона «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».

Альтернативный макет модуля в Joomla 3

Все, теперь мы можем клонировать наш модуль и выбрать в опции «Альтернативный макет» шаблон «default-alternative». Теперь данный шаблон будет выводится на сайте с оранжевой конопочкой входа.

Альтернативный макет категорий и статей

Также, как и модулям статьям и категориям также можно назначить свой альтернативный макет вывода. Мы можем переопределить вывод любой статьи или категории. При создании сайта часто приходится прибегать к таким методам, особенно, если это большой сайт и на нем много всякой различной информации.

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

Альтернативный макет мы можем назначить отдельной категории и отдельной статье.

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

Стоит отметить сразу, что альтернативный макет категории сработает, только в том случае, если категория не привязана к пункту меню с типом «Блог категории» или «Список материалов категории». Чтобы вывести альтернативный макет категории, которая привязана к пункту меню воспользуемся другим методом, но об этом ниже…

Альтернативный макет отдельной статьи

Давайте создадим альтернативный макет отдельному материалу. Например, в отдельном материале я задал заголовку H2 класс pageTitle, таким образом данный материал стал уникальным по отношению к другим. Как этого можно достичь? Просто создаем альтернативный макет страницы и присваиваем его нужной статье. Для этого сначала создадим переопределение для статьи: Расширения -> Менеджер шаблонов -> колонка «Шаблон», выбираем ваш шаблон -> Создать переопределение -> в колонке «Компоненты» находим «com_content», раскрываем список и щелкаем по ссылке «article».

Создание переопределения шаблона статьи joomla 3

Теперь идем в директорию — /templates/ваш шаблон/html/com_content/article/ и создаем копию файла default.php. Далее переименовываем данный файл, например, так — default-alt.php. Вносим необходимые правки в шаблон (я задал заголовку страницы класс pageTitle, если помните). Теперь назначим данный шаблон нужной статье — Материалы -> Менеджер материалов -> выбираем нужный материал -> Параметры отображения материала -> спускаемся вниз и в поле «Альтернативный макет» выбираем наш макет — default-alt.

Альтернативный макет материала joomla 3

Теперь, если перезагрузить страницу мы сможем увидеть наши изменения.

Давайте теперь нашему альтернативному макету «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 3

Существует более простой метод локализации альтернативного макета посредством переопределения языковых констант joomla. Об этом я писал в данной статье, можете также почитать. Перевод создается из админки и в файлы залезать не нужно. Для этого идем — Расширения -> Менеджер языков -> Переопределение констант. Далее в поле «Фильтр» переключаемся на область панели управления с нужным языком (у меня русский, в многоязычном сайте придется создавать для каждого языка).

Переопределение языковых констант в joomla 3

Теперь жмем на кнопочку «Создать» и в поле «Языковая константа» вводим нашу константу, у меня это — 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, в поле перевод я дал свое название — Мой блог.

Альтернативный макет категории joomla 3

Итак мы переопределили шаблон вывода блога категории, но если вы заметили в папке 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>

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

Читайте также:  Стильные хлебные крошки на сайте под управлением Joomla

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.

Создаем новый пункт меню, выбираем тип «Материалы» и видим, что там появился новый тип созданного нашего альтернативного макета. Я назвал его «Альтернативный макет блога категории».

Альтернативный макет пункта меню в joomla 3

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

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

Стиль модуля

Давайте вернемся к нашим модулям и посмотрим, что еще там можно сделать, чтобы упростить нам жизнь. До сих пор мы разбирали внутренние макеты каждого расширения, говорили о том, что их можно переопределить, но у модулей есть как бы еще и внешняя оболочка, которая была нам недоступна при вышесказанных методах. Что это за оболочка такая? Это, например, блок с классом 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.

Стиль модуля joomla

Выбираем данный стиль и наблюдаем результат. Если проинспектировать Firebug’ом видим, что вместо обычного заголовка H3 у нас появился div-блок с классом moduleTitle, содержащий еще и внутренний тег span.

исходный код стиля модуля joomla

Эта особенность назначать уникальный стиль каждому модулю появилась в 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 и о чем я вам хотел рассказать. Если всплывет еще что то, то обязательно добавлю в данную статью.

Напоследок напомню — всегда переопределяйте стандартные шаблоны при верстке шаблона, иначе рискуете потерять все изменения при обновлении движка или расширений!

На этом все. Всем пока! Жду ваших комментариев.

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (54 оценок, среднее: 3,46 из 5)
Загрузка...

Проверка орфографии

Система Orphus

139 комментариев к статье "Шаблонизация Joomla — альтернативный макет и переопределение шаблонов"

  • Мурад Апр 22, 2015 в 11:06

    Добрый день, Заур.
    Я переопределил альтернативный макет материала. Все отлично работает, вот только одна проблемка.
    Как назначить материалам в категории по умолчанию мой альтернативный макет?

    • Заур Магомедов
      Заур Магомедов Апр 22, 2015 в 11:09

      Добрый день! У вас категории к пункту меню привязаны?

      • Мурад Май 04, 2015 в 16:23

        нет

      • Мурад Май 04, 2015 в 16:27

        если нет вариантов сделать так, подскажите как сделать это если они привязаны к пункту меню?

        • Заур Магомедов
          Заур Магомедов Май 04, 2015 в 16:43

          Я же писал, как назначить свой альтернативный макет. В настройках категории выбираете свой альтернативный макет, но это в том случае, если у вас не идет привязка к пункту меню.
          Если привязываете к пункту меню, то создаете xml-файл. Далее в настойках пункта меню, когда выбираете тип вам станет доступным ваш альтернативный макет.
          Прочитайте несколько раз внимательно статью!

          • Мурад Май 04, 2015 в 18:03

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

            • Заур Магомедов
              Заур Магомедов Май 04, 2015 в 18:07

              Не за что!

  • Евгений Апр 19, 2015 в 14:14

    Добрый день, Заур. А какие практические задачи можно решить с помощью переопределения? Вы упоминали, что можно поменять расположение элементов в блоке. А какие еще задачи решает переопределение?

    • Заур Магомедов
      Заур Магомедов Апр 19, 2015 в 21:03

      Ну, смотрите… Возьмем, к примеру, компонент com_content joomla. Список блога категории имеет какой то стандартный вывод — заголовок ссылкой, анонс, картинку, теги и т.д. У нас на сайте есть рубрика — Новости. В списке новостей идет стандартно все, т.е. вывод по умолчанию. Теперь представьте у нас на сайте есть еще рубрика — Вопрос — Ответ. Так вот, там должно быть так — в подробный материал мы не переходим, а кликнув по заголовку у нас плавно раскрывается ответ (аккордеон). И все это делается стандартными средствами, не компонентом сторонним, а материалами. Как раз в данном случае мы можем применить переопределения. Т.е. мы просто создаем шаблон для Вопрос — Ответ и назначем его пункту меню — Вопросы и Ответы.
      Вот вам яркий пример практической реализации переопределения шаблонов.

  • Алексей Мар 20, 2015 в 18:33

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

    • Заур Магомедов
      Заур Магомедов Мар 20, 2015 в 19:55

      Что значит не отображались? А что вы хотите вообще сделать? Как материалы выводить?

      • Алексей Мар 20, 2015 в 20:13

        пункт главного меню (ссылка на категорию) — категория (в ней текст и ссылки ведущие на следующую подкатегорию) — подкатегория (тут уже ссылки на материалы )

        в общем конструкция такая, моя проблема в том, что те материалы на которые ведут ссылки внутри текста подкатегории, так же появляются внизу подкатегории.
        http://mangusteen24.ru/vidy-otdykha/14-plyazhnyj-otdykh/tajland если пройти по этой ссылке в самом низу видны все ссылки.

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

        • Заур Магомедов
          Заур Магомедов Мар 21, 2015 в 12:44

          Честно сказать, в данный момент у меня много работы и у меня получится вам помочь. Можете посмотреть мой курс по joomla 3.x.x, он бесплатный. Может после этого у вас все станет на свои места.

  • Евгений Мар 20, 2015 в 4:01

    Здравствуй, Заур. Спасибо за интересный блог и познавательные статьи. Я относительно недавно начал вникать во внутреннее строение Джумлы и есть моменты, которые мне не понятны. Уже голова кругом идет. Вот, например, по этой теме. Вы говорите, что переопределения нужны для кастомизации расширений — модулей, компонентов и т.д. Т.е. для того, чтобы придать этим расширениям определенный внешний вид, стиль. Но мы же переопределяем и вносим изменения в файлы php, а не в файлы css, которые непосредственно отвечают за внешний вид. я знаю способ изменения внешнего вида модулей путем присвоения им суффиксов, а потом в файле template.css прописывая правила отображения этого альтернативного модуля. в-общем, я запутался…

    • Заур Магомедов
      Заур Магомедов Мар 20, 2015 в 10:44

      Внешний вид можно определить:
      — суффикс класса модуля
      — альтернативный макет
      — стили css
      Обычно я использую всю эту связку (стили CSS по умолчанию всегда само собой), но бывает, что суффикс не использую, если вношу изменения прямо в альтернативный макет. Просто следует понять — суффикс класса модуля нужно, например, чтобы выделить какой либо модуль из всех остальных; альтернативный макет нужно, чтобы переопределить вывод шаблона, т.е. изменить расположение элементов в блоке и др.; стили CSS — без них никак…

      • Евгений Апр 16, 2015 в 15:47

        а в каких случаях нужно создавать переопределения, а в каких не нужно? неужели, если мы хотим изменить внешний вид стандартного модуля, то нужно создавать переопределения? я так понял, что если нам нужно поменять немного логику вывода (например, поменять местами), то тут точно нужно переопределять, а если только изменить стили CSS? и еще: в стандартных шаблонах Joomla (Protostar, Beez3) используются стандартные компоненты и модули или там тоже переопределенные?

        • Заур Магомедов
          Заур Магомедов Апр 16, 2015 в 21:34

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

  • onuvidelsolnce Фев 19, 2015 в 14:30

    Спасибо, статья поставила все на свои места:)

    • Заур Магомедов
      Заур Магомедов Фев 19, 2015 в 16:34

      Не за что!

  • Anna Дек 10, 2014 в 14:12

    Огромное спасибо! просто вот спасибище) Многое прояснилось. Joomla достаточно гибкая, просто мало кто ее знает так, как Вы.

    • Заур Магомедов
      Заур Магомедов Дек 10, 2014 в 14:25

      Не за что! Я многое еще не знаю в joomla 🙂

  • Валерий Ноя 22, 2014 в 12:12

    Заур, спасибо! Отличная статья. Как раз то, что мне было нужно.

    • Заур Магомедов
      Заур Магомедов Ноя 22, 2014 в 13:27

      Не за что! Данную статью я писал несколько дней и видать не зря.

  • Имран Ильясов
    Имран Сен 09, 2014 в 18:19

    Еще раз прочитал, очень даже замудрили разработчики. Но кому сейчас легко )) так что пошел верстать макет.

    • Заур Магомедов
      Заур Магомедов Сен 10, 2014 в 9:58

      На счет замудренности — согласен. В том же K2 намного все проще сделано.

      • Владимир Июн 26, 2015 в 8:40

        Заур, можешь в 2-х словах ответить про альтернативный макет в К2? Сам макет я сделал довольно просто, однако он использует css-файл, который назначен по умолчанию. Понятно, что если я переопределяю стили в нем, то переопределяются стили других макетов. Как дать отдельному макету К2 свой CSS-файл?

        • Заур Магомедов
          Заур Магомедов Июн 26, 2015 в 21:00

          Я делаю так: в настройках K2 отключаю общие стили по умолчанию, создаю свой макет K2 и пишу для них стили в моем файле стилей шаблона. Чтобы уникализировать макет, то вам необходимо создать дубль шаблона K2, переименовать и задать свой классы блокам. Вот таким вот образом. В K2 намного легче все обстоит.

  • Марат Авг 03, 2014 в 15:31

    Очень хорошо написано. Многое теперь стало для меня ясно. Спасибо автору за такой пост!

  • terveg Май 29, 2014 в 23:23

    плюсую автору. Молодец!

    • Заур Магомедов
      Заур Магомедов Май 30, 2014 в 10:16

      Спасибо!

  • Роман Май 11, 2014 в 17:50

    Огромное спасибо, отличная статья!

    • Заур Магомедов
      Заур Магомедов Май 11, 2014 в 17:52

      Не за что!!!

  • Имран Ильясов
    Имран Апр 15, 2014 в 14:33

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

    • Заур Магомедов
      Заур Магомедов Апр 15, 2014 в 15:11

      Спасибо. Я очень старался 🙂

      • Роман Май 26, 2015 в 15:41

        Заур будьте добры расскажите как создать пагинацию в любом модуле joomla. У меня например модуль Display news, но думаю это не имеет значения, должен быть какой-то универсальный вариант? Надеюсь на Ваш ответ.

        • Заур Магомедов
          Заур Магомедов Май 26, 2015 в 16:45

          Что значит пагинацию для модуля? Не совсем понял вопрос. Для модулей пагинации не бывает.

          • Роман Май 26, 2015 в 19:51

            Да вот такой я вот фантазер:) Знаю что нету. Тогда напишите про бесконечный скроллинг страницы (вертикально) с плавной подгрузкой контента

            • Заур Магомедов
              Заур Магомедов Май 26, 2015 в 20:17

              С фантазией у вас неплохо. А по поводу статьи про плавную подгрузку контента — это идея.

              • Роман Май 26, 2015 в 20:21

                Как вариант замены пагинации. Например модуль выводит 500 материалов при прокрутке вниз подгружается по 20 и нормуль

                • Заур Магомедов
                  Заур Магомедов Май 26, 2015 в 20:23

                  Зачем именно модулем выводить столько материалов?

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]