От автора: приветствую Вас уважаемые читатели. Любой хороший сайт, должен быть не только привлекательным и удобно-читаемым, но еще и обязательно уникальным в плане внешнего вида. Поэтому в данной статье мы с Вами поговорим о такой теме, как создание шаблона для joomla 3 с абсолютного нуля.
Как Вы знаете, дизайн сайта, то есть его внешний вид, формируется в шаблоне, но Вы должны понимать, что шаблон определяет основную структура сайта, или если сказать несколько иначе, определяет его каркас. К примеру, сколько будет колонок, как и где будет отображаться основной контент, какие стили и скрипты нужно подключить и т.д. Внешний вид контента определяется в элементах, которые создают данный контент. То есть внешний вид материалов – определяется в компоненте com_content, внешний вид модулей – формируется непосредственно в их макетах и т.д. Но при этом, в шаблоне Вы можете переопределить, или заменить, макеты отображения содержимого компонентов и модулей, таким образом изменив дизайн отображения данных.
В данное время создано огромное количество различных шаблонов как платных, так и бесплатных, но зачастую найти идеально подходящий для конкретного проекта шаблон, очень сложно. Поэтому, приходится искать наиболее подходящий, а затем вносить в его код изменения и данная ситуация так же бывает и с платными вариантами. Поэтому наилучшее решение – это создание шаблона для joomla самостоятельно с абсолютного нуля. Конечно данная задача не из легких, потому как требует знания устройства шаблонов, но вполне выполнимая и в данной статье я постараюсь привести основы по данной теме. Почему основы спросите Вы? Потому как шаблон небольшого сайта достаточно объемен, что требует времени на его разработку и тем более пояснения. Более подробную информацию по созданию шаблонов Вы найдете в нашем курсе Joomla-Мастер. С нуля до премиум шаблона.
Итак, для начала давайте рассмотрим HTML шаблон, который будет использоваться для данного урока.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоПри этом его файловая структура следующая:
Соответственно создаем в удобном месте Вашего компьютера папку для первоначальной разработки шаблона Joomla и копируем файловую структуру HTML шаблона. То есть, как говориться начало положено.
Далее создадим специальный установочный файл, формата .xml который будет содержать в себе инструкции по установке будущего шаблона. Данный файл еще называют “манифест-файл” и любое устанавливаемое расширение должно его содержать в своей структуре, непосредственно в корне. Имя данного файла templateDetails.xml и для начала добавим с него следующий участок кода:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
Данный блок кода – несет описательный характер, потому как определяет имя шаблона, его разработчика и т.д. Используемые теги:
name — имя шаблона;
version – версия разработки;
creationDate – дата создания;
author – имя автора;
authorMail – почтовый ящик автора;
authorUrl – путь к сайту разработчика;
copyright – информация по копирайтам;
license – информация о лицензии, по которой распространяется данный шаблон;
description – краткое описание шаблона. Обратите внимание .что в качестве значения данного тега ,используется специальная языковая константа, значение которой будет описано далее в определенном файле.
Далее, добавим к файловой структуре будущего шаблона, несколько элементов. Обратите внимание, что созданные каталоги не должны быть пустыми. Если на первых порах, Вы не добавляете в них файлы, то создайте пустой файл, к примеру index.html и поместите его во все пустые папки, во избежание ошибок установки.
Теперь хотел бы пояснить, для чего нужны только что созданные элементы:
html – каталог хранения переопределений макетов различных расширений Joomla. Как я говорил выше, шаблон определяет только основную структуру сайта, весь контент формируется в видах компонентов и модулей.
language – каталог хранения доступных локализаций шаблона.
index.php – основной логический файл шаблона, где будет прописана его структура.
template_preview.png – скриншот шаблона. Данный скриншот показывает внешний вид шаблона и будет доступен в панели администратора, после установки.
template_thumbnail.png – уменьшенная копия скриншота – будет отображаться в менеджере шаблонов, как миниатюра, рядом с названием шаблона.
Далее добавим дополнительный блок кода в установочный файл.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> — имя копируемого файла. При этом указывается информация только верхнего уровня, вложенные файлы и папки, будут скопированы автоматически.
Далее, добавим информацию о поддерживаемых локализациях, то есть другими словами укажем файлы, в которых будут содержаться значения для используемых языковых констант.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео|
1 2 3 4 |
<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 используются для отображения описания расширений во время установки или в менеджерах (шаблонов, компонентов и т.д.). Таким образом, для одного языка локализации нужны два вышеуказанных файла, и пути к ним прописываются в теге
Теперь необходимо создать указанные выше файлы словари в каталоге language.
Теперь давайте добавим содержимое для этих файлов. В файл ru-RU.tpl_design_studio.ini, то есть обычный файл словарей, необходимо добавить перевод константы TPL_DESIGN_STUDIO_DESCRIPTION чтобы краткое описание отображалось в настройках шаблона.
|
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
|
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. А значит, давайте разделим шаблон на несколько позиций.
Таким образом, нам нужно зарезервировать пять позиций:
навигация;
шапка сайта;
верхний блок контента;
левая боковая колонка;
нижний подвал, или футер.
Область для отображения основного контента мы к позициям модулей не привязываем. После этого добавим следующий код в установочный файл:
|
1 2 3 4 5 6 7 8 |
<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 добавим переводы для имен позиций.
|
1 2 3 4 5 |
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_ и наконец, имя определенной позиции в верхнем регистре. Таким образом, установочный файл завершен, а значит приведу его полный код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?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> |
Теперь файловую структуру будущего шаблона упакуем в архив формата .zip и установим стандартным способ в CMS Joomla.
Как Вы видите, установка успешно завершена. На данном этапе мы с Вами сделаем перерыв и продолжим разговор по теме joomla создание шаблона с нуля в следующей статье. Всего Вам доброго и удачного кодирования!!!
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Комментарии (5)