Создание собственного шаблона для Joomla 1.7 & 2.5

Шаблоны в CMS Joomla используются для быстрого изменения дизайна Вашего сайта. Для изменения дизайна сайта нужно установить и применить шаблон. Все шаблоны хранятся в папке templates, и каждый шаблон имеет собственный каталог, название которого соответствует названию шаблона.


1. Структура каталога шаблона

Как минимум шаблон для Joomla может состоять из 2-х файлов:

  • index.php — главный файл шаблона, который может содержать HTML-, CSS-, Javascript- и PHP-код.
  • templateDetails.xml — служебный файл шаблона, который содержит инструкции по установке шаблона (это XML-файл, описывающий все файлы, которые находятся в каталоге Вашего шаблона).

2. Создание шаблона

Перед тем как приступить к созданию шаблона, создайте каталог с названием будущего Вашего шаблона (В дальнейшем – mytemplate). Затем в каталоге mytemplate создайте каталог images, который будет хранить в себе все картинки Вашего шаблона, и каталог css, – для размешения файлов со стилями.

2.1 Файл index.php

Затем в главном каталоге mytemplate создайте файл index.html, после чего откройте его в текстовом редакторе и напишите эскиз сайта и посмотрите как он выглядит в браузере.

Пример:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
<table width="1042" height="322" border="1">
<tr>
<th height="117" colspan="2" scope="col">HEADER</th>
</tr>
<tr>
<th width="297" height="92" scope="row">MENU</th>
<td width="729" align="center"><strong> CONTENT</strong></td>
</tr>
<tr>
<th height="103" colspan="2" scope="row">FOOTER</th>
</tr>
</table>
</body>
</html>

На следующем шаге переименуйте ранее созданный Вами файл index.html в index.php. Затем тег <html> и секцию <head> в нем заменяем кодом:

<?php
/**
* @copyrightCopyright (C) Автор
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/csslesson.css" type="text/css" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
Теперь в местах, где должны быть выведены соответствующие части (блоки) страницы, нужно вставить инструкцию Joomla (PHP-код), которая имеет такой вид:
<jdoc:include type= "тип" name= "имя позиции" style="стиль"/>

a) Первая директива добавляет вывод метаданных, то есть заголовок страницы, описание страницы и т.д. (размещается в теге и имеет такой вид: <jdoc:include type="head" /> ).

b) Вторая директива выводит модули в пользовательской позиции, которая может принимать следующие значения:

  • atomic-topmenu — верхние модули (верхнее меню)
  • atomic-search — поисковой модуль
  • position-4 — левый модуль
  • position-8 — правый модуль

c) Третья директива выводит компонент — центральную часть страницы, в которой обычно отображается её содержимое:

<jdoc:include type="component" />

После чего наш файл index.php примет примерно такой вид:
<?php
/**
* @copyrightCopyright (C) Автор
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/style_components.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/csslesson.css" type="text/css" />
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="1042" height="322" border="1">
<tr>
<th height="117" colspan="2" scope="col"> <jdoc:include type="modules" name="position-15" style="xhtml"/> HEADER</th>
</tr>
<tr>
<th width="297" height="92" scope="row"> <jdoc:include type="modules" name="position-4" style="xhtml"/> LEFT MENU</th>
<td width="729" align="center"><strong> <jdoc:include type="component" /> CONTENT </strong></td>
</tr>
<tr>
<th height="103" colspan="2" scope="row">FOOTER</th>
</tr>
</table>
</body>
</html>

2.2 Файл templateDetails.xml

Листинг файла:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.7" type="template">
<name>НАЗВАНИЕ ШАБЛОНА</name>
<author>АВТОР</author>
<copyright>ИНФОРМАЦИЯ ОБ АВТОРСКИХ ПРАВАХ </copyright>
<authorEmail>EMAIL-АВТОРА</authorEmail>
<authorUrl>САЙТ АВТОРА</authorUrl>
<version>1.7.0</version> //ВЕРСИЯ ШАБЛОНА
<description>ОПИСАНИЕ ШАБЛОНА</description>
<creationDate>ДАТА СОЗДАНИЯ</creationDate>
<files>
<filename>index.php</filename>
</files>
<css>
<filename>css/template.css</filename>
</css>
<images>
<filename>images/logotip.gif</filename>
<filename>images/footer.png</filename>
<filename>images/background.jpg</filename>
</images>
<params>
<filename>language/en-GB.ini</filename> // Файлы с параметрами
</params>
</install>

После выполненных вышесказанных действий Вам нужно запаковать каталог шаблон в ZIP-архив с именем Вашего шаблона (Например: mytemplate). После чего шаблон готов к установке.

Чтобы установить шаблон на сайт переходим в панель управления Joomla, затем “Расширения” -> “Менеджер расширений” после чего выбираем наш архив из шаблоном и жмем «Загрузить и установить»,–как показано на рисунке снизу.

Если все успешно сделали, то будет выведена следующая надпись:

Если же произойдет ошибка, то, по всей видимости Вы допустили ошибку при создании шаблона.

После того как у Вас шаблон установился успешно перейдите “Расширения” -> “Менеджер шаблонов” среди списка стандартных шаблонов CMS Joomla найдите свой, затем отметьте его и нажмите «Использовать по-умолчанию». После чего перейдите на свой сайт и посмотрите, что у Вас получилось.

Надеюсь, что данная статья поможет Вам создать собственный шаблон для Joomla 1.7. Если у Вас возникнут какие-либо вопросы, — пишите.

Комментарии (0):

Комментариев, к данной статье, нет

Оставить комментарий:


* Введите Ваше имя


* Введите комментарий

Введите результат с картинки:

* Введите результат

Фото дня на Яndex


Озеро Кезенойам