Как изменить код на сайте битрикс

Режим правки: наводим мышь и редактируем

Режим правки — крайне полезная функция для быстрого выполнения основных задач контент-менеджера. Режим правки позволяет работать со включаемыми областями, рабочей областью страницы и компонентами.

Раньше настройки были разбросаны по всему разделу, теперь мы собрали их на одном слайдере. Изменяйте дизайн, редактируйте блоки, настраивайте аналитику — всё это на одной странице и за пару кликов.

Теперь вы потратите гораздо меньше времени и усилий на создание красивого и функционального сайта.

Перейдите в раздел Сайты и Магазины. Далее откройте сайт, который вы хотите отредактировать.

Чтобы перейти к настройкам, нажмите на шестерёнку в панели Возможности сайта.

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

Откроется общий слайдер настроек сайта и страниц.

Настройки и дизайн страницы приоритетнее настроек и дизайна сайта.

Например, если во вкладке Дизайн сайта вы выбрали жёлтый, как основной цвет сайта, а на вкладке Дизайн страницы зелёный, то в итоге элементы на странице будут зелёного цвета.

Также рекомендую прочитать:

• Создание сайта в Битрикс24

• Как установить счетчик Google Analytics на сайт

• Как разместить контейнер Google Tag Manager на сайте

• Как установить счетчик Яндекс.Метрики на сайт

Шаг 1. Авторизация

Для начала работы с текстовым редактором необходимо выбрать пункт «Изменить страницу» в публичной части сайта.

Также редактор доступен в административной части сайта, например при редактировании разделов или элементов инфоблока.

Важно. если редактирование текста происходит из административной части, необходимо открыть раздел «Визуальный редактор», для работы с редактором.

Рассмотрим инструменты, которые нам предоставляет текстовый редактор.

1. Выбор режима отображения

Доступны 4 режима:

• «визуальный режим» — будет отображаться только визуальный редактор;
• «режим редактирования исходного кода» — отображается только поле для ввода html;
• «совмещенный режим по горизонтали/вертикали» — редактор будет разделен на 2 части (визуальный редактор и редактор исходного кода).

2. Стиль оформления.

Данный пункт позволяет выбрать какой стиль будет применен к тексту (обычный текст, заголовок от h1 до h6, абзац или блок).

3. Шрифт

Позволяет выбрать какое семейство шрифта использовать.

4. Размер шрифта

Изменяет размер шрифта.

5. Инструменты для изменения внешнего вида текста

• полужирный;
• курсив;
• подчеркнутый;
• зачеркнутый;
• удалить форматирование текста;
• цвет текста.

6. Список

• нумерованный список;
• маркированный список.

7. Выравнивание текста

• увеличить отступ;
• уменьшить отступ;
• выравнивание текста (по левому краю, по центру, по правому краю, по ширине).

8. Инструмент для размещения ссылки

Содержит два основных поля: текст и адрес. В поле текст необходимо указать текст, который будет являться ссылкой.

Помимо этого есть дополнительные поля. Рассмотрим наиболее полезные из них:

• Всплывающая подсказка. Здесь можно указать текст, который будет отображаться при наведении на ссылку;
• CSS класс. С помощью этого поля можно присвоить CSS класс для ссылки (чаще всего этот пункт используется, если необходимо сделать, чтобы изображение открывалось в модальном окне. Для этого ссылке прописывается класс fb. Подробнее об этом можно почитать на странице Изображения в модальном окне );
• Не учитывать ссылку поисковиками. Необходимо выбрать этот пункт, если нужно, чтобы ссылка не учитывалась поисковыми системами.

9. Изображение

Используется для загрузки изображений в редактор.

Изображение можно выбрать:

• из медиабиблиотеки;
• из структуры сайта;
• или разместить ссылку на изображение со стороннего ресурса.

10. Вставить видео

Дает возможность разместить ссылку на ролик со стороннего ресурса.

11. Якорь

Позволяет установить якорь в нужном месте страницы, для создания ссылки именно на это место страницы.

12. Таблица

Инструмент для вставки таблицы.

Также можно открыть дополнительные настройки кнопкой «Еще».

