Как создать шаблон для Joomla самостоятельно

CMS Joomla занимает второе место по распространенности в интернете. Так что многих интересует вопрос, как создать шаблон для Joomla. Попытаемся данному научиться.

О Joomla

Название CMS больше напоминает имя чернокожей красотки. И это не удивительно, ведь оно имеет в себя африканские корни.

В переводе с языка суахили Joomla означает «единство».
Как создать шаблон для Joomla самостоятельно Joomla представляет собой систему управления контентом( CMS), реализованную на основе php и JavaScript со встроенной поддержкой СУБД MySQL. Она будет потомком известного движка Mambo.

Как отдельная CMS Joomla начала существование не так давно. Ее первая версия вышла лишь в 2005 году. Последней будет версия 3.3, которая вышла в октябре 2014.

К особенностям данной CMS можно отнести:

  • Мультиязычность – в базовую версию движка включена поддержка нескольких языков. При помощи инсталляции лингвистических пакетов возможна реализация интерфейса административной и пользовательской частей Joomla на большинстве существующих языков;
  • Бесплатность – движок, как и многие шаблоны для веб-сайта Joomla, распространяется на бесплатной основе и имеет в себя в полном объеме открытый код;
  • Легковесность – в состав инсталляционного пакета CMS входит лишь минимальный набор инструментов. По мере необходимости он без проблем расширяется при помощи установки нужных дополнений. Благодаря данному без проблем оптимизируется занимаемое ресурсом пространство на веб-хостинге и уменьшается нагрузка на сервер:

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

Работа с шаблонами в Joomla

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

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

Они могут распространяться как на платной, так и на бесплатной основе. Движок будет системой управления контентом с открытым кодом. Так что создать шаблон Joomla можно без труда и самостоятельно:

Как создать шаблон для Joomla самостоятельно Дополнительно в панели администрирования настраивается стиль выведения каждой из тем. Эта функция доступна через вкладку «Стили» в «Менеджере шаблонов»:
Как создать шаблон для Joomla самостоятельно После нажатия на имя шаблона в списке открывается новое окно. При помощи его интерфейса возможно частичное редактирование шаблона Joomla.

Ещё одной уникальной функциею данного движка будет использование для оформления сразу же нескольких шаблонов. То есть для пунктов одного меню можно легко использовать пару тем:

Как создать шаблон для Joomla самостоятельно Для изменения кода страниц темы в «Менеджере шаблонов» необходимо перейти на вкладку «Шаблоны». В списке ниже выбрать нужный элемент и нажать на ссылку «Настройки»:
Как создать шаблон для Joomla самостоятельно На следующей странице выбираем файл для изменения. После нажатия ссылки с именем файла в окне редактора шаблонов Joomla выводится программный код выбранной страницы:
Как создать шаблон для Joomla самостоятельно

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

Для установки нового шаблона в административной части Joomla используется «Менеджер расширений». Он доступен через одноименный пункт в панели управления. В его разделе видны пару вкладок. Имеющих опыт работы с админками CMS поле ввода «Поиск» может ввести в некоторое заблуждение.

Поле ввода служит не для поиска новых расширений в интернете. Страница может найти нужный модуль среди загруженных и установленных в CMS.

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

  • Файловая система;
  • Каталог CMS;
  • Путь URL.

В случае удачной установки вверху появится соответствующее системное сообщение:

Как создать шаблон для Joomla самостоятельно Сейчас, если проследовать в «Менеджер шаблонов», то в списке установленных тем можно увидеть новый элемент:
Как создать шаблон для Joomla самостоятельно

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

Перед тем, как настроить шаблон Joomla или создать новый, необходимо определиться с его составом. Обязательными файлами являются:

  • index.php – отвечает за генерацию страниц;
  • templateDetails.xml – в этом файле содержится описание самого шаблона в формате xml. В его полях ввода хранятся метаданные об авторе, версии расширения и иные значения. Все данные настройки будут использованы системой при работе веб-сайта.

Темы Joomla хранятся в директории templates. Создадим в ней папку под названием «test». Здесь будут храниться все файлы будущего шаблона. Внутри данной папки создадим ещё одну папку с именем css. Тут будут размещены все файлы стилей.

Для примера возьмем сверстанную страницу html со следующим кодом:

