Удивительно, но я публикую статьи в блоге, уже на протяжении нескольких лет, но так и не коснулся одной из самых важных тем — создания шаблона сайта для Битрикс. В этой статье я постараюсь исправить это досадное упущение.
1 Постановка задачи
Начнем как всегда с постановки задачи. Чтобы упростить понимание задачи максимально, мы возьмем для шаблонизации такую страницу html, которая бы была максимально проста и содержала бы только самые необходимые элементы.
Вот эта страница:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <meta charset="utf-8"> <meta name="keywords" content="шаблон, Битрикс"> <meta name="description" content="Тестовая html-страница"> <title>Заголовок страницы | Тестовая html-страница</title> <link href="styles.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>Заголовок страницы</h1> <p>Контент страницы</p> <div>Наши контакты: (xxx) xxx-xx-xx</div> </body> </html>
Предполагается, что у вас есть файл стилей styles.css и файл скриптов script.js .
2. Изготовление шаблона
Первое, что требуется сделать — это представить какие части шаблона будут изменяться. Что будет являться контентной областью шаблона и что будет являться включаемыми областями. Контентная область шаблона — это часть шаблона между тегами <body> и </body>, которая будет заменяться содержимым страницы — в нашем случае — это область, помеченная словами Контент страницы . Выделенные области — это части шаблона между тегами <body> и </body>, которые будут заменяться содержимым файлов. В нашем случае выделенной областью мы можем сделать номер телефона, показанный на странице (xxx) xxx-xx-xx.
Выделение контентной области шаблона и выделенных областей служит для того, чтобы шаблон сайта сделать универсальным для всех возможных страниц сайта (на самом деле, в ряде случаев удобно создавать просто разные шаблоны для некоторых страниц, которые слишком сильно отличаются между собой, например, для страницы Для печати); и, кроме того, это служит для того, чтобы пользователь мог легко редактировать контент страниц при необходимости. Понятно, что контентная область шаблона может быть только одна, а выделенных областей может быть сколько угодно.
При создании шаблона также есть стадии работы, связанные с простановкой вызовов компонентов из шаблона сайта, но это мы опустим, чтобы не усложнять процедуру создания первого шаблона сайта для Битрикс. Также, мы не будем считать, что шаблон будет использоваться для мультиязычного сайта, а значит и писать заготовки под локализацию не будем.
После того, как мы разделили страничку на 3 логические части: верхнюю часть (до контентной области), называемую хидер шаблона; среднюю часть — контентную часть; нижнюю часть (после контентной области), называемую футер шаблона; — мы можем приступить к созданию первых файлов шаблона сайта.
Средняя часть шаблона — не относится собственно к шаблону сайта, потому что она будет заменяться на страницах сайта произвольно. К шаблону сайта относится хидер и футер, эти части шаблона следует записать в файлы header.php и footer.php соответственно.
Шаблоны Битрикс хранятся в папке /bitrix/templates/ . Для каждого шаблона создается отдельная папка. Создадим для нашего шаблона папку template_test .
В папке каждого шаблона должен быть создан файл description.php, который служит для того, чтобы шаблон показывался в списке шаблонов и его можно было присоединить к сайту в редактировании сайта.
// контент description.php
<?$arTemplate = Array("NAME"=>"Тестовый шаблон", "DESCRIPTION"=>"Нужен, чтобы понять как создаются шаблоны");?>
И записываем футер и хидер:
// контент header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <meta charset="utf-8"> <meta name="keywords" content="шаблон, Битрикс"> <meta name="description" content="Тестовая html-страница"> <title>Заголовок страницы | Тестовая html-страница</title> <link href="styles.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>Заголовок страницы</h1> <p>
// контент footer.php </p> <div>Наши контакты: (xxx) xxx-xx-xx</div> </body> </html>
Если мы посмотрим список шаблонов /bitrix/admin/template_admin.php, то мы заметим, что наш шаблон появился в списке. Если мы присоединим шаблон к сайту на странице редактирования сайта и добавим новую страницу с текстом Контент страницы, то увидим, что сайт работает и вывод шаблона соответствует тому, что было в нашей исходной странице, т.е. Битрикс просто взял и соединил хидер, контент страницы и футер в правильном порядке и выдал его нам в окне браузера.
Но есть проблемы:
1. Мы не видим панель управления Битрикс в шапке сайта, когда мы работаем под администратором.
2. Мы не можем менять сами заголовок страницы, ключевые слова и описание страницы.
3. Стили и яваскрипты мы не подключили.
4. Выделенные области мы не закодировали.
Нужно решить эти проблемы.
3. Доводка шаблона и универсификация.
Начнем с пунктов 2 и 3 тех доработок, которые нам нужно выполнить по шаблону сайта. Эти вопросы решаются с помощью API Битрикс. Заголовок страницы можно получить с помощью метода $APPLICATION->ShowTitle() — он извлекает значение, которое было установлено для данной страницы методом $APPLICATION->SetTitle(«Заголовок страницы»)
Ключевые слова и описание страницы, а также кодировка шаблона из настроек данного сайта проставляются методом $APPLICATION->ShowHead() . Также этот метод может проставить стили css и ява-скрипты, заданные через CMain::AddHeadScript. Файлы с яваскриптами и файлы стилей можно подключать непосредственно при помощи <script type=»text/javascript» src=»script.js»></script> и <link href=»style.css» type=»text/css» rel=»stylesheet» /> — часто бывает удобно делать именно так. Удобнее, когда js и css файлы хранятся в папке шаблона сайта и в этом случае для подключения этих файлов к шаблону удобно использовать константу SITE_TEMPLATE_PATH — в ней хранится относительный путь к данному шаблону сайта.
Файлы стилей styles.css и template_styles.css если они есть в папке шаблона, то они подключаются автоматически методом $APPLICATION->ShowHead() .
Панель управления сайтом подключается при помощи $APPLICATION->ShowPanel() . Чтобы не было проблем с внешним видом сайта при подключении панели — лучше не подключать неповторяющиеся картинки к тегу body в стилях, а использовать для этих целей какой-то внутренний блочный тег, например <div id=»wrapper»> со стилями height:auto !important; margin:0 auto; min-height:100%; width:100%;
Все доработки мы разобрали, кроме последнего пункта — выделенной области. Выделенная область подключается таким кодом:
<?
$APPLICATION->IncludeFile("путь/к/выделенной/области",
Array(),
Array("MODE"=>"html")
);
?>
По традиции файлы выделенных областей хранятся в include_areas в папке шаблона. В нашем случае мы можем создать файл include_areas/phone.php c содержимым (xxx) xxx-xx-xx.
В итоге, с учетом всех моментов получаем такую структуру папок шаблона:
include_areas include_areas/phone.php js js/script.js styles.css header.php footer.php description.php
И вот так изменятся файлы header.php и footer.php:
// контент header.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<?$APPLICATION->ShowHead();?>
<title><?$APPLICATION->ShowTitle()?> | Тестовая html-страница</title>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/script.js"></script>
</head>
<body>
<div id="panel"><?$APPLICATION->ShowPanel();?></div>
<h1><?$APPLICATION->ShowTitle()?></h1>
<p>
// контент footer.php </p> <div>Наши контакты:
<?
$APPLICATION->IncludeFile("include_areas/phone.php",
Array(),
Array("MODE"=>"html")
);
?>
</div> </body> </html>
Некоторые примечания
1. Не забывайте делать права на запись для файлов шаблона, чтобы их можно было редактировать из панели управления битрикс.
2. В шаблоне сайта можно создать любые папки для вашего удобства, например, images, js и т.п.
Спасибо, было очень познавательно прочитать данную статью! Большая просьба, напишите подробное руководство по созданию отзывов к товарам (те что хранятся в ИБ). Возникло много проблем, особенно с фильтрацией для товара. Спасибо!
Отзывы к товарам чаще всего делаются средствами модуля форума.
Вы это имели в виду?