HTML шаблоны в Joomla 1.5: избавляемся от таблиц

Joomla

Один из часто задаваемых вопросов на форумах Joomla — как сверстать шаблон под данную CMS имея уже существующую разметку.

На эту тему существует множество различных обучающих материалов, например «Сделать шаблон для Joomla1.5? Легко!». В подобные мануалы, в основном, попадает описание процесса вёрстки скелета шаблона и вызовы загружаемых модулей. Такие обучающие материалы без сомнения очень полезны для начинающих, но хотелось бы видеть более раскрытую суть темы.

Иногда авторы даже не рассказывают о возможностях вызовов специальных атрибутов модуля jdoc:include — это бывает очень важно, когда мы верстаем именно в div. Для начала займёмся модулем jdoc:include.

Существующие атрибуты модуля jdoc:include:

type=»modules» — указываем вызов модуля

name=«user1″ — указываем имя позиции модуля (модуль должен быть заранее создан (Расширения -> Менеджер модулей -> Создать) и привязан к одной из позиций (например: breadcrumb, left, right, top, user1, footer, advert1).

style=«xhtml» — указывается параметр отображения модуля. Очень важный параметр, который определяет как будут отформатированны данные, выводящиеся на страницу.

Некоторые параметры атрибута style

  • table — модуль отображается в таблице;
  • xhtml — модуль выводится в XHTML-совместимый элемент <div>;
  • none — модуль выводится без какого-либо форматирования.

Итак, модули мы можем добавить с помощью конструкции jdoc:include со нужными параметрами. В случае, когда работаем над div-шаблоном, пользуемся конструкцией style=»xhtml».

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

[sourcecode language=»html»]

Приглашаем выпускников школ и всех желающих на курсы по интенсивной подготовке к ЕГЭ и поступлению в вуз.
16.03.2010
Начало занятий с 22 марта по 22 мая 2010 г.; с 14 июня по 5 июля 2010 года

[/sourcecode]

Откуда? — спросите вы. Отвечаю.

По умолчанию ядро Joomla использует табличную вёрстку при выводе своего содержимого. По сути это некий шаблон обработки с <table>-тегами и php-конструкциями, который привязан к каждому простому Joomla-шаблону. Что значит простой шаблон? Вот пример списка файлов и директорий простого шаблона:

css\
images\

favicon.ico
index.php
params.ini
template_thumbnail.png
templateDetails.xml

Из чего можно сделать вывод, что в данном случае файл шаблона всего один index.php.

Мы подошли к главному вопросу: «Как заставить Joomla выводить нам всё содержимое в div-ах?«. Ответ, на самом деле прост и логичен — необходимо добавить набор шаблонов, которые бы обрабатывали вывод информации  соответствующим образом.

«Где взять?»
Например скопировать папку html из стандартного шаблона beez в папку со своим шаблоном. После выбора в настройках своего шаблона как основного, Joomla будет учитывать способ вывода информации в нём, исходя из папки html, в которой способ вывода переопределён. Например, вывод информации может выглядеть так:

[sourcecode language=»html»]

Конкурс

24.12.2009 17:00

[/sourcecode]

Как мы видим, структура страницы сменилась на div-совместимую, с предопределёнными классами (для рубрики один, для отдельного поста другой), заголовками, параграфами и полным отсутствием тегов table — как средства вёрстки.

Дело за малым — ознакомиться с предопределёнными стилями, оформить их с помощью CSS и ваш шаблон готов!

Успехов вам.