Как написать joomla шаблон для joomla

Как создать шаблон для Joomla самостоятельно

CMS Joomla занимает второе место по распространенности в интернете. Поэтому многих интересует вопрос, как создать шаблон для Joomla. Попытаемся этому научиться.

О Joomla

Название CMS больше напоминает имя чернокожей красотки. И это не удивительно, ведь оно имеет африканские корни.

Joomla представляет собой систему управления контентом ( CMS ), реализованную на основе php и JavaScript со встроенной поддержкой СУБД MySQL . Она является потомком известного движка Mambo .

Как отдельная CMS Joomla начала свое существование не так давно. Ее первая версия вышла лишь в 2005 году. Последней является версия 3.3 , которая вышла в октябре 2014.

К особенностям данной CMS можно отнести:

Мультиязычность – в базовую версию движка уже включена поддержка нескольких языков. С помощью инсталляции лингвистических пакетов возможна реализация интерфейса административной и пользовательской частей Joomla на большинстве существующих языков;
Бесплатность – движок, как и многие шаблоны для сайта Joomla , распространяется на бесплатной основе и имеет полностью открытый код;
Легковесность – в состав инсталляционного пакета CMS входит лишь минимальный набор инструментов. По мере необходимости он легко расширяется с помощью установки нужных дополнений. Благодаря этому легко оптимизируется занимаемое ресурсом пространство на хостинге и уменьшается нагрузка на сервер:

Работа с шаблонами в Joomla

В Joomla основным средством изменения внешнего вида сайта является шаблон. Он выступает своего рода остовом, к которому крепятся все остальные модули и расширения. К особенностям данной CMS также относится возможность установки шаблонов не только для фронтальной части сайта, но и для административной.

В админке вся работа с шаблонами происходит через « Менеджер шаблонов ». Начальная версия движка содержит несколько предустановленных тем ( шаблонов ). Новые шаблоны, доступные для скачивания, можно легко найти в интернете.

Они могут распространяться как на платной, так и на бесплатной основе. Движок является системой управления контентом с открытым кодом. Поэтому создать шаблон Joomla можно и самостоятельно:

Дополнительно в панели администрирования настраивается стиль отображения каждой из тем. Эта возможность доступна через вкладку « Стили » в « Менеджере шаблонов »:

После нажатия на имя шаблона в списке открывается новое окно. С помощью его интерфейса возможно частичное редактирование шаблона Joomla .

Еще одной уникальной возможностью данного движка является использование для оформления сразу нескольких шаблонов. То есть для пунктов одного меню можно использовать несколько тем:

Для изменения кода страниц темы в « Менеджере шаблонов » нужно перейти на вкладку « Шаблоны ». В списке ниже выбрать нужный элемент и нажать на ссылку « Параметры »:

На следующей странице выбираем файл для изменения. После нажатия ссылки с именем файла в окне редактора шаблонов Joomla отображается код выбранной страницы:

Установка нового шаблона

Для установки нового шаблона в административной части Joomla используется « Менеджер расширений ». Он доступен через одноименный пункт в панели управления. В его разделе видны несколько вкладок. Имеющих опыт работы с админками CMS поле « Поиск » может ввести в некоторое заблуждение.

Но нас интересует вкладка « Установка ». После перехода в данный раздел нужно выбрать один из трех вариантов, как поставить шаблон на Joomla . Точнее, требуется задать место нахождения инсталляционного пакета:

Файловая система;
Каталог CMS ;
Путь URL .

В случае удачной установки вверху появится соответствующее системное сообщение:

Теперь, если проследовать в « Менеджер шаблонов », то в списке установленных тем можно увидеть новый элемент:

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

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

index.php – отвечает за генерацию страниц;
templateDetails.xml – в этом файле содержится описание самого шаблона в формате xml . В его полях хранятся метаданные об авторе, версии расширения и другие значения. Все эти параметры будут использованы системой при работе сайта.

Темы Joomla хранятся в директории templates . Создадим в ней папку под названием « test ». Здесь будут храниться все файлы будущего шаблона. Внутри этой папки создадим еще одну папку с именем css . Тут будут размещены все файлы стилей.

Для примера возьмем уже сверстанную страницу html со следующим кодом:

