В сегодняшней статье мы продолжаем изучение CMS Bitrix. Более подробно остановимся на создании и настройках инфоблоков.
Что такое инфоблоки?
Инфоблок – единица контента: слайд, раздел, статьи, товары, новости. Своего рода пазлы, из которых состоит смысловая, информационная нагрузка сайта.
Инфоблоки – структурная единица Битрикс
С помощью инфоблоков легко стандартизировать оформление разделов сайта. Такая архитектура достаточно практичная, так как можно эффективно управлять информационными блоками сайта (редактировать, перемещать, добавлять).
Создание новых инфоблоков в Битрикс
Заходим через админку в раздел инфоблоков. Для начала удалим существующие, чтобы очистить пространство для работы.
Как удалить инфоблок
Опускаемся ниже. Выбираем галочками все пункты, удаляем.
Очистить список инфоблоков
После обновим страницу. Список инфоблоков (слева/ на предыдущем слайде выделен зеленым маркером) будет пуст.
Начнем создавать новые. Возвращаемся в раздел «Контент», «инфоблоки», «Типы инфоблоков». Создадим инфоблок content. Вводим название и жмем «добавить новый тип».
Создание нового типа инфоблоков
Заполняем указанные поля. Ставим галочку «Использовать древовидный классификатор элементов по разделам:». Галочка нужна в случае если предусмотрено несколько подуровней: раздел, подраздел и т.д. В оранжевой рамке показано раздел «Проекты», который в процессе обучения будет выводиться в инфоблоках. Во вкладке «Дополнительно» изменения не вносим. Сохраняем.
Настройки для вкладки “Дополнительно”
После обновления в списке появится созданный нами тип «Контент».
Где отображается тип инфоблоков
Во вкладке «Инфоблок» прописываем название блока и транслит. Также в соответствии с примером ставим галочки. Во вкладке SEO никаких действий не совершаем.
Создание и настройка инфоблока
Во вкладке «Поля» устанавливаем начало активности. Настройка означает, что новость должна выводиться, показываться сразу после публикации на сайте.
Настройки для вкладки “Поле”
Детальная картинка – изображение на странице статьи. Задаем размер для всех статей блока. Сделаем по примеру страницы «Проекты». Чтобы определить размер изображения, кликаем левой кнопкой мышки на картинке в выпадающем списке выбираем «проверить объект». Помним, в коде ниже ищем строку, отвечающую за элемент. При наведении возле картинки появится обозначение с информацией. Переносим размеры в настройки.
Как проверить параметры картинки
Также проставляем галочки в соответствии с примером ниже. При необходимости можно размещать авторский знак в виде картинки или теста (настройки обозначены зеленым маркером).
Настройки изображения для инфоблока
Картинка анонса – миниатюра изображения в ленте новостей с кратким описанием инфоблока. Можем подбирать отдельно или указываем «создавать из детальной картинки». Прописываем тот же размер. Другие настройки по примеру ниже.
Основное изображение и миниатюра, настройкиДругие параметры вкладки “Поле”
На вкладке «Свойства» – есть возможность указать дополнительную информацию о статье: автор, количество комментарием или просмотров, дата публикации и т.д. Мы зададим одно свойство – автор.
Как вывести дополнительные информационные поля в новости
Указываем название. Тип оставляем «Строка», хотя в выпадающем меню есть много вариантов. Обязательно указываем код в верхнем регистре. Почему именно в верхнем расскажу позже.
Настройки для вкладки «Поля разделов».
Настройки для вкладки “Поля разделов”
Настройки для вкладки «Доступы».
Действия во вкладке “Доступ”
Заполняем поля вкладки «Подписи» по примеру выше.
Настройки вкладки “Подписи”
«Журнал событий» не заполняем и жмем «Сохранить».
Настройки вкладки “Журнал событий”
В списке слева появился новый инфоблок.
Где отображается инфоблок в Битрикс
Переходим в Блог и создадим новую категорию. На слайде выше видна возможность добавлять, статьи и категории – кнопки «добавить категорию»; «добавить статью» (обозначено зеленым маркером). Напомним, что при создании типа инфоблока отмечено галочкой «использовать древовидный классификатор элементов по разделам» (в рамке). Благодаря чему и появляются кнопки «добавить категорию» и «добавить статью».
Как добавить статью или категорию
Создание подкатегорий раздела инфоблока
Кликнуть на кнопку «Добавить категорию». Во вкладке «категория» прописываем название «Категория 1». Названию особого внимания не уделяем, так как цель урока научиться создавать категории и подкатегории. Символьный код прописывается автоматически. Что мы также указывали в настройках при создании типа инфоблока. Сохраняем.
Создание подкатегории
Аналогично создаем еще три категории, которые после отображаются в списке. Теперь можем зайти в категорию (двойным щелчком мыши) и наполнять раздел новостями.
Создание ряда подкатегорий
Как добавить контент в новую категорию?
Наполнение разделов контентом
Во вкладке «Статья» заполняем поле «Название». Для наглядного примера используем страницу «Проекты» (в оранжевой рамке слева). Можно использовать для обучения любую новость из Интернета или размещать свою.
Символьный код прописывается автоматически, согласно заданным настройкам типа инфоблока. Начало активности (1) – стоит текущая дата, также задано при создании типа. Без этой галочки нужно постоянно прописывать вручную дату, когда статья будет показываться.
Автор (2) – помним, что, подобно этому полю, мы можем создать и другие дополнительные информационные ячейки в новости (количество просмотров, дата написания, лайки и т. д.). Как настроить, еще раз показано в оранжевой рамке справа.
Как добавить статью
«Анонс». Привью копируем с примера. Изображение не загружаем. Помним, что прописали брать картинку на обложку со страницы новости.
Как вывести анонс и миниатюру картинки
«Подробно». Заливаем подробную картинку. Изображение внутри статьи, из которого Битрикс формирует обложку блока для анонса согласно заданным параметрам.
Сохраняем изображение примера (Проекты). Кликнуть мышкой на поле для фото, выбрать из выпадающего списка нужный файл. Загружаем.
Действия во вкладке “Подробно”
«SEO» оставим без изменений. Во вкладке «Категории» указываем, к какому подпункту относится новость, где она будет показываться. Сохраняем.
Выбор категории, где будет размещена статья
Теперь статья видна в списке соответствующего раздела. Создадим еще несколько новостей. Картинки и контент берем с той же страницы. Чтобы не создавать новые статьи, можно скопировать существующую. Кликнув на бургер, из выпадающего списка выбираем нужное действие. Меняем картинку, название и содержание. Сохраняем.
Как скопировать статью
Зеленым маркером выделены созданные статьи в категории 1. При необходимости можно выбрать несколько разделов, к которым будет относиться новость. Настройка в оранжевой рамке.
Как разместить статью сразу в нескольких категориях
Подытожим. Мы создали Блог (тип инфоблока), его категории (подпункты разделы) и статьи. Оформили категории, новости (картинки, дополнительная информация). Оформили раздел Блог, чтобы сам выводился. В дальнейшем мы продолжим изучать инфоблоки. Спасибо.
Изучим непростой компонент меню. В ходе статьи создадим компоненты, и интегрируем в наш шаблон.
Создание меню
создание меню
Через админку переходим в раздел «Настройки» в меню слева:
«Настройка модулей»;
«Управление структурой».
создание меню через админку
В строке «тип меню» в данном случае только «main_menu». Так как создаем только главное меню. Также может быть и «left_menu» или «wright_menu» – в зависимости от проекта сайта.
настройки структуры
Ниже в строке указываем: левое меню, нижнее или правое. На данный момент создаем главное, и вторую строчку оставляем пустой. «Сохранить». Переходим в раздел «Сайт».
Следующий шаг – «Создать раздел». Важно создать именно раздел, а не страницу. Так будет возможность создавать подпапки для файлов подпунктов меню.
Обратите внимание! Все разделы создаются на главной странице.
создание нового раздела
В окне указываем название раздела и соответствующий документ.
Далее «Имя нового» и в строке «Тип меню» оставляем «Главное». Если предусмотрено создание нескольких меню (левое, правое, нижнее и т.д.), в выпадающем списке указываем к которому меню будет относиться создаваемый пункт.
создание нового раздела – шаг 2
Далее в свойствах раздела прописываем название каталога и сохраняем.
создание нового раздела – шаг 3
В окне редактирования пока прописываем текст-образец и сохраняем.
редактирование страницы
После видим текст на странице. И в корне появится файл about.
документация Битрикс
Ниже на слайде показано, как выглядят разделы в файле menu.php. Зеленым маркером обозначены документы, которые указываем при создании нового раздела. Удобно скопировать название и затем использовать.
компонент меню
Следующим создаем компонент «Услуги». Обязательно переходим на главную страницу, иначе раздел будет создан в папке about, а не в корне. Можно прямо в адресной строке удалить часть пути, ведущего в ново созданный раздел, и нажать enter.
вернуться на главную
Алгоритм действий, как и при создании предыдущих компонентов. Главное правильно указать название документа, к которому будет обращаться Битрикс.
Шаг 1
создание ного раздела – услуги
Шаг 2
раздел “услуги” – дейстие 2
Шаг 3
свойства раздела – действие 3
Шаг 4
раздел “услуги” – редактирование страницы
Шаг 5
создаем новые разделы на главной
После сохранения помним об обязательном переходе на главную страницу.
Таким же способом создаем еще два пункта: проекты и контакты. Можете выполнить задачу опираясь на предыдущие слайды или видео, где описано пошагово создание всех компонентов меню.
документация Bitrix
В итоге в корне сайта Битрикс создаст каталог для каждого нового пункта меню.
Создание компонента «Меню»
Важно! Компонент создается только на посторонней странице. Так минимизируется риск испортить весь шаблон или затерять стили, созданные на рабочих страницах, в случае ошибок.
пробная страница
Совершать все дальнейшие действия можно и здесь. Но и специалисты могут случайно сохранить нежелательные изменения. Для работы используем, ранее созданную, страницу new-page.
В параметрах компонента выставляем только параметры меню для первого уровня. Сохранить.
параметры компонента “Меню”
Удаляем «br» и копируем код. Выходим без сохранения. Помним: компонент используем только для получения кода, а работаем с заготовленным шаблоном. Ошибки можно ликвидировать и стартовать с исходного кода неограниченное количество раз.
где взять код компонента
Вставляем в документ menu.php вначале. Содержимое этого файла закомментируем.
включить компонент “Меню”
Сохраняем изменения и переходим на главную страницу. Результат получим следующий.
править компонент “Меню”
Меню выводится, пункты работают. Хотя выглядит пока незавершенным. Конечно, меню имеет свои стили, находятся в папке bitrix.
Путь к стилям:
сomponents;
bitrix;
menu;
template.php.
Делаем небольшую проверку, чтобы убедиться, тот ли файл нужен для работы. После, число «11» удалим.
простая проверка Битрикс 24
Повторим, что к папке bitrix в ходе работы лучше не обращаться. Здесь содержаться все стили, важные настройки, как своего рода диск С на компьютере.
Как поправить меню, если в папку bitrix не рекомендуется заходить? С помощью редактирования компонента. Обязательно переходим в режим правки. Появится возможность править компонент. Но на данный момент нужна не эта функция. Наводим на область редактируемого компонента. На панели, рядом с кнопкой редактирования, находится выпадающий список. Копируем шаблон с Битрикс.
копировать шаблон bitrix-1c
Да, можно скачать и залить, записать самостоятельно. Но в Битрикс предусмотрен более простой способ.
как перенести шаблон в 1с-битрикс
Файл называем main_menu. Остальные настройки показаны на слайде выше.
код вызова компонента
В menu.php появился вызов нашего меню. Также появилась дополнительная папка components в каталоге шаблона teh. Документ был создан Битрикс автоматически.
копировать стили битрикс 1с
Путь к документации выделен зеленым маркером. Содержимое папок в красной рамке. Таким образом, были скопированы стили Битрикс без риска испортить исходные параметры случайными ошибками.
Переходим в папку template2, начнем использовать готовые решения Битрикс. До 13й строчки включительно – прописано оформление (оставим без изменений). Далее код, который будет преобразовываться в ходе обучения. Для удобства отступим.
Дальнейшие действия противоречат инструкции bitrix, но это не критично. Фрагменты кода будем переносить с отключенного участка ниже.
готовые решения – как использовать
Третье действие необходимо для максимальной вложенности. Если есть один, и при этом вложено больше, чем один. Допускается пропустить эту деталь, но лучше записать.
Код на промежуточном этапе имеет такой вид. Если мы выводим с активным пунктом меню, то выводится с классом header-nav_intem (1, серый маркер), в противном случае выводим без каких-либо классов (2, серый маркер).
редактировать код
Удалим лишние пункты (зеленая рамка, строки 25-37, действие 1). Вставляем текст ссылки – действие 2.
Так должен выглядеть готовый документ. Закомментированный ранее фрагмент больше не нужен – удаляем. Ниже готовый код для копирования, проверки ошибок.
После сохранения изменений, к сожалению, ожидания периодически не оправдываются. От ошибок не застрахован как новичок, так и профи.
ошибки в коде
Битрикс позволяет выводить расширенную информацию об ошибках. На слайде ниже показано, как включить функцию.
В папке settings.php в корне битрикс находим строку debag. Меняем false на true, и сохраняем. Путь к файлу отмечен зеленым маркером. Действия в папке показаны в черной рамке, отмечены оранжевым маркером.
поиск ошибок битрикс 24
Показаны все ошибки. Указано, что проблема в 23 строке. Действительно, вместо «:» был другой знак «;».
расширенный вывод ошибок в bitrix24
Исправим, сохраним и смотрим результат.
режим редактирования страницы
Все работает. Единственный минус – не вывелись стили, над чем мы еще поработаем. Осталось вывести «Главную».
Действуем через админпанель и компонент меню, кнопка «редактировать пункт меню».
вставить пункт
В окне выбираем «вставить пункт». Прописываем название нового раздела.
ссылка при создании нового пункта меню
В строке «Ссылка» ставим слеш, так как страница главная. При помощи стрелочек можно поставить пункты меню в нужном порядке (отмечено серым маркером).
вывод пункта “Главная” в меню
Сохраняем правки. Отключаем режим редактирования, проверяем результат. В итоге все работает, меню подключилось. Но стили по-прежнему не работают. В чем была загвоздка (ошибка) будем разбираться в следующей статье.
Промежуточные итоги
По результатам шести уроков были выведены два компонента: редактируемая области и меню. При хороших знаниях документации Битрикс можно вызывать любые компоненты вручную. Соответственно документация содержит все параметры компонентов. Но это внушительный объем информации, к тому же малопонятный, особенно для новичков. В определенный случаях есть смысл обратиться за помощью на форум.
Но намного проще создавать страницы и вызвать компоненты, чаще всего так и поступают. Также есть готовые решения. Мы уже научились копировать из компонента, чтобы поставить функционал, сделать свое оформление, разделы. Рассмотрели возможность расширенного просмотра ошибок. На этом хочу закончить статью. Благодарю читателей за внимание, буду раз вопросам и комментариям.
Как разбить шаблон на компоненты редактируемой области? В чем основная задача и ценность этой функции Битрикс? Подробно и наглядно рассмотрим в статье. Ранее я уже останавливался на этой теме в одном из видео. Рекомендую посмотреть для большего понимания.
Компонент редактируемой области позволяет править любую часть страницы отдельно: телефон, «наши партнеры»,
логотип и т.д. Не нужно обращаться к админке.
Где взять код для подключения
компонента редактируемой области?
Заходим на страничку new-page.php, которую мы создавали ранее, нажимаем «изменить страницу». Разделяем страницу на 2 части (текстовую и кодовую). Выбираем в меню справа «включаемые области», «вставка включаемой области» – кликнуть дважды мышкой, чтобы появилось окно.
Вставка включаемой области
Остановимся на параметрах компонента.
«Показывать включаемую область:» выбираем «из файла». Так
как править будем из файла. Разобьем на блоки по отдельным файлам, где будут
совершаться все изменения. Для удобства пользователей предусмотрены подсказки
(значок «і»). Хотя на практике, документация как Битрикса, так и админки,
далеки от совершенства. В выпадающем меню есть «из раздела», «для страницы» –
об этом можно почитать в информационном окне.
«Путь к файлу области» – обычно называют папку include,
начнем с логотипа logo.php. Сохранить. Появится код.
Параметры компонента
Важно! Технически в
окне редактирования страницы также можно вносить изменения. Но есть вероятность
сохранить код поверх другого или стереть дивы. Более безопасный способ работать
в папке. В Битриксе редактор нужен только для
получения кода определенного компонента. Выходим всегда без сохранения.
В папке header.php
при помощи скопированной области включаем компонент логотипа. Фрагмент,
отвечавший за вывод лого, закомментируем (отключим) – обозначено серым кругом и
зеленым маркером. После обновления на главной не будет отображаться логотип,
так как logo.php еще предстоит создать.
Как в Битрикс распределить элементы страницы по
папкам?
Создание каталогаСоздание include
Следующий шаг – создание соответствующей документации. В
папке httpdocs создаем папку include, в которой создаем файл logo.php.
Документация БитриксСоздание документов для элементов
В logo.php вставляем
из папки header.php закомментированный ранее компонент.
На слайде выше обозначен зеленым маркером или воспользуйтесь подсказкой ниже. Из
хедера код можно удалить.
Сохраним, появится логотип и возможность его править
Визуальный редактор элемента логотипа
Важно! Редактируемая
область будет видна только в режиме правки. Компонент появится после создания
документации.
В окне редактора пользователь может видоизменять компонент. В
Битриксе предусмотрен набор опций в визуальном редакторе – можно залить другое
изображение, менять размер и местоположения. Но в идеале, конечно, использовать
код.
Как определить какой фрагмент кода
отвечает за компонент?
Вопрос рассмотрим на примере телефонного номера. Очень важна
внимательность в работе, чтобы не удалить лишнюю строчку.
Определение кода области
Чтобы найти нужную область кода, кликаем на телефонный номер
в выпадающем меню выбираем «проверить объект».
Проверить объект
Появится код страницы и, наводя
курсор мышки на соответствующую строку, под номером телефона появится отметка.
Далее повторяем тот же алгоритм, как описано выше при работе
с логотипом. Для включения редактируемой области в каталоге header.php можно не
повторять действия с компонентами. Просто копируем код, которым мы включили
логотип и дублируем ниже. Обязательно меняем название документа, к которому
будет обращаться программа.
Разбивка шаблона на редактируемые элементы
Мы уже определили код номера телефона – копируем фрагмент (строка 88-107).
В дальнейшем он будет удален из header.php. Будьте крайне внимательны при удалении в Битрикс. Ниже подсказка для копирования и самоконтроля.
В папке include создаем файл number.php и переносим код компонента
из хедера.
Редактирование шаблона
Обновим. В режиме правки, если навести курсор на контакт, появляется кнопка вызова
окна редактора компонента. Можно легко поменять номер либо добавить еще один.
Визуальный редактор кода
Для закрепления материала включим меню. Что понадобится нам
в будущих уроках
Закрепление материала. Итоги
Компонент редактируемой области подключается через
соответствующий файл элемента шаблона страницы. В данном случае это хедер. Мы переносим
фрагмент кода, который в будущем собираемся редактировать в отдельную папку.
Такая система Битрикс
позволяет видоизменять компоненты без риска испортить весь шаблона.
Разбивка страницы на отдельные папки
Копируем код меню из хедера (строка. 33—61) и переносим в
созданный документ.
Так будет выглядеть хедер после подключения всех компонентов.
Редактирование включаемой области меню
После сохранения меню также можно корректировать. Таким же
способом в Битрикс можно выделить любую область страницы, которая предположительно
будет часто меняться. Например, «наши партнеры», «адреса отделений» и т.д.
Помним, что редактируемые элементы в Битрикс видны только в
режиме правки.
Режим правки Битрикс
Хотелось бы обратить внимание читателей, что с активной
функцией редактирования страница имеет такой вид. При выключении режима правки все
станет на свои места.
Надеюсь, материал статьи будет полезен. Буду очень
благодарен за комментарии и вопросы.
Гарантии в СЕО. Есть ли они? Стоит ли верить тем, кто обещает 100%-результат? Как проверить качество работы оптимизатора? Все ответы в сегодняшней статье.
Важно четко понять, что есть СЕО-продвижение. SEO – это инвестиции в будущее. А «вложил и быстро заработал» больше по части контекстной рекламы. Достаточно настроить рекламу, заплатить деньги и получать звонки. Единственный большой минус контекстной рекламы – безумно высокая стоимость.
Что лучше SEO или контекстная реклама?
В одном из моих видео подробно рассматривается вопрос Что выбрать: контекстную рекламу или сео-продвижение? Я всегда был сторонником контекстной рекламы, с нее стоит начинать. Быстрый старт, первые звонки за короткое время. А СЕО уже второй этап.
Стремительно растущая цена за последние годы заставила
разочароваться в контекстной рекламе. Более эффективная стратегия с учетом нынешних
реалий – СЕО-продвижение первые полгода. Нельзя назвать контекст бесполезным,
но отдача существенно ниже, чем в былые времена.
Почему СЕО – это лучшая инвестиция в будущее сайта?
SEO
– это комплекс мер, которые позволяют сайту, расти: становиться удобным,
полезным для посетителей, а значит интересным для поисковиков и рекламодателей.
В результате чего сайт входит в топ-10 или находится на первых страницах в
поисковой выдаче по популярным запросам.
Значение имеет все: контент; дизайн; ссылки (количество
цитирований другими Интернет-ресурсами); качественный трафик и ключевые слова,
время, проведенное посетителями на сайте, и действия, совершенные ими; соцсети
и так далее. Каждый пункт заслуживает отдельного внимания. И в будущем я
расскажу подробно о принципах работы и степени влияния перечисленных факторов.
В «молодой» ресурс
некоторое время нужно вкладывать и еще раз вкладывать, до того как получить
первые дивиденды.
Универсальные правила СЕО. Существует ли рецепт успеха?
Работа над оптимизацией проекта в идеале не прекращается.
Если результат ниже ожидаемого – это тоже результат. Важно анализировать достижения,
вносить коррективы в стратегию развития.
Ярким примером служит мой собственный опыт. Я сделал
успешный сайт для компании, которая специализировалась на загородном
строительстве. Позитивная
динамика по самым популярным запросам,«строительство загородных домов»,
«строительство каркасных домов», «строительство бань» и так далее, наметилась достаточно быстро.
Я был безумно доволен проектом.
Через полгода я сделал еще один классный сайт по загородному
строительству для другого клиента. Имея успешный опыт, я был уверен в
результате. Та же стратегия, те же действия и те же деньги вкладывались в
развитие. Определенное продвижение наблюдалось, но нужные запросы стояли на
месте. Что я сделал не так…?
Суть в том, что СЕО не точная наука, а гости сайта не
действуют по одному алгоритму, поэтому действительно крутые сеошники не
гарантируют быстрый старт, мгновенную популярность и прибыль.
Вышесказанное еще раз подтверждает случай на семинаре по
СЕО-оптимизации. У меня была возможность беседовать с человеком, чьему мнению
стоит верить. На вопрос: «что нужно поисковику, чтобы сайт взлетел?».
Последовал неожиданный ответ, что даже сотрудники Яндекса этого не знают. За
всю историю Яндекса, более 20 лет, над обновлениями поисковой программы
трудилось не одно поколение разработчиков, алгоритмы не раз менялись и
переписывались, поэтому определенного рецепта успеха нет. А если бы он
существовал, то компании Яндекс или Гугл сделают все возможное, чтобы
информация не попала в посторонние руки.
Самые большие мифы
Продвинем сайт за 2-10 месяцев в топ!!!
Невозможно выбиться
в топ за такое короткое время «честным путем». Получится достигнуть желаемого
за короткое время, прибегнув к «черному СЕО». Когда на сайт покупаются дешевые
ссылки, накручиваются посетители и еще ряд обманных маневров. Такие приемы
работают и дают определенную отдачу, но не долго. Это путь в никуда. Домены, IP
светятся на нежелательных ресурсах, сайт приобретает негативную репутацию. В
любой момент может попасть под фильтр поисковика. А купленные посетители не
делают покупки.
Вернем деньги, если не будет результата!!!
В СЕО не возвращают деньги. Во всяком случае, среди моих
клиентов, знакомых за всю историю моей работы еще никто не вернул деньги за
отсутствие обещанного результата в полном объеме. Возможны варианты компенсации
в виде % от затрат, но это редкое исключение из правил.
Гарантируем звонки и покупателей!!!
Любой, уважающий себя, оптимизатор не станет называть точные цифры. Контекстная реклама, СЕО или SMR – это своего рода творчество. Никто не может предугадать, как зайдет определенная фишка. Это все равно что просить гарантировать повышение продаж у Первого канала или Авито после размещения самой дорогой рекламы. Следует понимать, что их первоочередная задача, чтобы Вас было видно как можно большей целевой аудитории. А реклама со 100% результатом – это совсем другие деньги. Так как и задача оптимизатора: показать сайт действительно заинтересованным пользователям.
Как контролировать работу СЕО-оптимизатора, будучи полным «чайником»?
Исходя из вышесказанного, СЕО-специалист не может
гарантировать результат. Неужели придется работать на доверии? Как платить
деньги сегодня, если прибыль последует даже не завтра?
Да, обещать результат сразу нельзя. Но гарантировать
проведение всех необходимых работ может каждый.
Требуйте план работ и ежемесячный отчет о
проделанной работе. Попросите прокомментировать отчеты и первые результаты.
Совестный исполнитель не откажет в такой просьбе.
Никогда не стоит говорить, что ни в чем не
разбираетесь и целиком полагаетесь на опыт специалиста.
Хотя бы поверхностно вникните во все вопросы.
Видео в Интернете и блоги Вам в помощь. Сайт станет неотъемлемой частью вашего
бизнеса, а значит разобраться стоит.
Продолжаем работать и изучать CMS Битрикс. В этом уроке мы будем интегрировать наш шаблон, натягивать готовую верстку на Битрикс.
На прошлом уроке мы создали папку с темой. Подключили футер
и хедер. А контент, папка index.php (главный файл), остался
без изменений. Напомню, что футер и хедер подключаются идентично, из активной
темы.
Продолжим. Переносим шаблон в корень сайта.
Шаг 1: Разбивка макета на элементы
Заходим в макет и открываем следующие папки.
Из файла index.html следует скопировать код полностью и перенести в index.php вместо «контент» (5строка). В дальнейшей работе index.html не понадобится – закрываем.
Подготовим футер и хедер. Из файла header.php удаляется 5 строка – «Хедер!»; из fоoter.php – 4 строка, «Футер». После обновления шаблон выглядит как на слайде.
Так как ничего не подключено (стили, скрипты), страница получила такое оформление.
Рассмотрим шаблон более детально. Откроем исходный код: левой кнопкой мышки – выпадающее меню «исследовать объект». Выводится код шаблона из трех элементов: футер, хедер и контент.
Первоочередная задача – разбить макет правильно и разнести соответствующие фрагменты кода шаблона по нужным файлам. Код можно копировать через вкладку «исследовать объект» или работать в index.php, куда ранее был скопирован код шаблона.
Обращаю внимание, что хедер часто содержит картинки и видео. Следует убедиться, что элемент скопирован полностью. В данном шаблоне копируем код с 7 до 90 строчки включительно. Переносим информацию в файл header.php, из файла index.php удаляем.
Аналогично переносим код в файл fоoter.php – копируем с 68 по 96 строку включительно. Из index.php вырезаем ненужный фрагмент. Сохраняем все изменения. На странице видимых изменений не произойдет, а значит все подключено правильно.
Футер и хедер закрываем. Эти элементы едины для всех страниц
– будут выглядеть одинаково на каждой странице.
Шаг 2: Выводим Title
На начальном этапе title выводится из шаблона, а должен – из CMS.
Редактируем код, начиная с 13 строке. Открываем php без эхо, так как объект APPLICATION в любом случае будет выводиться.
Вызываем ShowTitle
у объекта APPLICATION –
и проверяем результат.
Редактируем код с 14 строчки по 18-ю до строчки 19 – «/head».
Открываем php
код, прописываем addCss.
Чтобы не писать постоянство имен для каждого стиля, импортируем путь при помощи
метода use. То есть параметру переданному методу прописываем путь к скрипту.
Также прописывается константа SITE_TEMPLATE_PATH, которая возвращает путь к
активному шаблону, чтобы Битрикс понимал, что и где лежит. И добавляем путь к
стилю. В данном случае используется 4 стиля – копируем код и прописываем
соответствующий путь. Не забываем поставить итоговый слеш. Код, обозначенный
синим маркером, после редактирования следует удалить.
Ниже готовая подсказка. Замените содержимое строк 14-18
готовым кодом ниже.
Также следует перенести содержимое темы (видео, картинки и т.д) в папку teh.
Шаг 4: Адаптируем под мобильные устройства
Выводим meta name=veiwport –
метатег, позволяющий контролировать видимую область сайт для мобильных
браузеров. Простым языком: позволяют приспособить сайт для удобного просмотра
при помощи мобильного телефона и других гаджетов с разным разрешением экрана.
10-12 строки удаляются. Отредактированный код вставляем после шрифтов. Также используем метод Asset но вместо addCss пописываем addString – выводит произвольный код, произвольную строчку, скрипты. Копируем код макета. Вторая строка для Интернет-Экспл.
Таким же способом подключаются шрифты Google Fonts. В скобках ставится Google Fonts и прописывается ссылка. Напоминаю, что двойные кавычки главнее одинарных.
Команда APPLICATIOH – Show – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.
<?php
use \Bitrix\Main\Page\Asset;
$APPLICATION->ShowHead();
?>
Шаг 5: Подключаем скрипты
Часть скриптов находится в футере. Из хедера копируем код, при помощи которого подключались стили. Находим исходный код скриптов, вставляем ниже. Прописываем команду Js (красный маркер), копируем ссылку из кода выше. Первоначальный фрагмент шаблона со скриптами можно удалить.
Обязательно команда APPLICATIOH – Show (зеленый маркер), так как в данном случае скрипты находятся в футере и хедере, хотя обычно подключаются из футера.
Чтобы получить прокрутку, можно добавить больше картинок в
файл index.php.
Шаг 6: Как вывести изображение и подключить логотип
Появился макет, но без картинок и видео. Есть бетафоны,
подключились скрипты выпадающего меню. Чтобы вывести картинки, копируем
константу и прописываем в каждом изображении после главных кавычек. Не забываем
о слеш.
<?=SITE_TEMPLATE_PATH;?>/
Также выводим изображения в футере и логотип.
Шаг 7: Как отобразить видео
Видео находится в хедере – 92 строка. Путь прописан настолько нестандартно, что даже у опытных пользователей могут возникнуть серьезные затруднения. Константа вставляется после двоеточия.
Шаг 8: Подключенте рабочей панели Битрикс
Конечно, можно войти в админку Битрикс, но пропишем в коде. За подключение панели отвечает метод APPLICATIOH – Show Panel. Вставим код после «body»-32 строка.
После обновления появится окно для входа администратора. Переходим по вкладке «Сайт» – рабочая панель появилась.
Еще раз о необычных методах Битрикс. На первый взгляд исходный способ подключения стилей, шрифтов и скриптов намного проще и понятнее. Но Битрикс «просит» специальный код и все объединяет в один документ. Как указано в документации, такой способ позволяет загружать сайт намного быстрее.
Чтобы окончательно разобраться в принципе работы Битрикс, рассмотрим код страницы через google. Копируем адрес сайта, заходим через Гугл, в выпадающем меню левой кнопки мышки выбираем «просмотреть код страницы».
Нет подключений к нескольким стилям по одному файлу для каждого вида элементов. Если перейти по ссылке, мы увидим как все стили сбиты в кучу, нет привычного разделения. То есть Битрикс не обращается к нескольким файлам, а использует только один.
Для правок такая оптимизация достаточно неудобная. На рабочей панели во вкладке «Настройки» – «настройка модулей» есть возможность отключить объединение элементов в один документ.
На момент разработки можно оставить разделение. Так как править и искать стили достаточно проблематично. После изменения настроек мы увидим все стили отдельно.
Шаг 9: Отключаем кеширование
В левом боковом меню пункт «Автокеширование». Опция также
способствует ускорению сайта. На начальном этапе отключаем функцию, хотя могут
возникать некоторые неудобства.
Во время разработки сайта будет много изменений, так кеш не
будет накапливаться.
Шаг 10: Как создавать страницы и разделы
На админпанели Битрикс перейти на вкладку «Сайт» – «Создать страницу», в выпадающем меню выбираем соответствующий пункт. В появившемся окне вводится имя страницы. Зеленым обозначено имя файла этой страницы в корне сайта через Файлзилла.
Нажимаем «Далее», в следующем окне ничего не заполняем и кликаем «Готово». Откроется окно редактирования страницы.
На панели инструментов содержится ряд опций для
редактирования текста. Мы уже рассматривали выборочно возможности этого окна, и
будем останавливаться более детально в следующих уроках. На данный момент пока
ничего не размещаем, оставляем текст образец (в зеленой рамке).
По идентичному алгоритму создается новый раздел. В описание
раздела ничего не меняем, остается стандартный текс. В зеленой рамке имя папки
в Битрикс (прописывается автоматически).
Соответствующий файл и папку теперь можно найти в корне сайта через FileZilla.
Смотрим код страницы.
Все элементы страницы подключились, мы все сделали правильно. Визуально страница должна выглядеть так.
Данный урок можно по праву считать одним из самых сложных и важных этапов создания сайта, а также Вашего обучения. Мы натянули верстку на Битрикс и разобрались с основными командами. В дальнейшем будем дорабатывать шаблон, добавлять новости и разделы, впереди еще больше полезных уроков и ценной информации. Пишите в комментариях вопросы, пожелания, а так же о своих трудностях. Будем разбираться вместе. Спасибо.
В этой статье мы создадим тему для собственного шаблона. Рассмотрим темы Битрикс.
Переходим на сайт 1С Битрикс – dev.1c-bitrix.ru.
На сайте 1С Битрикс в разделе «Разработчикам» выбираем меню «Документация» и «Управление сайтом».
Находим вкладку «Разработчикам» и пункт «Интеграция дизайна». На открывшейся странице слева в разделе «Интеграция Дизайна» выбираем пункт «Верстка базового шаблона». Пошагово показано ниже на слайдах.
Элементы шаблона
Любой сайт состоит из стандартного набора блоков. Каждый играет свою особенную роль в формировании впечатления от сайта, влияет на поведение посетителей.
Основные элементы страницы:
Header – в простонародье шапка сайта, дает общее понимание о содержимом сайта. Выполняет роль навигатора. Обычно содержит главные разделы. Интернет-магазины также в шапке размещают формы заказов, контакты, вход в личный кабинет, чтобы у потенциального клиента все было под рукой.
Контент – основная информационная часть. Содержит все статьи, товары, фото, видео, опросы, бланки заказов, формы обратной связи, перечислять можно до бесконечности.
Sidebar – блок справа или слева. Возможен вариант с двумя сайдбарами. В отличие от контента, сайдбар не меняется, а дублируется на каждой странице. Часто содержит рекламные блоки и боковое меню.
Footer или «подвал» – делает страницу завершенной. Также может содержать дополнительную справочную информацию, разделы и т.д.
В отличии от WordPress, в Битрикс не предусмотрен сайдбар.
На примере главной страницы сайта рассмотрим, как работать с элементами. Через FileZilla заходим в корень сайта и находим папку index.рhр. Как работать с файлами через FileZilla подробно в уроке №2.
Так выглядит код главной страницы. Маркерами обозначены составляющие страницы. Код хедера и футера обязательно содержит соответствующее название на английском языке, как выделено зеленым цветом.
Хедер и футер находятся в корне папки «Активные темы», из нее и подключаются. Ниже идет вызов компонентов: «Наша продукция», «Новости», «Наши услуги» и т.д. Детальнее познакомимся в следующих уроках.
Все темы и шаблоны находятся в папке bitrix. Прошу обратить внимание, что в папке bitrix не следует ничего менять. К ней обращаются только за темами. В противном случае при любом обновлении Битрикс Вам придется менять все. Поэтому все правки вносим в отдельных папках.
Путь к нужной теме пошагово:
Заходим в папку bitrix;
Ищем папку templates, заходим;
Наша тема называется Furniture blue, заходим.
Так по папкам «расфасована» тема. Видим хедер и футер, а также стили, картинки, компоненты. Все их можно править отдельно. Проведем небольшой эксперимент, проверим правильность подключения интересующих нас элементов.
Сначала входим в папку header.php и в код хедера добавим название элемента на кириллице.
Сохранить и обновить страницу на сайте.
В той же последовательности вносим изменения в футер (соответствующая папка выше).
После обновления страница будет выглядеть следующим образом.
Контент находится в файле index.php в корне сайта. Все действия аналогичны.
Внести изменение можно в любой области элемента, достаточно найти соответствующий отрезок кода.
Таким образом: хедер и футер находятся в общем шаблоне, контент лежит в корне сайта.
Создание шаблона
Есть два варианта создания шаблона: с админки и с корня сайта. Документацию сайта создаем через корень сайта и через админку включим его – такой алгоритм рекомендуют разработчики Битрикс.
В корне сайта создаем новую папку под названием local. Важно не забывать, что в папке bitrix корректировки не вносятся.
Создаем тем же способом основу будущего шаблона в виде цепочки папок.
Папка local, вход;
Создать папку template, вход;
Создать папку teh – так будет называться шаблон, вход;
Важно!!! Если открыть хедер или футер из папки bitrix (как это сделать смотрите в начале урока) первое, что стоит в коде – это константа. Своеобразная проверка, которая ограничивает доступ к данным блокам. Другими словами: без константы посетители могут обращаться к хедеру или футеру напрямую и видеть все папки, строение сайта.
Рекомендуется ставить константу в начале всех файлов. Затем прописываем название элемента. Константу можно скопировать с исходного шаблона или воспользоваться кодом ниже.
Футер и хедер создаются аналогично. Подчеркиваю важность расположения константы в начале кода. Иная локация не является критичной ошибкой, но правильнее придерживаться такого порядка.
Содержимое файла description.php копируем из шаблона в файле bitrix.
На слайде выше зеленым маркером указан путь к нужному файлу. Или используйте код ниже.
Файл должен иметь следующий вид: константа (копируем из созданных ранее файлов) и код скопированный из одноименного файла в корне файла bitrix.
Задаем значение, обозначенных элементов: 1 (название) и 2 (характеристики).
Непривычное написание команд большими буквами, хотя логичнее написание php маленькими. Битрикс создан в 1998 г. Самая старая в мире CMS – более 20 лет. Скорее всего, такое написание команд является пережитком прошлого, когда кодили с CapsLock.
Перед подключением шаблона следует почистить файл index.php. Файл должен содержать следующий код.
Теперь, на админпанели Битрикс, появился созданный шаблон.
В зеленой рамке можно увидеть визуальную версию папки local.
Следующий шаг – вывести превью (выделено красной рамкой). Необязательно, но знание понадобиться в будущем.
Открываем изображение и в выпадающем меню (правая кнопка мыши) выбираем «Проверить объект».
Уточняем месторасположение объекта и название.
Важно!!! Название и расширение должны быть идентичными, иначе изображение не подключится.
Заранее подготовленную картинку переименовываем в соответствии с требованием Битрикс и «перетягиваем» прямо с Рабочего стола в шаблон.
Обновляем страницу администрирования Битрикс – в шаблоне появилась картинка.
Чтобы включить шаблон, переходим к списку сайтов в меню слева «Сайты».
Проверяем, как выглядит новый шаблон.
Проверять правильность подключения элементов мы уже научились в ходе урока. Пробуем добавить любой знак или текст.
Для обучения будет использоваться ограниченное количество папок в корне сайта. Рекомендую удалить часть исходного шаблона. Оставить следует папки и файлы согласно слайду.
На выходе должен получиться чистый шаблон с пустыми инфоблоками. Подробно остановимся на теме «Инфоблоки» в одном из следующих видео. В ходе урока мы научились создавать и подключать тему. В следующем видео продолжаем натягивать верстку.
Для чего нужна FileZilla Следующий этап обучения начнем с настройки FileZilla. Это FTP-клиент, и он находится в свободном доступе. Один из самых простых и многофункциональных менеджеров файлов, который поможет скачать или загрузить файлы с FTP-серверов, легче и быстрее находить и редактировать их. Если Вы хотите узнать подробнее, где лучше скачать и как установить FileZilla, пишите в комментариях и я расскажу об этом в одном из следующих видео.
Чтобы подключиться по удаленному серверу через FTP-клиента FileZilla понадобится логин и пароль. На Макхосте необходимые данные находятся в левом меню «Мой аккаунт» во вкладке «Пароли аккаунта».
Во вкладке находятся все пароли и логины Ваших услуг на хостинге.
С вкладки «Пароли аккаунта» (слайд выше) копируем Хост, Имя пользователя (логин), пароль и вставляем в настройки подключения через FileZilla (слайд ниже).
Очень удобно для работы. В процессе создания сайта, когда постоянно вносятся изменения и правки, нет необходимости переходить в хостинг при каждом случае.
Справа в разделе «Удаленный сайт» в папке httpdocs будет находиться вся информация сайта распределенная по отдельным папкам.
Создание и редактирование блоков сайта
После установки Битрикс, пользователей встречает главная админпанель.
Основные вкладки необходимые для работы:
Создание и изменение разделов и страниц;
Сбросить, обновить кеш – очень нужная опция. На время разработки сайта рекомендуется отключать.
Режим правки – возможность редактировать все элементы страницы, содержание статьи, добавить (удалить) пункт меню или изменить его название. Ниже рассмотрим детальнее.
Свернуть или развернуть панель.
Чем Битрикс отличается от классической CMS
Битрикс не только CMS, а и конструктор. Для обычной CMS также возможно собрать подобный функционал, расширить возможности. Но стоимость и сложность себя не оправдывают. Битрикс по праву можно охарактеризовать, как статично-динамичную CMS -создавать ряд блоков, возможность править. В Битриксе вся информация, новости, статьи выводятся напрямую из хостинга. В классической CMS контент хранится в базе данных. Такое отличие является одновременно и плюсом и минусом: с одной стороны делает сайт на Битриксе значительно быстрее, с другой – сложно разобраться в большом количестве папок. Отдельные файлы находятся в отдельных папках, изначально все сайты так создавались. Сегодня можно отойти от этой практики, но в Битрикс без изменений.
Детальнее о редакторе
Переходим в режим правки, в правом верхнем углу панели. Каждый блок становиться активным, наводя мышкой на любую часть страницы, появляется опция «Править в редакторе».
Одно нажатие кнопкой мышки – и в другом окне можно редактировать или полностью заменить текст. По завершению СОХРАНИТЬ.
Очень удобно, быстро и наглядно. Не нужно заходить через админку, перепроверять по несколько раз.
Пункты меню редактируются аналогично. Подводим курсор мыши к нужному блоку, появляется опция «Изменить в редакторе». В окне «Редактирование меню» меняем название существующих пунктов, добавляем или удаляем разделы.
Все изменения отображаются сразу после сохранения. Разделы меню двигаются при помощи мыши.
Добавить новости и выбрать категорию.
Работать достаточно просто. Не имея значительных навыков ведения сайтов, можно вносить изменения, добавлять новый материал.
Визуальный режим редактора
Рассмотрим визуальный режим редактора. Текст в виде HTML – кода. Изменение не самого содержания статьи, информации, а оформления. Другими словами, при помощи кода можно вставить ссылку разделить текст на абзацы и тд.
По желанию пользователя отформатировать новость можно при помощи опций на панели или вручную. Для удобства редактор выводит текст в 4 режимах: в виде кода, текста, одновременно(в двух вариантах расположения в окне).
Справа расположена боковая панель «Компоненты». Более детально будем изучать позже. В данном случае компонентов мало. Так как для урока используется простая демоверсия. Чем дороже и сложнее версия, тем больше компонентов будет на панели.
Структура Битрикс: разрыв шаблона
Рассмотрим структуру Битрикс на примере раздела «О компании». Сам код в корне сайта найти крайне сложно. Пользователей изначально удивит местоположения файла. Править блоки можно и проще, как показано выше. Но и такой доступ в дальнейшем понадобится.
Возвращаемся к FileZilla. Ищем папку company.
Увидеть путь к нужному файлу можно и в оглавлении окна редактора. (Выделено зеленым квадратом на предыдущем слайде).
Открываем index.pxp.
Непривычное расположение. Что-то лежит так, другая часть в базе. С большим объемом материала сложно. Элементы хранятся в отдельных папках, работать над каждым будем отдельно. Терпимо, если речь идет о сайте-визитке или небольшом простом сайте, который мы будем создавать в ходе обучения. Большие информационные порталы, Интернет-магазины править таким способом неудобно. Но как уже упоминалось, подобная структура позволяет ускориться, что особенно актуально для тяжелых сайтов с внушительным количеством подразделов. При просмотре сайта нагрузка на базу данных значительно меньше, файлы показываются напрямую и сайт не «виснет», быстро загружаются элементы страницы.
В файле видны все компоненты, с которыми мы ознакомимся. Рассмотрим, как подключили Header и Footer, необычное расположение картинки. Но об этом более детально в других уроках.
CMS Битрикс – сейчас достаточно популярна. Выбор шаблонов на
MarketPlay огромен, но на них вы далеко не уедете, так как дизайнер предоставляет уже готовый проект, в
котором Вы не всегда найдете готовое решение именно в шаблоне и поэтому нужно
верстать. В видео данная вёрстка уже готова.
Наша задача в этом уроке натянуть готовую верстку на Битрикс.
Начнем с установки Битрикса.
Для установки Битрикс я использую Mchost.ru.
Панель хостинга
Основной особенностью сайта является возможность установки Bitrix без дополнительных скачиваний, и мы можем установщик поставить прямо из хостинга. Лицензия Битрикса платная, можно купить минимальный тариф за 5500 рублей. Но так же можно в течении 30 дней бесплатно потестить эту CMS. Я Вам показываю на бесплатной лицензии на 30 дней.
Установка приложения. Заходим на главную страницу Mchost.ru.
Ищем 1С Битрикс. Загружаем.
Далее выбираем домен. Если у Вас нет домена, Вам нужно его купить. Так же вы можете купить хостинг по моей партнерке, плюс ее в том, что Вы получите 3 месяца бесплатного хостинга.
Создаем базу данных и подключаем домен.
Ждем подключения базы.
Переходим по домену в панель установки.
Устанавливаем Битрикс, пока загружается база. Выбираем самую простую Старт.
Далее в установке нет ничего сложного.
Заполняем все поля. Добавляем ранее созданную базу, имя пользователя, пароль. Выбираем существующую базу данных.
Создание админа. Пароль советую создавать такой же, как и в базе, чтобы был везде один.
Выбираем решение для установки (вообще в принципе без разницы что выбрать).
Выбор темы.
Далее все тоже оставляем как есть.
Переходим на сайт.
Чтобы перейти в админ панель – нужно вести домен сайт/bitrix/ Затем вести логин и пароль.
На этом я хочу закончить этот урок.
ЗАПИСАТЬСЯ НА КОНСУЛЬТАЦИЮ
Спасибо за Вашу заявку!
Я свяжусь с Вами в течении 30 минут. Так же Вы можете со мной связаться по телефону 8-904-634-38-92 или написать мне VK