7 июн. 2011 г.

Создаем шаблон Joomlа по стандартам


На habrahabr.ru  mancocapac опубликовал переводы 4-х статей из цикла статей о создании «чистого» шаблона для Joomla 1.5 (под «чистым» в данном случае понимается шаблон, сверстанный по современным стандартам, т.е. без использования таблиц и с грамотным применением каскадных таблиц стилей).

Создание простого пустого шаблона
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Файлы шаблона
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е., если у нас установлены два шаблона, то директория /template/ выглядит примерно так: 

/templates/element
/templates/voodoo 

Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона, как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:

/element/templateDetails.xml
/element/index.php 

Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они вызываются ядром Joomla.

Первый из них — это XML-файл шаблона
templateDetails.xml

Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он используется при инсталляции шаблона в административном интерфейсе.

Второй файл — это основной движок шаблона:
index.php

Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.

Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:

/element/template_thumbnail.png /element/css/template.css /element/images/logo.png

Это просто примеры. Ниже приведено описание каждого файла:

/element/template_thumbnail.png

Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе «Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в публичной части (если этот модуль задействован).

/element/css/template.css

Таблица стилей шаблона.
Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных CSS-файлов.

/element/images/logo.png

Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство разработчиков размещают их в директории images. Мы указали картинку с названием logo.png в качестве примера.

templateDetails.xml

templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в административном интерфейсе Joomla. Ниже приведен пример XML-файла:

<?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>TemplateTutorial15</name> <creationDate>August 2007</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail> compassdesigns@gmail.comThis e-mail address is being protected from spambots, you need JavaScript enabled to view it </authorEmail> <authorUrl>www.compassdesigns.net</authorUrl> <version>1.0</version> <description>First example template for Chapter 9 of the Joomla Book</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somejsfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template_css.css</filename> </files> <positions> <position>user1</position> <position>top</position> <position>left</position> <position>banner</position> <position>right</position> <position>footer</position> </positions> <params> <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use"> <option value="blue">Blue</option> <option value="red">Red</option> </param> </params> </install>


Поясним отдельные строки:

<install version="1.5" type="template">

Содержимое XML-документа — это инструкции для инсталлятора в административном интерфейсе Joomla. Опция type=«template» сообщает инсталлятору, что мы устанавливаем шаблон, предназначенный для Joomla версии 1.5.

<name>TemplateTutorial15</name>

Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с названием, идентичным названию шаблона.

<creationDate>August 2007</creationDate>

Дата создания шаблона. Это поле задается в свободном формате и может быть любой строкой типа «May 2005», «08-June-1978», «01/01/2004» и т.д.

<author>Barrie North</author>

Имя автора шаблона (вероятно, ваше имя).

<copyright>GPL</copyright>

Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете найти в форумах Joomla.

<authorEmail>author@somedomain.com</authorEmail>

E-mail для связи с автором шаблона.

<authorUrl>www.compassdesigns.net</authorUrl>

Адрес сайта автора.

<version>1.0</version>

Версия шаблона.

<files></files>

Различные файлы, используемые в шаблоне.

Файлы, используемые в шаблоне, заключаются в теги <filename>:

<files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somejsfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template_css.css</filename> </files>


Секция «files» содержит все основные файлы типа PHP-скриптов или изображений для превью шаблона. Каждый файл перечисляется в этой секции внутри тегов <filename> и </filename>. Также здесь указываются дополнительные файлы, например JavaScript-файлы, используемые в шаблоне.

Файлы картинок, используемых в шаблоне, также перечисляются в секции «files». Опять же, каждый файл заключается в теги <filename> и </filename>. Пути к файлам указываеются относительно корневой директории шаблона. Например, если шаблон находится в директории 'YourTemplate', а все картинки находстя в поддиректории 'images', то правильный путь к файлу будет:

<filename>images/my_image.jpg</filename>


Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла заключается в теги <filename> и </filename>, а путь файла указывается относительно корневой папки шаблона.

<positions></positions>

Позиции модулей, используемые в шаблоне.

<params></params>

Описывает параметры, которые могут задаваться для различных функций шаблона, например, для изменения его цвета.

index.php

Чем на самом деле является файл index.php? Это комбинация (X)HTML и PHP, которая определяет все необходимое для отображения элементов страницы.

