В любом деле важна практика, чтобы полученные навыки, не ушли из памяти. Кроме того, знаний об определенном деле больше у того, кто занимается им на практике, а не изучает по учебнику. Таким образом, данная публикация будет иметь формат пошагового руководства по созданию шаблона в 1.5 версии системы Joomla.
Еще одним важным моментом считается стремление от общего значения к частному. Нельзя отремонтировать двигатель, не зная, что собой представляет автомобиль. Всегда необходимо видеть общую картину, поэтому для примера мы будем использовать самый легкий макет, в котором от общих деталей будем двигаться к наиболее мелким, что позволит нам создать по-настоящему качественный шаблон. Начало работы начнем с создания каркаса.
Планирование
Планирование лежит в основе любой работы, однако о нем необходимо знать следующее. Создавая что-либо, нельзя полагаться исключительно на идею. Если человек садится за создание шаблона, но лишь представляет его конечный результат, то его работа обречена на провал. В отношении веб-разработки мысли появляются во время работы, однако они могут быть как полезные, так и нет.
Возникает вопрос, как поступить? С одной стороны, пока не начнется работа, не появится план. С другой же возникает вопрос, как начать работу над шаблоном не имея четкого плана? Ведь часто бывает, что сначала идея нравится, но когда начинается работа с ней, она кажется не такой привлекательной как раньше, но уже на нее было потрачено много сил и времени. В этом случае, если проигнорировать планирование, то можно потратить много времени и совершенно не продвинуться в работе. Однако спланировать каждое действие невозможно.
Человеческий ум не может запрограммировать себя на определенный результат. Он способен анализировать свою работу в процессе и постепенно ее совершенствовать. Для того, чтобы было на что опираться, следует воспользоваться принципом от общего к частному и создать общий каркас работы.
Чтобы было проще понять процесс создания макета, разберем не создание шаблона с нуля, а его переработку. Шаблон обладает каркасом, поэтому он нуждается в несложной доработке некоторых деталей, которые способны полностью изменить его внешний вид. Для этого мы выбрали самый простой шаблон, поскольку нашей целью является научиться создавать качественные шаблоны Joomla 1.5 на основе уже существующих.
Изначальный вариант вы можете увидеть на этом изображении:
Шаг первый: Выбираем основной компонент, количество и позиции модулей
Первое, что следует сделать, это выбрать размещение компонента com_content, являющегося сердцем макета и использующегося для отображения всех публикаций ресурса. Как правило, главный компонент располагается в центре макета.
После того, как расположение выбрано, необходимо обстроить его различными модулями.
Вначале понадобится только шесть:
1. Левая колонка сайта (left);
2. Правая колонка сайта (right);
3. Место над основным компонентом (top);
4. Так называемый подвал сайта (bottom);
5. Горизонтальное меню, находящееся под шапкой (hornav) – сокращение от horizontal navigation;
6. Нижний угол справа (ribot) – сокращение right bottom.
Следующее изображение наглядно продемонстрирует размещение модулей:
Шаг второй: Работа с файлом templateDetails.xml
После выбора размещения модулей необходимо приступить к созданию файла, содержащего данные относительно основных деталей макета – templateDetails.xml. Не нужно тратить время на написание этого файла, когда можно взять его из другого макета к Joomla 1.5 и внести необходимые корректировки.
Постепенно начинаем работу:
На этом этапе следует создать раздел , где необходимо указать название всех файлов, которые вы используете в макете. В нашем примере это index.php, эскиз ресурса template_thumbnail.png, стили style.css, а также картинки из папки images. Теперь приступаем к созданию:
После чего переходим к работе с разделом , где следует указать 6 модульных позиций, которые были заранее спланированы:
Пока пропустим раздел и закроем файл .
Мы создали изначальный вариант файла templateDetails.xml, который по мере продвижения работы с шаблоном мы будем пополнять и изменять.
Шаг третий: Создание файла index.php
Index.php представляет собой основной файл макета Joomla. Его редактирование происходит с помощью административной панели. Для создания этого файла воспользуемся файлом основного макета index.html, но поменяем расширение на php, а затем начнем редактировать этот файл.
Для редактирования лучше не пожалеть времени и скачать Notepad++, представляющий собой продвинутую версию блокнота. Дело в том, что стандартный блокнот Windows не подходит для работы с подобными файлами. В свою очередь Notepad++ обладает множеством функций и подсвечивает код, облегчая работу с файлами html, php и css.
Нам необходимо, используя готовый шаблон, по аналогии добавить информацию его заголовка и начала:
Этот шаблон не предполагался для использования в Joomla, поэтому все его пути обозначены в отношении корневой папки. Например, images/logo.gif по завершению установки в Joomla следует изменить на templates/first-template/images/logo.gif. Изменение путей необходимо для получения доступа к ним тех элементов, которые их используют. Этот процесс очень простой. Необходимо в текстовом редакторе в «Правку» ввести «images/», а в «Заменить» – новый путь «templates/first-template/images/».
Шаг четвертый: Добавление файла com_content
Следующее, что необходимо сделать, это провести редактирование тела шаблона – . В него нужно внести базовый компонент и модули, однако перед этим следует решить, куда вставить этот компонент. Если пользователь не слишком хорошо разбирается в html, то для поиска места введения кода следует использовать firebug. В нашем примере firebug отобразил, что необходим тег.
Здесь и находится основной контент макета. Отсюда следует удалить лишнее, например, рекламу google, текущий контент, и внести основной компонент:
Главное не забыть про отображение названия вашего ресурса над главным контентом. В «Business website» находим место, следуя вышеописанному способу:
Затем приступаем к редактированию:
Шаг пятый: Добавление модульных позиций
Подошел черед к добавлению в шаблон модульных позиций. Весь процесс происходит аналогично предыдущему шагу, однако необходимо указать стиль для отображения модулей. Для этого мы будем использовать блоки div, а создавая позиции, будем указывать style=«xhtml».
Получилось следующее:
1) позиция left:
2) позиция right:
3) позиция top:
Здесь укажем стиль «horz», поскольку данная позиция рассчитана на вывод модулей в одну строку. Хотя можно использовать и «xhtml». Все зависит от целей.
4) позиция bottom:
5) позиция hornav:
6) позиция ribot:
Теперь следует удалить скрытый блок с ссылками в конце макета и создать уменьшенное изображение ресурса template_thumbnail.png, которое следует поместить в корневую папку макета.
После включения основных Joomla-элементов макет нуждается в тестировании. Пользователю необходимо создать zip-архив для папки с шаблоном и выполнить загрузку в Joomla как обыкновенный шаблон. Ниже продемонстрирован итоговый результат этой работы.
Так происходит создание базового шаблона Joomla, однако он еще не готов для использования. Дизайн его меню и модулей не соответствует шаблону html, использовавшемуся в качестве образца и он не сможет растянуться на всю ширину, поскольку в позиции «right» отсутствуют модули. Кроме того, неизвестно, насколько корректно его будут отображать интернет-браузеры, но с этим разберемся позже.
Исходники
Исходный шаблон
Шаблон Joomla 1.5
Еще одним важным моментом считается стремление от общего значения к частному. Нельзя отремонтировать двигатель, не зная, что собой представляет автомобиль. Всегда необходимо видеть общую картину, поэтому для примера мы будем использовать самый легкий макет, в котором от общих деталей будем двигаться к наиболее мелким, что позволит нам создать по-настоящему качественный шаблон. Начало работы начнем с создания каркаса.
Планирование
Планирование лежит в основе любой работы, однако о нем необходимо знать следующее. Создавая что-либо, нельзя полагаться исключительно на идею. Если человек садится за создание шаблона, но лишь представляет его конечный результат, то его работа обречена на провал. В отношении веб-разработки мысли появляются во время работы, однако они могут быть как полезные, так и нет.
Возникает вопрос, как поступить? С одной стороны, пока не начнется работа, не появится план. С другой же возникает вопрос, как начать работу над шаблоном не имея четкого плана? Ведь часто бывает, что сначала идея нравится, но когда начинается работа с ней, она кажется не такой привлекательной как раньше, но уже на нее было потрачено много сил и времени. В этом случае, если проигнорировать планирование, то можно потратить много времени и совершенно не продвинуться в работе. Однако спланировать каждое действие невозможно.
Человеческий ум не может запрограммировать себя на определенный результат. Он способен анализировать свою работу в процессе и постепенно ее совершенствовать. Для того, чтобы было на что опираться, следует воспользоваться принципом от общего к частному и создать общий каркас работы.
Чтобы было проще понять процесс создания макета, разберем не создание шаблона с нуля, а его переработку. Шаблон обладает каркасом, поэтому он нуждается в несложной доработке некоторых деталей, которые способны полностью изменить его внешний вид. Для этого мы выбрали самый простой шаблон, поскольку нашей целью является научиться создавать качественные шаблоны Joomla 1.5 на основе уже существующих.
Изначальный вариант вы можете увидеть на этом изображении:
Шаг первый: Выбираем основной компонент, количество и позиции модулей
Первое, что следует сделать, это выбрать размещение компонента com_content, являющегося сердцем макета и использующегося для отображения всех публикаций ресурса. Как правило, главный компонент располагается в центре макета.
После того, как расположение выбрано, необходимо обстроить его различными модулями.
Вначале понадобится только шесть:
1. Левая колонка сайта (left);
2. Правая колонка сайта (right);
3. Место над основным компонентом (top);
4. Так называемый подвал сайта (bottom);
5. Горизонтальное меню, находящееся под шапкой (hornav) – сокращение от horizontal navigation;
6. Нижний угол справа (ribot) – сокращение right bottom.
Следующее изображение наглядно продемонстрирует размещение модулей:
Шаг второй: Работа с файлом templateDetails.xml
После выбора размещения модулей необходимо приступить к созданию файла, содержащего данные относительно основных деталей макета – templateDetails.xml. Не нужно тратить время на написание этого файла, когда можно взять его из другого макета к 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>joomdom.com</author>
<authorEmail>admin@joomdom.com</authorEmail>
<authorUrl>http://joomdom.com</authorUrl>
<copyright>(c)Wedal http:/joomdom.com</copyright>
<description>First example template for Joomla 1.5</description>
На этом этапе следует создать раздел
<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>
<position>left</position>
<position>right</position>
<position>top</position>
<position>bottom</position>
<position>hornav</position>
<position>ribot</position>
</positions>
Пока пропустим раздел
Мы создали изначальный вариант файла templateDetails.xml, который по мере продвижения работы с шаблоном мы будем пополнять и изменять.
Шаг третий: Создание файла index.php
Index.php представляет собой основной файл макета Joomla. Его редактирование происходит с помощью административной панели. Для создания этого файла воспользуемся файлом основного макета index.html, но поменяем расширение на php, а затем начнем редактировать этот файл.
Для редактирования лучше не пожалеть времени и скачать Notepad++, представляющий собой продвинутую версию блокнота. Дело в том, что стандартный блокнот Windows не подходит для работы с подобными файлами. В свою очередь Notepad++ обладает множеством функций и подсвечивает код, облегчая работу с файлами html, php и 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/».
Шаг четвертый: Добавление файла com_content
Следующее, что необходимо сделать, это провести редактирование тела шаблона – . В него нужно внести базовый компонент и модули, однако перед этим следует решить, куда вставить этот компонент. Если пользователь не слишком хорошо разбирается в html, то для поиска места введения кода следует использовать firebug. В нашем примере firebug отобразил, что необходим тег
<td class="base_txt" />
Здесь и находится основной контент макета. Отсюда следует удалить лишнее, например, рекламу google, текущий контент, и внести основной компонент:
<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>
Шаг пятый: Добавление модульных позиций
Подошел черед к добавлению в шаблон модульных позиций. Весь процесс происходит аналогично предыдущему шагу, однако необходимо указать стиль для отображения модулей. Для этого мы будем использовать блоки 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-архив для папки с шаблоном и выполнить загрузку в Joomla как обыкновенный шаблон. Ниже продемонстрирован итоговый результат этой работы.
Так происходит создание базового шаблона Joomla, однако он еще не готов для использования. Дизайн его меню и модулей не соответствует шаблону html, использовавшемуся в качестве образца и он не сможет растянуться на всю ширину, поскольку в позиции «right» отсутствуют модули. Кроме того, неизвестно, насколько корректно его будут отображать интернет-браузеры, но с этим разберемся позже.
Исходники
Исходный шаблон
Шаблон Joomla 1.5