Создание шаблона для Joomla 3. Часть 1

Дата публикации: 2016-07-29

Создание шаблона для Joomla 3

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

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

В данное время создано огромное количество различных шаблонов как платных, так и бесплатных, но зачастую найти идеально подходящий для конкретного проекта шаблон, очень сложно. Поэтому, приходится искать наиболее подходящий, а затем вносить в его код изменения и данная ситуация так же бывает и с платными вариантами. Поэтому наилучшее решение – это создание шаблона для joomla самостоятельно с абсолютного нуля. Конечно данная задача не из легких, потому как требует знания устройства шаблонов, но вполне выполнимая и в данной статье я постараюсь привести основы по данной теме. Почему основы спросите Вы? Потому как шаблон небольшого сайта достаточно объемен, что требует времени на его разработку и тем более пояснения. Более подробную информацию по созданию шаблонов Вы найдете в нашем курсе Joomla-Мастер. С нуля до премиум шаблона.

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

При этом его файловая структура следующая:

Соответственно создаем в удобном месте Вашего компьютера папку для первоначальной разработки шаблона Joomla и копируем файловую структуру HTML шаблона. То есть, как говориться начало положено.

Далее создадим специальный установочный файл, формата .xml который будет содержать в себе инструкции по установке будущего шаблона. Данный файл еще называют “манифест-файл” и любое устанавливаемое расширение должно его содержать в своей структуре, непосредственно в корне. Имя данного файла templateDetails.xml и для начала добавим с него следующий участок кода:

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template">
	<name>design_studio</name>
	<version>1.0.0</version>
	<creationDate>27.06.2016</creationDate>
	<author>Viktor</author>
	<authorMail>admin@admin.com</authorMail>
	<authorUrl>//webformyself.com </authorUrl>
	<copyright>Copyright (C) design_studio</copyright>
	<license>License Information</license>
	<description>TPL_DESIGN_STUDIO_DESCRIPTION</description>

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

<name>design_studio</name>

<author>Viktor</author>

<authorMail>admin@admin.com</authorMail>

<authorUrl>//webformyself.com </authorUrl>

<copyright>Copyright (C) design_studio</copyright>

<license>License Information</license>

<description>TPL_DESIGN_STUDIO_DESCRIPTION</description>

Данный блок кода – несет описательный характер, потому как определяет имя шаблона, его разработчика и т.д. Используемые теги:

name — имя шаблона;

version – версия разработки;

creationDate – дата создания;

author – имя автора;

authorMail – почтовый ящик автора;

authorUrl – путь к сайту разработчика;

license – информация о лицензии, по которой распространяется данный шаблон;

description – краткое описание шаблона. Обратите внимание .что в качестве значения данного тега ,используется специальная языковая константа, значение которой будет описано далее в определенном файле.

Далее, добавим к файловой структуре будущего шаблона, несколько элементов. Обратите внимание, что созданные каталоги не должны быть пустыми. Если на первых порах, Вы не добавляете в них файлы, то создайте пустой файл, к примеру index.html и поместите его во все пустые папки, во избежание ошибок установки.

Теперь хотел бы пояснить, для чего нужны только что созданные элементы:

html – каталог хранения переопределений макетов различных расширений Joomla. Как я говорил выше, шаблон определяет только основную структуру сайта, весь контент формируется в видах компонентов и модулей.

language – каталог хранения доступных локализаций шаблона.

index.php – основной логический файл шаблона, где будет прописана его структура.

template_preview.png – скриншот шаблона. Данный скриншот показывает внешний вид шаблона и будет доступен в панели администратора, после установки.

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

Далее добавим дополнительный блок кода в установочный файл.

<files>	
		<folder>css</folder>
		<folder>images</folder>
		<folder>html</folder>
		<folder>language</folder>
		
		<filename>index.html</filename>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>template_preview.png</filename>	
	</files>

<files>

<folder>images</folder>

<folder>language</folder>

<filename>index.html</filename>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>template_preview.png</filename>

</files>

Обратите внимание, что весь добавленный код обернут тегом files, то есть данный код содержит информацию о том какие файлы и каталоги будут скопированы в папку шаблона при установке в CMS Joomla. Соответственно тег <folder> определяет имя копируемой папки, а <filename> — имя копируемого файла. При этом указывается информация только верхнего уровня, вложенные файлы и папки, будут скопированы автоматически.

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

<languages folder="language">
        <language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.ini</language>
        <language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.sys.ini</language>
	</languages>

<language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.ini</language>

<language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.sys.ini</language>

</languages>

Информация о доступных локализациях прописывается в блоке <languages>, то есть данный блок содержит пути к так называемым файлам словарям. Почему их называют файлами словарями, спросите Вы. Потому как они содержат значения для языковых констант, то есть как бы переводы. Обратите внимание, что вместе с тегом, я указал атрибут folder, в котором прописано имя каталога с локализациями.

