Заказать
Заказать

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7

В сегодняшней статье мы продолжаем изучение  CMS Bitrix. Более подробно остановимся на создании и настройках инфоблоков.

Что такое инфоблоки?

Инфоблок – единица контента: слайд, раздел, статьи, товары, новости. Своего рода пазлы, из которых состоит смысловая, информационная нагрузка сайта.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Инфоблоки – структурная единица Битрикс

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

Создание новых инфоблоков в Битрикс

Заходим через админку в раздел инфоблоков. Для начала удалим существующие, чтобы очистить пространство для работы.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как удалить инфоблок

Опускаемся ниже. Выбираем галочками все пункты, удаляем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Очистить список инфоблоков

После обновим страницу. Список инфоблоков (слева/ на предыдущем слайде выделен зеленым маркером) будет пуст.

Начнем создавать новые. Возвращаемся в раздел «Контент», «инфоблоки», «Типы инфоблоков». Создадим инфоблок content. Вводим название и жмем «добавить новый тип».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание нового типа инфоблоков

Заполняем указанные поля. Ставим галочку «Использовать древовидный классификатор элементов по разделам:». Галочка нужна в случае если предусмотрено несколько подуровней: раздел, подраздел и т.д. В оранжевой рамке показано раздел «Проекты», который в процессе обучения будет выводиться в инфоблоках. Во вкладке «Дополнительно» изменения не вносим. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Дополнительно”

После обновления в списке появится созданный нами тип «Контент».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Где отображается тип инфоблоков

Во вкладке «Инфоблок» прописываем название блока и транслит. Также в соответствии с примером ставим галочки. Во вкладке SEO никаких действий не совершаем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание и настройка инфоблока

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Поле”

Детальная картинка – изображение на странице статьи. Задаем размер для всех статей блока. Сделаем по примеру страницы «Проекты». Чтобы определить размер изображения, кликаем левой кнопкой мышки на картинке в выпадающем списке выбираем «проверить объект». Помним, в коде ниже ищем строку, отвечающую за элемент. При наведении возле картинки появится обозначение с информацией. Переносим размеры в настройки.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как проверить параметры картинки

Также проставляем галочки в соответствии с примером ниже. При необходимости можно размещать авторский знак в виде картинки или теста (настройки обозначены зеленым маркером).

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки изображения для инфоблока

Картинка анонса – миниатюра изображения в ленте новостей с кратким описанием инфоблока. Можем подбирать отдельно или указываем «создавать из детальной картинки». Прописываем тот же размер. Другие настройки по примеру ниже.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Основное изображение и миниатюра, настройки
Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Другие параметры вкладки “Поле”

На вкладке «Свойства» – есть возможность указать дополнительную информацию о статье: автор, количество комментарием или просмотров, дата публикации и т.д. Мы зададим одно свойство – автор.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как вывести дополнительные информационные поля в новости

Указываем название. Тип оставляем «Строка», хотя в выпадающем меню есть много вариантов. Обязательно указываем код в верхнем регистре. Почему именно в верхнем расскажу позже.

Настройки для вкладки «Поля разделов».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Поля разделов”

Настройки для вкладки «Доступы».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Действия во вкладке “Доступ”

 Заполняем поля вкладки «Подписи» по примеру выше.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки вкладки “Подписи”

 «Журнал событий» не заполняем и жмем «Сохранить».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки вкладки “Журнал событий”

В списке слева появился новый инфоблок.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Где отображается инфоблок в Битрикс

Переходим в Блог и создадим новую категорию. На слайде выше видна возможность добавлять, статьи и категории – кнопки «добавить категорию»; «добавить статью» (обозначено зеленым маркером). Напомним, что при создании типа инфоблока отмечено галочкой «использовать древовидный классификатор элементов по разделам» (в рамке). Благодаря чему и появляются кнопки «добавить категорию» и «добавить статью».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как добавить статью или категорию

Создание подкатегорий раздела инфоблока

Кликнуть на кнопку «Добавить категорию». Во вкладке «категория» прописываем название «Категория 1». Названию особого внимания не уделяем, так как цель урока научиться создавать категории и подкатегории. Символьный код прописывается автоматически. Что мы также указывали в настройках при создании типа инфоблока. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание подкатегории

Аналогично создаем еще три категории, которые после отображаются в списке. Теперь можем зайти в категорию (двойным щелчком мыши) и наполнять раздел новостями.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание ряда подкатегорий

Как добавить контент в новую категорию?

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Наполнение разделов контентом

Во вкладке «Статья» заполняем поле «Название». Для наглядного примера используем страницу «Проекты» (в оранжевой рамке слева). Можно использовать для обучения любую новость из Интернета или размещать свою.

Символьный код прописывается автоматически, согласно заданным настройкам типа инфоблока. Начало активности (1) – стоит текущая дата, также задано при создании типа. Без этой галочки нужно постоянно прописывать вручную дату, когда статья будет показываться.

Автор (2) – помним, что, подобно этому полю, мы можем создать и другие дополнительные информационные ячейки в новости (количество просмотров, дата написания, лайки и т. д.). Как настроить, еще раз показано в оранжевой рамке справа.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как добавить статью

 «Анонс». Привью копируем с примера. Изображение не загружаем. Помним, что прописали брать картинку на обложку со страницы новости.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как вывести анонс и миниатюру картинки

«Подробно». Заливаем подробную картинку. Изображение внутри статьи, из которого Битрикс формирует обложку блока для анонса согласно заданным параметрам.

Сохраняем изображение примера (Проекты). Кликнуть мышкой на поле для фото, выбрать из выпадающего списка нужный файл. Загружаем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Действия во вкладке “Подробно”

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Выбор категории, где будет размещена статья

Теперь статья видна в списке соответствующего раздела. Создадим еще несколько новостей. Картинки и контент берем с той же страницы. Чтобы не создавать новые статьи, можно скопировать существующую. Кликнув на бургер, из выпадающего списка выбираем нужное действие. Меняем картинку, название и содержание. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как скопировать статью

Зеленым маркером выделены созданные статьи в категории 1. При необходимости можно выбрать несколько разделов, к которым будет относиться новость. Настройка в оранжевой рамке.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как разместить статью сразу в нескольких категориях

Подытожим. Мы создали Блог (тип инфоблока), его категории (подпункты разделы) и статьи. Оформили категории, новости (картинки, дополнительная информация). Оформили раздел Блог, чтобы сам выводился. В дальнейшем мы продолжим изучать инфоблоки. Спасибо.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Изучим непростой компонент меню. В ходе статьи создадим компоненты, и интегрируем в наш шаблон.

Создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Через админку переходим в раздел «Настройки» в меню слева:

  1. «Настройка модулей»;
  2. «Управление структурой».
Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню через админку

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «тип меню» в данном случае только «main_menu». Так как создаем только главное меню. Также может быть и «left_menu» или «wright_menu» – в зависимости от проекта сайта.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
настройки структуры

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже в строке указываем: левое меню, нижнее или правое. На данный момент создаем главное, и вторую строчку оставляем пустой. «Сохранить». Переходим в раздел «Сайт».

Следующий шаг – «Создать раздел». Важно создать именно раздел, а не страницу. Так будет возможность создавать подпапки для файлов подпунктов меню.

Обратите внимание! Все разделы создаются на главной странице.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне указываем название раздела и соответствующий документ.

Далее «Имя нового» и в строке «Тип меню» оставляем «Главное». Если предусмотрено создание нескольких меню (левое, правое, нижнее и т.д.), в выпадающем списке указываем к которому меню будет относиться создаваемый пункт.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Далее в свойствах раздела прописываем название каталога и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне редактирования пока прописываем текст-образец и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После видим текст на странице. И в корне появится файл about.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже на слайде показано, как выглядят разделы в файле menu.php. Зеленым маркером обозначены документы, которые указываем при создании нового раздела. Удобно скопировать название и затем использовать.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
компонент меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6 Следующим создаем компонент «Услуги». Обязательно переходим на главную страницу, иначе раздел будет создан в папке about, а не в корне. Можно прямо в адресной строке удалить часть пути, ведущего в ново созданный раздел, и нажать enter.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вернуться на главную

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Алгоритм действий, как и при создании предыдущих компонентов. Главное правильно указать название документа, к которому будет обращаться Битрикс.

Шаг 1

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание ного раздела – услуги

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – дейстие 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
свойства раздела – действие 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 4

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 5

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создаем новые разделы на главной

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После сохранения помним об обязательном переходе на главную страницу.

Таким же способом создаем еще два пункта: проекты и контакты. Можете выполнить задачу опираясь на предыдущие слайды или видео, где описано пошагово создание всех компонентов меню.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Bitrix

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В итоге в корне сайта Битрикс создаст каталог для каждого нового пункта меню.

Создание компонента «Меню»

Важно! Компонент создается только на посторонней странице. Так минимизируется риск испортить весь шаблон или затерять стили, созданные на рабочих страницах, в случае ошибок.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
пробная страница

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Совершать все дальнейшие действия можно и здесь. Но и специалисты могут случайно сохранить нежелательные изменения. Для работы используем, ранее созданную, страницу new-page.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В параметрах компонента выставляем только параметры меню для первого уровня. Сохранить.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
параметры компонента “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удаляем «br» и копируем код. Выходим без сохранения. Помним: компонент используем только для получения кода, а работаем с заготовленным шаблоном. Ошибки можно ликвидировать и стартовать с исходного кода неограниченное количество раз.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
где взять код компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Вставляем в документ menu.php вначале. Содержимое этого файла закомментируем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
включить компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем изменения и переходим на главную страницу. Результат получим следующий.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
править компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Меню выводится, пункты работают. Хотя выглядит пока незавершенным. Конечно, меню имеет свои стили, находятся в папке bitrix.

Путь к стилям:

  • сomponents;
  • bitrix;
  • menu;
  • template.php.

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

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
простая проверка Битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Повторим, что к папке bitrix в ходе работы лучше не обращаться. Здесь содержаться все стили, важные настройки, как своего рода диск С на компьютере.

Как поправить меню, если в папку bitrix не рекомендуется заходить? С помощью редактирования компонента. Обязательно переходим в режим правки. Появится возможность править компонент. Но на данный момент нужна не эта функция. Наводим на область редактируемого компонента. На панели, рядом с кнопкой редактирования, находится выпадающий список. Копируем шаблон с Битрикс.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать шаблон bitrix-1c

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Да, можно скачать и залить, записать самостоятельно. Но в Битрикс предусмотрен более простой способ.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
как перенести шаблон в 1с-битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Файл называем main_menu. Остальные настройки показаны на слайде выше.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
код вызова компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В menu.php появился вызов нашего меню. Также появилась дополнительная папка components в каталоге шаблона teh. Документ был создан Битрикс автоматически.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать стили битрикс 1с

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Путь к документации выделен зеленым маркером. Содержимое папок в красной рамке. Таким образом, были скопированы стили Битрикс без риска испортить исходные параметры случайными ошибками.

Переходим в папку template2, начнем использовать готовые решения Битрикс. До 13й строчки включительно – прописано оформление (оставим без изменений). Далее код, который будет преобразовываться в ходе обучения. Для удобства отступим.

Дальнейшие действия противоречат инструкции bitrix, но это не критично. Фрагменты кода будем переносить с отключенного участка ниже.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
готовые решения – как использовать

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Третье действие необходимо для максимальной вложенности. Если есть один, и при этом вложено больше, чем один. Допускается пропустить эту деталь, но лучше записать.

Четвертое – копируем проверку. Пятое – выводим ссылку.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
класс header-nav_intem

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Код на промежуточном этапе имеет такой вид. Если мы выводим с активным пунктом меню, то выводится с классом header-nav_intem (1, серый маркер), в противном случае выводим без каких-либо классов (2, серый маркер).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактировать код

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удалим лишние пункты (зеленая рамка, строки 25-37, действие 1). Вставляем текст ссылки – действие 2.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Так должен выглядеть готовый документ. Закомментированный ранее фрагмент больше не нужен – удаляем. Ниже готовый код для копирования, проверки ошибок.

<?php foreach($arResult as $arItem): ?>
                <?php if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?>
                <?php if($arItem["SELECTED"]): ?>

          <li class="header-nav__item"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php else: ?>
                     <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php endif; ?>
                     <?php endforeach; ?>
                     

Как искать ошибки?

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

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ошибки в коде

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Битрикс позволяет выводить расширенную информацию об ошибках. На слайде ниже показано, как включить функцию.

