Где найти файл header php битрикс
В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине cms, более функциональный аналог блокнота и хороший файловый менеджер (не проводник:)
Почему я не люблю админку битрикс — во-первых она очень тяжелая, во-вторых плохо приспособлена для создания шаблонов. Встроенный относительно недавно визуальный редактор содержит значительные ограничения для использования. Особенно порадовала фраза «шаблоны демонстрационной версии адаптированы для использования в этом режиме» — смысл «затачивать» шаблон под редактор непонятен.
Итак, приступим к самому главному.
Интегрируем шаблон сайтана битрикс
Подготавливаем путь для файлов шаблона, где будут лежать все файлы верстки, компонентов, языковые файлы, header.php и footer.php и остальные нужные проекту файлы Путь будет такой /local/templates/main/ Папку с шаблоном назовем "main" Работать будем с папкой local, а bitrix трогать вообще не будем. Разделим верстку страницы в битрикс на три части.
- Первую положим в header.php
- Вторую положим в index.php
- Третью положим в footer.php
Файлы header.php и footer.php будут подключаться на каждой странице сайта, а index.php будет у каждой странице свой.
Пример header.php для HTML 5 DOCTYPE
//Тут стили шаблона сайта
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/uikit.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/form-password.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/sticky.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/components/placeholder.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/jquery.responsive-tabs.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/nanoscroller.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/scrollup/image.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/pace.min.css');
//Тут скрипты
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/core.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/grid.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/modal.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/dropdown.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/scrollspy.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/utility.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/button.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/switcher.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/nav.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/sticky.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/form-password.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/pace.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.nanoscroller.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.responsiveTabs.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/switchery.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/readmore.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.scrollUp.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/fn.js');
//Тут выводим скрипты
$APPLICATION->ShowHeadStrings();
$APPLICATION->ShowHeadScripts();
?>
CUtil::GetAdditionalFileURL() - генерирует url к файлу с указанием метки версии файла, т.е. он будет кешироваться в браузере посетителя.
SITE_TEMPLATE_PATH - это константа указывающая URL от корня сайта до папки текущего шаблона включая имя папки, если измените папку шаблона, то в header.php ничего исправлять уже не придется, он изменится в этой константе, например: /bitrix/templates/папка шаблона сайта/
Разберем представленный выше код header.php детально, чтобы понимать, что тут для чего подключается.
Хочу обратить внимание на передаваемые параметры true и false в методах, например ShowMeta() и ShowCSS(), от них зависит стандарт вывода тегов, для HTML 4, HTML 5 в виде , иначе по стандарту xHTML в виде , в данном примере для HTML 5, подробнее читайте в API-документации Битрикс.
Тут мы выводим мета-теги "описание" и "ключевые слова" для поисковых систем.
$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);
?>
Методом SetAdditionalCSS() подключаем стили шаблона, так каждый стиль.
Метод ShowCSS() выводит все стили шаблона и стили, которые могут подключаться в компонентах Битрикс, т.е. вообще все подключенные стили, включая стили ядра Битрикс.
Перед подключением вообще всех скриптов сайта и только для браузера Internet Explorer младше IE 9 я подключаю специальные полифилы функций/методов, которые в нем отсутствуют и вызывают ошибки javascript, возможная самая частая ошибка типа Object doesn't support property or method 'forEach'.
Т.е. если какого-то метода нет в IE 8, но он используется в новой jQuery или каком-то плагине, то может повезет и он найдется в этом скрипте, но Вы можете его не подключать, только если нужен.
А вот и подошли мы к самому интересному, на этом этапе самая частая ошибка подключения jQuery, которая должна выводиться самой первой среди всех остальных подключенных в компонентах или в шаблоне сайта jQuery-плагинах, т.е. ошибок с подключенными где-то в компоненте или шаблоне jQuery-плагинами быть не должно!
Все плагины и скрипты будут подключаться как положено, после jQuery, а не как у многих, в обратном порядке, это базовое правило подключения плагинов jQuery, знать его нужно всем!
Методом AddHeadScript() подключаем скрипты шаблона и только после подключения стилей, стили всегда подключайте выше скриптов.
Ниже два заключительных метода "выводят":
Обратите внимание на порядок, именно в таком порядке!
Почему строго в таком порядке?
Потому что в методе ShowHeadStrings() может выводиться jQuery ядра Битрикс, вызываемая таким образом:
Я ее специально закомментировал, чтобы Вы это знали, и знали где подключать. Вызываться он может в любом компоненте, в шаблоне, на любой странице сайта, а выводится она именно в этом самом первом методе, если поменять их местами, она окажется в самом низу, вот и ошибка разработки, можно это смело добавлять в чек-лист по разработке сайта.
Но если Вы выводите встроенную jQuery, значит подключенную ранее вручную jQuery надо удалить со страницы, не забывайте, она должна быть одна на всем сайте!
Итак, все это подключенное в исходном коде выглядит так:
Это конечно все круто! Но, как мы видим, к серверу очень много запросов - 93 шт., много подключено всяких файликов, а это заметно сказывается на скорости загрузки страницы, на время ожидания клиентом, мне-то как разработчику очень удобно, наглядно все видно в коде, но посетители мои от этого заметно страдают.
Оказывается, в Битрикс есть отличные опции в настройках главного модуля, позволяющие:
- Объединять CSS файлы
- Объединять JS файлы
- Подключать минифицированные версии CSS и JS файлов
- Создавать сжатую копию объединенных CSS и JS файлов - нужно отключить
Включается сжатие и объединение .css и .js здесь:
Поставьте галочки и сохраните настройки модуля зеленой кнопкой Сохранить.
При включении этих опции в идеальном случае на странице подключается 3 css и 3 js файла, подробнее читайте в курсе про Сжатие css и js файлов.
Создавать сжатую копию объединенных CSS и JS файлов - это нужно отключить!
Потому что при включенной опции Битрикс сжимает вообще все подключенные на сайте скрипты и стили со всех страниц сайта, это и вес им прибавляет, и велика вероятность появления JS-ошибок на странице.
Лично я столкнулся с такой проблемой, JS-ошибка запросто будет в модуле, где у jQuery-плагина есть js-lang, эти лэнги хранятся в соответствующих php-файлах, вот если на странице сайта подключается какое-то расширение, то Битрикс его также сжимает, скрипт этого расширения будет на всех страницах сайта, а вот лэнги расширения подключаются только на той странице, где вызывается расширение, если jQuery-плагин не видит свой js-lang, то запросто может быть на странице js-ошибка.
Например, я свой jQuery-плагин подключил как расширение на странице Каталог, тут же и лэнги моего плагина подключаются, вот если включить сжатую копию всех JS-файлов, мой плагин будет на всех страницах сайта в хедере, а лэнг только на странице Каталог, соответственно, когда я открываю например главную страницу сайта или любую другую отличную от Каталога, то в консоли появляется JS-ошибка, т.к. лэнги моего плагина подключаются только на странице Каталог.
В общем, очень опасная опция, не включайте ее вообще.
Все, сжатие включено и должно работать.
Для точного результата работы сжатия необходимо разлогиниться, далее открывайте главную страницу сайта, обновите ее, откройте исходный код и увидите такую картину
Наглядно видим, насколько уменьшилось количество файлов, все скрипты шаблона сжаты в один файл, стили также в один файл.
Количество запросов уменьшилось в разы, время полной загрузки страницы сократилось с 3.8сек. до 1.8сек., запросы к серверу сократились с 93 до 43.
footer.php
В файле /local/templates/main/footer.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();Рассмотрено выше
- IncludeTemplateLangFile(__FILE__);Рассмотрено выше
- $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/index.js");Подключается к шаблону файлы скриптов, например для объединения
- SITE_TEMPLATE_PATH;Рассмотрено выше
- $APPLICATION->GetCurPage(false) === '/';Рассмотрено выше
Выводим панель администратора
Напоследок давайте выведем панель администратора в самое начало страницы. Для вывода панели администратора в Битриксе используется следующий код:
Разместим этот код в header.php сразу после открывающего тега body:
При желании, панель администратора можно вывести и в подвале сайта (перед закрывающим тегом body). Это может помочь в том случае, если в шаблоне сайта используется абсолютное/фиксированное позиционирование элементов и верстка шаблона из-за этого конфликтует с панелью администратора.
Панель администратора отобразилась:
На этом закончим данный урок. В следующем уроке познакомимся с компонентами битрикса на примере компонента «Меню» и научимся создавать новые страницы сайта.
Заключение
Данный способ конечно не является идеальным, но он послужит хорошим образцом, как все подключать и в каком порядке, и как не совершать грубейших ошибок при разработке сайта.
Обязательно изучите все моменты подключения jQuery, скриптов и стилей, их порядок и включайте сжатие на сайте, это существенно ускорит время загрузки страницы и время ее отклика на действия посетителя, облегчит ее и нагрузку на сервер, сайт даже меньше трафика станет потреблять, т.к. каждый файлик на вашем сайте - это трафик!
Также, советую избавляться от всех малонужных и устаревших jQuery-плагинов, ко многим можно найти замену меньшую в разы и даже лучше по функционалу.
Это была моя первая статья из курса "Ускорение сайта", продолжение следует.
Прилетела задачка. Необходимо натянуть готовую верстку сайта услуг на битрикс редакции Стандарт. В этой статье напишу, как подготовить шаблон сайта, а по компонентам и необходимому функционалу отдельно оставлю ссылки на другие статьи, дабы не растягивать статью. К ней всегда можно вернуться, если прилетит другая задача по интеграции верстки, и вспомнить порядок действий
Подключаем стили и скрипты
Верстку мы добавили, теперь подключим стили и скрипты. В нашем HTML шаблоне есть папка css-js, которая содержит файлы CSS-стилей и JS-скриптов. Давайте загрузим ее в папку Битрикс шаблона /bitrix/templates/alfavitka :
В header.php у нас есть 2 файла со стилями:
Файл bootstrap.min.css – это файл-библиотека, который в будущем мы точно не будем редактировать. Поэтому подключаем его как дополнительный файл стилей. Для подключения дополнительных файлов со стилями в Битриксе используется следующий код:
В нашем случае код будет иметь следующий вид:
Константа SITE_TEMPLATE_PATH в Битриксе содержит путь к папке текущего шаблона сайта. Поэтому всегда используем данную константу при подключении стилей/скриптов из папки шаблона.
Секция head в нашем шаблоне теперь выглядит следующим образом:
Теперь разберемся со вторым подключаемым файлом стилей styles.css – он содержит стили шаблона, которые мы в перспективе точно будем редактировать. Поэтому стили из этого файла мы вставляем в файл шаблона template_styles.css. Сам файл styles.css из папки css-js можем удалить. Также удаляем подключение этого файла из секции head, в итоге она выглядит следующим образом:
Отлично, мы передали Битриксу информацию о всех наших стилях, осталось вывести их в шаблоне. Для этого воспользуемся следующим кодом:
Этот код выводит не только все подключенные CSS-стили, но и JS-скрипты, а также мета-теги Content-Type, robots, keywords, description. Вставляем этот код в самый конец секции head, в итоге она выглядит следующим образом:
Обратите внимание, что мы нигде не подключали файл стилей шаблона template_styles.css, т.к. этот файл автоматически подключается Битриксом.
С подключением стилей мы разобрались, наш шаблон приобретает более-менее приемлемый вид:
Теперь давайте подключим JS-скрипты. В файле footer.php у нас есть две строчки со скриптами:
Как и в случае со стилями, для подключения JS-скриптов в Битриксе есть своя функция:
В нашем случае подключение скриптов будет выглядеть следующим образом:
Также давайте перенесем подключение скриптов из подвала в шапку.
Обычно JS-скрипты переносят в подвал сайта, чтобы они не замедляли скорость загрузки сайта. Как в Битриксе перенести подключение скриптов в конец сайта – разберемся в одном из следующих уроков.
В итоге секция head будет выглядеть следующим образом:
Теперь на мобильных размерах экрана меню будет разворачиваться/сворачиваться при клике на иконку «гамбургера»:
Этап третий — заполняем файлы
Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.
В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок
По пунктам:
- в header.php включается 1 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
ShowPanel();?>
- вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные
- в footer.php целиком записываем 3ю часть
- ко всем относительным путям добавляем /bitrix/templates// Например, было
Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)
После описанных манипуляций должно получиться нечто похожее на
header.php
В template_styles.css все стили, файл styles.css пока пустой.
Файл description.php содержит всего одну строку вида:
В списке шаблонов имя каталога (у нас для примера оно test) будет в колонке ID, [template name] и [template description] в «Название» и «Описание» соответсвенно.
Подключение необходимых компонентов и другого функционала для окончанительной интеграции верстки на битрикс
На этом проекте были использованы следующие компоненты и функционал
P.S. чтобы все работало необходимо подключить созданный шаблон в админке сайта. По правде говоря все то, что я тут пишу - это порядок действий по натяжки верстки на битрикс для меня, при выполнении однотипной задачи, чтобы не держать все в голове.
Работаю © 2012 - 2022 год
Все права защищены
Навыки и умения Знание PHP5, MySQL, JS, HTML5, CSS3. Работа с технологиями XML, AJAX, GIT, SOAP Большой опыт взаимодействия с сервером. Работа с 1C-BITRIX FRIMEWORK, BITRIX24
description.php
В файле /local/templates/main/description.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); //Рассмотрено выше
- IncludeTemplateLangFile(__FILE__); //Рассмотрено выше
- $arTemplate = Array("NAME"=>GetMessage('T_DEFAULT_DESC_NAME'), "DESCRIPTION"=>GetMessage('T_DEFAULT_DESC_DESC')); //Записываем имя шаблона и описание. T_DEFAULT_DESC_NAME и T_DEFAULT_DESC_DESC их значения лежат в языковых фалах в виде $MESS ['T_DEFAULT_DESC_NAME'] = "Главный шаблон";.
Создаем шаблон сайта в настройках
На вкладке «Администрирование» идем в Настройки=>Настройки продукта => Сайты => Шаблоны сайтов и нажимаем кнопку «Добавить шаблон»:
В открывшейся форме заполняем поля на вкладке «Шаблон»:
ID – идентификатор шаблона (а также название папки шаблона), используем латинские буквы/цифры. Пусть будет alfavitka
Название – как хотим, так и называем, например, Учебный шаблон
Описание – необязательное поле, заполняем по желанию. Я введу Создаем шаблон с нуля
Порядок – порядок отображения шаблона в списке шаблонов (можно не заполнять)
Тип – выбираем «Шаблон сайта»
Вкладки «Стили сайта» и «Стили шаблона» предназначены для добавления стилей, но их мы тоже пока что оставим пустыми.
Обязательные поля мы заполнили, сохраняем шаблон:
Отлично, он появился в списке шаблонов:
Теперь зайдем в настройки сайта и установим наш (пока еще пустой) шаблон. Настройки => Настройки продукта => Сайты => Список сайтов => Кликаем на ID сайта, чтобы перейти к его настройкам:
Проматываем страницу к блоку «Шаблон сайта», в первом поле выбираем наш шаблон и сохраняем изменения:
Обратите внимание, что также пропала панель администратора, которая раньше отображалась в самом верху страницы. Так и должно быть, мы вернем ее чуть позже.
Этап второй — создаем файлы
Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
- каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
- каталог include_areas — для включаемых файлов
- каталог page_templates — для образцов включаемых областей
- файл header.php — часть шаблона ДО контента
- файл footer.php — часть шаблона ПОСЛЕ контента
- файл description.php — название и описание шаблона
- файл .styles.php — описания стилей для визуального редактора страниц
- файл template_styles.css — стили шаблона
- файл styles.css — стили для контента и включаемых областей
Вставляем HTML в шаблон и на главную страницу
Для начала нужно мысленно разбить нашу верстку на 2 части: на шапку и подвал. Открываем файл с версткой index.html и ищем контент (ту часть верстки, которая будет уникальная для каждой страницы сайта). В нашем случае контент выглядит следующим образом:
Всё, что выше контента – вставляем в файл шаблона header.php, весь код под контентом – в файл footer.php
Заголовок h1 тоже можно отнести к контенту, но т.к. этот тег у нас будет на каждой странице сайта – вынесем его в шапку.
Главная страница нашего сайта немного изменилась:
Т.к. в нашей верстке есть контент для главной страницы – давайте вставим его на главную страницу нашего сайта. Через FTP-менеджер идем в корень сайта и открываем файл index.php, видим следующее содержимое:
Очень грубо говоря: в первых четырех строчках подключается шапка сайта (и ядро битрикса) и устанавливается заголовок страницы. Последняя строчка подключает подвал сайта (и кое-какие служебные скрипты).
Между этими строчками и содержится контент страницы. Давайте заменим его на контент из верстки, получим следующее:
Главная страница сайта стала еще чуть более информативной:
Этап первый — неинтересный
Теперь перейдем к практике.
Знакомимся со структурой шаблона
Давайте посмотрим, из чего состоит созданный нами шаблон. Для этого по FTP перейдем в папку шаблона. В Битриксе шаблоны сайта лежат в папке /bitrix/templates/ , если мы зайдем туда – увидим следующий набор папок:
Это три шаблона, которые сейчас есть у нас на сайте.
.default – папка шаблона сайта по-умолчанию: он подключается, если нет никаких других шаблонов (именно он использовался Битриксом до тех пор, пока мы не создали и не выбрали в настройках наш собственный шаблон).
landing24 – папка стандартного шаблона, который используется для создания лэндингов в рамках Битрикса (этот функционал в рамках данного курса мы рассматривать не будем).
alfavitka – это папка нашего шаблона (совпадает с ID шаблона, который мы указали при его создании).
Зайдем в папку нашего шаблона и видим следующий набор файлов:
Быстренько разберемся, для чего нужен каждый из этих файлов.
.styles.php – файл для описания стилей, которые используются в визуальном редакторе Битрикса (с ним мы разберемся в следующих уроках).
description.php – здесь хранится текстовое название шаблона, описание и другая информация:
footer.php – содержит код подвала сайта.
header.php – содержит код шапки сайта.
Сейчас эти файлы пустые, потому что на этапе создания шаблона мы не внесли в них никакой код.
styles.css – содержит стили сайта (с этим файлом мы разберемся в следующих уроках).
template_styles.css – содержит стили шаблона сайта.
Эти файлы также пустые, т.к. при создании шаблона их мы не заполняли.
header.php
В файле /local/templates/main/header.php понадобятся следующие записи
- if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); Данная строчка указывается в начале файла, для секюртости. Чтобы не могли открыть данный файл на прямую из браузера, без подключения ядра битрикса
- IncludeTemplateLangFile(__FILE__);Подключаются языковые файлы для шаблона
- $APPLICATION->ShowTitle();Отображение заголовка страницы из $APPLICATION->SetTitle("title")
- $APPLICATION->ShowHead();Выводит необходимый функционал в head
- $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/index.css");Подключается к шаблону файлы стилей, например для объединения
- $APPLICATION->ShowPanel();Подключает панель битрикса
- SITE_TEMPLATE_PATH;Содержит путь до шаблона, без последнего слеша, в частности /local/templates/main
- $APPLICATION->ShowTitle(false);Отображение заголовка страницы из $APPLICATION->SetPageProperty("title")
- $APPLICATION->GetCurPage(false) === '/';Необходим, если главная страница отличается от внутренней по верстке
index.php
В файле /index.php понадобятся следующие записи
- require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php"); //Подключение шапки
- require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php"); //Подключение подвала
.section.php
В файле /.section.php понадобятся следующие записи
- $sSectionName = "Webpack app"; //Имя раздела в админ панели
- $arDirProperties = array("title" => "Webpack app", "description" => "", "keywords" => "", "robots" => ""); //Свойства раздела,используются как $APPLICATION->SetPageProperty("title")
Правильный header.php в Битрикс
Итак, как грамотно должен быть оформлен файл header.php шаблона сайта в Битрикс:
- Перед не должно быть никаких пробелов и переносов
- Кодировка страницы задается перед
- После заголовка перечисляются все мета-теги
- После мета-тегов подключаются .css стили сайта
- И только после подключения .css стилей подключаются все .js скрипты
- Комментарии к IE по возможности лучше опустить в самый конец перед закрывающим тегом
Прописываем актуальные пути к картинкам
Сейчас у нас на сайте есть две картинки, которые не отображаются. Во-первых, нам нужно загрузить их на хостинг: из локального HTML шаблона загружаем папку images в папку шаблона на нашем хостинге:
Теперь, чтобы картинки отобразились у нас на сайте, в атрибуте src каждому тегу img нужно указать актуальный путь к файлу изображения. Обе картинки теперь лежат в папке images внутри папки шаблона. Как вы уже догадались, здесь нам опять поможет константа SITE_TEMPLATE_PATH. Код подключения логотипа теперь выглядит так:
Аналогично используем SITE_TEMPLATE_PATH для получения пути картинки в контенте на главной странице (файл index.php в корне сайта):
Во втором случае не очень уместно подключать картинку из папки шаблона, т.к. изображение относится к контенту конкретной страницы => оно не должно быть привязано к какому-либо шаблону (ведь в будущем у сайта может поменяться шаблон, а значит, что это изображение может оказаться недоступным). Но пока оставим всё как есть, а в следующих уроках разберем правильный вариант добавления картинки в контент страницы.
В итоге наша главная страница выглядит следующим образом:
Этап четвертый — интеграция
Самое время подключить шаблон к сайту (или разделу) и посмотреть что получилось. Визуальное представление должно соответствовать сверстанному варианту без контента. Если все красиво, можно начинать поочередно выделять участки кода и заменять их на вызов нужного компонента. Стандартные вызовы можно найти в этой статье. Напомню, что делать подобные замены удобно, напрямую изменяя в текстовом редакторе header.php и footer.php
В исходном виде информация, которую выводят компоненты, скорее всего не впишется в дизайн. Идем в Режим разработки — тыкаем на шестеренку — копировать шаблон. Теперь шаблон компонента можно спокойно кромсать из админки битрикса или редактированием style.css и template.php в каталоге /bitrix/templates/[имя шаблона]/components/[имя компонента]/[имя шаблона компонента]/
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте "1С-Битрикс". .
Курс для разработчиков - продолжение линейки учебных курсов по Bitrix Framework. Получение сертификата по курсу рекомендуется после успешной сдачи тестов по всей линейке курсов, так как без понятия о работе Контент-менеджера и Администратора создание успешных сайтов будет затруднено.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
- Интерфейс программы - в главе Элементы управления курса Контент-менеджер.
- Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
- Информационные блоки - в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
- Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
- Работа с инструментами системы - в главе Работа с инструментами курса Администратор. Базовый.
- Модуль Поиск - в главе Поиск курса Администратор. Базовый.
- Вся информация по администрированию модулей размещена в курсах:
-
- модули "1С-Битрикс: Управление сайтом" - модули "1С-Битрикс: Управление сайтом", связанные с коммерческой деятельностью в Интернете. - модули "1С-Битрикс: Корпоративный портал"
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
- Junior сможет создавать простые сайты работая со штатными компонентами и модифицируя их шаблоны.
- Middle разработчик может работать с API Bitrix Framework.
- Senior умеет работать над производительностью и безопасностью сайтов, создавать свои модули и компоненты.
Примечание: Такое построение удобно для пошагового изучения принципов работы Bitrix Framework. По этому же принципу построены и тесты. Но такая структура не очень удобна для использования содержания курса как постоянного источника информации. Что бы переключить курс в режим Справочника, воспользуйтесь переключателем в верхнем правом углу шапки курса.
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
- основами PHP, баз данных;
- основами HTML, CSS.
У нас часто спрашивают, сколько нужно заплатить
Курс полностью бесплатен. Изучение курса, прохождение итоговых тестов и получение сертификатов - ничего из этого оплачивать не нужно.
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
В конце каждого урока есть кнопка Прочитано! . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:
уроке.
Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат - это если общее число набранных Вами баллов отличается от максимального на 1-2%.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания офлайн
Если данный курс берётся в качестве основы для офлайнового преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла - от 10.03.2022.
Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Сегодня узнаем как грамотно оформлять header.php в Битрикс, как правильно подключать .css и .js в header.php, как правильно подключать jQuery в Битрикс и как включить сжатие .css и .js файлов в Битрикс.
Это очень острая и актуальная проблема на сегодняшний день. Самые частые обращения по модулям связаны с ошибками в скриптах, когда неправильно подключена jQuery в header.php, и очень часто подключено несколько jQuery, но должна быть подключена на всех страницах сайта только одна библиотека jQuery и самой первой среди всех скриптов шаблона сайта.
На одном сайте был рекорд, я насчитал 7 подключенных библиотек jQuery, просто человек замучился искать ошибки и деваться уже некуда было, когда проблема была найдена и исправлена, все стало работать на сайте правильно.
Другие файлы и папки
В папке шаблона /local/templates/main/ также размещаются другие необходимые для работы файлы и папки
- components папка с компонентами -> bitrix пространство имен -> menu название компонента -> top имя шаблона -> template.php и др файлы компонента
- css -> index.css и другие файлы со стилями
- fonts ->файлы со шрифтами
- img ->файлы с изображениями
- include ->файлы подключаемые с помощью компонента $APPLICATION->IncludeComponent("bitrix:main.include", "", Array(), false);
- js -> index.js и другие файлы со скриптами
- lang -> en/ru -> description.php и другие файлы соименные файлы, где необходимо используется конструкция вида GetMessage('T_DEFAULT_DESC_NAME')
Читайте также: