Как сделать шаблон для битрикса

В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине cms, более функциональный аналог блокнота и хороший файловый менеджер (не проводник:)

Почему я не люблю админку битрикс — во-первых она очень тяжелая, во-вторых плохо приспособлена для создания шаблонов. Встроенный относительно недавно визуальный редактор содержит значительные ограничения для использования. Особенно порадовала фраза «шаблоны демонстрационной версии адаптированы для использования в этом режиме» — смысл «затачивать» шаблон под редактор непонятен.

Итак, приступим к самому главному.

Этап первый — неинтересный

Тут предполагается долгое, вдумчивое ознакомление с мануалами и успешное прохождение курса «Интеграция». После изучения часть вопросов у Вас должна отпасть.

Теперь перейдем к практике.

Этап второй — создаем файлы

Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
- каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
- каталог include_areas — для включаемых файлов
- каталог page_templates — для образцов включаемых областей
- файл header.php — часть шаблона ДО контента
- файл footer.php — часть шаблона ПОСЛЕ контента
- файл description.php — название и описание шаблона
- файл .styles.php — описания стилей для визуального редактора страниц
- файл template_styles.css — стили шаблона
- файл styles.css — стили для контента и включаемых областей

Этап третий — заполняем файлы

Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.

В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок

По пунктам:
- в header.php включается 1 часть, за исключением содержимого между тегами

и (оставить можно подключение различных скриптов). После обязательно добавить
<?$APPLICATION->ShowPanel();?>
- вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные <?$APPLICATION->ShowHead()?> <title><?$APPLICATION->ShowTitle()?></title>

- в footer.php целиком записываем 3ю часть
- ко всем относительным путям добавляем /bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/ Например, было

<img src="images/pict.gif" alt="pict" />

Станет

<img src="/bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/images/pict.gif" alt="pict" />

Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)

После описанных манипуляций должно получиться нечто похожее на
header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <?$APPLICATION->ShowHead()?> <title><?$APPLICATION->ShowTitle()?></title> </head> <body> <?$APPLICATION->ShowPanel();?> <div id="main"> <!-- header --> <div id="header"> <img src="/bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/images/header.gif" alt="header" /> </div> <!-- content --> <div id="content"> <div class="lcol"> <p>Это левая колонка, она НЕ входит в рабочую область, и пока она в шаблоне. Чуть позже ее можно будет убрать во включаемую область.</p> </div> <div class="сcol">

footer.php

</div> <div class="rcol"> <p>Это правая колонка, она НЕ входит в рабочую область сайта, и пока она в шаблоне. Чуть позже ее можно будет убрать во включаемую область.</p> </div> </div> <!-- footer --> <div id="footer"> <p>Я - подвал сайта!</p> </div> </div> </body> </html>

В template_styles.css все стили, файл styles.css пока пустой.

Файл description.php содержит всего одну строку вида:

<?$arTemplate = Array("NAME"=>"template name", "DESCRIPTION"=>"template description");?>

В списке шаблонов имя каталога (у нас для примера оно test) будет в колонке ID, [template name] и [template description] в «Название» и «Описание» соответсвенно.

Этап четвертый — интеграция

Самое время подключить шаблон к сайту (или разделу) и посмотреть что получилось. Визуальное представление должно соответствовать сверстанному варианту без контента. Если все красиво, можно начинать поочередно выделять участки кода и заменять их на вызов нужного компонента. Стандартные вызовы можно найти в этой статье. Напомню, что делать подобные замены удобно, напрямую изменяя в текстовом редакторе header.php и footer.php

В исходном виде информация, которую выводят компоненты, скорее всего не впишется в дизайн. Идем в Режим разработки — тыкаем на шестеренку — копировать шаблон. Теперь шаблон компонента можно спокойно кромсать из админки битрикса или редактированием style.css и template.php в каталоге /bitrix/templates/[имя шаблона]/components/[имя компонента]/[имя шаблона компонента]/

На сегодня все, в следующих статьях разберемся со стилями и начнем править шаблоны различных компонентов.

Похожие записи

Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:


Закрыть ... [X]

Создаём шаблон 1С-Битрикс на базе Bootstrap вёрстки / Хабрахабр На вокзале анекдот

Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса Как сделать шаблон для битрикса