Что из себя представляет шаблон?
Из чего состоит шаблон и как всё это работает?
Для чего нужен шаблон?
Этот вопрос уже подробно разбирался в первой части. Шаблон – это основа, каркас сайта. Шаблон определяет позиции для всех элементов сайта, а так же внешний вид (оформление) этих элементов и их размеры. Более подробно об основных частях шаблонов вы можете прочитать в статье "Установка шаблона" (часть 1, глава 8), а здесь повторяться не будем и перейдём к следующему вопросу:
Что из себя представляет шаблон?
Шаблон – это обычная папка, название которой совпадает с названием шаблона. На сайте папки с шаблонами всегда вложены в папку "templates", находящуюся в корне:
В папке шаблона могут находится разнообразные вложенные папки и файлы, наличие которых зависит от того, что создаёт разработчик этого шаблона, однако некоторые из них имеются практически во всех шаблонах и считаются общепринятыми. Почему общепринятыми? Всё просто: это нужно для правильной работы системы, а так же для того, что бы любой другой человек мог разобраться в коде.
Давайте посмотрим на то, что обычно всегда находится в папке с шаблоном и попробуем в этом разобраться:
Из чего состоит шаблон и как всё это работает?
По запросу, полученному от браузера пользователя, сервер выдаёт ему код страницы и все необходимые файлы, на которые в этом коде имеются ссылки; по большей части это изображения. Как это происходит?
При запросе система обращается к шаблону, который установлен для сайта или для данной страницы. Такой запрос адресован главному файлу шаблона – файлу index.php . Далее система на основании этого файла начинает создавать код запрошенной страницы. Подробно об этом файле будет рассказано в 3-ей главе, а пока коснёмся только общего принципа построения.
Как правило, сначала создаются необходимые переменные и в них заносятся соответствующие данные. Затем подключаются каскадные таблицы стилей CSS, отвечающие за внешний вид страницы. Далее создаются все основные элементы, модульные позиции для них и так далее; при этом по необходимости система обращается к другим файлам и папкам шаблона и сайта.
Папка CSS
В этой папке находятся файлы каскадных таблиц стилей с расширением .css, позволяющие управлять внешним видом страницы. Например, в этом шаблоне вы найдёте файл stl_tpl_wds_v1.css, задающий параметры практически для всего, что расположено на экране, или файл main-menu.css, предназначенный только для настраивания внешнего вида главного меню и т.д. Количество и названия этих файлов зависят только от разработчика, при желании можно создать отдельные файлы чуть ли не для каждого элемента страницы, если, конечно, вам это будет удобно.
Папка JavaScript ( js )
В процессе построения кода страницы файл index.php ссылается на необходимые скрипты, расположенные в папке JavaScript (или сокращённо js).
Папка images
Вы видели когда-нибудь сайт, состоящий только из текста? Представить себе современный сайт без изображений практически невозможно, поэтому в любом коде страницы всегда имеются ссылки на различные рисунки, фотографии, "гифки" и тому подобные элементы. Большинство изображений находятся в папке images , расположенной в корневой директории сайта, однако в любом шаблоне то же имеется папка с таким же названием, в которой, как правило, находятся файлы, относящиеся именно к этому шаблону, например, фоновые изображения, изображения для страницы "ошибка 404" и т.д., поэтому очень важно правильно указывать пути к этим файлам.
Если вы загружаете изображения в процессе создания материалов или при помощи медиа-менеджера, то они попадают в папку images корневой директории; в этом случае путь будет выглядеть так:
/images/имя.jpg
где:
- images - это папка, находящаяся в корне сайта;
- имя - это название файла (старайтесь не использовать кириллицу!);
- jpg - расширение изображения (jpg, png и т.д.).
Если же вы используете изображения, расположенные в папке images шаблона, то адрес прописывается вот таким образом:
/templates/имя_шаблона/images/er404.png
В данном примере указан адрес изображения (файл er404.png), которое пользователь увидит в случае появление ошибки 404 сервера. Как видите, здесь так же указан полный путь, начиная от корня сайта.
Обратите внимание: загрузить изображения при помощи медиа-менеджера в папку images, находящуюся в шаблоне, теоретически возможно, но для этого придётся менять настройки менеджера, а соответственно, существует опасность возникновения ошибок, поэтому намного проще это сделать либо при помощи файлового менеджера (если сайт находится на хостинге), либо обычным способом (если сайт находится на локальном сервере, т.е. на вашем компьютере).
Другие папки шаблона
HTML
Здесь находятся вложенные папки с файлами, которые нужны для работы некоторых компонентов и модулей. При помощи этих файлов можно в какой-то степени изменить их работу: например, поменять некоторые элементы местами, какие-то убрать, какие-то добавить и т.д. Это значит, что если по умолчанию будет установлен ваш шаблон, то определённая часть кода этих компонентов и модулей будет взята из этой папки вашего шаблона, а если будет активирован другой шаблон, то соответственно, изменятся и эти элементы (об этом подробнее будет рассказано далее).
Папка, в которую вложены папки с файлами разных языков, которые, как правило, имеют название вида
ru-RU.tpl_MyTemplate.ini
или
ru-RU.tpl_MyTemplate.sys.ini
где:
- ru-RU - указывает на принадлежность соответствующему языку;
- tpl - указывает на отношение к шаблону;
- MyTemplate - это название шаблона;
- ini - расширение файла.
Такие папки и файлы можно встретить практически в любом шаблоне, компоненте, модуле и даже в корневой директории сайта; они необходимы для определённых надписей или частей текста в панели управления или на самом сайте.
Дело в том, что иногда в код какого-либо файла, например, templateDetails.xml, нельзя включать кириллицу; в этом случае в коде прописывается определённое выражение, например:
SITE_NAME
а в файле ru-RU.tpl_MyTemplate.ini – строка вида
SITE_NAME="Название сайта"
При создании кода страницы главный файл index.php указывает на то, какой язык используется по умолчанию, поэтому при создании такой страницы в код будет автоматически вставлено уже не SITE_NAME, а фраза "Название сайта".
Не сложно догадаться, что всё это так же используется и для сайтов, которые должны отображаться на разных языках. В этом случае достаточно просто поместить в папку language соответствующие языковые файлы и при составлении кода страницы система будет автоматически подставлять нужные слова или текст в соответствии с выбранным в настройках языком.
Файлы шаблона
error.php
- К этому файлу система обратится в случае, если будет допущена ошибка 404 при работе сервера (см. "Справочники", "Коды ответов сервера"); этот файл определяет вывод страницы с указанием ошибки.
favicon.ico
- В этом файле содержится маленькая иконка сайта, которая будет выводится в браузере рядом со строкой запроса. Это обычный файл изображения (.png, .jpg и т.д.), но с изменённым расширением (.ico).
index.html
- При отсутствии файла index.php (или если по какой-то причине система его не обнаружит) система обратится к этому файлу и на экран будет выведена просто пустая страница.
template_preview.png
- Это файл с большим скриншотом шаблона. Выводится в соответствующем разделе Joomla.
template_thumbnail.png
- Файл с маленьким скриншотом шаблона; так же выводится в Joomla.
templateDetails.xml
- Этот файл содержит все данные о шаблоне: название, автор, дата создания, список имеющихся файлов, модульных позиций, необходимых пунктов меню для управления шаблоном и т.п.
Обратите внимание: без файла templateDetails.xml, или в случае, если в файле допущена хотя бы малейшая ошибка, установка шаблона невозможна, а если вы редактируете этот файл уже в установленном шаблоне, то любая ошибка может привести к неработоспособности сайта!!!
- - - - - - - - -
Теперь переходим к детальному рассмотрению этих файлов и созданию шаблонов, а так же к созданию собственного шаблона.