LOCO.RU » Статьи » 1С-Битрикс » Создание шаблона в 1С-Битрикс

Создание шаблона в 1С-Битрикс

almix — 5 марта 2011 (обновлял 23 октября 2011 в 8:51)
Комментарии (3) Категории: 1С-Битрикс версия для печати
Создание шаблона в 1С-Битрикс

Вносим ясность в создание шаблона на Битриксе

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

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

Итак, приступаем.

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

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

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

Файловую составляющую будем делать ручками – так быстрее и удобнее. Шаблоны хранятся в директории /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 (пролог), контент (#WORK_AREA#), и Footer (эпилог). Вот для наглядности рисунок

части шаблона в битриксе, создание шаблона на битриксе

По пунктам:
- в 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/[имя компонента]/[имя шаблона компонента]/
Источник: alexvaleev.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.


« Предыдущая статья
← Разные шаблоны у главной и у внутренних страниц сайта на Битриксе
Следующая статья »
1С-Битрикс: Вывод свойства в детальный просмотр новости для полей типа HTML/текст →

Другие статьи по этой теме:

Комментарии (3)     Подпишитесь на RSS комментариев к этой статье.

3 комментариев

#234
Musa говорит:
January 23, 2012 at 02:52 pm


Привет)Очень полезная статья!Хотелось бы побольше таких)

С уважением!
#525
Irek говорит:
June 27, 2012 at 11:37 am
Спасибо ) Просто и доступно о начале, а там уже должно пойти )
#776
Денис говорит:
February 10, 2013 at 01:25 am

Читал перед Вашей другую статью (так забубенно, у меня не получилось).

А у Вас все по полкам. Заработало с первого раза. Большое спасибо )))

С уважением.