Минимум шаблон должен иметь два файла:
- index.php—основной файл
- templateDetails.xml—XML–файл с помощью которого можно получить информацию о шаблоне
Шаблоны хранятся на сервере в папке template.
Теперь создадим папку с названием шаблона (в нашем случае new) и разместим ее в директории template.
Далее открываем блокнот и записываем нижеприведенный код:
<html>
<head>
<jdoc:include type="head"/>
</head>
<body>
<jdoc:include type="message"/>
<div class="center" align="center">First template Joomla</div>
<jdoc:include type="modules" name="debug"/>
</body>
</html>
Затем сохраняем его под именем index.php в папку template.
Данный файл упрощен для лучшего восприятия.
Разберем по пунктам:
- <jdoc:include type="head"/>–используется для вставки информации о сайте в заголовок
- <jdoc:include type="modules" name="debug"/>–относится к отладке модулей (сама ничего не отображает)
Для завершения шаблона создадим XML–файл.
Данный файл описывает шаблон.С помощью блокнота создадим файл templateDetails.xml и сохраним его в каталог new.
<?xml version="1.0" encoding="windows–1251"?>
<install version="1.5" type="template">
<name> First template </name>
<description>
Template for Joomla
</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
</install>
Установка шаблона
1.Переходим в Менеджер шаблонов используя меню "Расширения".
2.В списке шаблонов появляется наш шаблон с именем First template
3.Выделяем шаблон и нажимаем кнопку "По умолчанию".Затем открываем браузер и переходим на главную страницу сайта.
Если все нормально,то мы увидим строку,которую мы написали в index.php—First templte Joomla
Добавление модулей и компонентов
В файле index.php после строки <div class="center" align="center">First template Joomla>/div> добавим:
- <jdoc:include type="modules" name="user1" style="xhmtl"/>
//модуль user1 показывает заголовок "Последние новости" и список последних статей - <jdoc:include type="component"/>
//добавляет компонент,который отображает текст на главной странице
Создаем шаблон-болванку
Так как большинство шаблонов создается с помощью изменения уже сущесвующих шаблонов, например, шаблон "мобильный мир",то сделаем болванку с помощью,которой вы сможете создавать свои шаблоны.
Кроме рассмотренных двух файлов шаблона (index.php,templateDetails.xml) также используются дополнительные файлы:
- template_thumbnail.png
//скриншот,который представляет внешний вид шаблона (обычно 140 пикселей по ширине и 90 пикселей по высоте) - template.css
//каскадные таблицы стилей шаблона - images
//в данный каталог размещаются все изображения используемые в шаблоне
index.php
Данный файл представляет собой код разметки HTML и код на языке PHP,который определяет размещение элементов на странице и их внешний вид.
Рассмотрим заголовок.
<?php
//файл шаблона не должен вызываться напрямую
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
?>
<!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; ?>">
<head>
<jdoc:include type="head"/>
<link rel="stylesheet" href="templates/<?php echo $this->template?>/css/template.css" type="text/css"/>
</head>
- DOCTYPE—данное объявление определяет как страница будет отображаться браузером
- <?php echo $this–>language; ?>—сообщает информацию о языке сайта
- <jdoc:include type="head" />—эта строка включает в заголовок дополнительную инфо(большая чать создается динамически)
- далее содержатся ссылки на файлы CSS шаблона (system.css,general.css,template.css)
Тело шаблона
<body>
<?php echo $app->getCfg('sitename');?><br/>
<jdoc:include type="module" name="breadcrumbs"/>
<jdoc:include type="modules" name="top"/>
<jdoc:include type="modules" name="left"/>
<jdoc:include type="component" options="rounded"/>
<jdoc:include type="modules" name="right"/>
<jdoc:include type"modules" name="footer"/>
</body>
</html>
В тело документа мы добавили шесть строк.
Посмотрим,что они обозначают:
- Название сайта
- Хлебные крошки (breadcrumbs) указывают путь к открытой странице
- Модуль вверху
- Модули слева
- Основная часть страницы
- Модули справа
Модули просто загружаются на страницу.Их размещение и оформление осуществляется с помощью средств CSS.
CSS для размещения элементов
Создадим эластичный шаблон т.е. сайт будет занимать всю ширину экрана.
Оттолкнемся от блочной разметки страницы.Возьмем каждый элемент в теле документа в обертку тегов div.
<body>
<div id="page">
<div id="header">
<?php echo $mainframe->getCfg('sitename');?>
<jdoc:include type="module" name="breadcrumbs"/>
<jdoc:include type="modules" name="top"/>
</div>
<div id="sidebar_left">
<jdoc:include type="modules" name="left"/>
</div>
<div id="content">
<jdoc:include type="component" options="rounded"/>
</div>
<div id="sidebar_right">
<jdoc:include type="modules" name="right"/>
</div>
<div id="footer">
©<?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>
</div>
</div>
</body>
</html>
templateDetails.xml
Как уже говорилось данный файл содержит в себе указатели на все файлы используемые в шаблоне.
<?xml version="1.0" encoding="windows–1251" ?>
<install version="1.5" type="template">
<name>New</name>
<version>1.0</version>
<creationDate>01/06/2011</creationDate>
<author>Victor Kolomeitsev</author>
<authorEmail>work@ulakrutka.ru</authorEmail>
<authorUrl>http://joomla.ulakrutka.ru</authorUrl>
<copyright>2011</copyright>
<license>GNU/GPL</license>
<description>Template for Joomla</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>style/template.css</filename>
<filename>images/fn.jpg</filename>
<filename>images/paper.jpg</filename>
</files>
</install>
CSS для эластичного шаблона
body
{
color:#000000;
background:url(../images/fn.jpg);
}
//картинку для фона взял такую→
(fn.jpg)
#page
{
margin-top:20px;
width:100%;
}
//задан отступ страницы сверху→20px и ширина равная ширине браузера
#header
{
background:url(../images/paper.jpg);
width:100%;
height:100px;
text-align:center;
border:#000000 solid 2px;
-moz-box-shadow:-px 7px 10px #000;
-webkit-box-shadow: 7px 7px 10px #000;
box-shadow:7px 7px 10px #000;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:26px;
-khtml-border-radius:10px;
}
//задан фон блока в виде →
(paper.jpg)
//размещение блока справа→float:right
//ширина блока 100%
//высота блока 100px
//текст по центру→text-align:center
//размер текста→font-size:40px
//дальнейший код задет рамку,тень,закругление углов для разных браузеров
#sidebar_left
{
background:url(../images/paper.jpg);
float:left;
width:19%;
min-height:900px;
color:#FFFFFF;
border:#000000 solid 2px;
-moz-box-shadow:7px 7px 10px #000;
-webkit-box-shadow: 12px 17px 10px #000;
box-shadow:7px 7px 10px #000;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:26px;
-khtml-border-radius:10px;
margin:10px 0 0 0;
}
#content
{
background:url(../images/paper.jpg);
min-height:900px;
width:60%;
overflow:hidden;
float:left;
margin:10px 0 0 8px;
border:#000000 solid 2px;
-moz-box-shadow:7px 7px 10px #000;
-webkit-box-shadow: 12px 17px 10px #000;
box-shadow:7px 7px 10px #000;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:26px;
-khtml-border-radius:10px;
}
//чтобы разрыв текста лучше смотрелся (при изменение размеров окна браузера) задаем параметр→overflow:hidden
#sidebar_right
{
background:url(../images/paper.jpg);
float:right;
width:19%;
overflow:hidden;
min-height:900px;
margin:19px 0 0 0;
color:#FFFFFF;
border:#000000 solid 2px;
-moz-box-shadow:7px 7px 10px #000;
-webkit-box-shadow: 12px 17px 10px #000;
box-shadow:7px 7px 10px #000;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:26px;
-khtml-border-radius:10px;
}
#footer
{
width:100%;
height:20px;
background:url(../images/paper.jpg);
float:left;
clear:both;
text-align:center;
margin:5px 0 0 0;
border:#000000 solid 2px;
-moz-box-shadow:7px 7px 10px #000;
-webkit-box-shadow: 7px 7px 10px #000;
box-shadow:7px 7px 10px #000;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:26px;
-khtml-border-radius:10px;
}
Должно получится примерно так:
Чем отличается версия 1.6 от предыдущих
