Как сделать из обычного шаблона шаблон joomla





Как сделать из обычного шаблона шаблон joomla
Как сделать из обычного шаблона шаблон joomla

Подготовка собственного шаблона для 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></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, добавив в него такой код.

<?php defined('_JEXEC') or die; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <div id="header"> <div class="inh"> <?php if ($this->params->get('logo')) : ?> <img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($this->params->get('logo')); ?>" alt="MyLogo" /> <?php endif;?> <jdoc:include type="modules" name="top" style="xhtml" /> <p>Заголовок</p> </div> </div> <div id="content"> <div class="inc"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> <div id="footer"> <div class="inf"> <jdoc:include type="modules" name="footer" style="xhtml" /> </div> </div> </body> </html>

Основную часть кода составляет знакомый нам по этому справочнику 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 и её форум.


X


Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Как сделать из обычного шаблона шаблон joomla

Похожие новости:


  • Хенд мейд подарки к юбилею
  • Жасмин комнатный размножение в домашних условиях
  • Схема для вязания крючком чехла на кружку
  • Схема по бисероплетению машина
  • Схема растянутого шкалы вольтметра