Для Joomla созданы сотни шаблонов, которые можно использовать для того, чтобы отображать данные сайта в интернете. Есть платные шаблоны, есть бесплатные, но это вовсе не означает, что всегда нужно использовать готовые решения. Иногда при проектировании нового сайта требуется начать его делать с нуля. Joomla идеально для этого подходит, нужно лишь только разобраться в том, как создавать шаблоны сайтов. В этой статье рассмотрим минимальный объём данных, необходимых для начала работы по созданию шаблона сайта с нуля для CMS Joomla 3.
Файловая структура шаблона сайта для CMS Joomla 3
Первым делом рассмотрим, какие папки и файлы требуются для создания минимального шаблона сайта для CMS Joomla 3.
Лирическое отступление про кодировку файлов.
Сразу отмечу, что кодировка файлов должна совпадать с кодировкой файлов на сервере. Обчно это UTF-8, но лучше открыть любой из файлов на сервере и посмотреть, в какой кодировке он хранится. Ещё лучше, конечно, наверняка знать кодировку файлов на сервере, но для этого нужно лезть в его настройки. Серверов может быть несколько (например, Apache и NGiNX) и у них эти кодировки обычно явно задаются в конфигах. В общем, можно ничего не знать, о том, как устроена работа сервера, но если с кодировкой будут проблемы, это станет видно по кракозябрам вместо текста, набранного на русском языке (кирилице). если пошли кракозябры, — значит нужно разобраться с кодировкой и выставить правильную.
Итак, минимальная файловая структура шаблона сайта для CMS Joomla 3 достаточная для того, чтобы шаблон можно было установить и он начал работать:
└─── rezon
├── css
│ ├── index.html
│ └── template.css
├── images
│ └── index.html
├── language
│ ├── en-GB
│ │ ├── en-GB.tpl_rezon.ini
│ │ └── en-GB.tpl_rezon.sys.ini
│ └── ru-RU
│ ├── ru-RU.tpl_rezon.ini
│ └── ru-RU.tpl_rezon.sys.ini
├── component.php
├── error.php
├── favicon.ico
├── index.php
├── templateDetails.xml
├── template_preview.png
└── template_thumbnail.pngОсновная папка шаблона должна совпадать с его названием (для того, чтобы исключить возможную путаницу). Свой шаблон я назвал rezon. Все файлы шаблона должны находиться в этой папке.
Файлы-заглушки index.html во вложенных папках шаблона сайта
В папках шаблона, в которых будут находиться файлы с картинками, css, JavaScript и прочие, лучше заранее положить файлы index.html с простым содержанием типа:
<!DOCTYPE html><title></title>Или вообще пустые. Это нужно для того, чтобы скрыть содержимое папок от любопытных глаз пользователей. Так как при некоторых настройках сервера, содержимое папок может отображаться в виде списка файлов, если в папке отсутствует индексный файл. А в папке может находиться информация, которая может помочь взломать сайт или информация приватного содержания. В общем, лучше не рисковать и выкладывать индексные файлы-заглушки. Это здоровая паранойя, которая поможет не нарваться на неприятности, связанные с недостаточной защитой данных.
Папки шаблона сайта
css— папка для хранения css-стилей шаблона сайтаjs— папка для хранения JavaScript-файлов шаблона сайтаimages— папка для хранения картинок шаблона сайта (именно шаблона, а не всех подряд картинок)language— папка для хранения переводов фраз для сайтов со включенным режимом мультиязычностиen-GB— папка для файлов переводов фраз на английском языкеru-RU— папка для файлов переводов фраз на русском языкеru-RU.tpl_rezon.ini— папка для фраз переводов для фронтенда (сайта)ru-RU.tpl_rezon.sys.ini— папка для фраз переводов для бэкенда (админки). Дополнительное расширение.sys.- Название может быть каким угодно, но принято называть файлы именно в таком формате:
ru-RU— языковое обозначение.tpl_rezon—tpl_(обозначение того, что файл принадлежит шаблону (сокращение template)), далее следует название шаблона..sys— файл для бэкенда (админки).ini— расширение файла (просто такое принято)
- Название может быть каким угодно, но принято называть файлы именно в таком формате:
Пример файла ru-RU.tpl_rezon.ini
Так как в шаблоне будет применяться переменная TPL_REZON_XML_DESCRIPTION, то ей нужно присвоить значение:
TPL_REZON_XML_DESCRIPTION="Шаблон сайта для Joomla! 3.x. reZon, вёрска в формате HTML5. (ru-RU.tpl_rezon.ini)"В файле локации английского языка en-GB.tpl_rezon.ini переменной TPL_REZON_XML_DESCRIPTION также должно быть присвоено значение в виде фразы на английском языке.
Пример файла ru-RU.tpl_rezon.sys.ini
Та же самая переменная используется в админке сайта для вывода информации о том, что шаблон установлен. Формат данных такой же:
- Языковая переменная (принято писать ЗАГЛАВНЫМИ ЛАТИНСКИМИ БУКВАМИ, разделяя слова символом подчёркивания
_) - Знак присваивания
= - Значение переменной обязательно в кавычках
"..."должно содержать фразу, которую требуется подставить в шаблон вместо названия переменной.
Если переменной не присвоено значение в языковой локализации (например, в русской), Joomla может попробовать найти её значение в английской версии. Если там нет её значение, то в шаблоне будет выведено название этой переменной. Именно поэтому, иногда на сайте или в админке можно встретить непонятные слова, разделённые подчёркиванием заглавными буквами. Это значит, что Joomla не может найти перевод и/или значение в языковых файла.
Итак, в файл ru-RU.tpl_rezon.sys.ini также вносим значение этой переменной:
TPL_REZON_XML_DESCRIPTION="Шаблон сайта для Joomla! 3.x. reZon, вёрска в формате HTML5. (ru-RU.tpl_rezon.sys.ini)"В файл английской локации en-GB.tpl_rezon.sys.ini тоже нужно внести значение этой переменной.
Файлы template_preview.png и template_thumbnail.png шаблона сайта
Файлы template_preview.png и template_thumbnail.png шаблона сайта должны содержать картинку превьюхи шаблона. Так как эти файлы используются в Менеджере шаблонов сайта в админке Joomla, их лучше подготовить отдельно. Рекомендуемые размеры в пикселях:
template_preview.png— 640 х 480template_thumbnail.png— 206 х 150
Файл favicon.ico шаблона сайта
Файл favicon.ico шаблона сайта — это файл с фавиконкой сайта. Есть масса способов его создать, пример по → этой ссылке.
Файлы component.php и error.php пока не будет разбирать. Для того, чтобы создать минимальный шаблон сайта, они могут быть пустыми или вообще отсутствовать (тогда их не нужно включать в файл templateDetails.xml).
Файл index.php шаблона сайта
Для того, чтобы убедиться, что шаблон работает, достаточно такого содержимого файла index.php:
<?php
defined('_JEXEC') or die;
?>
<!doctype html>
<html>
<head>
<jdoc:include type="head"/>
</head>
<body>
<div style="text-align:center;">
<h1>Шаблон reZon</h1>
<h2>Начало</h2>
</div>
</body>
</html>Файл templateDetails.xml шаблона сайта
Файл templateDetails.xml шаблона сайта содержит конфигурацию и связи всего шаблона. Его минимальное содержимое может быть таким:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/2.5/template-install.dtd">
<extension version="3.9" type="template" client="site">
<name>rezon</name>
<creationDate>5 August 2019</creationDate>
<author>Aleksandr Zakharov</author>
<authorEmail>muba4@yandex.ru</authorEmail>
<authorUrl>https://mb4.ru</authorUrl>
<copyright>Copyright (C) 2006 — 2019 MoonBase, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<version>1.0.2</version>
<description>TPL_REZON_XML_DESCRIPTION</description>
<files>
<folder>css</folder>
<folder>images</folder>
<folder>language</folder>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>favicon.ico</filename>
<filename>index.php</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>debug</position>
</positions>
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_rezon.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_rezon.sys.ini</language>
<language tag="ru-RU">ru-RU/ru-RU.tpl_rezon.ini</language>
<language tag="ru-RU">ru-RU/ru-RU.tpl_rezon.sys.ini</language>
</languages>
<config>
<fields name="params">
</fields>
</config>
</extension>Более подробный разор полей этого XML-файла см. в → этой статье.
Сборка шаблона, подготовка пакета и установка шаблона сайта в админке Joomla
После того, как все файлы подготовлены, их нужно запаковать в архив zip, в который должна входить и сама папка шаблона. Структура архива должна быть такая, которая приведена в самом начале этой статьи.
После того, как архив готов, шаблон можно установить на сайт. Если всё было сделано правильно, установка должна пройти без ошибок. После активации шаблона, он должен отобразить содержимое файла index.php.
