Закрыть ... [X]

Как сделать шаблон с нуля

Закрыть ... [X]

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

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

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

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

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

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

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

Узнать подробнее

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

Соответственно создаем в удобном месте Вашего компьютера папку для первоначальной разработки шаблона 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></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 – скриншот шаблона. Данный скриншот показывает внешний вид шаблона и будет доступен в панели администратора, после установки.

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

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

Узнать подробнее

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></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 – с неповторимым дизайном

Узнать подробнее

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

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

Получить
Источник: https://webformyself.com/sozdanie-shablona-dlya-joomla-3-chast-1/


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Уход за солейролия в домашних условиях
Как сделать обложку из плёнки
Как сделать два рисунка на одном
Лебедка своим руками
Простые терморегуляторы своими руками
Как сделать пистолет для кукол
Как сделать тушёную картошку с тушенкой


Как сделать шаблон с нуля
Как сделать шаблон с нуля


Как сделать шаблон с нуля для CMS Joomla
Как создать шаблон для Joomla - Joomla! по-русски - Joomlaportal



ШОКИРУЮЩИЕ НОВОСТИ