Что бы до конца понять, как работает код этой и других страниц, нужно знать хотя бы основы программирования, HTML, PHP, CSS. Всё это вы можете найти в разделе «Программирование».
Для удобства дальнейшей работы настройте компьютер таким образом, что бы все текстовые файлы сайта с расширением .php, .css, .hml, .html и т.д. открывались в редакторе Notepad++.
При запросе, полученном от браузера, система обращается к файлу index.php шаблона, установленного по умолчанию. Давайте внимательно изучим содержимое этого файла, так как именно он отвечает за составление кода страницы.
Откройте файл. Путь к файлу, если шаблон уже установлен на сайт (см. глава 2, «Установка базовой основы»), таков:
где shablon1 — это название специального сайта, установленного на локальном сервере, как это описано в главе 2; соответственно, вы должны вписать здесь своё название. Если всё сделано правильно, то вы увидите на экране вот такую «картинку»:
Код на PHP
В начале файла находится код, написанный на языке PHP ; такой код присутствует практически во всех шаблонах и традиционно начинается с информативного блока, в котором содержится некоторая информация (версия Joomla, название шаблона, автор, тип лицензии и т.д.). Так как каждая строка начинается с символа * , а весь блок заключён в /** . */ , то эта информация игнорируется системой и предназначена только для разработчиков.
Сразу после блока информации следует стандартное выражение, запрещающее прямой доступ к файлу. Для чего необходима такого рода защита и как это всё работает вы можете прочитать в статье Программирование > CMS Joomla >«Запрет прямого доступа (константа ‘_JEXEC’)» , а пока нужно только запомнить, что такая строка встречается в начале всех файлов с расширением .php кроме файла index.php, находящегося в корне сайта:
Далее создаются все необходимые переменные, которым присваиваются соответствующие значения, и подключаются:
JS Frameworks;
Bootstrap;
скрипты JavaScript, находящиеся в соответствующей папке шаблона;
Последний блок в коде PHP применяется для изменения расположения основного контента. В этом блоке переменная $contentwidth получает соответствующее значение (left, right или mid) в зависимости от наличия модулей в левой и правой колонках; в дальнейшем вид страницы будет зависеть именно от этого значения:
28 // Блокировка пустых LEFT и RIGHT, ввод значений в переменную для настройки . 29 if($this->countModules(«left»)&&!$this->countModules(«right»)) < $contentwidth="left";> 30 if($this->countModules(«right»)&&!$this->countModules(«left»)) < $contentwidth="right";> 31 if($this->countModules(«left»)&&$this->countModules(«right»))
На этом код на PHP заканчивается и начинается код на HTML .
Код на HTML
В начале, в соответствии с требованиями HTML , следует указание типа документа:
Затем следует тэг . Здесь находится информация, необходимая для правильной работы браузера, а так же устанавливается язык сайта по умолчанию:
Обратите внимание: информация, заключённая в теги . —> игнорируется системой и нужна лишь для удобства работы с кодом.
Далее подключается HEAD>:
О том, что такое jdoc:include, читайте в Программирование >CMS Joomla.
И вот теперь следует открывающий тэг :
Между открывающим и закрывающим тегами и находится специальный контейнер, в которое вложено всё содержимое сайта, за исключением Footer («подвала»). Наличие этого контейнера не обязательно, но такой контейнер даёт определённое преимущество в оформлении, даёт возможность адаптировать страницы к разным размерам мониторов и так далее (об этом будет рассказано позднее):
Создание содержимого страницы начинается с HEADER («шапки» сайта):
После открывающего тэга в ставляется изображение, которое указано в панели управления (см. Часть 1, глава 8):
Этот код даёт команду вставить изображение в шапку сайта, а если изображение не найдено, то будет выведено название сайта, указанное в соответствующем поле в панели управления.
И последняя часть кода в HEADER создаёт соответствующую модульную позицию, после которой следует закрывающий тэг:
Рассмотрим внимательнее эту часть кода.
Заявление jdoc:include даёт указание системе создать модульную позицию, на что указывает type=»modules», с именем name=»header» и стилем style=»xhtml» . Это стандартный код для создания модульных позиций.
При необходимости вы можете при помощи такого кода создавать новые модульные позиции.
Далее таким же образом создаётся модульная позиция для главного меню сайта:
Здесь стоит обратить внимание на то, что код, который даёт указание создать модульную позицию, находиться внутри конструкции кода на PHP:
Такие конструкции при создании элементов страницы встречаются очень часто; это нужно для того, что бы в случае отсутствия самого элемента (в данном случае – главного меню) модульная позиция не создавалась и место на странице под этот элемент не резервировалось.
После модульной позиции для главного меню таким же образом создаётся позиция для вывода пути на сайте breadcrumbs:
После breadcrumbs создаётся основная секция, в которой будут находиться основной контент и различные модули:
Обратите внимание на некоторые особенности основной секции.
Во-первых, в ней будут созданы модульные позиции для левой и правой колонок LEFT и RIGHT, модульная позиция TOP-CONTENT («над контентом») и BOTTOM-CONTENT («под контентом»), но не будет создана модульная позиция для контента, поэтому основной контент просто займёт всё остальное место.
Во-вторых, для основного контента будет создана отдельная секция, которая будет представлена в трёх вариантах: content-left, content-right, content-mid, при этом каждый вариант будет настроен отдельно при помощи таблиц CSS. В зависимости от значения переменной $contentwidth, полученного вначале, в коде страницы будет использоваться один из этих вариантов; соответственно, основной контент будет располагаться слева (content-left) или справа (content-right) от модулей либо по середине (content-mid).
Итак, читаем и разбираем код далее:
Думаю, всем уже понятно, что была создана модульная позиция LEFT.
А это уже создана секция основного контента, о чём было сказано выше. Обратите внимание на то, что при помощи кода PHP в названии класса к слову content добавляется слово, хранящееся в переменной $contentwidth.
Вышеуказанный код, как вы поняли, создаёт позицию «Над контентом», но только в том случае, если в неё есть что вставлять, т.е. какой-либо модуль. Если модуля не окажется, то и позиция не будет создана.
Далее следует код основного контента:
Этот код (строка 102) вставляет на страницу компонент (материал так же является компонентом), но в некоторых случаях выдаёт специальное сообщение системы (строка 100).
Далее по уже известному принципу создаются модульные позиции BOTTOM-CONTENT и RIGHT:
Здесь ничего сложного нет, но нужно обратить внимание на присутствие двух закрывающих тэгов . Первый закрывающий тэг (строка 110) относится к тэгу секции основного контента (строка 90), а второй – к тэгу секции MAIN_SECTION (строка 82).
И последнее, что мы видим внизу основного блок-контейнера («b-container», строка 49):
Строка не создаёт какой-либо видимый элемент на странице, но имеет очень важное значение: он располагается под всеми элементами, расположенными выше; это достигается за счёт настроек в файле каскадных таблиц стилей stl_tpl_wds_v1.css :
Для чего это нужно? Это нужно для того, что бы следующий ниже элемент начинался только после того, как на странице закончатся все предыдущие.
Дело в том, что все элементы на странице выстраиваются в том порядке, в котором расположены в коде, но длина каждого элемента может быть разной! Если, к примеру, на сайте слева и справа от основного контента находятся различные модули, то длина каждого столбца может быть неравномерной, так как вряд ли кто-то будет создавать абсолютно одинаковые модули по высоте и располагать их симметрично с обоих сторон! Но иногда возникает ситуация, когда очередной элемент страницы должен быть расположен строго под всеми другими независимо от их высоты (как раз то, что и нужно для «подвала» сайта), и вот здесь приходит на помощь созданный класс «clr», который чётко отделяет все верхние элементы от тех, которые будут созданы ниже.
Код в строке 119 нужен для корректного отображения FOOTER — «подвала» сайта, который не входит в основной блок-контейнер. Для чего это сделано?
Обратите внимание на то, что «подвал» сайта располагается в самом низу, под всеми элементами страницы, что обеспечивает наличие кода в строке 118, о котором было рассказано выше. Но проблема в том, что высота основного блок-контейнера зависит от высоты страницы, а так как все страницы разные по объёму текста и наличию изображений, то если эта высота окажется слишком маленькая (например, при выводе ошибки 404), «подвал» сайта окажется не внизу, а в середине экрана, а это смотрится не совсем красиво. Что бы «привязать» «подвал» сайта к низу экрана, эта модульная позиция выведена за пределы блок-контейнера, но в самом блок-контейнере под эту позицию обязательно зарезервировано место при помощи кода в строке 119, причём без дополнительной обёртки в . . Это место имеет строго определённую высоту, определённую в файле стилей stl_tpl_wds_v1.css :
Сам же FOOTER при помощи файла стилей размещается таким образом, что он «привязывается» к низу экрана, но об этом будет подробно рассказано в главе 5 «Работа с CSS».
И последнее, что создаёт код страницы – FOOTER.
Данный код объяснений не требует, здесь всё понятно.
Строка 130 создаёт надпись: «WDS», указывающую на авторские права; здесь вы можете разместить любой свой текст по своему усмотрению, например, «Все права защищены» и т.п.
Этот код создаёт последнюю позицию на сайте, находящуюся в левом углу «подвала» сайта – f-menu. Здесь можно будет в дальнейшем разместить информацию, которая обычно всегда присутствует в «подвале» сайта: обратная связь, контакты и тому подобное.
В самом конце следуют закрывающие тэги:
Теперь вы знаете, из чего состоит и для чего нужен файл index.php, как он управляет созданием кода страницы. Теперь вы знаете, как добавить или убрать модульную позицию, надписи и так далее, а значит, уже можете самостоятельно «подогнать», переписать код этого файла под создаваемый вами шаблон. Но так как этот файл только создаёт различные элементы, но не указывает для них точные координаты, размеры и оформление, то самое время перейти к работе с каскадными таблицами стилей CSS.
Добавлять комментарии и ответы могут только пользователи, прошедшие регистрацию! Зарегистрируйтесь и напишите своё мнение или ответ!