В Joomla, используется два вида файлов для осуществления перевода: обычные файлы формата .ini и файлы sys.ini. Первые содержат данные о переводе форм, настроек или любые другие строки, которые нужно перевести на определенный язык. Файлы sys.ini используются для отображения описания расширений во время установки или в менеджерах (шаблонов, компонентов и т.д.). Таким образом, для одного языка локализации нужны два вышеуказанных файла, и пути к ним прописываются в теге . Данный тег используется вместе с атрибутом tag, в котором указывается код языка конкретной локализации.

Теперь необходимо создать указанные выше файлы словари в каталоге language.

Теперь давайте добавим содержимое для этих файлов. В файл ru-RU.tpl_design_studio.ini, то есть обычный файл словарей, необходимо добавить перевод константы TPL_DESIGN_STUDIO_DESCRIPTION чтобы краткое описание отображалось в настройках шаблона.

TPL_DESIGN_STUDIO_DESCRIPTION="<div style='margin:30px; padding:20px; border:1px solid red'><h1>Студия дизайна</h1><p>Описание шаблона</p></div>"

1	TPL_DESIGN_STUDIO_DESCRIPTION="<div style='margin:30px; padding:20px; border:1px solid red'><h1>Студия дизайна</h1><p>Описание шаблона</p></div>"

При этом, в качестве значения, конечно же, используется строковое значение, при этом допускается использование тегов языка HTML.

В файл ru-RU.tpl_design_studio.sys.ini помимо значения константы описанной выше, необходимо добавить перевод названия шаблона, то есть значение константы DESIGN_STUDIO

DESIGN_STUDIO="Студия дизайна"
TPL_DESIGN_STUDIO_DESCRIPTION="<div style='margin:30px; padding:20px; border:1px solid red'><h1>Студия дизайна</h1><p>Описание шаблона</p></div>"

1 2	DESIGN_STUDIO="Студия дизайна" TPL_DESIGN_STUDIO_DESCRIPTION="<div style='margin:30px; padding:20px; border:1px solid red'><h1>Студия дизайна</h1><p>Описание шаблона</p></div>"

Для добавления поддержки дополнительных языков, необходимо аналогично создать каталог с двумя файлами словарями и в блоке <languages> указать путь к ним.

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

Таким образом, нам нужно зарезервировать пять позиций:

навигация;

шапка сайта;

верхний блок контента;

левая боковая колонка;

нижний подвал, или футер.

Область для отображения основного контента мы к позициям модулей не привязываем. После этого добавим следующий код в установочный файл:

	<positions>
		<position>position-0</position>
		<position>position-1</position>
		<position>position-2</position>
		<position>position-3</position>
		<position>position-4</position>
	</positions>
</extension>

<position>position-0</position>

<position>position-1</position>

<position>position-2</position>

<position>position-3</position>

<position>position-4</position>

</positions>

</extension>

То есть доступные позиции, прописываются в блоке <positions>, при этом имя отдельной позиции, указано в теге <position>. После этого в файл ru-RU.tpl_design_studio.sys.ini добавим переводы для имен позиций.

TPL_DESIGN_STUDIO_POSITION_POSITION-0="Навигация"
TPL_DESIGN_STUDIO_POSITION_POSITION-1="Шапка сайта"
TPL_DESIGN_STUDIO_POSITION_POSITION-2="Верхний блок контента"
TPL_DESIGN_STUDIO_POSITION_POSITION-3="Левая боковая колонка"
TPL_DESIGN_STUDIO_POSITION_POSITION-4="Футер"

TPL_DESIGN_STUDIO_POSITION_POSITION-0="Навигация"

TPL_DESIGN_STUDIO_POSITION_POSITION-1="Шапка сайта"

TPL_DESIGN_STUDIO_POSITION_POSITION-2="Верхний блок контента"

TPL_DESIGN_STUDIO_POSITION_POSITION-3="Левая боковая колонка"

TPL_DESIGN_STUDIO_POSITION_POSITION-4="Футер"

Имя константы, формируется следующим образом: префикс TPL_, далее указываем имя шаблона DESIGN_STUDIO, далее строка _POSITION_ и наконец, имя определенной позиции в верхнем регистре. Таким образом, установочный файл завершен, а значит приведу его полный код.

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template">
	<name>design_studio</name>
	<version>1.0.0</version>
	<creationDate>27.06.2016</creationDate>
	<author>Viktor</author>
	<authorMail>admin@admin.com</authorMail>
	<authorUrl>//webformyself.com </authorUrl>
	<copyright>Copyright (C) design_studio</copyright>
	<license>License Information</license>
	<description>TPL_DESIGN_STUDIO_DESCRIPTION</description>
	
	<files>
		
		<folder>css</folder>
		<folder>images</folder>
		<folder>html</folder>
		<folder>language</folder>
		
		<filename>index.html</filename>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<filename>template_thumbnail.png</filename>
		<filename>template_preview.png</filename>
		
	</files>
	
	<positions>
		
		<position>position-0</position>
		<position>position-1</position>
		<position>position-2</position>
		<position>position-3</position>
		<position>position-4</position>

	</positions>
	
	<languages folder="language">
        <language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.ini</language>
        <language tag="ru-RU">ru-RU/ru-RU.tpl_design_studio.sys.ini</language>
	</languages>
	
</extension>