Категории

Структура шаблона joomla

Урок 1. Создание файловой структуры

Создание шаблона для Joomla 3: верстка из HTML макета

{REPLACEMENT-(h2>)-(h3>)}

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

Исходный файл

Итак, для примера за основу я возьму следующий код.

<meta charset="utf-8"> <title>Простой макет</title> <style type="text/css"> * { margin:0; } body { height: 100%; min-width: 900px; font-size: 38px; font-family: Arial, sans-serif; background: #DCDCDC; } html { position: relative; min-height: 100%; } #header { height: 100px; background: #F5DEB3; padding-top: 8px; } #content { padding-top: 20px; padding-bottom: 100px; } #footer { height: 50px; width: 100%; padding-top: 10px; background: #00BFFF; position: absolute; bottom: 0; } #header .inh { margin: auto; width: 900px; } #content .inc { margin: auto; width: 900px; } #footer .inf { margin: auto; width: 900px; } </style> </head> <body> <div id="header"> <div class="inh"> <p>Заголовок</p> </div> </div> <div id="content"> <div class="inc"> <p>Материал</p> </div> </div> <div id="footer"> <div class="inf"> <p>Низ сайта</p> </div> </div> </body> </html>

Структура шаблона

Создайте в любом удобном месте папку с будущей темой и назовите её, как угодно (у меня и тема, и папка будут называться test). Минимальный набор файлов и папок шаблона таков.

  • css — директория со стилями шаблона.
  • template.css — файл внутри каталога css, который будет содержать каскадные таблицы стилей. В больших шаблонах файлов *.css в папке гораздо больше.
  • index.php — собственно, сам шаблон.
  • templateDetails.xml — наиважнейший и обязательный файл, он содержит описание темы оформления.

Такова минимальная комплектация темы, папка с вашим шаблоном должна содержать всё перечисленное.

Структура же среднестатистического шаблона дополняется следующими элементами.

  • images — папка с изображениями (логотип, фон, вставки и т. д.).
  • language — директория локализации (языки темы оформления).
  • component.php — страница печати.
  • error.php — страница вывода ошибок.
  • favicon.ico — иконка сайта (отображается в браузере на заголовке вкладки слева от названия ресурса).
  • template_preview.png — скрин шаблона размером 640x480, который используется для предпросмотра темы в административной панели Joomla.
  • template_thumbnail.png — тоже превью-картинка, но уже поменьше — 206x150px.
  • Внутри папок рекомендуется размещать файлы-заглушки index.html с кодом <html><body bgcolor="#FFFFFF"></body></html>, однако на практике создатели многих шаблонов правило игнорируют.

Теперь перейдём от структуры к содержимому файлов.

Описание шаблона

Святая святых тем оформления Joomla — файл templateDetails.xml. Откройте его в каком-нибудь из специализированных редакторов (например, Notepad++) и сохраните нижеследующий код.

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 3.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <extension version="3.5" type="template" client="site"> <name>test</name> <creationDate>May 2016</creationDate> <author>NoName</author> <authorEmail>[email protected]</authorEmail> <authorUrl>http://</authorUrl> <copyright>Copyright (C) 2016 Open Source. All rights reserved.</copyright> <license>GNU General Public License version 2 or later; see LICENSE.txt</license> <version>0.9</version> <description>TPL_TEST_XML_DESCRIPTION</description> <files> <folder>css</folder> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>top</position> <position>footer</position> </positions> </extension>

Разберём его.

<?xml version="1.0" encoding="utf-8"?>

— задаём тип документа и кодировку чтобы скрипт знал, как обрабатывать файл.

<!DOCTYPE install PUBLIC "-//Joomla! 3.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/1.6/template-install.dtd">

— служебная информация для браузера и CMS.

<extension version="3.5" type="template" client="site">

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

name — содержит название темы. Все остальные элементы секции <extension> являются необязательными.

creationDate — дата создания.

author — в этом блоке можно указать автора темы оформления.

authorEmail — почта для связи.

authorUrl — сайт разработчика.

copyright — информация об авторском праве.

license — правила распространения шаблона.

version — версия темы.

description — краткое текстовое описание шаблона.

files — в этой секции перечисляются все файлы и папки, находящиеся в корневом каталоге темы. Отсюда Joomla берёт информацию о том, какие файлы копировать на сервер.

positions — здесь располагаются сведения о позициях для вывода модулей. Как мы помним, компоненты замещают содержимое, плагины реагируют на события и, как правило, выводят контент по строчке кода, а модули отображают данные в специально отведённых местах. Секция position эти места и определяет. У нас в шаблоне будет две позиции — top и footer.

Файл templateDetails.xml может содержать множество дополнительных секций, мы же в своём шаблоне ограничимся описанными.

Таблицы стилей

В файл template.css, который находится в папке css темы оформления, вставьте соответствующий код из HTML-файла шаблона.

* { margin:0; } body { height: 100%; min-width: 900px; font-size: 38px; font-family: Arial, sans-serif; background: #DCDCDC; } html { position: relative; min-height: 100%; } #header { height: 100px; background: #F5DEB3; padding-top: 8px; } #content { padding-top: 20px; padding-bottom: 100px; } #footer { height: 50px; width: 100%; padding-top: 10px; background: #00BFFF; position: absolute; bottom: 0; } #header .inh { margin: auto; width: 900px; } #content .inc { margin: auto; width: 900px; } #footer .inf { margin: auto; width: 900px; }

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

Шаблон страницы

Осталось оформить сам шаблон страницы — отредактировать файл index.php, добавив в него такой код.

Основную часть кода составляет знакомый нам по этому справочнику HTML. Прокомментирую неизвестные строки.

defined('_JEXEC') or die; — безопасность Joomla, строка защищает от прямого доступа к файлу.

<jdoc:include type="head" /> — определяет метаданные, скрипты, стили.

<jdoc:include type="modules" name="top" style="xhtml" />— позиция для вывода первого модуля.

<jdoc:include type="message" /> — выводит сообщения об ошибках и системные уведомления.

<jdoc:include type="component" /> — отображает основной контент страницы.

<jdoc:include type="modules" name="footer" style="xhtml" /> — вывод второй позиции для отображения данных из модуля.

Упаковка и установка темы

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

Запакуйте содержимое папки test любым архиватором в ZIP-файл, чтобы структура в корне архива была такой, как на рисунке ниже.

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

Когда Joomla сообщит о том, что тема установлена успешна, назначьте её шаблоном по умолчанию, щёлкнув звёздочку в строке test менеджера шаблонов.

Теперь можно проверить, работает ли тема оформления. Для этого достаточно просто открыть сайт.

В шаблон добавлено две позиции для вывода модулей. Чтобы просмотреть их, нужно перейти по адресу http://сайт/index.php?tp=2, предварительно включив отображение позиций.

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

Теперь, когда вы перейдёте по адресу http://сайт/index.php?tp=2 (в моём случае это http://test1.ru/index.php?tp=2), то увидите местоположение позиций.

Таков принцип создания шаблонов для Joomla. Что касается усложнения в плане дизайна — для разработки более сложных тем оформления рекомендую почитать официальную документацию Joomla и её форум.

Скачать приложение

Смотрите также

Источник: http://www.seostop.ru/sozdanie-saita/joomla/verstka-shablona.html
{/REPLACEMENT}

Joomla шаблон – структура, каталоги, файлы, формат

{REPLACEMENT-(h2>)-(h3>)}
Mirantus27 апреля 2015 в 05:58

Как сверстать шаблон для Joomla

Метки:

Введение


В предыдущей статье мы изучили, как создать тему для WordPress. Давайте сегодня на основе этого же шаблона Corporate Blue попробуем создать сайт на второй по популярности CMS – Joomla! Поскольку в статье описывается в основном вёрстка, будем считать, что Joomla! у вас уже установлена. Если вы не знаете, как установить Joomla!, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано в самой первой статье. Вместо этого рассмотрим детально особенности создания шаблона именно для Joomla!

Добавление шаблона


Для начала, в любом удобном для вас месте создайте папку нашего шаблона «whitesquare». В ней должны находиться три подпапки: css, images и language. В папках css и images создайте файлы index.html со следующим содержимым:


Эти файлы являются заглушками и, по требованиям CMS, должны отображать пустую страницу при обращении к этим папкам напрямую.
Далее, в папке css создайте пустой файл стилей template.css, а в папке language подпапку en-GB, которая будет содержать пустой файл en-GB.tpl_whitesquare.ini и файл en-GB.tpl_whitesquare.sys.ini со следующим содержимым:




Давайте подробно разберем, что все это значит. Папка language нужна для локализации, она может содержать подпапки с различными языками: en-GB, ru-RU и т.д. Каждая языковая папка включает два файла с ключами. Ключи представляют собой пару с названием ключа и его значением. Названия ключей для разных языков будут одинаковыми, а значения – разными. Такой механизм позволяет использовать шаблон для создания сайтов на разных языках. Поскольку это учебный пример, будем использовать только английский язык – en-GB. Первый файл en-GB.tpl_whitesquare.ini будет содержать ключи, которые увидят пользователи сайта, а второй — en-GB.tpl_whitesquare.sys.ini будет содержать ключи административных функций.
Далее нужно создать пустые файлы component.php, error.php и index.php. Они нам понадобятся в будущем.
Следующим шагом добавим картинки: favicon.ico, template_preview.png и template_thumbnail.png. Последние две – это превьюшки будущего шаблона и они имеют размеры 640х480 и 206х150 соответственно.
Последний файл, который нужно добавить – это templateDetails.xml. На данном этапе — это самый важный файл, он содержит подробное описание нашего шаблона:


Большая часть содержимого этого файла понятна, необходимо пояснить только следующее:
Поле description содержит тот самый ключ локализации, который мы указали в en-GB.tpl_whitesquare.sys.ini
Поле files содержит полный перечень всех файлов и папок, лежащих в корне шаблона.
Поле languages содержит список языковых файлов, а поле positions нам понадобится чуть позже.
Теперь, когда каркас шаблона готов, давайте добавим его в CMS. Для этого откройте панель администратора Joomla!, выберите пункт меню Extension -> Extension manager, перейдите на вкладку Install from Directory и в поле Install Directory укажите путь до папки whitesquare, в которой мы создавали файлы шаблона.



Нажмите кнопку Install и шаблон добавится в систему. Остается только активировать шаблон. Зайдите в меню Extension -> Template manager, найдите шаблон whitesquare в списке и в поле Default, нажмите на звездочку, это сделает наш шаблон – шаблоном по умолчанию. После этого уже можно открыть адрес сайта, где установлена Joomla! и увидите пустую страницу нашего сайта.

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




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

Структура страниц


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

Давайте начнем со структуры страниц. Управление страницами осуществляется в панели администратора через меню Content -> Article Manager. Для добавления новой страницы нажмите кнопку New и заполните форму. В поле Title введите заголовок страницы. Остальные поля оставьте без изменений. Добавьте таким образом страницы Home, About us, Services, Partners, Customers, Projects, Careers, Contact. После добавления, список страниц должен выглядеть вот так:



Шаблон страницы


Следующим шагом нам нужно сделать шаблон страницы Joomla! Откройте файл index.php, который мы создали в папке нашего шаблона и добавьте в него код, который создаст каркас страницы:


Давайте подробно разберем, что здесь написано. Вначале идет PHP блок, в котором мы определяем необходимые переменные. Первая строка – это стандартная проверка безопасности Joomla! Далее мы устанавливаем переменные приложения, документа, меню и языка. Для подключения стилей и изображений также понадобится переменная, содержащая путь до нашего шаблона. И последняя переменная будет содержать проверку — является ли показываемая страница домашней. Помимо прочего, в этом же блоке подключаем локальный CSS файл нашего шаблона и удаленные стили шрифтов.
Далее идет стандартный html шаблон, в теле которого поместим два блока — .wrapper и footer. Секция head начинается с подключения стандартных заголовков Joomla! Дальше идет мета-тег перевода Internet Explorer в современный режим, а затем специальный скрипт для поддержки HTML5 тегов в старых версиях IE. Блок .wrapper содержит пустые блоки для шапки и заголовка страницы. Последней, но самой важной командой является подключение компонента внутри блока .wrapper – именно она будет добавлять содержимое страницы в шаблон и отображать информационные сообщения.
Теперь нужно стилизовать получившуюся страницу. Сохраните фон страницы в файл images/bg.png и добавьте немного базовых стилей в файл template.css:

Показать код


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

Логотип




После того, как мы закончили с каркасом основной страницы, приступим к ее наполнению. Начнем с логотипа. Сохраните изображение логотипа в images/logo.png. В блок header нашего шаблона вставьте разметку для логотипа:


В качестве альтернативного текста для изображения вставляется текст через стандартную функцию локализации Text::_(). Ключа TPL_WHITESQUARE_LOGO у нас еще нет, поэтому давайте добавим его в файл \language\en-GB\en-GB.tpl_whitesquare.ini:


К сожалению, после этого текст не появится на странице сайта. Дело в том, что мы добавляем ключ локализации в шаблон, который уже используется системой, а Joomla! так устроена, что она читает ключи локализации из этого файла только при первоначальной установке шаблона. Можно конечно удалить шаблон и добавить его в систему заново, но мы поступим проще – добавим этот же ключ в системный файл {joomla_root}\language\en-GB\en-GB.tpl_whitesquare.ini, где {joomla_root} – это папка, в которую установлена Joomla!

Форма поиска




Joomla! уже содержит собственный модуль формы поиска. Его можно найти разделе Extensions -> Module Manager панели администратора. Если в вашей CMS он не установлен, то установить его можно, нажав кнопку New и выбрав из списка пункт Search.
Для того, чтобы поместить этот модуль в шаблон – нужно создать собственную «позицию» для этого модуля. Позиции (positions) – это специально размеченные области шаблона, в которые вставляются модули. Позиции описываются в файле templateDetails.xml в блоке positions:


После этого вернитесь в Module Manager и откройте модуль Search на редактирование. И в полях укажите следующие значения:
Box Label: пробел
Box Text: Search
Search Button: Yes
Button position: Right
Search Button Image: No
Button text: GO
Show Title: Hide
Position: Whitesquare Search
А на вкладке Advanced в поле Module Class Suffix введите «-block». Это позволит разделить стили формы поиска от содержимого страницы поиска.
Теперь, когда модуль подготовлен, нужно вставить его в шаблон index.php:


Осталось добавить стили в template.css:

Показать код


Навигация




Меню на страницах сайта создается в три этапа: сначала нужно создать абстрактное меню и определить его пункты, затем определить для него позицию в шаблоне и последним этапом создать модуль, который свяжет абстрактное меню с конкретной позицией.
Управление списками меню осуществляется в разделе Menus -> Menu Manager панели администратора. По умолчанию там уже есть меню под названием Main Menu. Зайдите в него.
Для того, чтобы создать новый пункт меню – нажмите кнопку New и заполните открывшуюся форму – следующим образом:
Menu Title: название страницы, например About us
Menu Item Type: Single Article
Select Article: About us
Создайте аналогичным образом все пункты главного меню: Home, About us, Services, Partners, Customers, Projects, Careers, Contact.



Далее откройте templateDetails.xml и добавьте позицию главного меню:


Далее нужно создать модуль, который будет содержать меню. Модуль главного меню по умолчанию уже установлен в Joomla!, он называется Main Menu. Откройте его через меню Extensions -> Module Manager -> Main Menu. В поле Select Menu укажите Main Menu, а в поле Position: Whitesquare Menu. Поле этого нужно перейти на вкладку Advanced и в поле Module tag выбрать значение nav, а в поле Menu Class Suffix ввести «-top». Это позволит нам задавать CSS классы для этого меню более гибко и семантично.
Давайте теперь добавим нужную позицию в сам шаблон сразу после шапки:


На данном этапе меню уже появится на страницах, но без стилей. Стилизуем его:

Показать код


Заголовок страницы




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

  • В настройках Article Manager задаются глобальные настройки для всех статей.
  • В свойствах каждой статьи задаются настройки этой статьи и перебивают глобальные
  • Если на странице добавлено меню, то настройки пункта меню, указывающего на данную страницу, будут перебивать все остальные настройки

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

  • В панели администратора зайдите в Content -> Article manager, нажмите кнопку Options и на первой вкладке Articles для всех полей поставьте значения Hide и No.
  • Далее, там же, в Article manager зайдите в каждую статью на вкладку Options и поставьте для всех полей значение Use Global.
  • И последним шагом зайдите в Menus -> Menu Manager -> Main Menu и для каждой станицы на вкладке Options так же поставьте для всех полей значение Use Global.

После этих действий заголовок страницы пропадет со всех страниц сайта. Теперь нужно его вернуть назад на все страницы, кроме главной, вставив его вызов в index.php сразу после навигации:


Теперь нужно стилизовать получившийся блок. Сохраните фон заголовка в файл images /h1-bg.png и добавьте стилевые правила:

Показать код


Футер




Теперь приступаем к самой сложной части нашего шаблона. Давайте нарежем изображения и сохраним их в в папку images

images/footer-logo.png – логотип футера
images/social.png – спрайты больших иконок
images/social-small.png – спрайты маленьких иконок

После того, как все ресурсы подготовлены, давайте взглянем на блок Sitemap. Он состоит из двух колонок. Сейчас, когда нативная поддержка переноса текста по столбцам не очень хорошо поддерживается в популярных браузерах гораздо проще сделать меню, состоящее из двух столбцов. Для этого в разделе Menus -> Menu Manager создайте меню Sitemap left с пунктами Home, About, Services и Sitemap right с пунктами Partners, Support и Contact. Пункты меню должны ссылаться на соответствующие статьи. Для каждого из этих двух меню нужно создать позиции sitemap-left и sitemap-right и связать меню с позициями через новые модули Sitemap left и Sitemap right. При добавлении модулей на вкладке Advanced в поле Menu Class Suffix вставьте значение –sitemap, для того, чтобы в CSS стилях отличать этот тип меню от остальных.
Далее делаем вёрстку в блоке footer файла index.php:


В этом блоке используется несколько локализованных строк, давайте их добавим в файлы локализации, как мы делали в блоке логотипа:


Прописываем стили в template.css:

Показать код


В итоге внутренняя страница сайта должна выглядеть вот так:



Главная страница




Главная страница у нас уже создана. Наполнение ее контентом выходит за рамки создания шаблона Joomla!, однако мы попытаемся воссоздать полную картину из psd макета и наполним контентом главную страницу. Содержимым страница наполняется из панели администратора для того, чтобы владелец сайта мог зайти в эту панель и что-то изменить на странице, не изменяя код самого шаблона. Первым делом необходимо нарезать все изображения этой страницы и сохранить в папку images, которая находится в корне папки, где установлена Joomla!. Назовём эти изображения так:

home-1.png
home-2.png
home-3.png
home-4.png
home-5.png
clients-1.png
clients-2.png
clients-3.png
clients-4.png
clients-5.png
clients-6.png
clients-7.png
Далее, перейдите в панели администратора к форме редактирования главной страницы Content -> Article Manager -> Home и на вкладке Content нажмите Tools -> Source code и введите содержимое страницы:

Показать код


Теперь осталось стилизовать данный код.

Показать код


Сайдбар


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



Давайте добавим его в index.php перед вызовом контента страницы:


Этот блок будет выводиться на всех страницах, кроме главной. Здесь верстка состоит из двух частей: отображение навигации подменю и блок карты офисов.
Для полноты картины в качестве подменю предлагаю показать список всех постов на сайте. Подменю создается аналогично тому, как мы создавали другие виды меню. Создайте статьи под названиями: Lorem ipsum, Donec tincidunt laoreet, Vestibulum elit, Etiam pharetra, Phasellus placerat. Затем создайте новое меню под названием Submenu и добавьте в него вышеперечисленные страницы. После этого, создайте позицию submenu в templateDetails.xml и модуль Submenu, использующий эту позицию и меню Submenu. В свойствах модуля на вкладке Advanced укажите Menu Class Suffix: «-aside»
Блок карты особых вопросов не вызывает, не забудьте только добавить новый ключ локализации:


В качестве заглушки для карты создайте пустой файл sample.png и сохраните его в папку images в корне сайта Joomla!
В заключение, нам нужно добавить стили для вёрстки:

Показать код


Страница About us




Теперь давайте наполним содержимым страницу About us. По той же схеме, как мы наполняли главную страницу – подготовьте изображения и добавьте их в папку images сайта Joomla! Назовите изображения вот так:

about-1.png
about-2.png
team-Nobriga.jpg
team-Pittsley.jpg
team-Rousselle.jpg
team-Shoff.jpg
team-Simser.jpg
team-Tondrea.jpg
team-Venuti.jpg
team-Wollman.jpg

Далее перейдите в редактирование статьи в панели администратора и добавьте код через меню Tools -> Source code:

Показать код


И стили в template.css:

Показать код


Страница поиска




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

Показать код


Модуль поиска предусматривает, что в шаблоне должна быть иконка поиска для кнопки, но поскольку в дизайне ее нет, то придется добавить ее самим. Для этого найдите любую бесплатную иконку с изображением лупы и сохраните ее под названием search.png в папку images шаблона. Размер картинки должен быть 16х16 пикселей.

Страница печати


Помимо index.php в корне шаблона лежат еще 2 php файла. Первый из них – это сomponent.php. Этот файл отображает страницу печати, которую пользователь сможет открыть, кликнув на иконку печати в содержании каждой статьи. В самом начале мы отключили показ этих иконок в статьях через меню Content -> Article Manager -> Options -> Show Print Icon в панели администратора. Но, поскольку мы делаем универсальный шаблон, создать этот файл мы обязаны. Наполните его следующим содержимым:


Как вы видите, этот файл полностью повторяет структуру файла index.php. Отличие только в том, что мы убрали ненужные для печати блоки: шапку, футер и боковую колонку.

Страница ошибки




Последняя страница, которую осталось оформить – это страница вывода ошибки. Ее шаблон описывается в файле error.php. Код этого файла будет выглядеть следующим образом:


В целом структура здесь аналогична предыдущим страницам, но есть несколько нюансов. Во-первых, данный тип страницы не поддерживает конструкции вида «<jdoc:include type="…"/>», поэтому пришлось отказаться от всех модулей и даже динамического блока head, поэтому теги в блоке head прописаны вручную. В заголовке страницы появился новый ключ локализации: TPL_WHITESQUARE_ERROR со значением «Error». Не забудьте прописать его в файлах локализации. И в области контента страницы выводится сообщения с кодом и текстом ошибки.

Заключение


На этом создание шаблона Joomla! закончено. Готовый проект можно скачать здесь.

Ссылки на другие статьи о верстке этого шаблона:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
Верстка для самых маленьких. Верстаем страницу по БЭМу (xnim)
Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки (lexnekr)
Как сверстать тему для WordPress
Источник: https://habrahabr.ru/post/256635/
{/REPLACEMENT}

Структура шаблона Joomla - Joomla 1.5: Шаблоны, разметка и макеты вывода

Файлы и папки шаблона, общая структура

если кратко, то выглядит это следующим образом

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

  • /templates/my_template/
    • css/ - различные файлы стилей для шаблона (например reset.css, styles.css, ie.css и т. д.)
    • html/ - папка, в которой лежат переназначеные шаблоны для модулей и компонентов системы
      • modules.php - собственные chrome-функции
      • pagination.php - шаблон для постраничной навигации
      • com_content
      • com_search
      • mod_breadcrumbs
      • mod_search
      • ... и т. д.
    • js/ - файлы сценариев JavaScript (jquery.js, mootools.js, scripts.js)
    • images/ - картинки, необходимые для правильного отображения дизайна сайта
    • php/ - дополнительные файлы php
    • component.php - шаблон версии для печати
    • error.php - шаблон вывода фатальных ошибок
    • index.html - заглушка
    • *index.php - основной шаблон с разметкой всех блоков
    • offline.php - шаблон для отключенного сайта
    • params.ini - файл с текущими настройками (только для J!1.5)
    • raw.php - пустой шаблон, необходим для ajax
    • template_thumbnail.png - миниатюрный скриншот шаблона
    • *templateDetails.xml - метаданые шаблона (название, настройки, лицензия, авторство, описание и т. д.)

Элементы отмеченые звездочкой (*) обязательны для работы шаблона (для его минимального функционала).

а теперь обо всем подробно и по порядку

Шаблон должен быть сохранен в определенной структуре каталогов:

/templates/<имя_шаблона>/ /templates/<имя_шаблона>/css/ /templates/<имя_шаблона>/images/ /templates/<имя_шаблона>/js/ /templates/<имя_шаблона>/html/

Имя шаблона не может содержать пробелов и других специальных символов. Рекомендуем называть шаблон строчными латинскими буквами. В зависимости от операционной системы, экзотические комбинации символов могут стать главной причиной массы проблем. В добавок имя должно быть осмысленным. Здесь в качестве имени шаблона выбрано "my_template".

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

Основной файл разметки. Это -файл

/templates/my_template/index.php

Он должен заканчиваться на ".php", поскольку элементы динамического модуля Joomla должны интерпретироваться РНР.

Изображение предварительного просмотра. Файл картинки

/templates/my_template/template_thumbnail.png

содержит изображение предварительного просмотра вашего шаблона, которое предназначено для предпросмотра в менеджере шаблонов. Изображения предварительного просмотра имеют тип-png размером примерно 200x150 пикселей. Вы можете создать этот файл позднее, когда увидите готовый шаблон.

Метаданные шаблона.

/templates/my_template/templateDetails.xml

Файл представляет техническое руководство для инсталлятора шаблонов и содержит инсталляции для выбора шаблона в диспетчере шаблонов. Здесь вы специфицируете место, куда должны копироваться файлы, кто их автор, а также дополнительные метаданные о шаблоне. Во время последующей инсталляции этого файла инсталлятором Joomla, РНР читает его и копирует файлы в места, специфицированные XML-файлом. Для каждого файла, который применяется в шаблоне, соответствующий контейнер XML должен быть наполнен именем файла и корректным путем.

-файлы. Для разрабатываемого шаблона можно использовать несколько CSS-файлов. Какое имя вы дадите файлу CSS, и как создадите его — дело ваше. Однако для разных элементов CSS предусмотрены разные каталоги. Для первой попытки вам понадобится CSS-файл по имени /templates/my_template/css/template.css.

Графика, изображения, флеш. Здесь можно ввести определенные пользователем файлы изображений, которые понадобятся в шаблоне для дизайна. Инсталлятор затем скопирует эти файлы в папку images. Имя файла выглядит как

/templates/my_template/images/[определенный_пользователем_файл_изображения]

Версия для печати. Шаблон версии для печати для компонента.

/templates/my_template/component.php

Файл хранения настроек шаблона. (только для J!1.5) Через файл templateDetails.xml можно указать свои настройки. После сохранения настроек через Менеджер шаблонов, в папке появится файл

/templates/my_template/params.ini

Шаблон offline-страницы. Если сайт отключен через панель управления, то отобразиться именно этот шаблон.

/templates/my_template/offline.php

рейтинг: 8.6/10, голосов: 23

Источник: http://Joomla-Book.ru/development/creating-templates/files-and-folders-template
Еще интересное порево: