Где в битрикс подключить css

Битрикс – Как правильно подключать CSS и JS файлы в шаблон

Разберем все способы подключения и выберем какой же самый лучший.

Как подключить стили в обычном HTML

Для начала давайте вспомним как мы подключаем стили, всего 3 способа
1. Через файлы стилей (рекомендуется):

2. Инлайново (крайне не рекомендуется):

3. через тег style (иногда допустимо, но редко):

body

Битрикс – Как добавить стили в шаблон?

В битриксе стили подключаются таким способом:

SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css")?>

Благодаря $APPLICATION->SetAdditionalCSS, а SITE_TEMPLATE_PATH – указывает на путь к текущему шаблону сайта.
Помимо этого способа существует подключение при помощи класса:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addCss('/path/style.css');

Данный метод якобы лучше, но мне привычнее первый :), хотя этот новее и правильнее.
Оба метода имеют неочевидный второй параметр additional – Необязательный. По умолчанию “false”. Добавление файлов стилей или js в конец списка ресурсов шаблона.

То есть, для его использования пишем:

Asset::getInstance()->addCss('/path/style.css', true); // или $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/style.min.css", true);

Таким же способом вы можете добавить стили в шаблоны компонентов, речь про template.php.

Битрикс – Как добавить скрипты в шаблон?

Сначала функция на ядре D7:

// В начале файла вам нужно будет указать пространство имён use Bitrix\Main\Page\Asset; Asset::getInstance()->addJs('/path/main.js');

Старая запись выглядит так и использует $APPLICATION->AddHeadScript:

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/main.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/cookie.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');

$additional – По умолчанию false, то есть скрипты подключаются после подключения скриптов ядра и шаблона сайта. Если true скрипты, подключаемые данным методом, будут добавляться в конец текущего таргета вывода скриптов. Т.е. если относятся к ядру то после всего ядра, если к шаблону, то после шаблона сайта и смогут на него повлиять.

А зачем вообще подключать таким способом свои скрипты и стили?
Всё просто, в битриксе есть способы оптимизации этих файлов. Заходим в админке в:
Настройки → Настройки продукта → Настройки модулей → Главный модуль
И видим там такую картину

Теперь вы знаете несколько способов подключения своих CSS и JS файлов, знаете про скрытый параметр, а также зачем подключать стили и скрипты именно с использованием API.

Как в битриксе добавить свою строку в head

Очень просто, делается это при помощи:

Правильное подключение стилей и скриптов в Битрикс

Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в системе управления 1С-Битрикс. Если вы получаете готовую верстку в HTML/CSS, то имеет смысл грамотно подключить файлы стилей, js и мета теги при интеграции шаблона в Битрикс

Для чего подключать скрипты и js через API

Это нужно для правильной оптимизации сайта. CMS Битрикс, умеет самостоятельно объединять и сжимать подключаемые файлы стилей и js файлы. Если вы подключите их по старинке, простыми вставками вида

Для стилей Для js файлов

Однако тогда вы не сможете перенести оптимизацию сайта на плечи системы управления. На много правильнее, подключать эти файлы с помощью API Битрикс

До выхода нового ядра D7

// Для подключения скриптов $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/file.js" ); // Подключение css $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/file.css", true); // Подключение мета тегов или сторонних файлов $APPLICATION->AddHeadString("name=''");

Подключение стилей и скриптов с D7:

use Bitrix\Main\Page\Asset; // Для подключения css Asset::getInstance()->addCss("/bitrix/css/main/bootstrap.min.css"); // Для подключения скриптов Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/myscripts.js"); // Подключение мета тегов или сторонних файлов Asset::getInstance()->addString("");

По условиям обратной совместимости, использовать можно оба метода- оба способа работают правильно и принципиальной разницы не имеют

Подключив внешние файлы правильно, через ядро Битрикс, вы сможете максимально оптимизировать создаваемый сайт. Объединить и сжать css файлы

Далее в настройках Битрикс: Настройки- Настройки Модулей -Главный модуль : включаем объединение и сжатие JS файлов, объединение css файлов.

Самое главное, вы сможете подключать необходимые файлы в «объединение» по необходимости, в зависимости от требуемого функционала страницы или компонента. То есть, по факту у вас вегда будет один файл css и один js, но их состав и соотвественно объем, будет разный в зависимости от текущей страницы или раздела сайта

Подключение стилей и js в шаблонах компонентов

Если нужно подключить стили и скрипты, в нутри шаблонов компонентов. Например, вы используете слайдер, на основе списка новостей: у него может быть много js и css и не целесообразно, подключать его кишочки, глобально ко всему сайту. Просто поспользуйтесь такой конструкцией

 $this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/liba.js");

Оптимизируйте. Ни кто не любит тормозящие сайты, тем более это просто и не требует больших трудо затрат

Кроме того. Внутри ядра 1С-Битрикс есть вспомогательные скрипты и библиотеки: jQuery, Vue, font-awesome итд. Например, четвертый bootstrap можно подключить так:
\Bitrix\Main\UI\Extension::load(«ui.bootstrap4»);

Правильное добавление CSS и JS файлов в битрикс