Рассмотрим содержащиеся там инструменты.

• Спецсимвол. Позволяет размещать спецсимволы на странице;
• Вставить разрыв для печати страницы. Позволяет разбить одну страницу на несколько при печати;
• Вставить разделитель страниц. Позволяет осуществить разбиение текста при просмотре публичной части сайта. Данная функция работает только при редактировании инфоблока;
• Проверка орфографии. Включает проверку орфографии. Чтобы данный инструмент можно было использовать, необходимо установить расширение pSpell;
• Вставить горизонтальный разделить. Вставляет горизонтальную полосу;
• Нижний индекc. Добавляет нижний индекс;
• Верхний индекс. Добавляет верхний индекс.

В данном уроке мы рассмотрим что такое режим правки в 1с-Битрикс. Как им пользоваться и какие он даёт нам возможности.

Здравствуйте друзья

Продолжаем серию уроков по базовым функциям системы управления 1с битрикс. В данном уроке мы с вами рассмотрим что такое «режим правки».

Начнем с того что этот функционал нам становится доступен после того как мы залогинились в административную панель управление сайтом

Режим правки в 1с-Битрикс, включаются у нас путем перемещения переключателя в верхнем правом углу публичной части сайта. Мы нажимаем данный переключатель и тем самым включаем данный режим.

Что он нам даёт?

В данном режиме мы можем с вами редактировать контент, а также редактировать какие-то элементы сайта. Например, отредактировать пункты меню, то есть, когда мы наводим на какой-либо объект, у нас он выделяется в рамочку и далее появляются опции с предложением действий для данного элемента сайта.

Мы можем нажать например, редактировать пункты меню и у нас всплывает окошко

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

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

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

Навели курсор мышки, у нас появилось меню и здесь мы можем что-либо сделать в данном случае изменить товар

Здесь мы можем вносить какие-либо корректировки в наш товар — это очень удобная опция
которая позволяет нам осуществлять коррекцию сайта не только из админки но прямо из публичной части. Если вы не хотите копаться в админке, то можно что-то отредактировать прямо на месте.

Если у вас еще нет сайта на 1с-Битрикс, предлагаем ознакомиться с каталогом решений готовых сайтов. Здесь вы найдете как сайт для бизнеса так и готовый интернет-магазин

Перейдем в блог, перейдем какую-либо запись, ждем диалоговое окно нажимаем «изменить статью»

меняем содержание статьи да нажимаем кнопочку «сохранить»

Но! Я хочу сразу предупредить Вас о том, что с этим режимом нужно действовать аккуратно, нужно внимательно смотреть какое действие выбирать! то есть куда попало, что попало тыкать, не понимая куда мы тыкаем не стоит!

Нужно внимательно дочитать какие варианты действий нам предлагают наша система (наш сайт) и только после этого нажать на какую-то либо кнопочку, потому что если мы будем тыкать все подряд есть риск что мы сломаем наш сайт.

В случае если вы куда-то тыкнули, и что-то у вас начало отображаться неправильным образом или вы хотите отменить изменения, система нам позволит откатиться на один шаг назад

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

Но к сожалению, откатываться можно всего лишь на один шаг. Если мы сделали какое-то изменение, и после этого, начали что-то менять еще, то уже все, предыдущее действие сохранится, как говорится «поезд ушел». Поэтому будьте внимательны когда вы что-то у себя на сайте редактируете. То есть сделали какую-то операцию, посмотрели все в порядке, идем дальше… если что-то пошло не так, нажали кнопочку «отменить изменения»

Я рекомендую пользоваться режимом правки, не как основным инструментом для редактирования товаров или записей на сайте, а больше как вспомогательным.

Благодарю вас за внимание

«В жизни всё когда-нибудь случается в первый раз…»

Капитан Очевидность

Перед любым начинающим разработчиком сайтов с использованием системы управления контентом «1С-Битрикс» рано или поздно (скорее всего рано) встанет задача по изменению существующих в «1С-Битрикс» компонентов.

