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

Создание шаблона для 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>http://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 – путь к сайту разработчика;

copyright – информация по копирайтам;

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, то есть данный код содержит информацию о том какие файлы и каталоги будут скопированы в папку шаблона при установке в 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>

Информация о доступных локализациях прописывается в блоке <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>"

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

Для добавления поддержки дополнительных языков, необходимо аналогично создать каталог с двумя файлами словарями и в блоке <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>

То есть доступные позиции, прописываются в блоке <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_ и наконец, имя определенной позиции в верхнем регистре. Таким образом, установочный файл завершен, а значит приведу его полный код.

<?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>http://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>

Теперь файловую структуру будущего шаблона упакуем в архив формата .zip и установим стандартным способ в CMS Joomla.

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

Хотите узнать, как создать собственный шаблон на CMS Joomla с нуля

Все очень просто!

Получите бесплатную пошаговую авторскую систему, которая научит Вас с полного нуля создавать уникальные шаблоны на движке Joomla – с неповторимым дизайном

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Роман

    Очень понятно и доходчиво написано. Продолжаю изучение данной темы.
    Такой вопрос: а на выходе будет адаптивный шаблон, под все версии современных девайсов и разрешений экранов?

  2. Mark

    В принципе, потратить день, разобраться во всем основном, и можно самостоятельно скелет сайта сделать. Потом труднее доводить его до хорошего уровня. У меня друг зимой себе сам по шаблону сайт сделал, нашел здесь: umi.ru/create и сделал, как хотелось. Говорит, не долго мучился. А вообще, информации в сети, касательно этой темы, очень много.

    • Anna

      О, надо же! Буквально вчера тоже на umi.ru присматривала себе шаблоны для сайта. Не слышала о них раньше, все хотела отзывы почитать, и тут Ваш комментарий) Здорово!

      • Сергей

        Впервые про это ваш umi.ru слышу, пошастал у них по сайту, прикольно. Что за тариф на сайт от 49р? Другу, кстати, респект, что сам сайт сделал, я вот чувствую, что не осилю. Ищу помощь среди спецов, попробую этот umi.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree