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

2020-10-20 0 ∞

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

О Joomla

О Joomla

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

В переводе с языка суахили Joomla означает «единство».

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

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

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

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

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

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

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

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

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

Дополнительно в панели администрирования настраивается стиль отображения каждой из тем. Эта возможность доступна через вкладку «Стили» в «Менеджере шаблонов»:

После нажатия на имя шаблона в списке открывается новое окно. С помощью его интерфейса возможно частичное редактирование шаблона Joomla.

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

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

На следующей странице выбираем файл для изменения. После нажатия ссылки с именем файла в окне редактора шаблонов Joomla отображается код выбранной страницы:

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

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

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

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

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

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

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

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

Перед тем, как изменить шаблон 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 дальше, весь 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 самостоятельно достаточно сложно. Поэтому в качестве альтернативы следует рассмотреть другие решения.

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

datsko.it – авторский проект. Автор постоянно работает над усовершенствованием своего детища. Хочется отметить понятный и простой интерфейс без надоедливой рекламы. А также вполне достойный генерируемый код, который выдает этот конструктор шаблонов Joomla:

cooltemplate.com – еще один генератор. Обладает англоязычным интерфейсом и инструментарием. Сгенерированные им шаблоны требуют некоторой доработки:

TemplateToaster – приложение, с которым можно бесплатно ознакомиться в течение пробного периода. Оно позволяет создавать шаблоны для нескольких популярных CMS. Имеет навороченный визуальный редактор с возможностью просмотра созданного шаблона в разных браузерах без участия локального сервера.

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