Для того, чтобы начать интеграцию html шаблона в cms Joomla нам понадобится стандартная сборка Joomla со стандартными шаблонами, этого для начала хватит.

1) В папке templates создадим папку, где будет новый шаблон (естественно название папки без пробелов, русских и спец символов).

2) Из шаблона beez копируем папку html, в папку, которую только что создали. В ней хранится второстепенная вёрстка компонентов и модулей (грубо говоря, шаблоны компонентов и модулей). Почему именно из шаблона beez? Потому что там шаблон компонента материалов и прочего сверстаны DIV-ами.

3) Из шаблона “rhuk_milkyway” я беру только файлы “index.php“,”templateDetails.xml“. Этого вполне достаточно для создания простого шаблона. Из файла “index.php” я многое удаляю и на начало разработки файл выглядит следующим образом:

  1. <?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  4. <jdoc:include type="head" />
  5. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
  6. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
  7. <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" rel="stylesheet" type="text/css" />
  8.  
  9. <?php if($this->countModules(‘left’)) : ?>
  10.         <jdoc:include type="modules" name="left" style="rounded" />
  11. <?php endif; ?>
  12.  
  13. <jdoc:include type="message" />
  14. <jdoc:include type="component" />

скачать этот пример

4) Теперь рассмотрим файл “templateDetails.xml“, он нужен для отображения данных в менеджере шаблона и для установки шаблона из архива. Пример из стандартного шаблона был урезан до следующего:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
  3. <install version="1.5" type="template">
  4.         <name>rhuk_milkyway</name>
  5.         <creationDate>11/20/06</creationDate>
  6.         <author>Andy Miller</author>
  7.         <authorEmail>rhuk@rockettheme.com</authorEmail>
  8.         <authorUrl>http://www.rockettheme.com</authorUrl>
  9.         <copyright></copyright>
  10.         <license>GNU/GPL</license>
  11.         <version>1.0.2</version>
  12.         <description>TPL_RHUK_MILKYWAY</description>
  13.         <files>
  14.                 <filename>index.php</filename>
  15.                 <filename>templateDetails.xml</filename>
  16.                 <filename>template_thumbnail.png</filename>
  17.                 <filename>params.ini</filename>
  18.                 <folder>images</folder>
  19.                 <folder>css</folder>
  20.         </files>
  21.         <positions>
  22.                 <position>breadcrumb</position>
  23.                 <position>left</position>
  24.                 <position>right</position>
  25.         </positions>
  26. </install>
  27.  

Скачать пример xml файла

name – имя шаблона
creationDate – дата создания шаблона
author – автор
authorEmail – e-mail автора
authorUrl – ссылка на сайт автора
copyright – описание лицензионного соглашения
license – тип лицензии
description – описание шаблона
files – файлы, которые содержит папка с шаблоном
files → filename – название файла
files → fodler – название папки с файлами (файлы будут установлены, без их указания)
positions – предустановленные названия позиций для расположения модулей

5) Следующим шагом можно уже интегрировать HTML шаблон, скопируйте HTML разметку в index.php (также не забудьте заменить пути до изображений, которые будут вставлены напрямую) . Не забудьте отредактировать css файл таким образом, чтобы путь до фонового изображения был относительным к css файлу.