И, вот, наступает этот ответственный момент — потеют ладони, учащается пульс, лоб покрывается холодной испариной, в голове роятся вопросы — как не ошибиться, «не уронить» сайт, «не пролететь мимо» техподдержки «1С-Битрикс»? 

Всё вышеперечисленное (и многое другое) действительно мешает сосредоточиться на разработке. Как же не «наломать дров»? Давайте разбираться.

Сперва оговоримся, что речь в данной статье пойдет об изменении («кастомизации») именно шаблона компонента. То есть о преобразовании его визуального представления, а не об изменении логики его работы. «Кастомизацию» самого компонента (как простого, так и комплексного) мы опишем в одной из следующих статей, а сейчас мы обсудим изменение его внешнего вида. Тем более, что подобная задача встаёт перед разработчиками гораздо чаще… А решить её гораздо проще

Изменять внешний вид компонентов приходится при интеграции верстки любого сайта. Дизайнер нарисовал сайт, верстальщик создал макет, а разработчику надо заставить всё это работать. Ведь практически в любом сайте есть:

• несколько видов меню, 
• строка поиска, 
• авторизация 
• и много чего ещё. 

Для правильного функционирования всех этих элементов в «1С-Битрикс» есть набор различных компонентов (меню, «хлебные крошки», каталог и т.п.), но внешний вид компонентов из коробки будет сильно отличаться от того, что было придумано творческой натурой дизайнера.

Сперва несколько правил

Первое
Свой собственный кастомизированный шаблон сайта мы храним в папке /local/ в корне сайта. Если такой папки там нет — создаем и переносим туда наш шаблон сайта. Битрикс работает таким образом, что у папки /local/ всегда будет приоритет выше, чем у папки /bitrix/, таким образом если в /local/templates/ и /bitrix/templates/ будут лежать шаблоны с одинаковыми названиями будут выполняться шаблоны из /local/templates/. Подобный подход к работе — активное использование папки /local/ — позволяет нам отделить свой код от кода разработчиков «1С-Битрикс». 

Второе
Мы не изменяем сам компонент из коробки, да система вам скорее всего не позволит это сделать, мы копируем компонент и будем работать уже с его копией . 

Третье
Ни под каким соусом мы не лезем в ядро «1С-Битрикс» ( особенно в папку /bitrix/modules/) — начинающему разработчику (а вы — начинающий разработчик, иначе зачем вы читаете эту статью?) нечего там делать. 

Четвёртое
На всякий случай перед кастомизацией делаем бэкап — подробности ниже. Соблюдение всех этих правил позволит нам не «поломать сайт», не остаться без помощи техподдержки и, что очень важно, не потерять все свои разработки при обновлении версии «1С-Битрикс».

Начнём с начала − Бэкап

В режиме Администрирования идём:

Настройки → Инструменты → Резервное копирование → Создание резервной копии

Выбираем место хранения резервной копии. В облаке «1С-Битрикс» предпочтительней, если зарезервированной там памяти хватает для создании копии. Либо в папке сайта − при выборе этого варианта убедитесь, что на хостинге достаточно места для хранения резервной копии и функционирования сайта, иначе сайт просто «ляжет».  Жмём кнопку «Создать резервную копию». После этого можно почти безбоязненно экспериментировать с сайтом, по крайней мере если у вас есть к нему доступ по ssh или ftp

Начинаем кастомизацию шаблона компонента

Давайте для примера кастомизируем что-нибудь очень нужное и не очень простое. Пожалуй, компонент «Меню» отлично подойдет.

Допустим, меню по задумке дизайнера должно выглядеть так:

Но компонент к которому применен встроенный шаблон может выглядеть, например, так:

Давайте приведем его к требуемому виду. Для этого из публичного раздела создадим тестовую страницу − все эксперименты сперва будем ставить на ней.

Вводим название для заголовка страницы, имени файла, снимаем галку «Добавить пункт меню» и жмём “Готово”:

Оказавшись на нашей тестовой странице, жмём «Изменить страницу» → «В визуальном редакторе»

