75  /  380
Справочник

Шаблон сайта (настройка и подключение)

Просмотров: 47176
Дата последнего изменения: 03.11.2023
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточиться, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

Ранее Создание шаблона – первый шаг в интеграции дизайна.

Примечание: Ранее можно было задавать внешний вид шаблона сайта с помощью визуального редактора. С версии 14.0 работа выполняется без визуального редактора.

Подробнее...
мы создали папку шаблона сайта. Однако для корректного отображения шаблона на сайте нужно еще адаптировать вёрстку, подключив все стили и js-файлы в шапке и подвале сайта, а также прописав новые пути до картинок и объектов.

Необходимо выполнить три важных шага:

  1. Редактирование шапки сайта (header.php)
  2. Редактирование подвала сайта (footer.php)
  3. Подключение шапки и подвала (index.php), добавление контента

1. Редактирование шапки сайта (header.php)

  • В папке шаблона откроем файл header.php в режиме редактирования как PHP.
  • Первой строкой пропишем служебный код (защита от подключения файла напрямую без подключения ядра):

    <? if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
    

  • Внутри тегов <head> добавим следующие строки:
    • Код отображения заголовка страницы:

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

    • Код вывода в шаблоне сайта основных полей тега <head> (мета-теги Content-Type, robots, keywords, description; стили CSS; скрипты):

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

  • После открывающего тега <body> пропишем код для отображения административной панели <? $APPLICATION->ShowPanel(); ?> . В связи с особенностями данного html-макета заключим код отображения панели в теги <div> (панель будет отображаться внизу страницы), иначе административная панель "наедет" на меню:

    <div id="panel">
    	<? $APPLICATION->ShowPanel(); ?> 
    </div>
    

  • Во все строках, где есть обращение к файлам, добавим в начале пути константу <?=SITE_TEMPLATE_PATH?> Возвращает путь до текущего подключённого шаблона сайта без последнего слеша. и слеш /.

    Рассмотрим на примере блока <!-- Bootstrap core JavaScript -->:

      <!-- Bootstrap core JavaScript -->
      <script src="<?=SITE_TEMPLATE_PATH?>/vendor/jquery/jquery.min.js"></script>
      <script src="<?=SITE_TEMPLATE_PATH?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    

  • Сохраним изменения.

Пример отредактированного файла header.php с комментариями

Примечание: css-стили в шапке сайта предпочтительнее подключить с помощью метода Asset::addCss() ядра D7.

Пример файла header.php с комментариями

2. Редактирование подвала сайта (footer.php)

Подвал сайта почти не нуждается в изменениях Проверьте обязательно наличие строки <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?> в начале файла. . Необходимо только в строках, обращающихся к файлам, добавить в начале пути константу <?=SITE_TEMPLATE_PATH?> Возвращает путь до текущего подключённого шаблона сайта без последнего слеша. со слешем / и сохранить изменения.

Пример отредактированного файла footer.php

3. Подключение шапки и подвала (index.php), добавление контента

  • Необходимо удостовериться в подключении на странице вывода файлов header.php и footer.php.

    Для этого в файле главной страницы сайта index.php (Контент > Структура сайта > Файлы и папки > index.php) сверим следующие конструкции:

    • первая строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
    • последняя строка: <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
  • Добавим статический Т.е. для изменения контента страницы нужно будет вновь отредактировать вручную код страницы index.php. контент.

    Откроем файл с подготовленной вёрсткой (index.html) и скопируем код между шапкой (header) и подвалом сайта (footer) - тот, который мы в пункте 1 заменяли на #WORK_AREA#, то есть контент сайта.

    Настроим пути к картинкам. Пропишем в существующих путях уже знакомую константу <?=SITE_TEMPLATE_PATH?>/.

Пример отредактированного файла index.php с комментариями

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

Поэтому однородную информацию лучше заносить в инфоблоки, а потом с помощью компонентов выводить её на сайте. А чтобы информация отображалась именно так, как задумал дизайнер, необходимо кастомизировать шаблон компонента.

Подробнее...

Готово! Теперь осталось только назначить Откройте в Административном разделе страницу Настройки > Настройки продукта > Сайты > Список сайтов. С помощью меню действий откройте для редактирования нужный сайт.

Выберите шаблон, который вы хотите применить и условия.

Подробнее...
созданный шаблон для тестового сайта и посмотреть результат.


Примечание: Всегда можно изменить шапку или подвал сайта, перенеся требуемую часть кода из индексной страницы в файл header.php или footer.php.

Пример: перенос блока "Связаться с нами" в footer.php

13
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии