Информация к новости
  • Просмотров: 424
  • Автор: sulicompany
  • Дата: 17-12-2012, 00:39
 (голосов: 0)
17-12-2012, 00:39

Создание шаблона Joomla

Категория: Программирование » PHP


Что такое шаблон Joomla?

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

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

Использование шаблона так, как это организовано в Joomla, имеет ряд преимуществ:

  • Joomla выполняет всю работу по размещению содержания на сайте. Вы можете добавить новую информацию просто набрав текст статьи. Шаблон со своими стилями CSS сделает внешний вид соответствующим общему дизайну сайта.
  • Содержание и его представление разделены. Особенно четко разделение проявляется при использовании CSS в шаблоне (в противоположность задействованию таблиц в файле index.php). Данный фактор является основным критерием для определения соответствия сайта новейшим стандартам веб разработки. В соответствии со стандартами HTML теги таблиц могут использоваться только для представления табличных данных, но не для разметки структуры страницы в виде колонок.
  • Новый шаблон, соответственно, и новый вид веб сайта может быть применен мгновенно. Так могут быть изменены положения модулей и содержания, цвета и графика страниц.

 

Процесс разработки дизайна на локальном компьютере

Страницы сайта, работающего под управлением Joomla не являются статическими. Они генерируются динамически из содержания, которое хранится в базе данных. При изменении данных изменяются все страницы, которые отображали эти данные. Страницы создаются набором PHP команд в шаблоне, которые генерируют запросы к базе данных. Так как шаблон выглядит как строчки кода без содержания, то процесс создания представляет определенную трудность.

Весьма распространенной практикой является использование визуальных редакторов для редактирования кода HTML (например, Dreamweaver), что снижает требования к знанию команд HTML. Однако, использование возможностей таких редакторов для создания шаблона Joomla будет весьма ограничено, так как они не выводят динамических страниц.  Придется редактировать код шаблона и его стилей CSS вручную и просматривать результат работы PHP на тестовых страницах, которые надо будет обновлять после внесения изменений. При наличии достаточно быстрого соединения можно использовать удаленный и даже реальный веб сервер. Но большинство дизайнеров использует веб сервер, установленный на локальный компьютер (localhost). Обычно это программное обеспечение, которое генерирует веб страницы, расположенные в специальной папке.

Нет правильного метода создания страниц. Все зависит от разработчика и его пристрастий. Есть те, кто больше расположен к созданию графического "образа" страницы (например, в программе Фотошоп), а затем разбивает его на отдельные изображения, используемые на веб сайте. Другие дизайнеры сразу погружаются в код CSS и начинают генерировать правила для шрифтов, рамок и фонов. Но вы, как разработчик шаблона Joomla, будете ограничены тем фактом, что нельзя сразу увидеть эффект изменений кода в редакторе, поэтому можно рекомендовать следующий процесс разработки:

  1. Иметь под рукой запущенный на локальном компьютере сервер с содержанием под управлением Joomla.
  2. Редактировать код HTML и CSS в редакторе и сохранять изменения на сервере.
  3. Смотреть результат изменений в веб браузере.

 

Использование сервера на локальном компьютере

Для дальнейших действий в уроках вам понадобится локальный веб сервер. Если вы его еще не установили, самое время разобраться и сделать это. В качестве простых вариантов возможно использовать  или . Существует большое количество описаний процесса установки локального сервера.

В папке веб сервера вы можете редактировать шаблон HTML и файлы CSS с помощью любимого редактора, а в браузере смотреть на результат своих действий. После сохранения изменений останется только перезагрузить страницу. Файлы можно оставлять открытыми в редакторе.

 

W3C и стандарты

Удобство использования, доступность и оптимизация для поисковых серверов (SEO) - данные термины используются для описания отличных веб страниц. Но в  реальности все три термина очень сильно перекрывают друг друга. И страница, демонстрирующая отменные характеристики по одному пункту обычно хороша и в остальном. Самым простым методом будет использование рабочей среды, удовлетворяющей стандартам W3C. 

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

Чтобы понимать, откуда пришли веб стандарты, следует вспомнить историю. Много страниц разработаны специально для старых браузеров. Почему? Браузеры постоянно развиваются с момента появления WWW. Каждое новое поколение браузеров имеет новые функции, и производители используют для таких функций разные, часто свои собственные, теги. Каждый браузер имеет склонность использовать разный синтаксис, или "диалекты", и собственные реализации для одних и тех же базовых структур HTML.  Новые браузеры появляются, старые сходят со сцены (помните Netscape?).