Появляется окно редактирования страницы. В нем сперва выбираем режим отображения «Визуальный режим» (1), затем в поисковой строке (2) пишем «меню», выбираем компонент «Меню» (3) и, зажав левую кнопку мыши, перетаскиваем его в рабочую область (4):

После этого откроются параметры компонента. Если почему-то не открылись, просто дважды кликните левой кнопкой мыши по выбранному компоненту. Установим стандартные настройки компонента как показано на рисунке:

Дважды жмём «Сохранить» и компонент отображается на нашей тестовой странице:

Для дальнейшей работы в правом верхнем углу окна браузера должен быть включен режим правки:

В режиме правки наводим указатель мышки на наш компонент, в появившемся меню жмём на треугольник рядом с шестерёнкой, затем «Меню (bitrix:menu)» → «Копировать шаблон компонента»:

Придумываем имя для шаблона компонента, выбираем место его хранения и жмём «Сохранить»:

Появится код шаблона компонента:

Как с ним работать? Тут каждый выбирает сам. 

1. Можно, конечно, и данном окне, но это крайне неудобно. 

2. Можно кликнуть на ссылку «Редактировать файл в панели управления» и работать оттуда − тоже так себе вариант. 

3. Можно просто скопировать код и открыть его в своей среде разработки, модифицировать и скопировать обратно. 

4. Наконец, можно подключиться к серверу, на котором лежит сайт по ssh или ftp. 

Я предпочитаю использовать среду разработки Visual Studio Code − это достаточно мощный и совершенно бесплатный инструмент. Его фишка (при установке соответствующего плагина) − возможность подключиться к серверу по ssh и работать с файлами сайта напрямую. Но тут каждый поступает, как ему удобнее. В любом случае, вот код шаблона компонента меню:

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

	<?if (!empty($arResult)):?>
	<ul id="horizontal-multilevel-menu">
	<?
	$previousLevel = 0;
	foreach($arResult as $arItem):?>
           
	  <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
	     <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	  <?endif?>
               
	  <?if ($arItem["IS_PARENT"]):?>
	     
             <?if ($arItem["DEPTH_LEVEL"] == 1):?>
	        <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a>
	          <ul>
	     <?else:?>
	        <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
	          <ul>
	     <?endif?>
           
	  <?else:?>
	    <?if ($arItem["PERMISSION"] > "D"):?>
            
	      <?if ($arItem["DEPTH_LEVEL"] == 1):?>
	        <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li>
 	      <?else:?>
	        <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
	      <?endif?>
              
	    <?else:?>
                  
	       <?if ($arItem["DEPTH_LEVEL"] == 1):?>
	         <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
	       <?else:?>
	         <li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
	       <?endif?>
              
	    <?endif?>
          
          <?endif?>
           
	  <?$previousLevel = $arItem["DEPTH_LEVEL"];?>
          
	<?endforeach?>
         
	<?if ($previousLevel > 1)://close last item tags?>
	  <?=str_repeat("</ul></li>", ($previousLevel-1) );?>
	<?endif?>
	</ul>
         
	<div class="menu-clear-left"></div>
	<?endif?>

А вот верстка нашего меню:

        <div class="nv_topnav">
	  <ul>
	    <li><a href=""><span></span></a></li>
	    <li><a href=""><span>Компания</span></a>
              <ul>
	        <li><a href="">Пункт 1</a></li>
                <li><a href="">Пункт 2</a></li>
                <li><a href="">Пункт 3</a></li>
                <li><a href="">Пункт 4</a></li>
	      </ul>
            </li>
            <li><a href=""><span>Новости</span></a></li>
            <li><a href=""><span>Каталог</span></a></li>
            <li><a href=""><span>Акции</span></a>
              <ul>
                <li><a href="">Пункт 1</a>
	          <ul>
                    <li><a href="">Пункт 1</a></li>
                    <li><a href="">Пункт 2</a></li>
	          </ul>
	        </li>
                <li><a href="">Пункт 2</a></li>
                <li><a href="">Пункт 3</a></li>
                <li><a href="">Пункт 4</a></li>
              </ul>
            </li>
            <li><a href=""><span>Партнерам</span></a></li>
            <li><a href=""><span>Контакты</span></a></li>
            <div class="clearboth"></div>
          </ul>
        </div>