Сначала посмотрим на элемент, который крайне важен для создания валидных шаблонов — DOCTYPE в верхней части файла index.php. Этот фрагмент кода отображается в верхней части всех веб-страниц. На страницах нашего шаблона мы видим следующее:

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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

DOCTYPE веб-страницы — это один из фундаментальных параметров, на основании которого браузер решает, как ему отображать эту страницу, в частности, как браузеру интерпретировать CSS. Для лучшего понимания приведем здесь хорошую цитату с сайта alistapart.com:

[Информация на сайте W3C о DOCTYPE] составлена гиками для гиков. И когда я говорю «гики», я не имею в виду обычных профессионалов Веб, таких как я или вы. Я имею в виду тех гиков, которые заставляют нас выглядеть как Бабушку в тот день, когда Она Впервые Получила E-mail.

В любом случае, вы можете использовать разные DOCTYPE. По существу, DOCTYPE говорит браузеру, как интерпретировать страницу. С самого начала, когда появился Веб, разные браузеры имели разные уровни поддержки CSS. Так, например, Internet Explorer не поймет команду «min-width», используемую для установки минимальной ширины страницы. Для того, чтобы продублировать эффект, вам придется использовать «хаки» в CSS.

Некоторые говорят, что обработка XHTML как text/html должна считаться «вредной». Если вы действительно понимаете это утверждение, то вы находитесь далеко за пределами этого руководства. Вы можете прочитать больше на эту тему по адресу hixie.ch/advocacy/xhtml. «Strict» означает, что HTML (или XHTML) должен интерпретироваться в точности по стандартам. А «Transitional» в DOCTYPE означает, что на странице дозволены определенные отступления от стандартов.

Чтобы усложнить картину, добавим, что существует еще так называемый режим «quirks» (специальных ухищрений). Если DOCTYPE указан неверно, с неправильной датой, или вообще не указан, браузер переходит в режим «quirks». На самом деле, это попытка обеспечения обратной совместимости, так, например, Internet Explorer 6 будет интерпретировать страницу так, как это делал бы IE4.

К сожалению, люди иногда совершенно случайно переходят в режим «quirks». Обычно это происходит по двум причинам:
  • Они используют декларацию DOCTYPE, копируя ее непосредственно с сайта W3C, вследствие чего конец ссылки выглядит как DTD/xhtml1-strict.dtd, в то время как это относительная ссылка на сервере W3C. Вам нужно указывать путь полностью, как в примере, приведенном выше
  • Фирма Microsoft разработала свой IE6 так, чтобы он выдавал валидные страницы, пребывая при этом в режиме «quirks». Это обычно случается, когда «xml declaration» указывется до DOCTYPE.

    Далее указывается следующее XML-выражение (после DOCTYPE):

    <html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >


    Пояснения насчет режима «quirks» в IE очень важны. В этой статье мы разрабатываем шаблон для IE6+, следовательно мы должны быть уверены, что он работает в стандартном режиме. Это минимизирует необходимость хаков, которые нам придется позже применить.

    ПРИМЕЧАНИЕ
    Создание страниц, соответствующих стандартам, когда вы видите «valid xhtml» в нижней части страницы, не означает в действительности трудоемкой верстки или использования малопонятных тегов. Это просто означает, что разрабатываемый вами код, соответствует заявленному DOCTYPE, и ничего более.

    Разработка сайта по стандартам может быть описана одной фразой как «говори, что ты делаешь, а затем делай то, что говоришь».

    Ниже приведены несколько ссылок, которые помогут вам разобраться с параметром DOCTYPE и режимом «quirks»:
    Что еще есть в файле index.php?

    Посмотрите сначала на структуру заголовка. Мы хотим быть минималистичны, насколько это возможно, но при этом иметь все необходимое для создания работающего сайта. Мы используем следующий заголовок:

    <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!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" />
</head>


    Что все это означает?

    Мы уже рассказывали о значении DOCTYPE в файле index.php. Фрагмент
    <?php echo $this->language; ?>
    извлекает установленный язык из глобальной конфигурации.

    Следующий фрагмент включает дополнительную информацию для заголовка:

    <jdoc:include type="head" />


    Это заголовочная информация, которая задана в глобальной конфигурации. Она включает в себя следующие теги (в инсталляции по умолчанию):

    <title>Welcome to the Frontpage</title>  
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />  
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="robots" content="index, follow" />  
<meta name="keywords" content="joomla, Joomla" /> 
<link href="/component/content/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />  
<link href="/component/content/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />  
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>


    Большая часть этой информации генерируется «на лету» в соответствии с данными текущей страницы (статьи). Она включает в себя ряд мета-тегов для favicon, адресов RSS-потоков и некоторых стандартных JavaScript-файлов.

    Последние строки в заголовке содержат ссылки на CSS-файлы шаблона:

    <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" />


    Первые два файла — system.css and general.css содержат некоторые основные стили Joomla. Последний содержит все стили шаблона и называется здесь template.css. Фрагмент кода PHP
    <?php echo $this->template ?>
    возвращает название текущего шаблона. Указание его именно таким образом, вместо реального пути, делает код более переносимым. Когда вы создаете новый шаблон, вы можете просто скопировать его (включая весь заголовок), не беспокоясь о внесении исправлений.

    В заголовке может быть указано любое количество CSS-файлов, например, для условных стилей, определяемых для разных браузеров. Например, следующий фрагмент определяет такую таблицу стилей для IE6:

    <!--[if lte IE 6]>
<link href="/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->


    Следующий пример показывает, как могут использоваться параметры шаблона:

    <link rel="stylesheet" href="/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />


    Пустое тело шаблона

    Создание нашего первого шаблона будет очень-очень простым! Вы готовы?

    Все, что необходимо, — это использовать выражения Joomla, которые добавят содержимое всех модулей в основное тело страницы (mainbody):

    <body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>


    В настоящий момент наш сайт не вылядит особенно впечатляюще (см.
    иллюстрацию)

    Шаблон содержит следующие элементы, размещенные в логическом порядке:
    • название сайта
    • верхний модуль
    • левые модули
    • основной контент
    • правые модули


    Что необходимо знать

    По существу, шаблон просто загружает модули Joomla и mainbody (компонент). Расположение элементов и дизайн — это дело CSS, а не Joomla.

    Нашей целью является как можно ближе приблизиться к семантической разметке. С точки зрения Web, это означает, что страница может быть прочитана браузером, «пауком» поисковой системы или устройством чтения с экрана. Семантическая разметка является краеугольным камнем доступности.

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

    Вы заметили, что мы впервые использовали набор команд, специфичных для Joomla:

    <?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />


    PHP-выражение «echo» просто отображает строку из файла configuration.php. Здесь мы использовали название сайта, но можно, например, отобразить и другие параметры:

    The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();;?>


    Выражение «jdoc» вставляет различные типы XHTML-вывода, как модулей, так и компонентов. Следующая строка вставляет вывод компонента. Какой компонент будет использован, будет определяться ссылкой в меню:

    <jdoc:include type="component" />


    ПРИМЕЧАНИЕ
    Достаточно интересно, вам кажется, что вывод компонента можно использовать несколько раз. Не уверен, что вам захочется сделать это, но я говорю вам, что это может быть ошибкой.

    Эта строка вставляет вывод всех модулей, заданных для места «right»:

    <jdoc:include type="modules" name="right" />


    На самом деле, полный синтаксис такой:

    <jdoc:include type="modules" name="LOCATION" style="OPTION" />


    Мы рассмотрим различные варианты опций для стилей в разделе о модулях позднее.

    CSSTemplateTutorialStep1

    В настоящий момент у нас получился совсем голый шаблон. Мы сделали инсталлируемый вариант, который доступен в библиотеке Compass. Вы можете скачать его по ссылке: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html

    Шаблон, созданный на шаге 1, состоит только из двух файлов, index.php и templateDetails.xml. Я убрал ссылки на все остальные файлы, чтобы показать «голое» отображение, без CSS. На самом деле, это хороший диагностический шаблон, который позволяет установить его и отслеживать ошибки, которые возникают в компоненте или в модуле.

Оригинал статьи на английском можно прочитать здесь:
www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2

Комментариев нет:

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

Подписаться на: Комментарии к сообщению (Atom)