Главная » Файлы » Как создать сайт » На JOOMLA
Создание шаблона для Joomla 3: верстка из HTML макета
01.12.2017, 06:54

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

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

<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>mail@mail.mail</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 и её форум.

Категория: На JOOMLA | Добавил: ottoFonBEGER
Просмотров: 367 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Войдите:
avatar
close