Создание базового шаблона Joomla
Вступление
Данное руководство дает базовые понятия о том, с чего начинается создание шаблона для Joomla. Оно охватывает важные файлы и код, необходимый для создания базового шаблона. Весь код шаблона будет представлен ниже, поэтому вы с легкостью можете скопировать его и вставить, внеся небольшие изменения.
Создание структуры файлов и папок
Для того, чтобы создать базовый шаблон, создайте новую папку в папке шаблонов Joomla (templates) и назовите ее, например mynewtemplate.
Используя любимый текстовый редактор создайте файлы index.php и templateDetails.xml. Так же необходимо создать две папки images и css, в папке css создайте файл template.css
Хотя и допускается описывать стили непосредственно в самом index.php файле, но настоятельно рекомендуется выносить стили в отдельный css файл, который подключается на страницу посредством тега <link>. Это так же может значительно сократить время загрузки страниц, так как отдельный фал можно кешировать.
Основная структура файлов и папок
Структура файлов шаблона выглядит так:
- image/
- index.html
- css/
- index.html
- index.html
- index.php
- templateDetails.xml
image - папка для изображений, css - папка для стилей, index.html - файл-заглушка (служит для безопасности, предотвращает просмотр содержимого папки через браузер), templateDetails.xml - метаданные шаблона, ну и, собственно, сам index.php - основной файл шаблона, в котором будут созданы позиции и основная разметка.
Обратите внимание на то, что html-заглушка лежит во всех директориях шаблона, это нужно для защиты от просмотра содержимого папки.
Создание основного файла 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>
Для версии 2.5 и старше:
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.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>
</extension>
Итак, как вы видите, мы задали всю информацию между тегами (<элемент>). Проще всего будет скопировать вышестоящий код и вставить его в свой templateDetails.xml, внеся свои изменения (такие как <name> и <author>).
Часть <files>должна содержать все файлы, которые вы будете использовать. Возможно вы еще не знаете какие точно файлы будут использоваться в шаблоне, вы в любой момент можете обновить и дополнить файл. Элемент <folder> служит для объявления всех папок шаблона.
Позиции оставьте как есть - это стандартный набор, благодаря чему вы легко сможете переключиться на ваш шаблон со стандартного.
Создание базового index.php файла.
Данное руководство для версий Joomla! CMS 2.5 и 3.x
Файл index.php станет ядром всех страниц сайта, которые будут созданы Joomla. По сути, вы должны создать страницу, так же как вы создаёте любую страницу HTML, но поместить PHP код там, где должен быть контент вашего сайта. Шаблон добавляет сгенерированный Joomla код в заданные позиции модулей и секцию component, указанных в вашем шаблоне. Все, что добавлено в шаблон, будет выводится на всех страницах, за исключением того, что будет сгенерировано Joomla в соответствующие секции (или пользовательский код).
Ниже представлен скелет кода страницы, который вы можете скопировать в свой шаблон.
Начало
Любой шаблон Joomla начинается со следующих строк.
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
Первая строка нужна для предотвращения попыток взлома, она предотвращает просмотр кода страницы. Вторая строка сообщает браузеру какой тип документа используется на странице. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу. Использование doctype HTML 5 или выше, во многом обратно совместима с предыдущими версиями HTML, но так же позволяет использовать новые нововведения. Вы должны знать, что этот тип документа не поддерживается в Internet Explorer 8 и более ранних, без специального "хака". Возможно вам придется подумать о том какой тип документа лучше использовать в той или иной ситуации, или учесть предпочтения ваших клиентов. Однако HTML 5 используется в Joomla 3.x и выше из коробки.
Третья строка - это не что иное, как начало нашего HTML документа, с описанием, какой язык используется на страницах сайта. HTML документ разделен на две части: head и body. В head будет содержаться информация о странице (мета теги), а body содержит код страницы.
Head
<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>
Первые строки нужны для того, чтобы Joomla корректно выводила информацию тега head. Она включает в себя заголовок страницы, все мета-теги, а также здесь подключается JavaScript. Остальные строки подключают две системные таблицы стилей (CSS), а также вашу собственную (если она называется template.css и располагается в папке css вашего шаблона. Например, если ваш шаблон http://www.mysite.com/templates/my_template/, то стили будут расположены в папке http://www.mysite.com/templates/my_template/css).
Body
<body> <jdoc:include type="modules" name="top" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="bottom" /> </body>
Удивительно, но это все! Конечно же это только базовый шаблон страницы, но и этого достаточно для того, чтобы он работал. Все остальное сделать Joomla! В этих строках, обычно, вызывается JDoc (метод отображения содержимого (модуля) на странице), указывающий Joomla о необходимости вывода данных из определенных частей (модулей) системы. Примечаение: Убедитесь, что в данном шаблоне, вывод модуля меню осуществляется в позицию "top".
Позиции модулей
Выше в строке, содержащей name="top", добавляется позиция модуля названная "top", позволяющая добавлять модуль в эту секцию шаблона. Строка Type="component" содержит в себе все статьи и основной контент страницы (на самом деле, это Component, своего рода базовое расширение Joomla) и она очень важна. Он располагается в центре страницы.
Примечание: Вы можете добавить строки своего модуля в body там, где захотите, но вы должны добавить соответствующие строки в templateDetails.xml, который лежит рядом с index.php вашего шаблона.
Завершающий этап
Завершите его последней строкой:
</html>
Пользовательское изображение
Если вы хотите добавить какое-то изображение в шаблон, вы должны сделать следующее:
<img src="/<?php echo $this->baseurl; ?>/images/stories/myimage.png" alt="Custom image" class="customImage" />
Здесь переменная baseurl подставит путь к вашему шаблону за вас.
Пользовательский 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 ваш шаблон будет сразу доступен в Менеджере Шаблонов (Template Manager) Joomla, доступный в меню Расширения -> Менеджер шаблонов (Extensions -> Template Manager.).
В версии Joomla 2.5 и более поздних, вы сначала должны сообщить Joomla о том, что вы создали новый шаблон. Эта функция вызывается через Поиск Расширений (Discover Extensions), вызываемая через Расширения - > Менеджер Расширений -> Поиск (Extensions -> Extension Manager -> Discover) (т.е. вкладка поиск). Нажмите на Поиск, (т.е. на кнопку Поиск) чтобы найти ваш шаблон, затем нажмите Установить, чтобы установить его. Теперь ваш шаблон должен появиться в Менеджере Шаблонов, вызываемый через Расширения -> Менеджер Шаблонов (Extensions -> Template Manager).
Внимание: Вы можете создавать шаблон отдельно от Joomla и просто установить его как любое расширение.
Совет: Есть несколько способов, которые позволяют предварительно посмотреть, как будет выглядеть ваш шаблон - это или вставить стили непосредственно в тег head вашего шаблона, или временно напрямую подключить таблицу стилей через мета-тег link.
Упаковка шаблона для установки