Шаблоны Joomla. Часть 3. Делаем первый шаблон.

Я придерживаюсь мнения: чтобы чему-то научиться и, главное, не забыть все через 1-2 месяца, нужна практика. Ничто ее не заменит. Человек, долго занимающийся каким-либо делом, знает его непременно лучше, чем тот, кто изучал это дело только по учебникам. Таким образом, сегодняшняя статья представляет собой пошаговый алгоритм создания шаблона Joomla 1.5 на конкретном примере.

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

Планирование

Первой и самой важной задача, которую нужно решить, является планирование. Вообще, о планировании нужно сказать несколько слов. Нельзя начинать делать что-либо сложное лишь представляя это в голове (я не имею в виду людей творческих профессий, только технических). Например, если придумать идею сайта и тут же начать делать его на Joomla, то в 95% случаях или ничего не получится, или создание сайта займет большое количество времени, поскольку придется много переделывать. У мыслей и идей применительно к веб-строительству есть два важных свойства:

1. Они, в большинстве своем, появляются уже во время реализации задачи.
2. Они бывают как хорошие, так и плохие.

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

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

Теперь начнем. Для того чтобы разобраться в создании шаблонов было проще, я буду рассматривать не создание «с нуля», а переработку обычного html-шаблона в шаблон Joomla 1.5. Это легче сделать, поскольку у шаблона уже есть каркас, и остается только доработка, либо на его основе можно создать совершенно отличающийся от первоначального шаблон.

Html шаблон я выбрал наиболее простой, поскольку сейчас главное научиться (создать каркас задачи «разработка шаблонов»). В дальнейшем, добавляя все новые детали, можно будет сделать качественный шаблон Joomla.

Первоначальный html-шаблон показан ниже:

(Ссылки на скачивание этого шаблона, а также переделанного находятся в конце статьи.)

Далее, чтобы не запутаться, все действия будут описаны по шагам.

Шаг 1. Выбор количества и позиций модулей. Выбор основного компонента

Первым шагом следует выбрать расположение  компонента com_content. Этот компонент является «сердцем» шаблона и используется для отображения материалов сайта. Обычно основной компонент находится в центре шаблона.

После выбора расположения основного компонента можно обстраивать его модулями. Я для начала создам их 6:

• left // левая колонка сайта;
• right // правая колонка сайта;
• top  // место непосредственно над основным компонентом;
• bottom // «подвал» сайта;
• hornav //стандартное название для позиции модулей в шаблонах Joomla(я так думаю это сокращенное название horizontal navigation). Место для горизонтального меню сразу под «шапкой»;
• ribot // сокращение от right bottom, правый нижний угол.

На следующем скриншоте можно посмотреть будущее расположение модулей:

Шаг 2. Файл templateDetails.xml

После того, как расположение модулей выбрано, можно приступать к созданию файла templateDetails.xml. Как видно из названия, данный файл содержит информацию о основных деталях шаблона. Полностью писать его самому не имеет смысла. Гораздо проще взять этот файл от какого-нибудь готового шаблона Joomla 1.5 и переделать его. Подробно обо всех настройках, содержащихся в этом файле, можно прочитать в статье Шаблоны Joomla. Часть 2. Памятка по шаблонам Joomla 1.5.

Начнем по порядку:

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5">

<name>first-template</name>

<version>1</version>

<creationDate>13/10/2009</creationDate>

<author>wedal.ru</author>

<authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript.</authorEmail>

<authorUrl>http://wedal.ru</authorUrl>

<copyright>(c)Wedal http://wedal.ru</copyright>

<description>First example template for Joomla 1.5</description>

В этой части должно быть все понятно.

Далее идет раздел <files>. В нем нужно указать все файлы, используемые в шаблоне. В нашем случае это  будущий index.php , файл стилей style.css, эскиз сайта template_thumbnail.png  и все изображения из папки images. Итак, создаем раздел <files>:

<files>

<filename>index.php</filename>

<filename>template_thumbnail.png</filename>

<filename>css/style.css</filename>

<filename>images/bot_ang.gif</filename>

<filename>images/bot_ang_bg.gif</filename>

<filename>images/bot_bg1.gif</filename>

<filename>images/bot_bg2.gif</filename>

<filename>images/find_panel.gif</filename>

<filename>images/fing_btn.gif</filename>

<filename>images/fing_btn_h.gif</filename>

<filename>images/hd_bg.gif</filename>

<filename>images/hd_pic.jpg</filename>

<filename>images/hd_pic_menu_bg.gif</filename>

<filename>images/info_panel.gif</filename>

<filename>images/logo.gif</filename>

<filename>images/menu_bg.gif</filename>

<filename>images/menu_bg3.gif</filename>

<filename>images/menu_sep.gif</filename>

<filename>images/spacer.gif</filename>

<filename>images/sub_bot_bg.gif</filename>

<filename>images/sub_l_panel.gif</filename>

<filename>images/sub_left_bg.gif</filename>

<filename>images/sub_r_bg.gif</filename>

</files>

Далее идет раздел <positions>. В нем указываем 6 позиций для модулей, спланированных ранее:

<positions>

<position>left</position>

<position>right</position>

<position>top</position>

<position>bottom</position>

<position>hornav</position>

<position>ribot</position>

</positions>

Раздел <params>  пока опустим. И Закрываем файл:

</install>

Таким образом, первоначальный вариант файла templateDetails.xml создан.  В дальнейшем, с совершенствованием шаблона он будет изменяться и дополняться.

Шаг 3. Создаем файл index.php

Index.php является основным файлом шаблона Joomla. Именно он редактируется из админки. Создавать его мы будем из файла index.html базового шаблона. Прежде всего следует поменять расширение этого файла с .html на .php. Далее приступаем к редактированию файла.

Использовать для работы с такими файлами блокнот Windows это тоже самое, что и читать книгу вечером в темных очках. Это очень неудобно. Советую скачать и установить продвинутую версию блокнота  Notepad++. Он имеет большое количество полезных функций, и, главное, подсвечивает код так, что работать с файлами php, html, css, становится гораздо проще.

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

<?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="" lang="" >

<head>

<jdoc:include type="head"

<title>First template</title>

<meta name=”description” content=”My first template” />

<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” title=”RSS 2.0? />

<link href=”/component/content/?format=feed&type=atom” rel=”alternate” 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>

<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/style.css” />

</head>

Поскольку данный шаблон изначально не был предназначен для Joomla все пути в нем прописаны относительно корневой папки. Т.е, например, images/logo.gif. В Joomla же, после установки шаблон будет находиться в папке templates/first-template/images/logo.gif и если не изменить пути, от все элементы, использующие их, станут недоступны.

Замену произвести очень легко. Достаточно выбрать в текстовом редакторе «Правка –> Заменить», и ввести «images/» и «templates/first-template/images/» соответственно.

Шаг 4.  Добавляем com_content

Теперь нужно отредактировать тело шаблона(<body>). Добавить в него основной компонент и модули. Для начала следует определиться куда именно вставлять компонент. Если ты не силен в html, то воспользуйся firebug’ом для поиска нужного места вставки кода. Подробнее про firebug в этой статье.

Firubug сразу показывает, что нам нужен тег <td class="base_txt">

Именно в нем содержится основной контент шаблона. Теперь нужно удалить из этого тега все лишнее (текущий контент, рекламу google и сайта с которого скачан шаблон) и вставить туда основной компонент Joomla:

<td><p align="center">

<jdoc:include type="component" />

</td>

Также нужно не забыть вставить отображение названия сайта над основным контентом. Там, где сейчас написано «Business website». Находим это место также как и искали выше:

<td class="head_text">Business website</td>

и редактируем:

<td class="head_text">

<?php echo $mainframe->getCfg(’sitename’);?>

</td>

Шаг 5.  Добавляем позиции модулей

Теперь перейдем к добавлению позиций модулей в шаблон. Здесь все делается по аналогии с предыдущим шагом. Единственное отличие заключается в том, что нужно указать стиль отображения модулей. Используем блоки div. Для этого при создании позиции указываем style=«xhtml».

Вот что получилось:

1) позиция left:

<td width="207" valign="top" background="images/sub_left_bg.gif">

<?php if($this->countModules('left')) : ?>

<jdoc:include type="modules" name="left" style="xhtml"/>

<?php endif; ?>

</td>

2) позиция right:

<td width="217" valign="top" background="images/sub_r_bg.gif">

<?php if($this->countModules('right')) : ?>

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

<?php endif; ?>

</td>

3) позиция top:

Здесь укажем стиль «horz», поскольку данная позиция рассчитана на вывод модулей в одну строку. Хотя можно использовать и «xhtml». Все зависит от целей.

<tr><td>

<?php if($this->countModules('top')) : ?>

<jdoc:include type="modules" name="top" style="horz"/>

<?php endif; ?>

</td></tr>

4) позиция bottom:

<td width="80%" valign="middle" class="bottom_menu">

<?php if($this->countModules('bottom')) : ?>

<jdoc:include type="modules" name="bottom "style="xhtml"/>

<?php endif; ?>

</td>

5) позиция hornav:

<td background="images/menu_bg.gif" class="bgx">

<?php if($this->countModules('hornav')) : ?>

<jdoc:include type="modules" name="hornav" style="xhtml"/>

<?php endif; ?>

</td>

6) позиция ribot:

<td>

<?php if($this->countModules('ribot')) : ?>

<jdoc:include type="modules" name="ribot" style="xhtml"/>

<?php endif; ?>

</td>

Также удаляем скрытый блок с рекламными ссылками в самом конце шаблона.

Не забудь создать уменьшенную картинку изображения сайта template_thumbnail.png и поместить в корневую папку шаблона.

Теперь , когда основные элементы Joomla включены в шаблон, можно провести тестовый запуск. Для этого запаковываем папку с нашим шаблоном в zip-архив (подчеркиваю: именно zip, а не rar) и загружаем в Joomla как обычный шаблон. Получившийся результат показан ниже:

Таким образом мы создали базовый Joomla-шаблон. Но использовать его еще рано. Тому есть причины. Во-первых дизайн модулей и меню не соответствует html-шаблону, который использовался, как образец. Во-вторых шаблон не будет растягиваться на всю ширину, например, если в позиции «right» нет модулей. Правая колонка просто останется пустой. Да и в разных браузерах он может отображаться по-разному. В следующей статье, я расскажу как решить эти проблемы и сделать наш шаблон полнофункциональным и красивым. А на сегодня всё. Удачи!

Файлы:

Исходный шаблон

Шаблон Joomla 1.5