Создание шаблона Joomla
Как сделать шаблон для Joomla
Целью этого руководства является введение в процесс создания шаблонов для Joomla!. Оно охватит области кода и необходимых файлов для создания простейшего шаблона. Код представлен таким образом, что он может быть вырезан и вставлен с минимальным количеством вмешательств.
Создание структуры каталогов
Для создания простейшего шаблона, создайте новую папку в папке шаблонов. Назовите её так, как хотели бы назвать шаблон. Например mynewtemplate.
Используя привычный вам текстовый редактор, создайте файлы index.php и templateDetails.xml. Чтобы всё было организовано, создайте две новых папки под названием images и css. В папке css создайте файл template.css.
Конечно, отличная идея, для начала поместить весь CSS код непосредственно в файл index.php, однако многие разработчики предпочитают поместить его в отдельный файл, который может быть связан с несколькими страницами по ссылке тега. Это может так же укоротить время загрузки страниц вашего сайта, так как отдельный файл может храниться в кэш памяти.
Это самый основной практический шаг. Опишите структуру папок и файлов:
- mynewtemplate/
- css/
- template.css
- images/
- index.php
- templateDetails.xml
Создание стандартного файла templateDetails.xml
Без этого файла Joomla не сможет определить ваш шаблон. Файл содержит ключевые метаданные шаблона.
Синтаксис файла разный для каждой версии Joomla. Для версии 1.5 используйте следующий:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
Для версий 1.6 и позднее используйте следующий вариант (замените version="1.6" на нужную вам)
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="template">
<name>mynewtemplate</name>
<creationDate>2008-05-01</creationDate>
<author>John Doe</author>
<authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
<authorUrl>http://www.example.com</authorUrl>
<copyright>John Doe 2008</copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>My New Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</extension>
Как вы видите, мы имеем блоки информации между тегами разметки (<element>). Лучшим выходом будет вырезать это и вставить в ваш файл templateDetails.xml и заменить соответствующие биты (такие как <имя> и <автор>).
Часть <files> должна состоять из всех файлов, которые вы используете. Элемент <folder> может служить для определения папок.
Оставьте позиции такими, какие они есть - это общий набор, так что позже вы сможете легко переключиться из стандартных шаблонов.
Создание простейшего файла index.php
Это руководство только для версии Joomla 1.5. Файл index.php становится основой любой страницы на сайтах Joomla. По сути, вы создаёте страницу как любую HTML страницу, но размещаете PHP код там, куда должен помещаться контент вашего сайта. Шаблон работает, помещая код Joomla в позиции модуля и секции компонента в шаблоне. Всё что добавляется в шаблон появляется на странице. Следующая страница покажет код, готовый к вставке в ваш дизайн.
Начало
Шаблон начинается со следующих линий:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Первая строчка остановит злодеев, которые захотят влезть в ваш код и напакостить в нём.
Вторая строка это декларация типа документа (DOCTYPE), которая сообщает браузеру и поисковым ботам какой используется тип HTML. Doctype, который используется выше это XHTML 1.0, который поддерживается большинством современных браузеров. Вы также можете использовать HTML5, новую версию, которая обладает потрясающей обратной совместимостью и содержит множество новых функций. Чтобы использовать HTML, смените doctype на:
<!DOCTYPE html>
Вам следует помнить что без взлома это не заработает на Internet Explorer8 или более ранних версиях. Изучите ситуацию и пожелания клиента, прежде чем определитесь с doctype’ом.
Третья строчка начнёт наш HTML документ и каркас будет содержать код сайта, который контролирует макет.
Заголовок
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>
Первая строка позволяет системе правильно определить информацию заголовка. Она включает название страницы, мета информацию, а также системы JavaScript. Остальное создаёт пути к двум листам системного стиля и непосредственно к вашему стилю (он называется template.css и находится в папке css в директории шаблона). Так что если ваш шаблон находится в
http://www.mysite.com/templates/my_template/ тогда css файлы пойдут в
http://www.mysite.com/templates/my_template/css/
Каркас
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
Удивительно, но этого достаточно! Да, схема простая, но работает. Всё остальное сделает Joomla!. Эти строки обычно называют заявлениями jdoc, указывающие Joomla пути выхода из системы.
Позиции модуля
Над линией, которая говорит имени =”top” добавляется позиция модуля, которая называется верхней и позволяет Joomla разместить модули в этот раздел Joomla. Линия “component” содержит все элементы и контент(собственно сам компонент) и она очень важна. Она находится в центре шаблона.
Примечание: вы можете добавлять собственные линии модулей в любых местах каркаса, но вам нужно добавить соответствующую линию в файл templateDetails.xml, который находится рядом с index.php вашего шаблона.
Заканчиваем
Завершается всё одним битом
</html>
Изображения
Если хотите добавить изображения в шаблон, сделайте это следующим образом:
<img src="/<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" class="customImage" />
Эта простая ссылка обеспечит путь к вашему шаблону.
Пользовательский CSS
Пользовательский CSS добавляется следующим образом:
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/styles.css" type="text/css" />
Каждая строка, которая добавляется должна быть отображена в файле шаблона templateDetails.xml
В итоге получаем:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
Тестирование шаблона
Найдите шаблон в менеджере шаблонов и отметьте его как шаблон по умолчанию.
В Joomla 1.5 ваш шаблон отобразится сразу в менеджере шаблонов, доступном в Расширения>Менеджер шаблонов.
В Joomla 1.6 вам предстоит сначала сообщить системе, что вы создали новый шаблон. Это функция называется поиск шаблонов и доступна здесь: Расширения>Менеджер расширений>Поиск. Нажмите на поиск, чтобы найти ваш шаблон, затем нажмите на установку и установите его. Теперь шаблон должен отобразиться в менеджере шаблонов.
Примечание: можете создать свой шаблон отдельно от Joomla и установить его как обычное расширение.
Заключение
Мы создали работающий шаблон. Выглядит пока что не особенно. Лучшее, что можно сейчас сделать, это начать экспериментировать с макетом.