В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине 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.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/[имя компонента]/[имя шаблона компонента]/
На сегодня все, в следующих статьях разберемся со стилями и начнем править шаблоны различных компонентов.
Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!
Подписаться в telegram
Спасибо тебе за даную статью очень кратно и полно описал ! верстать научился под битрикс по ней!
Спасибо! Просто и доступно! Теперь переход на Битрикс уже не кажется таким сложным
глупый вопрос.. но как поставить созданный шаблон за место стандартного . Положил свой шаблон как и требовалось в отдельную директорию в \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 , все сработает.
Спасибо. Решено.
Сделал как описано в пункте два, все быстро и достаточно легко.
Большое спасибо! Статья очень помогла
>> ко всем относительным путям добавляем /bitrix/templates//
Лучше сразу добавлять путь к текущему шаблону:
src=»/images/logo.png» />
Скажите, пожалуйста, можно ли менять значение [?=SITE_TEMPLATE_PATH?] = /bitrix/templates/…вот, не хочется мне показывать всем и каждому в коде, что сделано сие на битриксе, а?
Извиняюсь, за возможно глупый вопрос. Только учусь.
Вот я создам по Вашей статье шаблон, эту будет главная страница. А как быть с остальными страницами, на которые ведутся ссылки с моего шаблона?
В какую папку их помещать? Или как?
В общем случае шаблон делается не для одной страницы, а для целой группы (возможно для всего сайта). Все что является разным для страниц, нужно выносить во включаемые области.
Здравствуйте, Алексей. Была верстка для сайта, начал из нее делать шаблон. Все по различным статьям (Ваша взята за основу). В итоге вся верстка перекосилась, съехала, половина картинок не отображается. В чем может быть проблема? (в моих кривых руках)
Артем, а вы посмотрите верстку на сайте в неавторизованном виде и сравните с оригиналом. Наверняка не подключились стили или незакрытые тэги.
Здравствуйту. приобрел демо версию битрикса. хочу переделать шаблон. ( не подходит мне по тематике и работе). как можно это сделать?
на хосте это возможно?
Здравствуйте, а данной cms можно воспользоваться как конструктом и после бекапа выложить файлы на хост, но не покупать данную cms? Я в дальнейшем смогу сайтом пользоваться или вывалится надпись о преобретении продукта?
Виктор, cms придется покупать в любом случае.
вот еще нарыл статейку http://pmgroup28.ru/documents/?SECTION_ID=44
Спасибо огромное! Начало в разборке битрикса положено успешно =)
Спасибо большое за статью, очень полезная
Спасибо за статью. Пол дня ковырялся в документации официальной. так запутанно все. После статьи все становится на свои места.
После вставки в header своего кода вот этот кусок (от начала и до тега ) при попытке сохранить его, просто исчезает. Куда он девается и как это предотвратить?
ShowHead()?>
ShowTitle()?>
$(document).ready(function(){
$(«#featured»).tabs({fx:{opacity: «toggle»}}).tabs(«rotate», 5000, true);
});
(Относительные пути я тоже изменил, здесь это не показано)
Спасибо за статью. Но может вы поделитесь опытом, как создать свой шаблон(стилизацию) для админки битрикс. Знаю, что есть в папке bitrix папка themes с единственным разделом .default. Но каким образом подключить свою темку или где поместить ее, чтоб потом обновления не перетерли, пока инфы не нашел.