Перед тем, как редактировать шаблон Joomla дальше, весь css нужно перенести в файл style.css и сохранить его в папке « css ». Код файла останется без изменений.

Теперь создаем xml описание шаблона. В нем задаются значения тех параметров, которые будут отображаться в « Менеджере шаблонов ». Содержимое файла templateDetails.xml :

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

Но это еще не все. До того, как сделаем шаблон для Joomla , осталось пару шагов. Теперь нужно создать файл index.php . Вот его код:

строка выводит все содержимое заголовка;
выводит содержимое блока;
выводит блок, позиция которого указана в значении атрибута name . В поле name устанавливается один из встроенных стилей ( xhtml, rounded, outline и другие );
в случае ошибки будет выведено системное сообщение.

Теперь добавим по пустому файлу index.html в каждую папку. Они нужны для запрета листинга межу директориями. Осталось лишь создать архив со всеми файлами шаблона и установить его через « Менеджер расширений ». После инсталляции его имя будет отображено в списке « Менеджер расширений »:

Альтернатива

Создать шаблон для Joomla самостоятельно достаточно сложно. Поэтому в качестве альтернативы следует рассмотреть другие решения.

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

cooltemplate.com – еще один генератор. Обладает англоязычным интерфейсом и инструментарием. Сгенерированные им шаблоны требуют некоторой доработки:

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

Но не стоит сильно рассчитывать на программы для создания шаблонов Joomla . Как показывает практика, сгенерированный ими код нуждается в серьезной доводке. Поэтому знания веб-программирования, css и html все равно потребуются. Так что можно научиться разрабатывать шаблоны самому или подождать, пока программы станут более совершенными. А когда это будет, ни один африканский колдун не предскажет.

Источник статьи: http://www.internet-technologies.ru/articles/kak-sozdat-shablon-dlya-joomla-samostoyatelno.html

Создаем свой шаблон для Joomla. Пошаговое руководство

Теперь статьи можно слушать:

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

Зачем это нужно? Наверняка вы слышали о том, что CMS Joomla «тяжелая», в ней постоянно выскакивают ошибки, «едет» верстка, «отваливаются» скрипты. В основном это связано с шаблоном, который вы используете, а именно – с подключением множества плагинов и скриптов, фреймворков (как css/js, так и php), которые в процессе работы сайта и для его продуктивности практически не нужны. Поэтому мы сталкиваемся с долгой загрузкой в Google Page Speed и многочисленными ошибками, которые влияют на продвижение сайта в поисковиках.

Для решения этой проблемы мы сделаем свой шаблон (template), в котором можно будет настраивать внешний вид, менять цвета, добавлять информацию. Настройками можно легко управлять с помощью административной панели самой Joomla.

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

Вы хотите создавать свои шаблоны для CMS Joomla 3.x и продавать их либо обеспечивать удобство для наполнения контентом и ведения для заказчика.
Если вам надоели клубные «тяжелые» шаблоны с кучей ненужных настроек и скриптов.
Если не хотите использовать шаблоны со сторонними ссылками и вредоносным кодом, что снижает шансы на продвижение ресурса.

Структура шаблона

Для начала нам необходимо создать папку со следующим содержимым. Попутно поясняю, что и зачем нужно, простым языком, чтобы разобраться мог каждый (начнем с конца):

1. templateDetails.xml – файл, в котором мы описываем информацию о разработчике, версии, вносим информацию о содержимом, позиции модулей, языковые файлы, настройки.

2. template_preview.png, template_thumbnail.png – изображения шаблона, можно в Adobe Photoshop сделать в виде иконок. У меня они такие:

3. index.php – главный файл, в котором будет подключение скриптов, параметров, модули. И самое главное – верстка.

4. index.html – пустой файл html, который должен содержаться в каждой папке, чтобы мошенники не смогли просмотреть содержимое.

5. error.php – страница 404, можно настраивать как угодно, тем самым уйти от стандартной страницы 404 Joomla, которая выглядит не очень презентабельно 🙂

6. language – языковые файлы, если собираетесь делать шаблон мультиязычным.

7. js – папка со скриптами, со временем можно подключить все самое необходимое для работы сайта.

8. images – говорит само за себя, здесь хранятся картинки шаблона. Рекомендую здесь хранить картинки, относящиеся только к оформлению, так как будет неудобно грузить картинки для статей именно в папку шаблона.

9. html – папка для переопределения модулей и компонентов Joomla. Об этом поговорим позже, но, забегая вперед, скажу, что в этой папке храним все то, что не должно перезаписаться при обновлении модуля или компонента.

10. fonts – в эту папку можно подключить шрифты для сайта, если таковых нет на Google Fonts. Гугл шрифты лучше подключать через основной шаблон. Так вы получите более высокую оценку в Google Page Speed.

11. css – папка со стилями для шаблона, которые мы подключим к нашему шаблону.

Файл templateDetails.xml

Дальше нам нужно заполнить этот файл содержимым, которое будет описывать позиции модулей, настройки, информацию о версии и разработчике, языковые файлы. Рассмотрим подробнее.

1. Первая строчка обязательная, содержит версию xml и кодировку:

2. Далее открываем тег extension и начинаем описывать наше приложение:

Указываем версию Joomla, тип расширения, клиент установки и метод установки.

3. Рассмотрим следующие строчки.

В данном виде содержится языковая переменная (как пример), ниже рассмотрим, как это используется на практике.

Тоже не нуждается в пояснении:

Всю информацию в этом блоке описываете на свое усмотрение.

4. Следующим шагом нужно описать файловое содержание, то есть перечисляем в теге files все файлы и папки, которые необходимо установить.

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

Языковые файлы при установке добавятся в глобальную папку языков и автоматически будут подхватываться Джумлой в зависимости от выбранной локализации в админ-панели.

Самое главное – верно указать теги и названия файлов. Все аналогично для любой локализации, сейчас рассматриваем на примере русской локализации.

ru-RU.tpl_universum.ini – для лицевой части шаблона, отображения на сайте.
ru-RU.tpl_universum.sys.ini – для административной части. Описываем позиции модулей, переменные, описание настроек.

TPL_UNIVERSUM_DESCRIPTION – это и есть переменная, которую мы запишем в языковой файл, и Joomla будет «подтягивать» значение из него.

Открываем файл ru-RU.tpl_universum.ini и записываем значение переменной:

Можно записать любое значение, главное – без перехода на новую строку, иначе работать не будет. Также можно использовать html для красивого оформления сообщений.

Результат добавления description можно увидеть при установке шаблона:

Чтобы увидеть эту же информацию в настройках, необходимо эту же переменную добавить в файл ru-RU.tpl_universum.sys.ini:

Идем дальше.

6. Описываем позиции шаблона (что и где у нас будет выводится), для этого потребуется раздел positions:

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

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

Задать настройки шаблона нам поможет раздел config. Вот так выглядят параметры в админ-панели Joomla:

Тегом можно задать вкладки, внутри fieldset располагаем поля настроек. Рассмотрим, из чего состоят поля.

Значение по умолчанию (может отличаться в зависимости от типа поля):

Все типы полей можно посмотреть на официальном сайте Joomla.

Языковые переменные, о которых мы говорили выше, их необходимо прописать в файле ru-RU.tpl_universum.sys.ini для отображения в админке:

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

Файл index.php

В этом файле и будет вся наша верстка будущего сайта, в который мы добавим вывод наших настроек и обязательных параметров Joomla для корректной работы сайта.

Первой обязательной строчкой php файла является следующее выражение:

Далее нужно передать параметры в шаблон следующим образом:

Затем передаем сами параметры и записываем в переменные – на примере title, description и лого:

Начало файла шаблона index.php:

Продолжаем наполнение шаблона, дальше следуют стандартные блоки html. Код приведен ниже:

– используется для загрузки скриптов модулей и компонентов, а также скриптов самой Joomla.
template; ?>/css/tpl-style.css»/> – загрузка файлов стилей шаблона.
– загрузка файлов скриптов шаблона, можно загрузить в футере для увеличения скорости загрузки сайта.

Далее в теге body вы вставляете свою верстку, а в места для контента – специальные переменные для вывода контента из админки по позициям, которые мы описывали выше в файле xml.

В остальных папках и файлах содержится наша верстка, и у каждого она своя.

Файл error.php

Имеет смысл рассмотреть еще файл error.php – в нем мы показываем, как должна выглядеть страница 404, у меня он такой (также можно «подхватить» все параметры из настроек шаблона – все зависит от фантазии и верстки страницы):