Другим фактором усложнения ситуации является то, что исторически разные производители браузеров (например, Microsoft) имеют тенденцию интерпретировать HTML немножко по другому. Следовательно, веб дизайнерам  приходится прилагать усилия для поддержки старых версий браузеров.

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

Проверить соответствие сайта стандартам W3C можно с помощью специального сервиса . Это просто и бесплатно. Нужно только правильно установить DOCTYPE. Сайт, который проходит проверку на соответствие W3C, использует семантически верный код HTML и разделение содержание и представления.

 

Семантически правильный код

Термин "семантически правильный" означает, что HTML теги на веб странице используются только для описания содержания, но не для представления. В частности, это означает структурную организацию кода с помощью теговh1h2 и так далее, а также таблиц только для описания табличных данных, а не для создания структуры шаблона.

Следует также использовать семантические имена для различных областей шаблона. Например, при создании двух или трех колоночного шаблона лучше использовать не названия "left" (левый) и "right" (правый), а  "sidebar" или "side". При задании соответствия кода HTML и классов CSS назначение областей будет понятно из названия.

 

CSS

CSS является простым механизмом для изменения стилей для различных элементов шаблона. В качестве примера можно посмотреть сайт , на котором можно выбрать разные стили отображения одного содержания. 

Разработка сайтов под управлением Joomla в настоящее время существенно приблизилась к реализации стандартов W3C. В первых версиях в коде использовалось большое количество таблиц для организации структуры страниц, что не соответствовало ни семантически правильному коду, ни технике разделения содержания и представления. Проблема проявляется в факте, что многие разработчики компонентов и модулей до сих пор используют таблицы для своих шаблонов.

К счастью, команда разработчиков Joomla пересмотрела свой подход. В версии 1.5 появилась возможность изменять вид по своему усмотрению с полноценным использованием CSS.

Файлы, которые входят в шаблон

При конструировании собственного шаблона нужно скоординировано создать несколько папок и файлов, которые необходимы для его работы. Все файлы размещаются в директории с именем шаблона  в папке /templates/ в каталоге, в котором установлена Joomla.  Например, если у вас есть два шаблона, один из которых называется Element, а второй Voodoo, то их папки будут выглядеть  следующим образом:

1 /templates/Voodoo
2 /templates/Element

Обратите внимание на то, что имя папки и шаблона должны быть одинаковыми. Названия чувствительны к регистру символов (Voodoo и voodoo - разные имена) и в них не должно быть пробелов.

Для нашего шаблона мы будем использовать имя RusellerSimple. Соответственно его каталог будет выглядеть как/templates/RusellerSimple.

В состав шаблона обязательно должны входить два файла, templateDetails.xml и index.php:

1 /RusellerSimple/templateDetails.xml
2 /RusellerSimple/index.php

Данные файлы используются ядром Joomla.

Первый файл (templateDetails.xml) является описанием шаблона в XML формате. Он содержит метаданные, которые указывают Joomla имя автора, права использования, файлы и различные данные, необходимые для работы шаблона. Информация используется при установке шаблона в систему.

Второй файл (index.php) служит для генерации страниц.

Почти все шаблоны используют дополнительные файлы, хотя их наличие не является обязательным:

1 /RusellerSimple/template_thumbnail.png
2 /RusellerSimple/params.ini
3 /RusellerSimple/css/template.css
4 /RusellerSimple/images/logo.png

/RusellerSimple/template_thumbnail.png - снимок страницы шаблона (обычно уменьшается до размера 140х90 px), который после установки становится доступным для просмотра в "Менеджере шаблонов".

/RusellerSimple/params.ini - текстовый файл, который хранит значения различных параметров, используемых в шаблоне.

/RusellerSimple/css/template.css - файл стилей CSS шаблона. Расположение папки и имя файла можно изменять, однако его надо задать в файле index.php. В последующих уроках вы увидите, что очень выгодно иметь несколько файлов стилей.

/RusellerSimple/images/logo.png - изображение, которое используется в шаблоне. Обычно все картинки помещают в одну папку (в нашем примере - /images). Названия файла и папки могут быть какими угодно.

templateDetails.xml

Файл templateDetails.xml действует как декларация, которая описывает все файлы и папки, которые входят в состав шаблона. Также в него включается информация описательного характера - имя автора, права использования, дата создания и так далее. Некоторые данные выводятся в "Менеджере шаблонов". В нашем примере используется такой XML файл:

01 <?xmlversion="1.0"encoding="utf-8"?>
02     <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//RU"
03     "">
04     <installversion="1.6"type="template">
05 <name>RusellerSimple</name>
06 <creationDate>09/07/11</creationDate>
07 <author>Сергей Фастунов</author>
08 <authorEmail>[email protected]</authorEmail>
09 <authorUrl>authorUrl>
10 <copyright>Copyright (C) 2011 Евгений Попов</copyright>
11 <license>GPL</license>
12 <version>1.0.0</version>
13 <description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description>
14 <files>
15 <filename>index.php</filename>
16 <filename>templateDetails.xml</filename>
17 <filename>params.ini</filename>
18 <folder>images</folder>
19 <folder>css</folder>
20 </files>
21 <positions>
22 <position>breadcrumbs</position>
23 <position>left</position>
24 <position>right</position>
25 <position>top</position>
26 <position>footer</position>
27 <position>debug</position>
28 </positions>
29
30 <config>
31 <fieldsname="params">
32 <fieldsetname="basic">
33 <field
34 name="colorVariation"
35 type="list"
36 default="blue"
37 label="Вариант цвета"
38 description="Основной цвет шаблона">
39 <option
40 value="blue">синий</option>
41 <option
42 value="red">красный</option>
43 </field>
44 </fieldset>
45 </fields>
46 </config>
47 </install>

Давайте посмотрим, какое значение имеют некоторые строки:

  • <install version="1.6" type="template">- данная директива является командой для инсталлятора. Опции указывают, что устанавливается шаблон для Joomla версии 1.6.
  • <name>RusellerSimple</name>- определяет имя шаблона. Также оно используется для создания папки в каталоге шаблонов. Поэтому в нем должны содержаться только системные символы. Если вы создаете шаблон вручную, то имя его должно совпадать с именем папки шаблона в каталоге.
  • <creationDate>09/07/11</creationDate>- дата создания шаблона.
  • <author>Сергей Фастунов</author>- имя автора.
  • <authorEmail>[email protected]</authorEmail>- адрес email автора.
  • <authorUrl>http://www.ruseller.com</authorUrl>- адрес сайта автора.
  • <copyright>Copyright (C) 2011 Евгений Попов</copyright>- информация о владельце прав использования шаблона.
  • <license>GPL</license>- вид лицензии на шаблон.
  • <version>1.0.0</version> - номер версии.
  • <description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description>- описание шаблона.
  • <files></files>- в данном разделе перечисляются файлы, которые используются в шаблоне. Для описания файлов используются два вида тегов <filename>и <folder>:

1 <filename>index.php</filename>
2 <filename>templateDetails.xml</filename>
3 <filename>params.ini</filename>
4 <folder>images</folder>
5 <folder>css</folder>

  • Тег<filename>  обрамляет имя файла, а <folder> - имя папки.
  • <positions></positions>- данный раздел описывает все доступные положения в шаблоне. Имена положений должны совпадать с тем, что определяется в файлеindex.php.
  • <config></config>- в данном разделе описываются параметры, которые используются в шаблоне. Например, в примере приводится задание параметров для изменения цветовой схемы шаблона.

index.php

Файл index.php представляет собой комбинацию кода PHP и HTML, которые полностью задают представление данных в шаблоне.

Рассмотрим критическую часть файла для создания правильного шаблона: директиву !DOCTYPE, которая находится в верхней части.

