Что бы до конца понять, как работает код этой и других страниц, нужно знать хотя бы основы программирования, HTML, PHP, CSS. Всё это вы можете найти в разделе "Программирование".
Для удобства дальнейшей работы настройте компьютер таким образом, что бы все текстовые файлы сайта с расширением .php, .css, .hml, .html и т.д. открывались в редакторе Notepad++.
При запросе, полученном от браузера, система обращается к файлу index.php шаблона, установленного по умолчанию. Давайте внимательно изучим содержимое этого файла, так как именно он отвечает за составление кода страницы.
Откройте файл. Путь к файлу, если шаблон уже установлен на сайт (см. глава 2, "Установка базовой основы"), таков:
〉〉〉 OSPanel > domains > shablon1 > template > имя_вашего_шаблона > index.php
где shablon1 - это название специального сайта, установленного на локальном сервере, как это описано в главе 2; соответственно, вы должны вписать здесь своё название. Если всё сделано правильно, то вы увидите на экране вот такую "картинку":
Код на PHP
В начале файла находится код, написанный на языке PHP; такой код присутствует практически во всех шаблонах и традиционно начинается с информативного блока, в котором содержится некоторая информация (версия Joomla, название шаблона, автор, тип лицензии и т.д.). Так как каждая строка начинается с символа *, а весь блок заключён в /** ... */, то эта информация игнорируется системой и предназначена только для разработчиков.
3 /**
4 * @package Joomla_3.8.Site
5 * @subpackage Templates.WDS_template_number_1
6 * @avtor WDS
7 * @copyright
8 * @license GNU GPL
9 */
Сразу после блока информации следует стандартное выражение, запрещающее прямой доступ к файлу. Для чего необходима такого рода защита и как это всё работает вы можете прочитать в статье Программирование > CMS Joomla > "Запрет прямого доступа (константа '_JEXEC')" , а пока нужно только запомнить, что такая строка встречается в начале всех файлов с расширением .php кроме файла index.php , находящегося в корне сайта:
12 defined('_JEXEC') or die;
Далее создаются все необходимые переменные, которым присваиваются соответствующие значения, и подключаются:
- JS Frameworks;
- Bootstrap;
- скрипты JavaScript, находящиеся в соответствующей папке шаблона;
- каскадные таблицы стилей (CSS):
14 //Создание переменных и получение данных
15 $config = JFactory::getConfig();
16 $logo = $this->params->get('logo');
17 $doc = JFactory::getDocument();
18 $app = JFactory::getApplication();
19 $templateparams = $app->getTemplate(true)->params;20 // Добавление JS Frameworks и Bootstrap CSS
21 JHtml::_('bootstrap.framework');
22 JHtml::_('bootstrap.loadCss', true, $this->direction);23 //Подключение JavaScript и CSS
24 $doc->addStyleSheet(JUri::base().'/templates/'.$this->template.'/css/stl_tpl_wds_v1.css');
25 $doc->addStyleSheet(JUri::base().'/templates/'.$this->template.'/css/main_menu.css');
26 $doc->addStyleSheet(JUri::base().'/templates/system/css/system.css');
27 $doc->addScript('/templates/'.$this->template.'/JavaScript/IntExp_HTML5.js');
Последний блок в коде 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")){$contentwidth="mid";}
На этом код на PHP заканчивается и начинается код на HTML .
Код на HTML
В начале, в соответствии с требованиями HTML , следует указание типа документа:
35 <!DOCTYPE html>
Затем следует тэг <html>. Здесь находится информация, необходимая для правильной работы браузера, а так же устанавливается язык сайта по умолчанию:
38 <!-- HTML + подключение языка контента -->
39 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
Обратите внимание: информация, заключённая в теги <!-- ... --> игнорируется системой и нужна лишь для удобства работы с кодом.
40 <!-- HEAD -->
41 <head>
42 <jdoc:include type="head" />
43 </head>
О том, что такое jdoc:include, читайте в Программирование > CMS Joomla.
И вот теперь следует открывающий тэг <BODY>:
45 <!-- BODY -->
46 <body>
Между открывающим и закрывающим тегами <body> и </body> находится специальный контейнер, в которое вложено всё содержимое сайта, за исключением Footer ("подвала"). Наличие этого контейнера не обязательно, но такой контейнер даёт определённое преимущество в оформлении, даёт возможность адаптировать страницы к разным размерам мониторов и так далее (об этом будет рассказано позднее):
48 <!-- Создание основного блока-контейнера b-container -->
49 <div id="b-container">
Создание содержимого страницы начинается с HEADER ("шапки" сайта):
51 <!-- Создание HEADER -->
52 <header id="header">
После открывающего тэга вставляется изображение, которое указано в панели управления (см. Часть 1, глава 8):
54 <!-- Вставка изображения в шапку сайта: -->
55 <div class="logo">56 <!-- если изображение существует, то оно будет установлено, -->
57 <?php if ($logo): ?>
58 <a href="/<?php echo $this->baseurl ?>"><img src="/<?php echo $this->baseurl ?>/<?php
echo htmlspecialchars($logo); ?>" alt="<?php echo $config->get('sitename');?>" title=
"<?php echo $config->get('sitename');?>" /></a>
59 <?php endif;?>60 <!-- если изображения нет, будет выведено название сайта -->
61 <?php if (!$logo ): ?>
62 <a href="/<?php echo $this->baseurl ?>"><?php echo htmlspecialchars($templateparams->
get('sitetitle'));?> </a>
63 <?php endif; ?>
64 </div>
Этот код даёт команду вставить изображение в шапку сайта, а если изображение не найдено, то будет выведено название сайта, указанное в соответствующем поле в панели управления.
И последняя часть кода в HEADER создаёт соответствующую модульную позицию, после которой следует закрывающий тэг:
66 <!-- Подключение модульной позиции HEADER -->
67 <jdoc:include type="modules" name="header" style="xhtml" />
68 </header>
Рассмотрим внимательнее эту часть кода.
Заявление jdoc:include даёт указание системе создать модульную позицию, на что указывает type="modules", с именем name="header" и стилем style="xhtml". Это стандартный код для создания модульных позиций.
При необходимости вы можете при помощи такого кода создавать новые модульные позиции.
Далее таким же образом создаётся модульная позиция для главного меню сайта:
70 <!-- Подключение модульной позиции Главное меню сайта - MAIN MENU -->
71 <?php if($this->countModules('main_menu')) : ?>
72 <nav id="main_menu"><jdoc:include type="modules" name="main_menu" /></nav>
73 <div id="clear"></div>
74 <?php endif; ?>
Здесь стоит обратить внимание на то, что код, который даёт указание создать модульную позицию, находиться внутри конструкции кода на PHP:
<?php if(...) ?>
<nav id="main_menu"><jdoc:include type="modules" name="main_menu" /></nav>
<?php endif; ?>
Такие конструкции при создании элементов страницы встречаются очень часто; это нужно для того, что бы в случае отсутствия самого элемента (в данном случае – главного меню) модульная позиция не создавалась и место на странице под этот элемент не резервировалось.
После модульной позиции для главного меню таким же образом создаётся позиция для вывода пути на сайте breadcrumbs:
76 <!-- Подключение модульной позиции Хлебные крошки - breadcrumbs -->
77 <?php if($this->countModules('breadcrumbs')) : ?>
78 <nav class="breadcrumbs"><jdoc:include type="module" name="breadcrumbs" /></nav>
79 <?php endif; ?>
После breadcrumbs создаётся основная секция, в которой будут находиться основной контент и различные модули:
81 <!-- Подключение основной секции MAIN_SECTION -->
82 <section role="main" id="sect_main">
Обратите внимание на некоторые особенности основной секции.
Во-первых, в ней будут созданы модульные позиции для левой и правой колонок LEFT и RIGHT, модульная позиция TOP-CONTENT ("над контентом") и BOTTOM-CONTENT ("под контентом"), но не будет создана модульная позиция для контента, поэтому основной контент просто займёт всё остальное место.
Во-вторых, для основного контента будет создана отдельная секция, которая будет представлена в трёх вариантах: content-left, content-right, content-mid, при этом каждый вариант будет настроен отдельно при помощи таблиц CSS. В зависимости от значения переменной $contentwidth, полученного вначале, в коде страницы будет использоваться один из этих вариантов; соответственно, основной контент будет располагаться слева (content-left) или справа (content-right) от модулей либо по середине (content-mid).
Итак, читаем и разбираем код далее:
84 <!-- Создание модульной позиции LEFT -->
85 <?php if($this->countModules('left')) : ?>
86 <aside class="left"><jdoc:include type="modules" name="left" style="myxhtml" /></aside>
87 <?php endif; ?>
Думаю, всем уже понятно, что была создана модульная позиция LEFT.
89 <!-- Создание секции основного контента -->
90 <section class="content<?php echo $contentwidth; ?>">
А это уже создана секция основного контента, о чём было сказано выше. Обратите внимание на то, что при помощи кода PHP в названии класса к слову content добавляется слово, хранящееся в переменной $contentwidth.
92 <!-- Создание модульной позиции TOP-CONTENT -->
93 <?php if($this->countModules('top-content')) : ?>
94 <div class="top-content"><jdoc:include type="modules" name="top-content" style="myxhtml" /></div>
95 <?php endif; ?>
Вышеуказанный код, как вы поняли, создаёт позицию "Над контентом", но только в том случае, если в неё есть что вставлять, т.е. какой-либо модуль. Если модуля не окажется, то и позиция не будет создана.
Далее следует код основного контента:
97 <!-- Основной контент -->
98 <article>
99 <?php if(count($app->getMessageQueue())) { ?>
100 <jdoc:include type="message" />
101 <?php } ?>
102 <jdoc:include type="component" style="xhtml" />
103 </article>
Этот код (строка 102) вставляет на страницу компонент (материал так же является компонентом), но в некоторых случаях выдаёт специальное сообщение системы (строка 100).
Далее по уже известному принципу создаются модульные позиции BOTTOM-CONTENT и RIGHT:
105 <!-- Создание модульной позиции BOTTOM-CONTENT -->
106 <?php if($this->countModules('bottom-content')) : ?>
107 <div class="clr"></div>
108 <div class="bottom-content"><jdoc:include type="modules" name="bottom-content" style="myxhtml" /></div>
109 <?php endif; ?>
110 </section>
111
112 <!-- Создание модульной позиции RIGHT-->
113 <?php if($this->countModules('right')) : ?>
114 <aside class="rigth"><jdoc:include type="modules" name="right" style="myxhtml" /></aside>
115 <?php endif; ?>
116 </section>
Здесь ничего сложного нет, но нужно обратить внимание на присутствие двух закрывающих тэгов </section>. Первый закрывающий тэг (строка 110) относится к тэгу <section> секции основного контента (строка 90), а второй – к тэгу <section> секции MAIN_SECTION (строка 82).
И последнее, что мы видим внизу основного блок-контейнера ("b-container", строка 49):
118 <div class="clr"></div>
119 <div id="f-loc"></div>
Для чего это нужно?
Строка <div class="clr"></div> не создаёт какой-либо видимый элемент на странице, но имеет очень важное значение: он располагается под всеми элементами, расположенными выше; это достигается за счёт настроек в файле каскадных таблиц стилей stl_tpl_wds_v1.css :
209 .clr {
...
212 clear: both;
...
216 }
Для чего это нужно? Это нужно для того, что бы следующий ниже элемент начинался только после того, как на странице закончатся все предыдущие.
Дело в том, что все элементы на странице выстраиваются в том порядке, в котором расположены в коде, но длина каждого элемента может быть разной! Если, к примеру, на сайте слева и справа от основного контента находятся различные модули, то длина каждого столбца может быть неравномерной, так как вряд ли кто-то будет создавать абсолютно одинаковые модули по высоте и располагать их симметрично с обоих сторон! Но иногда возникает ситуация, когда очередной элемент страницы должен быть расположен строго под всеми другими независимо от их высоты (как раз то, что и нужно для "подвала" сайта), и вот здесь приходит на помощь созданный класс "clr", который чётко отделяет все верхние элементы от тех, которые будут созданы ниже.
Код в строке 119 <div id="f-loc"></div> нужен для корректного отображения FOOTER - "подвала" сайта, который не входит в основной блок-контейнер. Для чего это сделано?
Обратите внимание на то, что "подвал" сайта располагается в самом низу, под всеми элементами страницы, что обеспечивает наличие кода в строке 118, о котором было рассказано выше. Но проблема в том, что высота основного блок-контейнера зависит от высоты страницы, а так как все страницы разные по объёму текста и наличию изображений, то если эта высота окажется слишком маленькая (например, при выводе ошибки 404), "подвал" сайта окажется не внизу, а в середине экрана, а это смотрится не совсем красиво. Что бы "привязать" "подвал" сайта к низу экрана, эта модульная позиция выведена за пределы блок-контейнера, но в самом блок-контейнере под эту позицию обязательно зарезервировано место при помощи кода в строке 119, причём без дополнительной обёртки в <?php if> ... <?php endif; ?>. Это место имеет строго определённую высоту, определённую в файле стилей stl_tpl_wds_v1.css :
218 /* f-loc */
219 #f-loc {height:90px;}
Сам же FOOTER при помощи файла стилей размещается таким образом, что он "привязывается" к низу экрана, но об этом будет подробно рассказано в главе 5 "Работа с CSS".
И последнее, что создаёт код страницы – FOOTER.
123 <!-- Создание FOOTER - подвала сайта -->
124 <footer id="footer">
125
126 <!-- Создание модульной позиции FOOTER -->
127 <div class="copyright"><jdoc:include type="modules" name="footer" /></div>
Данный код объяснений не требует, здесь всё понятно.
130 <p class="copyright"> WDS</p>
131 <p class="copyright2"> © <?php echo date("Y"); ?> Copyright</p>
Строка 130 создаёт надпись: "WDS", указывающую на авторские права; здесь вы можете разместить любой свой текст по своему усмотрению, например, "Все права защищены" и т.п.
Строка 131 создаёт надпись "© 2018 Copyright". Код, написанный на PHP, нужен для вставления соответствующей даты (символ "Y" указывает на год).
133 <!-- Создание модульной позиции f-menu -->
134 <div class="footer-menu"><jdoc:include type="modules" name="f-menu" /></div>
Этот код создаёт последнюю позицию на сайте, находящуюся в левом углу "подвала" сайта – f-menu. Здесь можно будет в дальнейшем разместить информацию, которая обычно всегда присутствует в "подвале" сайта: обратная связь, контакты и тому подобное.
В самом конце следуют закрывающие тэги:
135 </footer>
136 </body>
137 </html>
Ну вот и всё!
Теперь вы знаете, из чего состоит и для чего нужен файл index.php, как он управляет созданием кода страницы. Теперь вы знаете, как добавить или убрать модульную позицию, надписи и так далее, а значит, уже можете самостоятельно "подогнать", переписать код этого файла под создаваемый вами шаблон. Но так как этот файл только создаёт различные элементы, но не указывает для них точные координаты, размеры и оформление, то самое время перейти к работе с каскадными таблицами стилей CSS.