В папке settings.php в корне битрикс находим строку debag. Меняем false на true, и сохраняем. Путь к файлу отмечен зеленым маркером. Действия в папке показаны в черной рамке, отмечены оранжевым маркером.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
поиск ошибок битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Показаны все ошибки. Указано, что проблема в 23 строке. Действительно, вместо «:» был другой знак «;».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
расширенный вывод ошибок в bitrix24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Исправим, сохраним и смотрим результат.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
режим редактирования страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Все работает. Единственный минус – не вывелись стили, над чем мы еще поработаем. Осталось вывести «Главную».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Действуем через админпанель и компонент меню, кнопка «редактировать пункт меню».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вставить пункт

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне выбираем «вставить пункт». Прописываем название нового раздела.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ссылка при создании нового пункта меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «Ссылка» ставим слеш, так как страница главная. При помощи стрелочек можно поставить пункты меню в нужном порядке (отмечено серым маркером).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вывод пункта “Главная” в меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем правки. Отключаем режим редактирования, проверяем результат. В итоге все работает, меню подключилось. Но стили по-прежнему не работают. В чем была загвоздка (ошибка) будем разбираться в следующей статье.

Промежуточные итоги

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

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5

Как разбить шаблон на компоненты редактируемой области? В чем основная задача и ценность этой функции Битрикс? Подробно и наглядно рассмотрим в статье. Ранее я уже останавливался на этой теме в одном из видео. Рекомендую посмотреть для большего понимания.

Компонент редактируемой области позволяет править любую часть страницы отдельно: телефон, «наши партнеры», логотип и т.д. Не нужно обращаться к админке.

Где взять код для подключения компонента редактируемой области?

Заходим на страничку new-page.php, которую мы создавали ранее, нажимаем «изменить страницу». Разделяем страницу на 2 части (текстовую и кодовую). Выбираем в меню справа «включаемые области», «вставка включаемой области» – кликнуть дважды мышкой, чтобы появилось окно.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Вставка включаемой области

Остановимся на параметрах компонента.

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

«Путь к файлу области» – обычно называют папку include, начнем с логотипа logo.php. Сохранить. Появится код.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Параметры компонента

Важно! Технически в окне редактирования страницы также можно вносить изменения. Но есть вероятность сохранить код поверх другого или стереть дивы. Более безопасный способ работать в папке. В Битриксе редактор нужен только для получения кода определенного компонента. Выходим всегда без сохранения.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Код редактируемой облати

 Копируем и выходим БЕЗ СОХРАНЕНИЯ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение элемента
<?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/logo.php"
    )
);?>

В папке header.php при помощи скопированной области включаем компонент логотипа. Фрагмент, отвечавший за вывод лого, закомментируем (отключим) – обозначено серым кругом и зеленым маркером. После обновления на главной не будет отображаться логотип, так как logo.php еще предстоит создать.

Как в Битрикс распределить элементы страницы по папкам?

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание каталога
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание include

Следующий шаг – создание соответствующей документации. В папке httpdocs создаем папку include, в которой создаем файл logo.php.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Документация Битрикс
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание документов для элементов

В logo.php вставляем из папки header.php закомментированный ранее компонент. На слайде выше обозначен зеленым маркером или воспользуйтесь подсказкой ниже. Из хедера код можно удалить.

<a href="index.html" class="header-logo header-logo_white d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/head-logo.svg" alt="мс-тех">
            </a>
            <a href="index.html" class="header-logo header-logo_dark d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/logo.svg" alt="мс-тех">
            </a>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение логотипа
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование логотипа

Сохраним, появится логотип и возможность его править

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор элемента логотипа

Важно! Редактируемая область будет видна только в режиме правки. Компонент появится после создания документации.

В окне редактора пользователь может видоизменять компонент. В Битриксе предусмотрен набор опций в визуальном редакторе – можно залить другое изображение, менять размер и местоположения. Но в идеале, конечно, использовать код.

Как определить какой фрагмент кода отвечает за компонент?

Вопрос рассмотрим на примере телефонного номера. Очень важна внимательность в работе, чтобы не удалить лишнюю строчку.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Определение кода области

Чтобы найти нужную область кода, кликаем на телефонный номер в выпадающем меню выбираем «проверить объект».

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Проверить объект

Появится код страницы и, наводя курсор мышки на соответствующую строку, под номером телефона появится отметка.

Далее повторяем тот же алгоритм, как описано выше при работе с логотипом. Для включения редактируемой области в каталоге header.php можно не повторять действия с компонентами. Просто копируем код, которым мы включили логотип и дублируем ниже. Обязательно меняем название документа, к которому будет обращаться программа.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона на редактируемые элементы

