Верстку делаем в Adobe Dreamweaver или любом текстовом редакторе. Располагаем шапку, боковые колонки, меню навигации и т.д. И начнем вот с такой структуры:
- index.html
- images/
- css/template.css
Потом с легкостью можно будет переименовать index.html в index.php и дописать несколько строк в нем, ничего не трогая в стилях (особенно если немало прописано путей до изображений).
Будем делать самый простой шаблон. Файл index.html имеет у нас следующий вид (не забываем оставлять комменты в коде):
Code:
<!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">
<head>
<link rel="stylesheet" type="text/css" href="css/template.css" />
</head>
<body>
<div class="wrap">
<div class="header">
<h1>Шапка</h1>
</div><!--/end header-->
<div class="leftcol">
Информация для левой колонки
</div><!--/end leftcol-->
<div class="content">
Центральная часть для будущего шаблона
</div><!--/end content-->
<div class="clr"></div>
</div><!--/end wrap-->
</body>
</html>
в template.css пишем (здесь только самые необходимые стили, остальные сами):
Code:
div.header{height:80px; background:#EEE; border-bottom:1px solid #CCC; margin:0 0 10px 0;}
div.wrap{width:1000px; margin:0 auto;}
div.leftcol{width:280px; float:left;}
div.content{width:700px; float:right;}
.clr{clear:both;}
Оформлением меню и прочих элементов пока не занимаемся. Сначала просто создаем каркас - что и где будет находиться.
Когда страница в html будет готова так, как вам нужно - пора приступать к следующему шагу.
Для того, чтобы Joomla распознала Ваш шаблон, необходимо создать в папке с шаблоном файл templateDetails.xml (обратите внимание на регистр - он тут важен), который будет содержать имя шаблона, название позиций, дату создания, информацию об авторе.
Минимальный набор строк следующий:
Code:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>MyTemplate</name>
<version>1.0</version>
<creationDate>2010</creationDate>
<author>Demetr</author>
<authorEmail> dmitriev@joomdesign.ruДанный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. </authorEmail>
<authorUrl>http://joomdesign.ru</authorUrl>
<copyright></copyright>
<license>GNU/GPL version 2</license>
<description>Описание шаблона</description>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
Теперь меняем расширение у index.html на index.php и открываем его для редактирования. Будут некоторые основы, которые пригодятся для вывода информации.
В самом начале файла запрещаем прямой доступ к файлу такой строчкой:
Code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
В head пишем:
Code:
<jdoc:include type="head" />
<?php $template=$this->baseurl."/templates/".$this->template ;?>
<link href="<?php echo $template?>/css/template.css" rel="stylesheet" type="text/css" />
Переменная $template часто используется, чтобы определить путь до шаблона.
Далее. Находим место под левую колонку и приводим ее к такому виду:
Code:
<?php if($this->countModules('left')) {?>
<div class="leftcol>
<jdoc:include type="modules" name="left" style="xhtml" />
</div><!--/end leftcol-->
<?}?>
Эта конструкция проверяет наличие модулей в позиции left. Если в нем что-то есть, то выводим модули, если же нет - div.leftcol не будет отображаться. Вывод пустых div'ов вовсе не обязателен для нас.
Таким образом возможно выводить любое количество модулей.
Самое основное содержимое выводится вот такой конструкцией:
Code:
<jdoc:include type="component" />
Перед ней необходимо добавить еще одну строчку, которая будет выводить системные сообщения, например: "Спасибо, Ваше сообщение отправлено" или "Логин и пароль неверны" и т.д. Заключительный вывод будет иметь следующий вид:
Code:
<jdoc:include type="message" />
<jdoc:include type="component" />
Представим ситуацию, что на некоторых страницах в левой колонке вы ничего не выводите. Тогда необходимо проверять в начале файла index.php - загружены ли модули, и выводить центральную колонку в зависимости от их загрузки; если ничего нет, то логично, что центральную колонку надо растянуть по всей ширине, т.е. присвоить div'у другой id или class.
Эту задачу решаем примерно вот таким методом:
Code:
<? if($this->countModules('left')) $content='content'; else $content='contentlfull';?>
дословно будет так: если в позиции left есть загружаемые модули, то переменной $content присваивается значение 'content', во всех остальных случаях - contentfull.
Теперь; там, где выводим центральную колонку вместо старого вывода:
Code:
<div class="content">
Центральная часть для будущего шаблона
</div><!--/end content-->
Будем выводить вот таким образом:
Code:
<div class="<?echo $content; ?>">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div><!--/end content-->
Таким образом - шаблон станет полностью динамичным и будет подстраиваться под любые ваши пожелания.
Безусловно, в статье описан лишь самый необходимый минимум. Остальное - определяется вашими задачами и... воображением.