Если при просмотре кода страницы возникли проблемы с обнаружением требуемого элемента верстки, то открываем html страницу в браузере и при помощи инструмента разработчика находим искомый элемент кода. Например, в браузере Google Chrome жмём кнопку на клавиатуре F12, потом кликаем на элемент, выделенный на скриншоте ниже красным, затем на меню. После этого нам остаётся найти этот же сегмент в коде:

На первый взгляд, код шаблона компонента меню может показаться страшным и непонятным, но присмотревшись к нему повнимательнее мы замечаем, что его html структура (что неудивительно) довольно похожа на нашу вёрстку.

Меню представляет собой таблицу заключёную в теги <ul></ul>, только в шаблоне <ul> имеет id, а вёрстке нет. Кроме того в вёрстке <ul></ul> обернуты тегами <div></div> с классом «nv_topnav». 

Посмотрев на строки таблицы, ещё мы заметим, что в вёрстке, в отличие от шаблона меню, текст внутри тегов <a></a> обернут в <span></span>. 

Заметим, что в вашем случае вёрстки отличия будут иными, но принцип останется тем же. Нам нужно лишь преобразовать код шаблона компонента в соответствии с нашей вёрсткой – убрать лишний id у <ul>, обернуть всю таблицу в <div>, добавить <span> в строки таблицы. В результате получим такой код:

	<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
	<?if (!empty($arResult)):?>
           <div class="nv_topnav">
              <ul>
	      <?
	      $previousLevel = 0;
              foreach($arResult as $arItem):?>
                  
                 <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
	            <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	         <?endif?>
                             
	         <?if ($arItem["IS_PARENT"]):?>
                    
	            <?if ($arItem["DEPTH_LEVEL"] == 1):?>
	               <li><a href="<?=$arItem["LINK"]?>" <?if(isset($arItem["PARAMS"]["IMG"])):?>class="menu-img-fon" style="background-image: url(/bitrix/templates/.default/images/nv_home.png);"<?endif;?>><span><?=$arItem["TEXT"]?></span></a>
	                  <ul>
                    <?else:?>
                       <li><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a>
                          <ul>
                    <?endif?>
                         
	         <?else:?>
                         
                    <?if ($arItem["PERMISSION"] > "D"):?>
                       <?if ($arItem["DEPTH_LEVEL"] == 1):?>
                          <li><a href="<?=$arItem["LINK"]?>"<?if(isset($arItem["PARAMS"]["IMG"])):?> class="menu-img-fon" style="background-image: url(/bitrix/templates/.default/images/nv_home.png);"<?endif;?>><span><?=$arItem["TEXT"]?></span></a></li>
                       <?else:?>
                          <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                       <?endif?>
                       
                    <?endif?>
                         
                 <?endif?>
                            
                 <?$previousLevel = $arItem["DEPTH_LEVEL"];?>
                          
              <?endforeach?>
                         
              <?if ($previousLevel > 1)://close last item tags?>
                 <?=str_repeat("</ul></li>", ($previousLevel-1) );?>
              <?endif?>
              <div class="clearboth"></div>
             
           </ul>
        </div>
     <?endif?>

Обратите внимание, на то, что в условии <?if ($arItem[«PERMISSION»] > «D»):?> мы удалили <?else:?>, т.к. в нашем примере отсутствует проверка на права доступа к элементам меню.

Предполагается, что css файл со стилями нашей вёрстки уже подключен к шаблону нашего сайта, так что мы можем смело удалять css файлы шаблона модифицируемого компонента – они нам не пригодятся.

При кастомизации шаблона компонента таким образом мы просто должны заменить модифицированным компонентом сегмент вёрстки (он приведен выше), отвечающий за меню. Для этого в публичной части жмём «Изменить страницу»:

Затем в открывшемся окне выбираем режим редактирования исходного кода и копируем код вызова компонента:

Нам остаётся только заменить скопированным кодом компонента сегмент кода верстки отвечающем за меню.

Результат:

Да, и не забудьте удалить с тестовой страницы компонент меню