<meta charset="utf-8"><title>Документ без названия</title><style type="text/css">* {margin:0; }body { height: 100%; min-width:900px; font-family:Cambria, "Times New Roman", serif; background:#C0C0C0; font-size:36px;}html { position:relative; min-height:100%;}#header {height:100px;background:#0080FF;color:#fff;padding-top:10px;}#content {padding-top:20px;padding-bottom: 100px;}#footer {height: 50px;padding-top:10px;background:#0000A0;position: absolute;bottom: 0;width: 100%;}#header.in_header {width:800px;margin:auto;}#content.in_content {width:800px;margin:auto;}#footer.in_footer {width:800px;margin:auto;}</style></head><body><div id="header"><div class="in_header"><p>Заголовок</p> </div></div><div id="content"><div class="in_content"><p>Контент</p> </div></div><div id="footer"><div class="in_footer"><p>Подвал</p> </div></div></body></html>

Как создать шаблон для Joomla самостоятельно Перед тем, как редактировать шаблон Joomla дальше, весь css необходимо перенести в файл style.css и сохранить его в папке «css». Код файла останется без изменений.

Сейчас создаем xml описание шаблона. В нем задаются значения тех настроек, которые будут выводиться в «Менеджере шаблонов». Содержимое файла templateDetails.xml:

<?xml version="1.0" encoding="utf-8"?><extension version="1.7" type="template" client="site"><!-- Название шаблона --><name>Test</name><!-- Необязательные элементы, выводят информацию об авторе, лицензии и прочее-><creationDate>1 May 2014</creationDate><author>Man</author><authorEmail>avtor.mail.ru</authorEmail><authorUrl>http://www.avtor.ru</authorUrl><copyright>Copyright(C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.</copyright><license>GNU General Public License version 2 or later</license><!-- Версия шаблона --><version>1.6.0</version><!-- Описание шаблона --><description>TPL_TEST_XML_DESCRIPTION</description><!-- Файлы из которых состоит шаблон --><files><!-- Можно указывать директории --><folder>css</folder><filename>index.html</filename><filename>index.php</filename><filename>templateDetails.xml</filename></files><!-- Позиции модулей, используемые в шаблоне --><positions><position>top</position><position>footer</position></positions><!-- Настройки для шаблона --><config><fields name="params"><fieldset name="advanced"><field name="logo" type="media" label="TPL_TEST_LOGO_LABEL" description="TPL_TEST_FIELD_LOGO_DESC" /></fieldset></fields></config></extension>

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

Но это ещё не все. До того, как сделаем шаблон для Joomla, осталось несколько шагов. Сейчас необходимо создать файл index.php. Вот его код:

<?php // защита от прямого доступа к файлуdefined('_JEXEC') or die;?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language;?>" dir="<?php echo $this->direction;?>" ><head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl;?>/templates//<?php echo $this->template;?>/css/style.css" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div id="header">  <div class="in_header">    <?php if($this->params->get('logo')): ?>    <img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($this->params->get('logo')); ?>"  alt="MyLogo" />    <?php endif;?>    <jdoc:include type="modules" name="top" style="xhtml" />    <p>Заголовок</p>    </div></div><div id="content">  <div class="in_content">    <jdoc:include type="message" />    <jdoc:include type="component" />    </div><div id="footer">  <div class="in_footer">    <jdoc:include type="modules" name="footer" style="xhtml" />    <p>Подвал</p>    </div></div></body></html>

Разберемся с кодом:

  • строка отображает все содержимое заголовка;
  • отображает содержимое блока;
  • отображает блок, позиция которого указана в значении атрибута name . В поле ввода name устанавливается один из встроенных стилей (xhtml, rounded, outline и иные);
  • в случае ошибки будет выведено системное сообщение.

Сейчас добавим по пустому файлу index.html в каждую папку. Они нужны для запрета листинга межу директориями. Осталось лишь создать архив со всеми файлами шаблона и установить его через «Менеджер расширений». После инсталляции его имя будет отображено в списке «Менеджер расширений»:

Как создать шаблон для Joomla самостоятельно

Альтернатива

Создать шаблон для Joomla самостоятельно достаточно сложно. Так что в виде альтернативы следует рассмотреть иные решения.

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

  • datsko.it – авторский проект. Автор постоянно работает над усовершенствованием детища. Хочется отметить понятный и простой интерфейс без надоедливой рекламы. А также вполне достойный генерируемый программный код, который выдает этот конструктор шаблонов Joomla :
  • Как создать шаблон для Joomla самостоятельно
  • cooltemplate.com – ещё один генератор. Обладает англоязычным интерфейсом и инструментарием. Сгенерированные им шаблоны требуют некоторой доработки:
  • Как создать шаблон для Joomla самостоятельно
  • TemplateToaster – приложение, с которым можно без труда бесплатно ознакомиться в течение пробного периода. Оно может создавать шаблоны для нескольких популярных CMS . Имеет в себя навороченный визуальный редактор с функциею просмотра созданного шаблона в различных браузерах без участия локального сервера.

Как создать шаблон для Joomla самостоятельно
Но не следует сильно рассчитывать на программы для создания шаблонов Joomla . Как показывает практика, сгенерированный ими код нуждается в серьезной доводке. Так что знания веб-программирования, css и html все равно потребуются. Поэтому можно без проблем научиться разрабатывать шаблоны самому или подождать, пока программы станут более совершенными. А когда это будет, ни один африканский колдун не предскажет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *