Создание пустого шаблона и его установка, лишь первый шаг на пути к полноценному шаблону для Joomla. Теперь разберемся с созданием макета.

Предлагаю за основу взять следущий макет, которого достаточно для большинства задач.

Зеленые поля - это позиции нашего будущего шаблона. Теперь, на основе макета, создадим верстку в HTML. Зайдем через FTP на хостинг, в папку шаблона и откроем пустой файл index.php, который создавали ранее. В него необходимо внести следующий код:

<!DOCTYPE html>
<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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
</head>
<body>
<div class="container">
<div class="header">
<div class="top">
<jdoc:include type="modules" name="top" style="default" />
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<jdoc:include type="modules" name="mainmenu" style="default"/>
</div>
</div>
</div>
<div>
<jdoc:include type="modules" name="breadcrumb" style="default"/>
</div>
</div>
<div class="row">
<!-- Начало контента -->
<div class="span3">
<jdoc:include type="modules" name="left" style="default"/>
</div>
<div class="span6">
<jdoc:include type="message" /> 
<jdoc:include type="component" />
</div>
<div class="span3">
<jdoc:include type="modules" name="right" style="default"/>
</div>
<!-- Конец контента -->
</div>
</div>
</body>
</html>

Теперь нам нужно создать папку html  и разместить в ней файл modules.php, в котором написать следующее:

<?php
defined('_JEXEC') or die;
 
function modChrome_well($module, &$params, &$attribs)
{
  if ($module->content) {
    echo "<div class=\"well ". htmlspecialchars($params->get('moduleclass_sfx')) ."\">";
    echo "<div class=\"page-header\"><strong>".$module->title."</strong></div>";
    echo $module->content;
    echo "</div>";
  }
}
 
function modChrome_default($module, &$params, &$attribs)
{
  if ($module->content) {
    echo "<div class=\"module ". htmlspecialchars($params->get('moduleclass_sfx')) ."\">";
    echo "<div class=\"page-header\"><strong>".$module->title."</strong></div>";
    echo $module->content;
    echo "</div>";
  }
}
?>

Т.к. у нас появился новый файл и папка, нужно добавить в файл templateDetails.xml соответствующую запись, что бы вид у него стал таким:

<?xml version="1.0" encoding="utf-8"?>
 <extension version="1.6" type="template">
         <name>shablon_j3</name>
        <creationDate>25.10.15</creationDate> 
         <author>Evgeny Kruglov</author>
         <authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
         <authorUrl>http://Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorUrl>
         <copyright>8ke.ru</copyright>
        <license>GNU/GPL 2 or Later</license>
        <version>1.0.0</version>
     <description>TEMPLATE-J3</description>
         <files>
                 <filename>index.php</filename>
                 <filename>templateDetails.xml</filename>
                 <folder>images</folder>
                 <folder>css</folder>
                 <folder>html</folder>
         </files>
         <positions>
                <position>top</position>
                 <position>breadcrumb</position>
                 <position>left</position>
                 <position>right</position>
                 <position>top</position>
                 <position>user1</position>
                 <position>user2</position>
                 <position>user3</position>
                 <position>user4</position>
                 <position>footer</position>
         </positions>
 <languages folder="language">
        <language tag="ru-RU">ru-RU/ru-RU.tpl_shablon_j3.ini</language>
        <language tag="ru-RU">ru-RU/ru-RU.tpl_shablon_j3.sys.ini</language>
        <language tag="en-GB">en-GB/en-GB.tpl_shablon_j3.ini</language>
        <language tag="en-GB">en-GB/en-GB.tpl_shablon_j3.sys.ini</language>
 </languages> 
  </extension>

Вот, пожалуй, вы и разработали свой первый шаблон. Осталось все положить в архив zip и установить на наш сайт. Или все изменения, что описаны в этом матереале, сразу выполнять в папке шабона вашего сайта. 

Если вам понравился материал, поделитесь им в социальных сетях. Спасибо!

Вложения:
Доступ по ссылке (http://8ke.ru/files/createtemplate/template2.zip)template2.zip[Шаблон. Урок 2]2 Кб