Файл index.php Joomla сайта – 4 часть верстки шаблона

: Категория: Шаблоны

От автора

В одной из прошлых статей по теме «верстка шаблона Joomla» я создал каталог будущего шаблона и в нём создал базовый файл шаблона index.php. Скорее это был макет файла, со всем необходимым минимумом наполнения. Вот он:


<?php defined('_JEXEC') or die('Restricted access');?>
<!DOCTYPE html>
<html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="breadcrumb" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="user1" />
<jdoc:include type="modules" name="user2" />
<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />
<jdoc:include type="modules" name="footer" />
</body>
</html>

Здесь несколько расширю этот файл и дам важные пояснения по его созданию.

Файл index.php Joomla

Файл index.php это основной файл каждой страницы сайта, задающий её структуру. В отличие от показанного файла, файлы index.php других шаблонов массивны и имеют 200-300 строк. Однако, несмотря на кажущуюся массивность, в них легко просматривается классическая HTML верстка страницы с объявлением типа документа, частей head (заголовок), body (тело) и footer (подвал). Но начинается любой файл index.php любого шаблона Joomla со строки безопасности:

<?php defined('_JEXEC') or die('Restricted access');?>

Объявление типа документа

За строкой безопасности, следует информация для браузеров, о типе данного документа. Называется это сообщение, «Объявление типа документа» или document type declaration, или DOCTYPE.

<!DOCTYPE html>

Заявленный тип документа, основной для Joomla версий 3+ и совместим с HTML5.

Третья строка, с атрибутом xml:lang, извлекает язык документа из глобальной конфигурации системы.

Примечание: атрибут xml:lang используется только в XHTML-документах, для указания язык всего текста. Если xml:lang включить в отдельные фрагменты (теги) документа, то язык будет указан только для этого фрагмента.

Так как Joomla многоязыковая система, то мы не указываем один язык, напрмиер, xml:lang="ru", а показываем, что берём язык из глобальной конфигурации системы.

<html xmlns="http://www.w3.org/1999/xhtml"    xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Итог 1.

Получили первую часть файла index.php Joomla сайта, которую назовём «вступительная часть».


<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

Заголовок head

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

Файл index.php в разделе head, сразу после тега <head> должен содержать строку:

<jdoc:include type="head" />

jdoc:include это метод вывода информации на фронэнд страницах сайта, принятый для системы Joomla. Существуют следующе типы (type) элементов вывода.

component — для вывода основного содержания страницы в файле используется единожды;
head — для вывода информации о стиле страницы, используемых скриптов, заголовка title страницы и метаданных этой страницы. Используется единожды;
message – Используется один раз в разделе body, для вывода системных сообщений;
installation — инструкция для установки, ничего не выводит;
module — Любое количество для вывода единичного модуля на странице. Например, для главного меню или хлебных крошек;
modules — Любое количество для вывода НЕ одного модуля на странице в позиции для модулей.

Обязательно в разделе head, нужно вывести «указку» на файл стилей страницы. Например, вы создали файл (файлы) template.css стилей CSS для своего шаблона и положили его в папку css шаблона: www.mysite.ru/templates/my_template/css/

Подключаем свои стили тегом link, с атрибутом rel:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />

Если своих стилей нет или они не полные, подключаем стили системы:

 <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

Завершаем раздел head тегом </head>. В итоге раздел head шаблона выглядит так:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

Раздел body

Раздел body это тело страницы. Здесь используя декларации jdoc:include нужно вывести оснвоное содержание (component) и модули (module).

Самый простой вариант раздела body для Joomla шаблона:


<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>

, где на странице будут два модуля с названиями top и bootom, а между ними основное содержание страницы.

Напоминаю, что все выводимые здесь модули, должны быть указаны в файле templateDetails.xml.

Завершаем раздел body тегом </body>.

Если вы хотите добавить какие-либо изображения в шаблон, вы можете сделать это следующим образом: Здесь переменная шаблона заполнит имя вашего шаблона.

<img src="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/my-image.png" alt="Custom image" class="customImage" />

Завершение файла

Закрываем файл index.php Joomla сайта тегом </html>.

Вывод

Показанный файл index.php Joomla сайта, лишь общая конструкция демонстрирующая принцип построения это файла. Однако эта конструкция рабочая и может служить базовой основой для более серьёзного файла на 200-300 строк.

©joomla3-x.ru