01 <?php
02     /**
03 * @copyrightCopyright (C) 2011 Евгений Попов
04 * @licenseGPL
05 */
06 defined('_JEXEC'ordie;
07 $app= JFactory::getApplication();
08 ?>
09 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
10 "">

Самое первое выражение PHP просто выводит информацию об авторских правах  и лицензии, а также предотвращает непосредственный доступ к файлу.

Код $app = Jfactory::getApplication(); является вызовом функции, которая позволяет получить и использовать в шаблоне различные параметры Joomla (например, имя сайта).

Директива !DOCTYPE является фундаментальным компонентом веб страницы, которая указывает браузеру, как ее выводить. Она указывает, как браузер будет обрабатывать теги HTML и, что даже более важно, как будет интерпретироваться CSS (есть ли на странице устаревший код, содержится ли XML и так далее).

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

Директива DOCTYPE должна быть расположена в первой строке, а путь к странице описания стандарта должен приводиться полностью. Например, браузер Internet Explorer 6 в случае ошибки распознавания стандарта переходит в режим обратной совместимости и начинает отображать страницу как Internet Explorer 4. 

Наш шаблон создается в расчете на использование в Internet Explorer 6 и далее. Поэтому очень важно соблюсти наличие директивы DOCTYPE в качестве первой строки генерированного HTML файла, чтобы в дальнейшем использовать как можно меньше ухищрений в коде.

За директивой DOCTYPE следует XML выражение:

1 <html xmlns=""xml:lang="<?php echo $this->language; ?>"lang="<?php echo $this->language; ?>">

И за ним следует секция head:

1 <head>
2 <jdoc:includetype="head"/>
3 <link rel="stylesheet"href="<?php echo $this->baseurl?>/templates/system/css/system.css"type="text/css"/>
4 <link rel="stylesheet"href="<?php echo $this->baseurl?>/templates/system/css/general.css"type="text/css"/>
5 <link rel="stylesheet"href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css"type="text/css"/>
6 </head>

Код <?php echo $this->language; ?> вытягивает из Joomla информацию об используемом на сайте языке и вставляет ее в код шаблона.

Код <jdoc:include type="head" /> вставляет в заголовок страницы развернутую информацию, которая устанавливается в настройках Joomla. Например, код заголовка страницы нашего шаблона будет выглядеть так:

01 <head>
02   <basehref=""/>
03   <metahttp-equiv="content-type"content="text/html; charset=utf-8"/>
04   <metaname="robots"content="index, follow"/>
05   <metaname="keywords"content=""/>
06   <metaname="rights"content=""/>
07   <metaname="language"content="ru-RU"/>
08   <metaname="generator"content="Joomla! 1.6 - Open Source Content Management"/>
09   <title>Home</title>
10   <linkhref="/index.php?format=feed&amp;type=rss"rel="alternate"type="application/rss+xml"title="RSS 2.0"/>
11   <linkhref="/index.php?format=feed&amp;type=atom"rel="alternate"type="application/atom+xml"title="Atom 1.0"/>
12   <scriptsrc="/media/system/js/core.js"type="text/javascript"></script>
13   <scriptsrc="/media/system/js/mootools-core.js"type="text/javascript"></script>
14   <scriptsrc="/media/system/js/caption.js"type="text/javascript"></script>
15  
16 <linkrel="stylesheet"href="/templates/system/css/system.css"type="text/css"/>
17 <linkrel="stylesheet"href="/templates/system/css/general.css"type="text/css"/>
18 <linkrel="stylesheet"href="/templates/RusellerSimple/css/template.css"type="text/css"/>
19 </head>

Большая часть информации заголовка генерируется "на лету" и соответствует тому, какой материал выводится в текущий момент.

Последние строчки в разделе заголовка нашего шаблона предназначены для генерации ссылок на страницы стилей CSS:

1 <link rel="stylesheet"href="<?php echo $this->baseurl?>/templates/system/css/system.css"type="text/css"/>
2 <link rel="stylesheet"href="<?php echo $this->baseurl?>/templates/system/css/general.css"type="text/css"/>
3 <link rel="stylesheet"href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css"type="text/css"/>

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

CSS шаблона может включать сколько угодно файлов. Например, для задания различных стилей для различных браузеров или для разных сред вывода информации (на экран, напечатать, на мобильные устройства). Например, следующий код определяет использование дополнительного файла CSS для Internet Explorer 6 (в нашем простом шаблоне мы его не используем):

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

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

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

А код HTML будет выглядеть следующим образом:

1 <link rel="stylesheet"href="/templates/RusellerSimple/css/red.css"type="text/css"/>

Раздел body страницы шаблона

Итак, раздел заголовка страницы шаблона готов. Теперь можно приступить к созданию непосредственно тела.

Нужно вставить все выражения Joomla, код HTML и добавить модули. Для нашего примера код тела страницы будет выглядеть следующим образом:

01 <body>
02     <?php echo$app->getCfg('sitename');?><br />
03     <jdoc:includetype="modules"name="top"/>
04     <jdoc:includetype="modules"name="left"/>
05     <jdoc:includetype="modules"name="breadcrumbs"/>
06     <jdoc:includetype="component"/>
07     <jdoc:includetype="modules"name="right"/>
08     <jdoc:includetype="modules"name="footer"/>
09     <jdoc:includetype="modules"name="debug"/>
10 </body>

Модули должны соответствовать тому, что было описано в templateDetails.xml. Если запустить наш шаблон, то сайт с тестовым наполнением будет выглядеть следующим образом:

Вид шаблона

В коде используются команды Joomla.

Код <?php echo $this->template ?> вставляет в код страницы информацию об имени сайта.

Выражение jdoc используется для вставки в код HTML модулей или компонентов.

Для вставки вывода информации компонента, который определяется связанным пунктом меню, используется код<jdoc:include type="component" />.

Для вставки модуля используется код <jdoc:include type="modules" name="right">. Данная строка генерирует код HTML всех модулей, которые размещены в позиции "right". Порядок следования модулей определяется в соответствии со значениями "Порядок", которое можно установить в "Менеджере модулей".

Установка шаблона

В Joomla версии 1.6 недостаточно просто скопировать файлы шаблона в папку /templates. Нужно еще и провести поиск и установку модуля. Выполняются данные операции в "Менеджере расширений" на закладке "Поиск".

Сначала нажимаем кнопку "Найти" (файлы шаблона уже должны быть скопированы в папку /templates). Когда Joomla завершит поиск, нужно выбрать найденный шаблон и нажать кнопку "Установить". После завершения установки можно переходить к другим панелям для конфигурации системы с новым шаблоном.

Установка шаблона

Используем CSS сетку

Шаблон урока будет иметь фиксированную ширину. В настоящее время имеется тенденция использовать в дизайне веб страниц три типа шаблонов: шаблон с фиксированной шириной, резиновый шаблон и эластичный шаблон.

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

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

От табличного дизайна разметки мы отказываемся сразу, так как она достаточно трудоемка в обслуживании. Любое изменение потребует тщательной проверки взаимодействия всех тегов tr и td. Кроме того, табличный шаблон будет вызывать затруднения у тех посетителей, которые используют программы для чтения страниц с экрана. Обычно текст страницы читается слева-сверху по направлению вправо-вниз. В результате содержание левой боковой панели будет перемешиваться с содержанием центральной части и правой боковой панели, что затруднит восприятие информации. Самыми важными читателями, которые столкнутся с данной проблемой будут роботы поисковых серверов.

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

CSS генератор для 960.gs

В нашем шаблоне используется сетка из 12 столбцов общей шириной 960 px.

Заголовок страницы будет растягиваться на все 12 колонок:

1 <divid="header"class="container_12"></div>

Для трех основных разделов внутри контейнера мы создадим сетку:

01 <divid="content"class="container_12">
02 <divid=""class="grid_3 ">
03 <jdoc:includetype="modules"name="left"/>
04 </div>
05 <divid=""class="grid_6">
06 <jdoc:includetype="modules"name="breadcrumbs"/>
07 <jdoc:includetype="component"/>
08 </div>
09 <divid=""class="grid_3">
10 <jdoc:includetype="modules"name="right"/>
11 </div>
12 </div>

Между колонками в сетку будет оставаться пространство размером в 10 px. Оно генерируется рабочей средой 960.gs, а код воспринимается всеми браузерами (в том числе и Internet Explorer).

После применения классов к нашему шаблону раздел body файла index.php будет иметь вид:

01 <body>
02     <div id="header"class="container_12">
03 <?php echo$app->getCfg('sitename');?><br />
04 <jdoc:includetype="modules"name="top"/>
05 </div>
06 <div id="content"class="container_12">
07 <div id="sidebar"class="grid_3 ">
08 <jdoc:includetype="modules"name="left"/>
09 </div>
10 <div id="maincolumn"class="grid_6">
11 <jdoc:includetype="modules"name="breadcrumbs"/
12 <jdoc:includetype="component"/>
13 </div>
14 <div id="sidebar-2"class="grid_3">
15 <jdoc:includetype="modules"name="right"/>
16 </div>
17 </div>
18 <div id="footer"class="container_12">
19 <jdoc:includetype="modules"name="footer"/>