7 простых шагов по созданию прототипа шаблона в 1С-Битрикс

Доброго времени суток всем 🙂
Сегодня хочу поведать Вам маленький туториал по созданию шаблона в битриксе. Вы скажите почему прототип?

А потому, что в эту статью не войдет материал о том, как адаптировать меню, включаемые области, рекламу и т.д. Итак, приступим…

Шаг 1. Подготовка инструментов для работы.

Для начала, что же нам нужно будет при себе иметь:

  1. Это простой редактор html, например, Notepad+, чем он интересен, тем, что мал, да удал, прост в освоении и имеет подсветку синтаксиса, чем битрикс по-умолчанию не обладает. P.S. о том, как подсветить код в админке битрикса обсуждалось в предыдущей статье «Подсветка синтаксиса«.
  2. Собственно сам сверстанный шаблон. Возьмем для примера вот такой простой шаблон web-2.0-990.

Шаг 2. Создание файлов.

Идем в административную часть Рабочий стол –> Настройки –> Настройки продукта –> Сайты –> Шаблоны сайтов и добавляем здесь наш шаблон, назовем его MyTemplate.

Задаем ID, Название, Описание и собственно текст самого шаблона, пока что напишем там только #WORK_AREA#. На закладке Стили шаблона вставим содержимое нашей таблицы стилей из сверстанного шаблона. Сохраняем.

Как известно из туториала для разработчиков, все файлы шаблонов хранятся в директории /bitrix/templates/. Перечислим какие же это файлы:

  • каталог images – для картинок шаблона (которые не зависят от просматриваемой страницы)
  • каталог include_areas – для включаемых файлов
  • каталог page_templates – для образцов включаемых областей
  • файл header.php – часть шаблона ДО контента
  • файл footer.php – часть шаблона ПОСЛЕ контента
  • файл description.php – название и описание шаблона
  • файл .styles.php – описания стилей для визуального редактора страниц
  • файл template_styles.css – стили шаблона
  • файл styles.css – стили для контента и включаемых областей

Соответственно, идем в директорию /bitrix/templates/MyTemplate/ и смотрим, что же у нас добавилось автоматически:

Шаг 3. Наполнение картинками.

Отлично, нам остается только создать в нашем случае каталог картинок и перекинуть туда все наши картинки. Удобнее это делать посредством ftp менеджера, например, FileZilla.

Шаг 4. Подготовка областей.

Разобьем наш шаблон на области, как это требует концепция битрикса:

А именно, Header, сам контент (#WORK_AREA#) и Footer.

Шаг 5. Наполнение шаблона.

Применим это к нашему index.html:

Обязательно вставляем строку

<?$APPLICATION->ShowPanel();?>

она отвечает за показ административной панели вверху:)

Вместо удаленных <META><TITLE> добавим код:

<?$APPLICATION->ShowHead()?>
<title><?$APPLICATION->ShowTitle()?></title>

которые динамично обновляют заголовки страниц.

В Footer.php записываем всю последнюю часть.

Шаг 6. Замена относительных путей.

Далее добавляем ко всем относительным путям в php файлах /bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/, тем самым привязав пути к нашему шаблону.

Например, было

<img srt = "/images/pic1.jpg">

станет

<img srt = "/bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/images/pic1.jpg">

В таблицах стилей пути к картинкам преобразовываем к виду images/pic.jpg.

Таким образом, получим похожее на:

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>
            <p>Это левая колонка, она НЕ входит в рабочую область, и
               пока она в шаблоне. Чуть позже ее можно будет убрать
               во включаемую область.</p>
        </div>
        <div>

Footer.php

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

В template_styles.css все стили из исходного шаблона, файл styles.css пока пустой.

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

<?$arTemplate = Array("NAME"=>"Имя_шаблона", "DESCRIPTION"=>"Описание_шаблона");?>

Шаг 7. Подключение шаблона.

Итак, смотрим что же у нас получилось, для этого подключаем шаблон к сайту. Рабочий стол –> Настройки –> Настройки продукта –> Сайты, выбираем наш сайт и добавляем наш шаблон в нижней табличной части:

Получим вот такой вид незаполненной главной страницы:

Если все хорошо, можно выделять отдельные участки кода, вставлять компоненты и т.д.

Получившийся шаблон можно взять здесь MyTemplate.tar.

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.