Мы уже определили код номера телефона – копируем фрагмент (строка 88-107).

В дальнейшем он будет удален из header.php. Будьте крайне внимательны при удалении в Битрикс. Ниже подсказка для копирования и самоконтроля.

<a href="tel:+74996854947" class="header-phone d-block">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 578.106 578.106" style="enable-background:new 0 0 578.106 578.106;" xml:space="preserve">
                    <g>
                        <path d="M577.83,456.128c1.225,9.385-1.635,17.545-8.568,24.48l-81.396,80.781
                            c-3.672,4.08-8.465,7.551-14.381,10.404c-5.916,2.857-11.729,4.693-17.439,5.508c-0.408,0-1.635,0.105-3.676,0.309
                            c-2.037,0.203-4.689,0.307-7.953,0.307c-7.754,0-20.301-1.326-37.641-3.979s-38.555-9.182-63.645-19.584
                            c-25.096-10.404-53.553-26.012-85.376-46.818c-31.823-20.805-65.688-49.367-101.592-85.68
                            c-28.56-28.152-52.224-55.08-70.992-80.783c-18.768-25.705-33.864-49.471-45.288-71.299
                            c-11.425-21.828-19.993-41.616-25.705-59.364S4.59,177.362,2.55,164.51s-2.856-22.95-2.448-30.294
                            c0.408-7.344,0.612-11.424,0.612-12.24c0.816-5.712,2.652-11.526,5.508-17.442s6.324-10.71,10.404-14.382L98.022,8.756
                            c5.712-5.712,12.24-8.568,19.584-8.568c5.304,0,9.996,1.53,14.076,4.59s7.548,6.834,10.404,11.322l65.484,124.236
                            c3.672,6.528,4.692,13.668,3.06,21.42c-1.632,7.752-5.1,14.28-10.404,19.584l-29.988,29.988c-0.816,0.816-1.53,2.142-2.142,3.978
                            s-0.918,3.366-0.918,4.59c1.632,8.568,5.304,18.36,11.016,29.376c4.896,9.792,12.444,21.726,22.644,35.802
                            s24.684,30.293,43.452,48.653c18.36,18.77,34.68,33.354,48.96,43.76c14.277,10.4,26.215,18.053,35.803,22.949
                            c9.588,4.896,16.932,7.854,22.031,8.871l7.648,1.531c0.816,0,2.145-0.307,3.979-0.918c1.836-0.613,3.162-1.326,3.979-2.143
                            l34.883-35.496c7.348-6.527,15.912-9.791,25.705-9.791c6.938,0,12.443,1.223,16.523,3.672h0.611l118.115,69.768
                            C571.098,441.238,576.197,447.968,577.83,456.128z"/>
                    </g>
                </svg>
                <span>+7 (499) 685-49-47</span>
            </a>
     
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона по документам Битрикс

В папке include создаем файл number.php и переносим код компонента из хедера.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование шаблона

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор кода

Для закрепления материала включим меню. Что понадобится нам в будущих уроках

Закрепление материала. Итоги

Компонент редактируемой области подключается через соответствующий файл элемента шаблона страницы. В данном случае это хедер. Мы переносим фрагмент кода, который в будущем собираемся редактировать в отдельную папку.

Такая система Битрикс позволяет видоизменять компоненты без риска испортить весь шаблона.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка страницы на отдельные папки

Копируем код меню из хедера (строка. 33—61) и переносим в созданный документ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание элемента меню

Или воспользуйтесь подсказкой.

   
    <?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/menu.php"
    )
);?>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение меню

Подключаем компонент. Указываем правильный путь.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Хедер: редактируемые элементы

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование включаемой области меню

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

Помним, что редактируемые элементы в Битрикс видны только в режиме правки.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Режим правки Битрикс

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

Надеюсь, материал статьи будет полезен. Буду очень благодарен за комментарии и вопросы.

Продвижение сайтов в Яндекс и Гугл | Есть ли гарантии в SEO-продвижении? | Дорогой контекст

Гарантии в СЕО. Есть ли они? Стоит ли верить тем, кто обещает 100%-результат? Как проверить качество работы оптимизатора? Все ответы в сегодняшней статье.

Важно четко понять, что есть СЕО-продвижение. SEO – это инвестиции в будущее. А «вложил и быстро заработал» больше по части контекстной рекламы. Достаточно настроить рекламу, заплатить деньги и получать звонки. Единственный большой минус контекстной рекламы – безумно высокая стоимость.

Что лучше SEO или контекстная реклама?

В одном из моих видео подробно рассматривается вопрос Что выбрать: контекстную рекламу или сео-продвижение? Я всегда был сторонником контекстной рекламы, с нее стоит начинать. Быстрый старт, первые звонки за короткое время. А СЕО уже второй этап.

Стремительно растущая цена за последние годы заставила разочароваться в контекстной рекламе. Более эффективная стратегия с учетом нынешних реалий – СЕО-продвижение первые полгода. Нельзя назвать контекст бесполезным, но отдача существенно ниже, чем в былые времена.

Почему СЕО – это лучшая инвестиция в будущее сайта?

SEO – это комплекс мер, которые позволяют сайту, расти: становиться удобным, полезным для посетителей, а значит интересным для поисковиков и рекламодателей. В результате чего сайт входит в топ-10 или находится на первых страницах в поисковой выдаче по популярным запросам.

Значение имеет все: контент; дизайн; ссылки (количество цитирований другими Интернет-ресурсами); качественный трафик и ключевые слова, время, проведенное посетителями на сайте, и действия, совершенные ими; соцсети и так далее. Каждый пункт заслуживает отдельного внимания. И в будущем я расскажу подробно о принципах работы и степени влияния перечисленных факторов.

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

Универсальные правила СЕО. Существует ли рецепт успеха?

Работа над оптимизацией проекта в идеале не прекращается. Если результат ниже ожидаемого – это тоже результат. Важно анализировать достижения, вносить коррективы в стратегию развития.

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

Через полгода я сделал еще один классный сайт по загородному строительству для другого клиента. Имея успешный опыт, я был уверен в результате. Та же стратегия, те же действия и те же деньги вкладывались в развитие. Определенное продвижение наблюдалось, но нужные запросы стояли на месте. Что я сделал не так…?

Суть в том, что СЕО не точная наука, а гости сайта не действуют по одному алгоритму, поэтому действительно крутые сеошники не гарантируют быстрый старт, мгновенную популярность и прибыль.

Вышесказанное еще раз подтверждает случай на семинаре по СЕО-оптимизации. У меня была возможность беседовать с человеком, чьему мнению стоит верить. На вопрос: «что нужно поисковику, чтобы сайт взлетел?». Последовал неожиданный ответ, что даже сотрудники Яндекса этого не знают. За всю историю Яндекса, более 20 лет, над обновлениями поисковой программы трудилось не одно поколение разработчиков, алгоритмы не раз менялись и переписывались, поэтому определенного рецепта успеха нет. А если бы он существовал, то компании Яндекс или Гугл сделают все возможное, чтобы информация не попала в посторонние руки.

Самые большие мифы

Продвинем сайт за 2-10 месяцев в топ!!!

Невозможно выбиться в топ за такое короткое время «честным путем». Получится достигнуть желаемого за короткое время, прибегнув к «черному СЕО». Когда на сайт покупаются дешевые ссылки, накручиваются посетители и еще ряд обманных маневров. Такие приемы работают и дают определенную отдачу, но не долго. Это путь в никуда. Домены, IP светятся на нежелательных ресурсах, сайт приобретает негативную репутацию. В любой момент может попасть под фильтр поисковика. А купленные посетители не делают покупки.

Вернем деньги, если не будет результата!!!

В СЕО не возвращают деньги. Во всяком случае, среди моих клиентов, знакомых за всю историю моей работы еще никто не вернул деньги за отсутствие обещанного результата в полном объеме. Возможны варианты компенсации в виде % от затрат, но это редкое исключение из правил.

Гарантируем звонки и покупателей!!!

Любой, уважающий себя, оптимизатор не станет называть точные цифры. Контекстная реклама, СЕО или SMR – это своего рода творчество. Никто не может предугадать, как зайдет определенная фишка. Это все равно что просить гарантировать повышение продаж у Первого канала или Авито после размещения самой дорогой рекламы. Следует понимать, что их первоочередная задача, чтобы Вас было видно как можно большей целевой аудитории. А реклама со 100% результатом – это совсем другие деньги. Так как и задача оптимизатора: показать сайт действительно заинтересованным пользователям.

