Для Joomla 3 уже написано огромное количество как платных, так и бесплатных шаблонов. Но как показывает практика, не существует такого шаблона, который идеально бы подошел для конкретного сайта. В результате начинаются танцы с бубнами в виде внесения изменений в дизайн, редактирования стилей, скриптов и так далее.
Конечно, на первое время вполне может подойти один из стандартных или скаченный с интернета шаблон, в который вносятся незначительные изменения. Но со временем хочется чего-то нового и вот тут у многих веб-разработчиков возникает вполне законный вопрос, а как создать шаблон для Joomla 3 самостоятельно и с нуля!? Вот именно об этом мы сегодня и поговорим.
С чего начать создание собственного шаблона для Joomla 3? Ответ на данный вопрос очевиден – с создания дизайна. К дизайну шаблона или страницы сайта надо подойти со всей ответственностью, чтобы в дальнейшем не пришлось его переделывать. Для этого необходимо еще на начальном этапе определиться с позициями для модулей, размерами блоков, дизайном шапки и футера и много чего еще.
Процесс этот достаточно сложный, но выполнимый, если Вы знакомы с графическими редакторами и имеете определенную фантазию. Но если рисование не Ваш конек, то не стоит расстраиваться, сейчас существует огромное количество людей, которые сделают эту работу за Вас в короткие сроки и по достаточно низким ценам.
Я выбрал для себя второй вариант и заказал готовый макет шаблона в формате PSD, тем самым сэкономил достаточно много времени, а это скажу я вам, многого стоит. Если Вы не сильны в рисовании и цените свое время, то советую поступить точно так же. Заказать разработку макета можно на этом сайте, цены и сроки выполнения заказа самые низкие из тех, что можно найти. Спустя пару дней я уже получил готовый макет, который теперь необходимо превратить в полноценный шаблон для сайта Joom4all.ru
С дизайном разобрались, а теперь приступим к основному – созданию шаблона для Joomla 3 с нуля. Для начала необходимо подготовить структура будущего шаблона.
Создание структуры для шаблона сайта на Joomla 3
Основой любого шаблона являются файлы и папки различного назначения:
- Специальный установочный манифест-файл (templateDetails.xml)
- Индексный файл, определяющий основную структуру сайта (index.php)
- Файл стилей (template.css)
Это так скажем минимально необходимый набор файлов для любого шаблона и чем сложнее шаблон, тем больше количество различных файлов будет использоваться. Например, это могут быть файлы скриптов, различные шрифты, файлы локализации и так далее.
С теорией разобрались, теперь давайте приступим к созданию структуры собственного шаблона для сайта. Для начала создайте обычную папку с именем будущего шаблона. В моем случае папка будет называться joom4all. Теперь следует её наполнить теми самыми файлами, про которые я писал выше. Чтобы не заморачиваться предлагаю скопировать эти файлы с одного из стандартных шаблонов, к примеру с шаблона Protostar. Набор файлов и папок данного шаблона следующий:
Но как Вы уже, наверное, поняли, все эти файлы и папки нам не нужны точно так же как и не нужно их содержимое. Для начала я удаляю лишние папки, которые не понадобятся для моего шаблона, это папки less и img. Теперь необходимо очистить содержимое оставшихся папок, но тут есть один момент, во избежание проблем во все вложенные каталоги необходимо добавить пустой файл index.html.
Теперь удаляем лишние файлы (component.php, error.php, favicon.ico, offline.php) расположенные в корневой папке, они нам не понадобятся. В результате у Вас должен получиться примерно следующий набор файлов шаблона:
Для тех, кто ни разу не сталкивался с редактированием, а тем более с созданием собственного шаблона для Joomla будет не лишним объяснить, что это за набор папок и файлов и для чего они нужны:
- index.php – файл, отвечающий за структуру будущего шаблона, другими словами файл разметки.
- templateDetails.xml – данный файл необходим для любого расширения, содержит определенные инструкции по установке расширения.
- template_preview.png – полноразмерный скриншот шаблона, который показывает его приблизительный внешний вид. Посмотреть его можно в админке щелкнув по миниатюре шаблона.
- template_thumbnail.png – а это собственно та самая миниатюра, или если хотите превьюшка нашего шаблона. Отображается она так же в админке в разделе «Расширения» -> «Шаблоны» -> «Шаблоны».
- favicon.ico – название файла говорит само за себя, это обычный значок сайта, который отображается во вкладках браузера перед названием страницы, а так же в результатах поиска.
- css – папка, в которой будут храниться стили нашего шаблона.
- fonts – если Вы будите использовать для шаблона дополнительные шрифты, то эта папка как раз для них.
- html – в данной папке мы будем хранить переопределения макетов различных расширений, по большей части модулей.
- images – каталог с изображениями для шаблона
- js – папка для хранения шрифто
- language – папка для хранения локализаций (языковых пакетов) для нашего шаблона. По большому счету, если шаблон делается чисто для себя, то в данной папке, как и в локализациях, нет смысла, но я все же решил показать, как создаются языковые пакеты и как ими пользоваться. В дальнейшем это может пригодиться.
Теперь давайте перейдем во вновь созданную папку language и создадим в ней новый каталог для русской локализации нашего шаблона с именем «ru-RU». В этом каталоге создаем два новых файла «ru-Ru.tpl_joom4all.ini» и «ru-Ru.tpl_joom4all.sys.ini». Имя файла подбирается не случайно, вначале указываем язык локализации, в нашем случае это русский (ru-RU), далее точка, после нее мы указываем, что данный файл перевода предназначен для шаблона (tpl) и далее через нижнее подчеркивание указываем имя шаблона (joom4all).
Файл с расширением «ini» будет отвечать за русскоязычное (в данном случае) описание каких бы то ни было строк в настройках шаблона и прочих его форм, а второй «sys.ini» за описание шаблона в момент его установки, описание позиций и т.д. В итоге структура папки language у нас должна получиться вот такого вида:
Если Ваш шаблон будет содержать больше одного языка, то по аналогии создаем новые папки (для английского это будет папка en-GB) и новые файлы локализации.
Структура сайта готова, но содержимое файлов index.php и templateDetails.xml осталось прежним от стандартного шаблона Protostar, для нашего шаблона их содержимое нам больше не пригодиться, поэтому полностью очищаем данные файлы и сохраняем изменения. Точно так же заменяем PNG файлы своими изображениями, и в заключении меняем фавикон. Для создания своей уникальной фавиконки могу посоветовать онлайн генератор favicon.by, это один из лучших онлайн генераторов.
На этом вводная часть статьи на тему создание шаблона для Joomla 3 подошла к концу, в следующей статье я расскажу, как правильно составить манифест-файл templateDetails.xml для нашего шаблона, после чего мы приступим к установке нашего нового, пока еще совершенно сырого шаблона.
