Вслед за самой системой и контентом, шаблоны joomla занимают третье место в списке самых важных составляющих сайта на базе Joomla! В этой статье мы более подробно изучим, как создать шаблон для joomla, рассмотрим строение шаблонов, выполнив в качестве примера пошаговое упражнение по созданию собственного простого шаблона.
Мы будем строить шаблон на основе Twitter Bootstrap — начиная с версии Joomla 3, этот набор инструментов формирует основу пакета для создания пользовательского интерфейса в Joomla. Тем не менее, даже если вы решите воспользоваться другими инструментами, отличными от Bootstrap, концепции и процедуры останутся теми же.
Базовая структура шаблона
Веб-страницы, которые вы видите в своем браузере, состоят из кода HTML (HyperText Markup Language, гипертекстовый язык разметки), который, в свою очередь, взаимодействует с другими файлами, такими как файлы изображений, каскадные таблицы стилей (Cascading Style Sheets, CSS) и сценарии JavaScript (js). PHP — это язык программирования, предназначение которого — упрощать создание динамических страниц.
В Joomla базовую структуру HTML-кода страниц определяет именно РНР, основываясь на шаблонах, в частности шаблонном файле index.php. Если вы откроете файл index.php из любого шаблона, например »eez3, то увидите, что он довольно сложен и содержит множество элементов. Коммерческие шаблоны зачастую оказываются еще более изощренными. Прежде чем мы углубимся в детали работы с шаблонами, полезно освежить в памяти знания о базовой структуре HTML-страницы и о том, как устроен файл index.
Примером простейшей HTML-страницы служат файлы index.html, которые можно обнаружить в любой папке установки Joomla!. Если вы в своем браузере перейдете по адресу http//мой домен.com/components/index, html, то увидите пустую страницу. В этих файлах содержится следующий код:
<html>
<body>
</body>
</html>
Скопируйте такой файл в папку templates/ourtemplate. Это абсолютный минимум кода, который должен содержаться в странице HTML, однако мы настоятельно рекомендуем вам добавить еще два фрагмента — тег head и тип документа. Тег head состоит из двух частей и выглядит как <head></head>; его необходимо вста¬вить между тегами <html> и <body>:
<html>
<head>
</head>
<body>
</body>
</html>
Мы используем отступы, чтобы сделать файл более читабельным, а также чтобы было удобнее проверять, не забыли ли мы какие-нибудь теги. Создайте в той же папке файл index.php. Пока что в него следует поместить точно такой же текст, как в предыдущем файле. Теперь, если вы перейдете по адресу http://мой_домен.соm/ templates/ourtemplate/index.php, то увидите пустую страницу.
Для визуализации веб-страниц используется код HTML, но в действительности существует несколько вариаций HTML. Новые шаблоны, которые обычно предлагаются для Joomla! 3, в большинстве своем написаны на HTML5. В Joomla! 2.5 большая часть шаблонов использовала XHTML (Extensible HyperText Markup Language — расширяемый гипертекстовый язык разметки). Вы должны сообщить браузеру, какой вариант применяется в вашем шаблоне.
Это делается с помощью тега ! DOCTYPE, поэтому он почти всегда встречается в файлах index.php. Этот тег определяет набор стандартов, который будет использоваться для валидации кода HTML (или XHTML) на странице. Чаще всего в шаблонах Joomla! 3 используется обычный тип HTML, а в шаблонах Joomla! 2.5 — так называемый переходный стандарт XHTML 1.0, но разработаны и другие стандарты. Таким образом, этот тег обычно добавляют для указания типа.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
Для Joomla! 3 в большинстве ситуаций он выглядит очень просто:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Существует несколько типов документа, среди которых вы можете выбрать желаемый; кроме того, на веб-сайте http://www.w3.org предлагается несколько опций. Там же вы найдете службу валидации, которая сможет проверить, удовлетворяет ли ваш сайт требованиям стандартов для выбранного типа документа.
Начиная с этого момента, между файлами Joomla index.php и index.html начинают возникать более существенные различия.
Простая в использовании программа для создания резервных копий на Microsoft SQL Server и Azure баз данных. Скачать программу можно здесь...
продолжение:
Добавление содержимого в шаблон Joomla!
Добавление templateDetails.xml в шаблон
Добавить позицию модуля в шаблон joomla
Добавление таблицы стилей joomla