Пошаговое создание шаблона с адаптивной вёрсткой на основе Twitter Bootstrap

Joomla шаблоны

Перед тем как мы начнем, для лучшего понимания сути урока, я хотел бы обратить внимание читателя на суть системы шаблонизации CMS Joomla - как это устроено изнутри и по какому принципу происходит подбор шаблона. Если вы обладаете соответствующими навыками, то создание шаблона на Joomla с нуля не является чем-то сложноосуществимым или недоступным. Но при разработке сайта перед вебмастером всегда встаёт выбор - купить клубный шаблон или создать собственный. Кроме этих двух решений есть и третье - доработать существующий шаблон. Для того, чтобы сделать правильный выбор, вам нужно понимать основы создания шаблона на Joomla.

Рис. Интеграция Twitter Bootstrap в Joomla шаблон
Joomla шаблоны

Как известно, Joomla делится на фронтальную часть (фронтэнд) и панель администратора ("админка"). Обе части имеют свои шаблоны, они хранятся в папках:
/templates - шаблоны фронтэнда
/administrator/templates - шаблоны админ.панели

У каждого шаблона есть своя папка. В дистрибутиве Joomla 2.5 идут два предустановленных шаблона без адаптивной верстки (Beez 2 и 5) и один шаблон фреймворка (Atomic):
/templates/atomic
Atomic - нечто вроде негласной сборки шаблона на базе стандартного фреймворка;
/templates/beez_20
Beez 2 - стандартный шаблон Joomla
/templates/beez5
Beez 5 - это версия Beez 2, но с HTML5 разметкой;
/templates/system
В этой папке хранятся общие для всех шаблонов файлы, например: страница оффлайн, страница ошибки и т.п.

Папка с админ.шаблонами выглядит точно также:
/administrator/templates/bluestork
Bluestork- шаблон по умолчанию для панели администрирования;
/administrator/templates/hathor
Hathor - шаблон панели администрирования на выбор. Он выполнен в соответствии со стандартами доступности для людей с ограничениями и цвета шаблона можно менять как угодно.
/administrator/templates/system
В этой папке хранятся общие для всех шаблонов файлы, например страница ошибки.
Как создать новый шаблон?

Существует три способа:
Шаблон с нуля - создаем папки и все необходимые файлы;
Установить дистрибутив шаблона и далее изменять файлы;
Скопировать существующий шаблон и модифицировать его.

В этом уроке мы рассмотрим вариант первый. Задача - создать шаблон с адаптивной вёрсткой на Twitter Bootstrap для Joomla 2.5 с нуля. Я постараюсь подать материал в наиболее доступном виде. Цель данного урока - в разборе структуры шаблона Joomla. После того, как основы будут усвоены, создание шаблонов станет для вас более доступным занятием :)
Название шаблона

Первое, что нужно сделать - подобрать название для нашего шаблона. Название будет отображаться в XML файле, в Базе Данных, в файловой системе сервера и папке кэша. Избегайте использования специализированных или пустых символов, а также символов не ASCII кодировки (системное назвние нужно писать латинскими буквами). Назовём рассматриваемый в данном уроке шаблон cocoate.
Файлы и папки

Итак, создадим папку /templates/cocoate

В данной папке нам нужно создать файлы и подпапку для css стилей:
/templates/cocoate/index.php
/templates/cocoate/templateDetails.xml
index.php

view source

print
?
01.
<?php
02.
defined('_JEXEC') or die;
03.
?>
04.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank" >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<;/a>">
05.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
06.
<head>
07.
<jdoc:include type="head" />
08.
</head>
09.
<body >
10.
<jdoc:include type="modules" name="top" style="xhtml" />
11.
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
12.
<jdoc:include type="modules" name="left" style="xhtml" />
13.
<jdoc:include type="component" />
14.
<jdoc:include type="modules" name="right" style="xhtml" />
15.
<jdoc:include type="modules" name="footer" style="none" />
16.
</body>
17.
</html>

Листинг 1: index.php

Файл index.php - это основной файл шаблона, именно в нем формируется вывод страниц, модулей и организуется структура шаблона. Внутри файла подключаются CSS стили, JavaScript скрипты и с его помощью выводится контент Joomla. В нашем примере я просто подгружаю Joomla контент с помощью команды <jdoc:include ...>. Она подключает скрипты в head, а также выводит содержимое компонента и содержимое модулей в зависимости от позиции.
templateDetails.xml

Этот манифест - наиболее важный файл в шаблоне. Манифест содержит список всех файлов и папок, относящихся к шаблону. В нём также содержится информация об авторе и авторских правах. Без этого файла Joomla не сможет обнаружить шаблон. Кроме того, позиции, упоминаемые в index.php файле, должны быть сперва описаны в манифесте шаблона. Мы можем создать сколько угодно позиций шаблона без ограничений. Кроме того, названия позиций не стандартизированы в Joomla.


Источник: http://joomlablog.ru

Добавить комментарий:
Имя:
E-mail:
2021 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь