Как редактировать шаблон joomla

Работа с шаблонами Joomla!

Этот вводный урок расскажет о системе шаблонов Joomla! и том, как нужно с ней работать.

Каково назначение шаблона?

Шаблон отвечает за внешний вид сайта. Он представляет собой основу, которая объединяет общие элементы, модули и компоненты, а также содержит каскадную таблицу стилей для сайта. Шаблоны предоставляются как для внешнего оформления сайта, так и для админки.

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

Шаблонами можно управлять с помощью Менеджера шаблонов, который находится в Меню расширений в админке сайта.

Почему Joomla! использует шаблоны?

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

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

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

1. Используйте один из шаблонов, предоставляемых с Joomla!
2. Загрузите один из многочисленных бесплатных предложений из интернета.
3. Купите приложение, чтобы изменить или создать шаблон, если вас не устроят вышеперечисленные варианты.

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

Что можно сделать с шаблоном?

Благодаря шаблону, можно размещать контент так, как пожелаете. Вот несколько способов, как это сделать.

Макет

Шаблон содержит дизайн главного макета, установленного на сайте. Он включает в себя размещение элементов (компонентов, модулей и плагинов), которые отвечают за различные типы контента. Например, различные меню — можно выбрать из существующих вариантов и создать свой собственный. А также рекламные баннеры, опросы, основная часть страницы — вы можете выбрать блог, новостные статьи, и т.д.

Цветовая схема

Используя CSS в дизайне шаблона, можно изменить цвет фона, текст, ссылки, словом всё, что могли бы сделать в обычном (X) HTML коде.

Изображения и эффекты

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

Шрифты

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

Конкретные решения для браузера

Шаблон может изменять свой внешний вид, в зависимости от браузера. Это позволяет в полной мере воспользоваться последними нововведениями, не делая при этом сайт недоступным для тех, кто не в состоянии ежесекундно модернизировать систему.

Переключение шаблонов

Чтобы изменить стандартный шаблон для сайта или администратора, выполните следующие действия:

• Войдите на сайт под паролем администратора
• Нажмите на «Расширения» > «Менеджер шаблонов»

Вы увидите окно Менеджера шаблонов.

Примечание: Если вы не видите Менеджера расширений в качестве опции в меню «Расширения», то это скорее всего, потому, что вы не вошли в систему как Супер Администратор. Только Супер Администратору виден этот пункт меню.

Отсюда можно управлять шаблонами для сайта и администратора. Шаблон сайта установлен по умолчанию. Он отмечен звездочкой (на изображении ниже это rhuk_milkyway).

Чтобы изменить шаблон «по умолчанию» на Beez, нужно:

• установить переключатель слева от названия шаблонов, чтобы выбрать его;
• нажать кнопку «По умолчанию» на панели инструментов;
• звёздочка изменится с rhuk_milkyway на Beez, и готово!

Назначение более одного шаблона для сайта

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

Перейдите к «Расширения» -> «Менеджер шаблонов».

Вы увидите установленные шаблоны. Теперь выберите шаблон, который не указан «по умолчанию». Нажмите на название шаблона или на переключатель слева от его названия и нажмите кнопку «Редактировать» на панели инструментов. Далее вы увидите на странице «Шаблон: [Редактировать]», установите переключатель «Выбрать из списка» в «Меню назначений» и выберите пункты меню, на которых будет показан шаблон. Нажмите кнопку «Сохранить» на панели инструментов. Вот и всё.

Как изменить шаблон joomla

Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с photoshop, html и css.

Итак, нам осталось изменить шаблон сайта, чтобы он стал похож на образец. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Файлы нашего сайта, как вы помните, находятся в C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь — C:\Program Files\Apache Software Foundation\Apache2.2\htdocs\oboi\templates\siteground-j15-1.

В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css — таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css).

Давайте рассмотрим файл index.php. В нем html-разметка отвечает за расположение элементов на странице. Все, что заключено в <jdoc /> или в <?php ?> — это программный код, отвечающий за вывод информации из базы данных или подключение других файлов. Например, тексты наших статей, название сайта. — все это хранится в базе данных и выводится на страницы с помощью программного кода. Для изменения шаблона нас интересует только html-разметка, программный код трогать не надо, иначе ваш сайт перестанет работать так, как должен.

Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему — плагин Firebug для браузера FireFox. Скачать его можно, например, здесь, далее открыть браузер FireFox, выбрать в меню Инструменты — Дополнения и в открывшемся окне включить расширение Firebug. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук):

Щелкаем по нему, внизу окна браузера откроется панель:

Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы — head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег — <div >

Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css

Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде — #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась:

Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с <div > и видим его содержимое: <div > — отвечает за левый угол и <div > — отвечает за правый угол. Ищем эти идентификаторы на странице template.css

Итак, левый угол — картинка header_top_left.jpg, правый угол — картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат:

Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его — <div >

Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта — это <div >, содержащий <div >, который в свою очередь содержит <div >. Ищем первые два идентификатора на странице template.css

Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700.

Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу):

А в таблице стилей поменяем синий цвет фона на коричневый:

Сохраняем и обновляем наш сайт в браузере:

Но на сайте-образце у нас расположена картинка. Для начала давайте ее добудем. Для этого идем на сайт-образец, щелкаем по картинке правой кнопкой мыши и выбираем пункт — Открыть фоновое изображение:

Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши — Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге <div >:

Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги <div > и <div > должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела (так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top), а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:

Теперь будем разбираться с <div >, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись слева — Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева — название и слоган, а другую справа — с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:

На странице index.php видим, что в <div > выводится ссылка с названием фирмы посредством программного кода, который мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из администраторской зоны, поменяв название сайта).

Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой — за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст:

Посмотрим на результат:

Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце:

Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец:

Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает тег <div >. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:

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

За главное меню отвечает тег <div >, в таблице стилей видим, что фоновой картинкой для этого тега является top_menu_bg.jpg, открываем ее в photoshop и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает , у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.

Далее ссылки в меню надо сделать покрупнее и серыми, а при наведении курсора мыши — белыми. За ссылки в главном меню отвечает тег с , поменяем немного стили:

Теперь то же самое с меню каталога товаров, за него отвечает тег <div >. Синяя верхняя полоса — это фон для тега <h3> (menu_t.jpg), находящегося внутри тега <div >. Открываем эту картинку в photoshop и меняем цвет на коричневый. Вообще-то на сайте-образце цвет фона у меню белый, но мне кажется, что с коричневой полосой как-то симпатичнее. А вот внутри серый фон можно убрать, для этого надо поудалять свойства backgroud и border в стилях, отвечающих за пункты меню, а цвет самих пунктов сделать коричневым, а при наведении курсора мыши — подчеркнутым. Вот стили с изменениями :

И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули:

С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php :

Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его:

Теперь такая же ситуация у нас в <div >, хорошо бы убрать надпись "Русобои, Powered by Joomla! and designed by SiteGround web hosting", но она также подставляется программным кодом:

Мы также уберем этот код, но в теге с напишем название фирмы и значок копирайта:

Ну и, конечно, поменяем цвет на коричневый в стилях:

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

Наш сайт сейчас выглядит вот так:

Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h1, h2, h3. ) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно.

Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.

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

Макеты 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) следующую строчку:

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) следующую строчку:

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) следующую строчку:

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

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

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

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

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

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

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

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

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

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

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

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

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

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