Как создать простой шаблон для Joomla 1.5
Сначала, откроем директорию “шаблонов” в вашей Joomla. Потом создадим подпапку в ней, назвав её “tutorial_template”. Все файлы нашего шаблона будут, находится в этой папке.
В новом директории, создадим файл index.php, и другой файл templateDetails.xml. Потом создадим папку css и в ней – файл template.css. Чтобы создавать эти файлы, можно пользоваться простым блокнотом, то есть, notepad-ом, и хранить их на своём компьютере, и загрузить потом через FTP или Менеджер Файлов на cPanel.
Итак, основные файлы, с помощью которых шаблон Joomla должен функционировать должным образом, это:
- index.php – определяет доступные положения модуля и путь к файлу Stylesheet. Это – главная “секция” вашего шаблона;
- templateDetails.xml – файл системы, который содержит информацию о вашем шаблоне для Joomla;
- css/template.css – stylesheet файл вашего шаблона. Он определяет внешний вид вебсайта;
Как только сделано, нужно установить новый шаблон по умолчанию. Это делается в менеджере шаблонов, где должен появиться новый шаблон. Просто поставьте галочку напротив и нажмите на звездочку справа вверху. На английском можно прочитать боле подробно тут – http://www.siteground.com/tutorials/joomla15/joomla_templates.htm
Теперь, посмотрим, что должен содержать каждый файл:
Файл index.php должен начаться с:
<!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" />
</head>
Эти строки декларируют начало кода HTML вебсайта. Этот PHP код –
<jdoc:include type = "head"/>
включает в страницу содержание HEAD (название страницы, meta, ключевые слова, и т. д.), что мы добавили в панели администратора.
Затем, нам надо добавить часть “тела”, или body вебсайта:
<body>
<jdoc:include type="component" />
</body>
</html>
<jdoc:include тип = "component"/> – строка показывает главное содержание данной страницы.
Теперь, время протестировать шаблон. Сохраним index.php файл и логин в панели администратора Joomla. От этого, сделаем новый “tutorial_template” неплатеж шаблона для вашего вебсайта. Для получения дополнительной информации о том, как сделать это Вы можете обратиться к нашей обучающей программе о том, как изменить шаблон по умолчанию Joomla 1.5.
Наша страница должна выглядеть типа так:
Страница включает только статьи без каких бы то ни было стилей и модулей. Теперь, давайте добавим некоторые модули. Отредактируйте index.php и измените строки между
и вот так:
<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div>
<div id="content" class="float"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div>
</div>
<jdoc:include type="modules" name="left" /> – строка сообщает Joomla, где вставить модули, помещенные в “левое” положение.
Мы только что добавили top, left, right и footer положения в шаблон.
Заметьте, что мы окружили то, что в <div> и добавили информацию об их классах (classes) и идентификаторах (id).
Кроме того, мы поместили это в “контейнер”, который позволяет нам задавать основные параметры страницы. Параметры классов определены в template.css. В этот момент index.php должен быть выглядеть так:
<!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" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float"><jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html>
Теперь надо отредактировать templateDetails.xml. В это файл скопируйте и вставить следующий код:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>tutorial_template</name>
<creationDate>02/2008</creationDate>
<author>SiteGround</author>
<authorEmail>templates@siteground.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>SiteGround</copyright>
<license>SG TOS</license>
<version>1.0.0</version>
<description>Basic Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
Рассмотрим подробнее код файла templateDetails.xml:
<install version="1.5" type="template"> – Эта строка указывает на версию Joomla, для которой разработан шаблон. Это позволит инсталлятору шаблона правильно его установить, если создадите архив шаблона и примените его еще где-то на Joomla.
<name>tutorial_template</name> – Эта строка указывает на название вашего шаблона. В нашем случае это – “tutorial_template”;
<creationDate> 02/2008 </creationDate> – Эта строка показывает дату создания шаблона;
<author>SiteGround</author> – Эта линия определяет автора шаблона;
<authorEmail>user@yourdomain.com</authorEmail> – Добавлена ваша электронная почта в этой строке;
<authorUrl>http://www.siteground.com</authorUrl> – Эта строка показывает создателя шаблона;
<copyright>SiteGround</copyright> – в этой строке – копирайт;
<license>SG TOS</license> – лицензии, по которой создан шаблон;
<version>1.0.0</version> – версия шаблона;
<description>Basic Joomla Template</description> – Здесь можно добавить дополнительную информацию о шаблоне;
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
Эти строки уточняет, какие файлы использованы в шаблоне.
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
Эти строки определяют положения, которые активированы в шаблоне.
Следующий шаг – добавление стиля в шаблон. Сначала, откройте index.php и добавьте следующую строку как раз перед </head>:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/tutorial_template/css/template.css" type="text/css" />
Эта строка указывает на месторасположения файла stylesheet.
Теперь, отредактируем css/template.css, добавив следующие строки в него:
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
background: #FFFFFF;
}
#container {
width:960px;
margin: auto;
background-color: #f4f9fc;
border: 1px solid #e2e2e2;
text-align: left;
}
#header {
text-align: center;
background-color:#f4f9fc;
height: 80px;
}
#content {
width: 598px;
text-align: left;
background-color:#f4f9fc;
padding: 5px;
}
#sidebar_left {
text-align: center;
background-color:#f4f9fc;
width: 165px;
border-right: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#sidebar_right {
background-color:#f4f9fc;
text-align: center;
width: 165px;
border-left: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2;
padding: 5px;
}
#footer {
background-color:#f4f9fc;
text-align:center;
border-top: 1px solid #e2e2e2;
border-botom: 1px solid #e2e2e2;
padding: 5px;
}
Эти строки добавят хоть какой-то дизайн в разные части вебсайта. Чтобы вносить изменения в дизайн сайта на Joomla, нужно знать CSS.
Ваш шаблон теперь готов, и сейчас вебсайт выглядит так:
А теперь все зависит от вашего воображения – вы можете создавать такой дизайн, какой захотите. Можно добавить различные положения модуля, поиграть с css, добавлять изображения для фона и еще много чего.
Пример сайта, работающего на Joomla – www.domvcanade.ru
