Доброго Вам времени суток, сегодня мы поговорим о том, как верстаются шаблоны для CMS Joomla 3. Тема эта достаточно обширная и в рамках одной статьи её описать просто невозможно. Поэтому мы поступим следующим образом – разберем основные понятия верстки, познакомимся со стандартными выражениями, с помощью которых автоматически формируются целые блоки кода.
Если вы читали предыдущий урок, посвященный установочному файлу, и уже установили новый, совершенно пустой шаблон, то скорее всего уже заметили что если выбрать его в качестве шаблона по умолчанию и перейти на сайт, то мы получим пустую страницу.
Все правильно, ведь мы еще не сделали ничего, чтобы заставить наш шаблон функционировать – файл index.php совершенно пустой.
Теперь давайте приступим к наполнению нашего файла index.php. Открываем его для редактирования и в самом начале напишем следующие строки кода:
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
// Подключение файла скриптов
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/template.js');
// Подключение файла стилей
$doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/template.css');
?>
Код стандартный, в самом начале мы говорим, что будем использовать php (<?php) следом идет строка кода отвечающая за безопасность сайта на Joomla:
defined('_JEXEC') or die;
В следующей строке мы объявляем необходимые переменные, в нашем случае используем переменную документа:
$doc = JFactory::getDocument();
Затем при помощи только что объявленной переменной мы подключим файлы стилей и скриптов:
$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/template.js'); $doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/template.css');
Как видите, мы использовали относительные пути до подключаемых файлов, таким образом, как бы не назывался наш шаблон и на каком бы сайте он не был установлен, в любом случае будут подключены именно нужные нам файлы, расположенные в указанных папках текущего шаблона. В моем случае это папки «js» для скриптов и «css» для стилей. О необходимости заранее создать данные файлы, пусть даже пустые, думаю, говорить не стоит.
Прежде чем продолжить хочу обратить внимание вот на что – в настоящее время практически все сайты используют адаптивный дизайн. Оно и понятно, количество посетителей с мобильных устройств в последнее время все больше и больше. Думаю, будет правильно, если наш первый шаблон мы будем верстать с учетом мобильного трафика и сделаем его адаптивным под любые устройства.
Для того чтобы наш шаблон получился адаптивным под различные устройства мы будем использовать фреймворк Bootstrap, который очень популярен и используется миллионами. Что такое Bootstrap и как им пользоваться поговорим в следующий раз (возможно для него будет выделен даже отдельный раздел на сайте), сейчас главное запомнить, что с его помощью можно просто и быстро делать адаптивные шаблоны (сайты).
Итак, приступим, следующий блок кода ничем не отличается от обычной html разметки страницы, но в ней мы уже подключили библиотеки «Бутстрапа» и указали браузеру на адаптивность шаблона:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- CSS файл фреймворка Bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Дополнительные темы Бутстрапа --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <!-- Библиотека jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <!-- Сжатый JavaScript для бутстрапа --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
Как видите ничего необычного, за исключением некоторых моментов, в остальном стандартная разметка, вначале идет заголовок, следом тело страницы.
Теперь что касается адаптивности – в заголовке между тегами head мы указываем, что кодировка страницы будет UTF-8. Кроме того добавляем два мета тега, первый будут отвечать за корректное отображение сайта на мобильных устройствах, второй управлять режимом отображения в браузерах от мелкомягких (IE):
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge">
Здесь же подключаем стили и темы фреймворка Bootstrap. Вариантов подключения много, я решил воспользоваться сторонним CDN сервером и взять библиотеки оттуда:
<!-- CSS файл фреймворка Bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Дополнительные темы Бутстрапа --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
Но и это еще не все что потребуется для правильной работы Bootstrap, в самом конце документа, перед закрывающимся тегом body необходимо добавить несколько строк кода, при помощи которых будут подключены необходимые скрипты:
<!-- Библиотека jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <!-- Сжатый JavaScript для бутстрапа --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
После того как костяк файла index.php заполнен можно приступать непосредственно к верстке и знакомству со стандартными выражениями Joomla для автоматической генерации и отображения контента на сайте. Для начала в заголовок страницы между тегами head пишем следующий код:
<jdoc:include type="head" />
С помощью данного выражения Joomla автоматически сгенерирует заголовок страницы. Таким образом, добавив всего дону строку кода, мы в результате получим полное описание страницы, различные мета теги, подключим фавиконку и различные компоненты Joomla. В этом можно убедиться, если сохранить изменения в индексном файле, перезагрузить страницу и посмотреть её код:
Все как я и говорил, благодаря одной только строчке мы подключили всю необходимую информацию.
Теперь можно приступать к основной части вёрстки страницы, к этому моменту у Вас уже должен быть готов макет сайта, если его нет, то советую сначала им обзавестись. Для этого если есть время, фантазия и умение работы с графическими редакторами то можно самостоятельно набросать детальный макет для нашего шаблона, или же воспользоваться услугами фрилансеров.
Я в свою очередь воспользовался вторым вариантом, в результате через пару дней получил готовый макет шаблона в формате PSD, который и будет служить в качестве примера по вёрстке. Данный макет относительно не сложный для верстки, в нем можно выделить как минимум на 5 основных частей:
Такое разделение стандартно для большинства не сложных шаблонов, на странице есть шапка, некая область для новостей, правая колонка для меню, область контента и футер. Таким образом, верстка шаблона Joomla начинается именно с разделения макета на определенные блоки.
Теперь давайте при помощи HTML перенесем эти блоки в наш индексный файл. Для этого между тегами body пишем следующий код:
<div id='wrap'> <div id="header">Шапка сайта </div> <div id="content"> <div id="info">Информационный блок</div> <div id="msg">Системные сообщения</div> <div id="text-area">Область основного контента</div> <div id="right-menu">Правое меню</div> </div> <div id="footer">Футер</div> </div>
Применив определенные CSS стили, мы получим следующий результат:
Блоки созданы, теперь необходимо наполнить их автоматически генерируемым содержимым. Для этого в Joomla 3 предусмотрены специальные выражения, при помощи которых можно указать в каких местах будут выведены модули, информационные сообщения и основной контент сайта.
Для лучшего понимания сути этих самых выражений я сначала приведу готовый код, а затем постараюсь вкратце объяснить, какое выражение за что отвечает:
<div id='wrap'> <div id="header"> <jdoc:include type="modules" name="position-0" style="xhtml"/> </div> <div id="content"> <div id="info"><jdoc:include type="modules" name="position-1"/></div> <div id="msg"><jdoc:include type="message"/></div> <div id="text-area"><jdoc:include type="component"/></div> <div id="right-menu"><jdoc:include type="modules" name="position-2" style="xhtml"/></div> </div> <div id="footer"><jdoc:include type="modules" name="position-3"/></div> </div>
С помощью методов вывода контента jdoc:include в конечном итоге мы получим следующий результат:
Как видите, шаблон автоматически наполнился предварительно сгенерированным контентом. И это все благодаря выражениям jdoc:include. Давайте теперь разберем, что именно выводит то или иное выражение:
- <jdoc:include type="head" /> - выводит определенные стили, метаданные, скрипты и так далее;
- <jdoc:include type="modules" name="position-0" style="xhtml"/> - выводит модули в указанной и предварительно объявленной в файле templateDetails.xml позиции. Способы вывода формируются при помощи определенных стилей;
- <jdoc:include type="message"/> - служит для вывода системной информации (сообщений);
- <jdoc:include type="component"/> - данный метод необходим для вывода основного контента.
Более подробно выражения и методы вывода контента разберем в другой статье, а сейчас просто запомните, что они существуют и нужны для генерации определенного содержимого страницы.
Конечно, на данном этапе наш шаблон далек от совершенства, и это даже мягко сказано, но никто не запрещает его доработать. Сразу скажу, работы предстоит не мало, но в конечном итоге результат Вас обязательно порадует, ведь Вы получите шаблон, созданный своими руками, будете знать каждую строчку его кода и при необходимости всегда сможете вносить в него определенные изменения по своему усмотрению.
В заключение хочу сказать пару слов об оформлении элементов сайта при помощи CSS. Если у Вас уже есть готовый макет в формате PSD, это значительно упростит задачу. Вам не придется подбирать «на глаз» CSS стили для каждого элемента, для этого достаточно открыть макет в Photoshop, щелкнуть по его слою правой кнопкой мыши и выбрать пункт «Копировать CSS». Такой способ значительно облегчит процесс верстки сайта:
Пока не забыл, хочу обратить Ваше внимание еще вот на что. В Joomla, в стандартной её сборке, уже присутствует Bootstrap, но его версия почему-то очень древняя. А раз уж мы подключили более свежую версию, то старую неплохо было бы отключить. Для этих целей есть специальный плагин под названием «joomla options master», который позволяет отключить стандартные библиотеки Bootstrap, Mootools и jQuery.
На этом я завершаю данную статью, всю информацию по верстке шаблонов для Joomla просто невозможно передать в рамках одной статьи. Дальнейшую верстку макета я буду описывать дозировано, сначала создадим красивую шапку сайта, затем оформим область контента и правое меню, и в заключении проработаем футер. Следите за обновлениями на сайте!
