Создаем шаблон битрикс – быстрый старт
Опубликовано 7 Апр 2010
В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине 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/[имя компонента]/[имя шаблона компонента]/
На сегодня все, в следующих статьях разберемся со стилями и начнем править шаблоны различных компонентов.
Loading ...
Спасибо тебе за даную статью очень кратно и полно описал ! верстать научился под битрикс по ней!
Спасибо! Просто и доступно! Теперь переход на Битрикс уже не кажется таким сложным
глупый вопрос.. но как поставить созданный шаблон за место стандартного . Положил свой шаблон как и требовалось в отдельную директорию в \bitrix\templates\
из административного раздела «Рабочий стол>Настройки>Настройки продукта>Сайты>Шаблоны сайтов» нет ни кнопки ничего чтобы установить свой как используемый.. может я кудат оне туда смотрю…
Алексей Валеев если не сложно .. могли бы вы описать процесс создания и работы с МЕНЮ (например графические или сногоуровневые и т.п.)
ЗЫ -использую демоверсию 1с битрикс -управление сайтом (Бизнес 9.5.0)
Алекс, шаблон можно установить в настройках конкретного сайта – в Рабочий стол>Настройки>Настройки продукта>Сайты открываем настройки сайта и выпадающем списке ищем шаблон.
По поводу меню – даже не знаю что там можно описать.. вроде все прозрачно:)
спасибо Алексей.. действительно шаблоны меняются в настройках сайта! С меню пока разбираюсь.. Пытаюсь разобраться по имеющемся руководству, но никак я не могу найти визуальный редактор, хоть убей..
Алексей, хотел Вас просить, если есть возможность, не могли бы вы оставить мне свой номер аси например.. для более быстрого взаимодействия.. и чтобы не засорять Ваш блог гпупыми вопросами
Алексей, а чем плохо использовать [?=SITE_TEMPLATE_PATH?] вместо /bitrix/templates/[?=SITE_TEMPLATE_ID?] ?
И да, Алексей, может быть напишите заметку о том, как реализован аякс в битриксе. Я пока не исследовал подробно этот вопрос, и подозреваю, что там все прозрачно, но тем не менее, буду (и другие читатели тоже, наверно) очень благодарен.
Николай, ничем не плохо – так даже короче:)
Что касается аякса – хорошая идея. Хотя я видел в сети пару неплохих статей на эту тему, надо поискать
Алекс:
22.11.2010 в 07:25
********
ага, то есть я не один такой :) качал прошлую демку битрикса, там визуальный редактор был и кнопки выглядели как в мануале (для 7 версии). сейчас тоже 9.5 и визуальный редактор шаблона я найти не могу. единственное что смог добиться – это включать галочки на визуальный режим и тогда править тексты можно прямо на страницах, но это не совсем то.
В настройках главного модуля в первой секции «Системные настройки» есть галочка «Использовать визуальный редактор для редактирования шаблонов сайта»
что-то одно из двух. или за ночь она появилась или я вчера был слеп :) вобщем нашел. как не увидел ее вчера – загадка ибо в этих настройках я лазил несколько раз читая справку.
Алексей, а не объясните ли вы как подключить в header.php шаблоне js-файлы? не могу разобраться:(
Спасибо большое! Интересовал вопрос куда закидывать js файлы.
А не подскажете в каком файле править саму workarea? мне например надо оттуда новости убрать и популярные товары в другое место перетащить.
В workarea подставляется контент, который формируется на страницах в физической структуре сайта
2 Алексей Валеев
:) понятно что ничего не понятно :)
в каком файле определяется эта физическая структура?
и еще такой вопрос. насколько я понял битрикс изначально «заточен» под табличную верстку. по крайней мере дизайн компонентов заключен в таблички. имеет ли смысл не заморачиваться дивами и верстать таблицей?
всплыла еще проблема. вобщем я сделал простенький дизайн на дивах. залил все вроде работает отображается. но при добавлении товара в корзину сайт раздваивается :) то есть сам сайт остается и рядом появляется как бы копия страницы с товаром в корзине (прокрутка вправо).
с чем это может быть связано?
grundfos, последние версии компонентов стали делать на дивах уже, не все правда.
А глюк с корзиной скорее всего из-за аяксового добавления. Шаблоны компонентов взяты из демо-магазина?
про шаблоны не совсем понял. вобщем я делал как. установил битрикс. потом в соответствии с прочитанным мануалом по привязке дизайна скопировал сайт s1 и назвал копию s2. потом заменил header footer. потом перешел в сайт s1 и через режим правки покопировал все компоненты (корзину, поиск, новости и т.д.) в сайт s2. в мануале про это тоже было написано типа после копирования из .default шаблоны компонентов становятся пользовательскими и их можно спокойно редактировать. коды вызова компонентов я брал из Вашей статьи по кодам вызова. вобщем похоже что запутал все окончательно :)
убрал в коде вызова корзины кусок кода «.default» раздвоение вроде как прекратилось. но при нажатии на «В корзину» товар плывет кажется в ту сторону где по умолчанию и располагалась корзина. не подскажете где исправить координаты или направление перемещения товара.
В шаблоне сайта есть файлик script.js (это стандартный магазин). В нем строка
flyImage.animate({ width: 10, height: 10, left: 948, top: -58 }, 500, ‘linear’);
Я думаю что тут и задаются координаты «полета». Не проверял.
угу. спасибо попробую. если я укажу координаты полета то у меня количество товаров в корзине будет автоматически изменяться? а то сейчас при добавлении товара товар добавляется но в ссылке на малую корзину количество товара остается прежним пока страница не обновится или пока не перейдешь куда-либо.
еще вопрос :) напоминатель пароля – какой у него код вставки? регистрация нового пользователя в шаблоне есть (я создал новый шаблон тест в нем таблицу и пихаю в визуальном режиме все компоненты чтоб посмотреть код их вызова) регистрацию нашел а вот напоминатель пароля там отсутствует.
Сделал все по вашему мануалу, столкнулся с проблемой, не выводится «GetMessage» например в модуле авторизации нет слов войти и выйти. GetMessage посылает пустую строку. файлы ленг кинул в корень шаблона, не помогло, в шаблоне IncludeTemplateLangFile(__FILE__) имеется. Уже руки опускаются.
Андрей, языковые файлы есть для шаблонов компонентов. Положите в /lang/ru/template.php для шаблона авторизации нужные строки и выведите из этого шаблона через GetMessage , все сработает.
Спасибо. Решено.
Сделал как описано в пункте два, все быстро и достаточно легко.