joomla

Как создать простой шаблон для Joomla 1.5

Сначала, откроем директорию “шаблонов” в вашей Joomla. Потом создадим подпапку в ней, назвав её “tutorial_template”. Все файлы нашего шаблона будут, находится в этой папке.

В новом директории, создадим файл index.php, и другой файл templateDetails.xml. Потом создадим папку css и в ней – файл template.css. Чтобы создавать эти файлы, можно пользоваться простым блокнотом, то есть, notepad-ом, и хранить их на своём компьютере, и загрузить потом через FTP или Менеджер Файлов на cPanel.

Итак, основные файлы, с помощью которых шаблон Joomla должен функционировать должным образом, это:

  1. index.php – определяет доступные положения модуля и путь к файлу Stylesheet. Это – главная “секция” вашего шаблона;
  2. templateDetails.xml – файл системы, который содержит информацию о вашем шаблоне для Joomla;
  3. 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, добавлять изображения для фона и еще много чего.