Как контролировать работу СЕО-оптимизатора, будучи полным «чайником»?

Исходя из вышесказанного, СЕО-специалист не может гарантировать результат. Неужели придется работать на доверии? Как платить деньги сегодня, если прибыль последует даже не завтра?

Да, обещать результат сразу нельзя. Но гарантировать проведение всех необходимых работ может каждый.

  • Требуйте план работ и ежемесячный отчет о проделанной работе. Попросите прокомментировать отчеты и первые результаты. Совестный исполнитель не откажет в такой просьбе.
  • Никогда не стоит говорить, что ни в чем не разбираетесь и целиком полагаетесь на опыт специалиста.
  • Хотя бы поверхностно вникните во все вопросы. Видео в Интернете и блоги Вам в помощь. Сайт станет неотъемлемой частью вашего бизнеса, а значит разобраться стоит.

Надеюсь, статья была полезной и познавательной.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Продолжаем работать и изучать CMS Битрикс. В этом уроке мы будем интегрировать наш шаблон, натягивать готовую верстку на Битрикс.

На прошлом уроке мы создали папку с темой. Подключили футер и хедер. А контент, папка index.php (главный файл), остался без изменений. Напомню, что футер и хедер подключаются идентично, из активной темы.

Продолжим. Переносим шаблон в корень сайта.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 1: Разбивка макета на элементы

Заходим в макет и открываем следующие папки.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Из файла index.html следует скопировать код полностью и перенести в index.php вместо «контент» (5строка). В дальнейшей работе index.html не понадобится – закрываем.

Подготовим футер и хедер. Из файла header.php удаляется 5 строка – «Хедер!»; из fоoter.php – 4 строка, «Футер». После обновления шаблон выглядит как на слайде.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Так как ничего не подключено (стили, скрипты), страница получила такое оформление.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Рассмотрим шаблон более детально. Откроем исходный код: левой кнопкой мышки – выпадающее меню «исследовать объект». Выводится код шаблона из трех элементов: футер, хедер и контент.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Первоочередная задача – разбить макет правильно и разнести соответствующие фрагменты кода шаблона по нужным файлам. Код можно копировать через вкладку «исследовать объект» или работать в index.php, куда ранее был скопирован код шаблона.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

 Обращаю внимание, что хедер часто содержит картинки и видео. Следует убедиться, что элемент скопирован полностью. В данном шаблоне копируем код с 7 до 90 строчки включительно. Переносим информацию в файл header.php, из файла index.php удаляем.

Аналогично переносим код в файл fоoter.php – копируем с 68 по 96 строку включительно. Из index.php вырезаем ненужный фрагмент. Сохраняем все изменения. На странице видимых изменений не произойдет, а значит все подключено правильно.

Футер и хедер закрываем. Эти элементы едины для всех страниц – будут выглядеть одинаково на каждой странице.

Шаг 2: Выводим Title

На начальном этапе title выводится из шаблона, а должен – из CMS.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Редактируем код, начиная с 13 строке. Открываем php без эхо, так как объект APPLICATION в любом случае будет выводиться.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Вызываем ShowTitle у объекта APPLICATION – и проверяем результат.

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

Шаг 3: Подключаем стили

Редактируем код с 14 строчки по 18-ю до строчки 19 – «/head».

Открываем php код, прописываем addCss. Чтобы не писать постоянство имен для каждого стиля, импортируем путь при помощи метода use. То есть параметру переданному методу прописываем путь к скрипту. Также прописывается константа SITE_TEMPLATE_PATH, которая возвращает путь к активному шаблону, чтобы Битрикс понимал, что и где лежит. И добавляем путь к стилю. В данном случае используется 4 стиля – копируем код и прописываем соответствующий путь. Не забываем поставить итоговый слеш. Код, обозначенный синим маркером, после редактирования следует удалить.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Ниже готовая подсказка. Замените содержимое строк 14-18 готовым кодом ниже.

<?php 
       use \Bitrix\Main\Page\Asset;
    ?>
    
    <title><?php $APPLICATION->ShowTitle(); ?></title>
    
    <?php 
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/normalize.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/owl.carousel.min.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/main.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/responsive.css");
    ?>

