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

Шаблон — это внешнее оформление сайта, это его дизайн и компоновка, это та оболочка, с которой непосредственно сталкивается пользователь.

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

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

Как можно сделать шаблон Joomla своими руками, что для этого понадобится

Есть разные способы создания собственного макета для движка Joomla. Один из самых простых — это использовать специальноt ПО для ускоренного создания шаблона. Есть ни одна программа, которая позволяет без знания кода делать замечательные сайты. Но проблема в том, что часто такая программа труднодоступна — то есть стоит слишком много для начинающего вебмастера. Хорошая программа такого плана — это Aristeer. Это не единственная программа, которая поможет вам сделать шаблон, и если вас интересует именно такая верстка посредством приложений, тогда собирайте деньги на покупку специального ПО.

Другой простой вариант, как сделать макет для Joomla — это переписывание уже готового шаблона. То есть вы берете чужой шаблон, меняете его составляющие и делаете из него свой макет для сайта. Но настоящим романтикам IT-сферы такой метод явно не понравится, потому перейдем к третьему, самому сложному и интересному способу — вы узнаете как сделать шаблон своими руками с нуля для любого сайта на движке Joomla.
https://www.youtube.com/watch?v=1aZEz5oHMlE

Верстка шаблона для Joomla — какие особенности

Основная особенность и при этом преимущество создания макета для движка Joomla — это блочная структура шаблонов. Это большой плюс для новичков. Им не придется сталкиваться со сплошным потоком кода, а нужно будет постепенно изучать строение различных блоков макета, разделенных тегом <div>. Чтобы создать достойный шаблон Joomla, нужно будет лишь сделать заготовку (в этом поможет программа Photoshop), а потом разделить дизайн на несколько блоков и прописать их в коде.

В Joomla есть такое понятие, как расширения. Это функциональные части сайта, основной которых являются компоненты и модули. Именно их расположение вы и будете прописывать в блоках <div>. Компоненты займут больше места, модули — меньше. Вы должны заранее определить, где будет находится основной контент (компонент), а где различные мелкие элементы и функциональные блоки (модули). Вот примерный набор блоков <div> для полноценного сайта:

1. Logo — данный блок предназначен для вывода логотипа сайта/компании. Обычно, его размещают в верхней части сайта, то есть в шапке.
2. Справа от Logo можно разместить блок модуля для поиска по сайту Joomla.
3. Как правило, у ресурса есть блок «футер» — это подвал сайта, где размещается различная информация, вроде карты сайта, контактов и прочего.
4. Content — это основа сайта, компонент, в котором будет выводиться главная информация страницы.
5. Left и right — это боковые модули, в которые можно будет поместить онлайн-калькуляторы, формы авторизации, календари и прочее.
6. Header — это «голова» сайта, которая содержит его заголовок, описание, слайд-шоу (обычно) и прочее.

Вот и весь примерный набор блоков для полноценного сайта. У вас может быть абсолютно иной набор позиций, и это нормально.

Какие файлы нужно будет создать для шаблона Joomla

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

Для начала создайте папку images. Она не будет выполнять функции хранилища для медиафайлов, размещаемых в контенте — она нужна для хранения картинок, которые используются в шаблоне. Учтите, что если вы решили создать свой шаблон, то эта папка обязательно должны быть чем-то наполнена, иначе Joomla откажется читать вашу дизайнерскую затею и выдаст на экране ошибку.

Следующая папку, которую вам необходимо сделать — это CSS. В данной директории будут содержаться все файлы каскадных стилей, которые определят дизайн вашего шаблона. Обязательно поместите в папку файл template.css, пусть даже пустой — с него и начнете свою верстку с нуля.

Но самое главное, что вам нужно сделать, чтобы сгенерировать свой шаблон в CMS Joomla — это создать файл index.php. Именно этот файл станет основным связующим между движком и вашим дизайном. Создавать этот файл, да и вообще весь шаблон, лучше через специальный редактор. Лучший в своем роде для новичков — это Macromedia Dreamweaver. Если вы ненароком сделаете ошибку в коде, умная программа сообщит вам об этом, наподобие того, как Word подчеркивает ошибки красным.

Из чего будет состоять файл index.php

Сделать этот файл самому весьма непросто, особенно, если до этого вы не имели дело с такими заданиями. В целом, файл имеет одну и ту же структуру на разных сайтах, потому со временем вы научитесь его быстро создавать. Начинается файл с информации о заголовке, а также о мета-тегах сайта. Далее следуют ссылки на CSS файлы шаблона, помещенные в ранее созданную папку CSS. Также очень важно в первой части файла прописать функцию сворачивания позиций, в случае отсутствия в них модулей. Без прописи такой функции верстка будет неудачной, потому что сайт будет выглядеть пустым — блоки видны, а в них ничего нет. Раздел заголовка закрывается тегом .

Далее откройте тег — именно в нем будут содержаться основные элементы сайта, тело страницы и главные параметры. Начните эту часть кода с блока page, который будет определять ширину сайта. Затем вам предстоит постепенно прописать код для каждого блока, начиная сверху и заканчивая подвалом сайта. Вам необходимо определить размер каждой составляющей, а также указать ее позицию. Именно на этом этапе вы сформируете позиции модулей, которые были упомянуты выше. Потому вам и следует заранее определиться со структурой ресурса.

Учтите, что файл index.php должен быть написан при помощи кодировки UTF-8. В ином случае вы не сможете вносить корректировки в созданный макет через админку движка Joomla.

Как инсталлировать свой шаблон на сайт с движком Joomla

Теперь, когда у вас уже созданы все необходимые папки и главный файл index.php, вы можете попробовать установить макет на сайт Joomla. Но, скорее всего, у вас не получится этого сделать. А все потому, что для инсталляции на движок в директивах макета должен содержаться еще один связующий файл — templateDetails.xml. Этот файл сообщит движку, куда ему обращаться для определения внешнего вида сайта. По сути, templateDetails.xml будет «отчитываться» перед Joomla по поводу наименований файлов и их расположению.

Кроме того, вам необходимо будет указать в templateDetails.xml наименования позиций, используемых в шаблоне. В будущем, чтобы добавить новую позицию, вам необходимо будет прежде ее прописать в этом файле, а потом и в «индексе». После того, как вы наполните файл templateDetails.xml, можете попробовать установить шаблон на сайт. Для этого перейдите в админку Джумла. Далее зайдите в раздел «Менеджер расширений», а оттуда в «Шаблоны». Установите созданный вами макет через обзор диска на компьютере и активируйте его. Либо можете сразу загрузить файлы на хостинг, а потом активировать макет через админку.

Учтите, что это лишь примерная инструкция без деталей написания кода. Вам предстоит изрядно помучиться, прежде чем вы сами напишите качественный шаблон. Но на то она и верстка, чтобы учиться на своих ошибках!