В битриксе, в компонентах, есть возможность подключения js и css кода, используя файлы style.css и script.js, которые лежат в компоненте шаблона. Иногда этих файлов бывает недостаточно, мы можем подключить дополнительные стили или скрипты несколькими способами: Путем включения файла в шаблоне компонента:

Читать:

Как подключить беспроводные наушники sony к айфону

Выполнив код в самом компоненте:

// для css $APPLICATION->SetAdditionalCss("/local/styles.css"); // для js $APPLICATION->AddHeadScript('/local/script.js');

При вызове этого метода данный подключаемый файл окажется в секции сайта (в случае если не указан перенос скриптов в конец кода, для js)
Была возможность также подключать необходимы файлы в файле component_epilog.php, в этом случае подключение не кешируется, и можно, например, предоставить возможность редактировать файл сторонним разработчикам:

SetAdditionalCss("/local/styles.css");

И самый правильный метод, в файле шаблона template.php, этот метод стал доступен с версии 15.5.1:

$this->addExternalCss("/local/styles.css"); $this->addExternalJS("/local/script.js");

Вот еще способ с использованием ядра D7

addJs((SITE_TEMPLATE_PATH."/js/script.js"); Asset::getInstance()->addCss(SITE_TEMPLATE_PATH."/css/style.css"); ?>

Вот таким способом мы можем вставить целую строку в раздел на сайте, этот способ может быть удобен при необходимости вставки какого то другого кода, например, cannonical

Форма обратной связи ajax
Битрикс бесконечная прокрутка страниц
data-skip-moving битрикс
Битрикс многосайтовость
Bitrix server test
Битрикс меню каталога
Битрикс не добавляются товары в корзину
Перенос сайта на битриксе на другой хостинг
Перенос сайта на битрикс
Не приходят письма битрикс
Битрикс сео оптимизация
Ssl сертификат Битрикс
Битрикс выгрузка на яндекс маркет
Битрикс добавляем google analytics и яндекс метрику
Цели яндекс метрика & google analytics битрикс
phpmyadmin на битрикс
Эквайринг битрикс
Конвертер на лету. Webp в битрикс
Битрикс, авторизация скриптом
Добавление свойств товара в корзину Битрикс
Настройки ошибки 404
Битрикс Яндекс.Касса
Размещаем robots.txt в Битрикс
Битрикс остатки по складам
Настройка поиска

Форум

Страницы сайта состоят из модулей и компонентов.
Нужно подключить определённый CSS файл, к определённой странице.

Классы к которым будут применяться css свойства, используются и на других страницах, поэтому важно, чтобы css отрабатывал только на одной странице.
Изменить классы нет возможности, как и нет возможности подключить css файл в header.php

1) Как можно реализовать эту задачу?

2) Как можно для конкретной страницы подключить другой header.php в котором уже будет подключён этот файл?

3) Как прописать условие, на php? Если страница такая, подгружается такой-то css файл, иначе всё как обычно.

Сообщений: 407 Баллов: 61 Регистрация: 08.10.2014
26.04.2018 15:05:08

Ну так добавьте стиль именно на нужную вам страницу

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 15:29:16
тест меседж
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 16:47:01

Посмотрел, но не понял, где это нужно прописать? Можно подробнее?
Как задать страницу то?

Шаблон для всех страниц общий.
Если я там пропишу:

SetAdditionalCSS("/bitrix/templates/demo/additional.css"); ?>

то вероятно он будет использоваться для всех страниц

Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 17:21:30
А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить
Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 20:06:26

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

И для кого я всё расписываю..
Заглянувший
Сообщений: 17 Баллов: 2 Регистрация: 11.09.2017
26.04.2018 22:13:43

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

Не вижу противоречий. Даже если шаблон общий, то в хедере можно поставить условие. что если адрес совпадает с нужным, то подключить нужный стиль. В чем проблема-то? Проблематично составить условие?

if($APPLICATION->GetCurPage() == 'path/to/need/page') $APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 22:29:11

Цитата
Максим Власов написал: А что мешает даже в общий шаблон поставить условие конкретного адреса? Если совпало, то выводить

if ( $APPLICATION ->GetCurPage() == 'path/to/need/page' ) $APPLICATION ->SetAdditionalCSS( "/bitrix/templates/demo/additional.css" );

Во-первых — да
Во-вторых — спасибо!)))

Только видимо условие дописано не до конца, как правильно закончить будет?

Типа если стр такая, то подгрузит этот css, иначе подгружаем обычный.
А то он опять на всех страницах отрабатывает почему-то.

Заглянувший
Сообщений: 16 Регистрация: 10.03.2018
26.04.2018 23:19:31
Я в битриксе 0, так что буду описывать всё что сделал. В head вставил строки

GetCurPage() == 'http://site.ru/salut_speceffecti/nazemnye-feyerverki/'); $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); ?>

Файл css подгрузился
Но и работает для всех страниц..

Постоянный посетитель
Сообщений: 93 Баллов: 19 Регистрация: 20.09.2016
26.04.2018 23:29:32

GetCurPage() == '/salut_speceffecti/nazemnye-feyerverki/') < $APPLICATION->SetAdditionalCSS("/bitrix/css/rscss/rsnazemfeerverk.css"); > ?>

Страницы: 1 2 След.

Центр поддержки

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507

Контент для лиц от 16 лет и старше