Также следует перенести содержимое темы (видео, картинки и т.д) в папку teh.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 4: Адаптируем под мобильные устройства

Выводим meta name=veiwport – метатег, позволяющий контролировать видимую область сайт для мобильных браузеров. Простым языком: позволяют приспособить сайт для удобного просмотра при помощи мобильного телефона и других гаджетов с разным разрешением экрана.

10-12 строки удаляются. Отредактированный код вставляем после шрифтов. Также используем метод Asset но вместо addCss пописываем addString – выводит произвольный код, произвольную строчку, скрипты. Копируем код макета. Вторая строка для Интернет-Экспл.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<?php 
        Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">');
        Asset::getInstance()->addString('<meta http-equiv="X-UA-Compatible" content="ie=edge">');
?>
 

Таким же способом подключаются шрифты Google Fonts. В скобках ставится Google Fonts и прописывается ссылка. Напоминаю, что двойные кавычки главнее одинарных.

Команда APPLICATIOH – Show – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
    <?php 
       use \Bitrix\Main\Page\Asset;
       $APPLICATION->ShowHead();
    ?>   

Шаг 5: Подключаем скрипты

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

Обязательно команда APPLICATIOH – Show (зеленый маркер), так как в данном случае скрипты находятся в футере и хедере, хотя обычно подключаются из футера.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Чтобы получить прокрутку, можно добавить больше картинок в файл index.php.

Шаг 6: Как вывести изображение и подключить логотип

Появился макет, но без картинок и видео. Есть бетафоны, подключились скрипты выпадающего меню. Чтобы вывести картинки, копируем константу и прописываем в каждом изображении после главных кавычек. Не забываем о слеш.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<?=SITE_TEMPLATE_PATH;?>/

Также выводим изображения в футере и логотип.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 7: Как отобразить видео

Видео находится в хедере – 92 строка. Путь прописан настолько нестандартно, что даже у опытных пользователей могут возникнуть серьезные затруднения. Константа вставляется после двоеточия.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 8: Подключенте рабочей панели Битрикс

Конечно, можно войти в админку Битрикс, но пропишем в коде. За подключение панели отвечает метод APPLICATIOH – Show Panel. Вставим код после «body»-32 строка.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<div id="#panel"><?php $APPLICATION->ShowPanel();?></div>

После обновления появится окно для входа администратора. Переходим по вкладке «Сайт» – рабочая панель появилась.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Еще раз о необычных методах Битрикс. На первый взгляд исходный способ подключения стилей, шрифтов и скриптов намного проще и понятнее. Но Битрикс «просит» специальный код и все объединяет в один документ. Как указано в документации, такой способ позволяет загружать сайт намного быстрее.

Чтобы окончательно разобраться в принципе работы Битрикс, рассмотрим код страницы через google. Копируем адрес сайта, заходим через Гугл, в выпадающем меню левой кнопки мышки выбираем «просмотреть код страницы».

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Для правок такая оптимизация достаточно неудобная. На рабочей панели во вкладке «Настройки» – «настройка модулей» есть возможность отключить объединение элементов в один документ.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

На момент разработки можно оставить разделение. Так как  править и искать стили достаточно проблематично. После изменения настроек мы увидим все стили отдельно.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 9: Отключаем кеширование

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Шаг 10: Как создавать страницы и разделы

На админпанели Битрикс перейти на вкладку «Сайт» – «Создать страницу», в выпадающем меню выбираем соответствующий пункт. В появившемся окне вводится имя страницы. Зеленым обозначено имя файла этой страницы в корне сайта через Файлзилла.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Нажимаем «Далее», в следующем окне ничего не заполняем и кликаем «Готово». Откроется окно редактирования страницы.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

По идентичному алгоритму создается новый раздел. В описание раздела ничего не меняем, остается стандартный текс. В зеленой рамке имя папки в Битрикс (прописывается автоматически).

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Соответствующий файл и папку теперь можно найти в корне сайта через FileZilla.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Смотрим код страницы.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Данный урок можно по праву считать одним из самых сложных и важных этапов создания сайта, а также Вашего обучения. Мы натянули верстку на Битрикс и разобрались с основными командами. В дальнейшем будем дорабатывать шаблон, добавлять новости и разделы, впереди еще больше полезных уроков и ценной информации. Пишите в комментариях вопросы, пожелания, а так же о своих трудностях. Будем разбираться вместе. Спасибо.