1. Главная
  2. Документы
  3. Система управления содержимым WordPress (CMS)
  4. Visual Composer (Drag’n’drop Конструктор страниц)
  5. Как работать с Visual Composer – Расширяем Visual Composer с помощью собственных элементов контента

Как работать с Visual Composer – Расширяем Visual Composer с помощью собственных элементов контента

Want create site? Find Free WordPress Themes and plugins.

Перед тем как перейти к собственно созданию страниц, давайте рассмотрим некоторые стандартные компоненты.

Visual Composer включает в себя огромное количество встроенных элементов контента. Кроме этого, Visual Composer предлагает более 200 платных и бесплатных дополнений.

По умолчанию Visual Composer активирован только для страниц, но вы можете также активировать его как для стандартных так и пользовательских записей. Этими и многими другими функциями можно управлять из менеджера ролей Visual Composer. Там же вы можете контролировать, кто может использовать Visual Composer.

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

Один из самых привлекательных для пользователя инструментов Visual Composer – это мастер создания сеток. С его помощью пользователи могут создавать любые виды сеток даже не притрагиваясь к коду: сетки с изображениями, текстом, кнопками, записями и т.д. Так же доступны сетки типа masonry.

Mmm grids
Ах сетки

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

И, наконец, мы достигли того, что, возможно, является наиболее важной частью Visual Composer: редактор. Это совмещенный бэк-энд и фронт-энд редактор, и с его помощью пользователи могут создавать страницы без знания программирования.

Visual Composers back end editor
Бэк-енд редактор Visual Composer
Visual Composers front-end editor
Фронт-енд редактор Visual Composer

Во фронт-энд редакторе вы редактируете то, что видите. Это конечно более продвинутый визуальный редактор, по сравнению с WYSIWYG редактором, что по умолчанию включен в WordPress.

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

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

Чтобы изменить какой либо элемент Visual Composer, сначала необходимо скопировать файл-шаблон с этим элементом из Visual Composer в папку vc_templates вашей темы: из (js_composer) > include > templates в корневая папка вашей темы > vc_templates. В предыдущем уроке мы упоминали, что мы изменили четыре файла в нашей теме Focuson:

  1. vc_column.php
  2. vc_column_text.php
  3. vc_row.php
  4. vc_video.php

И как мы уже говорили, очень важно дать этим файлам конкретные имена. Эти файлы-шаблоны должны носить точно такие же имена как и файлы в папке Visual Composer.

Таким образом, скопировав эти файлы, мы теперь можем их изменить. Давайте посмотри, что содержит, например, файл vc_columns.php. Вы не найдете в нем ничего нового, если вы знаете как создавать шорткоды.

Структурно файл можно разделить на три части:

  1. Извлекаем параметры шорткодов.
  2. Готовим параметры для вывода.
  3. Выводим структуру шорткодов.

Что же делать, если нам необходимо изменить или удалить имеющиеся параметры шорткодов? Познакомьтесь с тремя новыми функциями:

Эта функция удалит любые параметры в стандартных либо пользовательских шорткодах. Чтобы удалить атрибут, выбираем шорткод по имени, например, шорткод с именем vc_column, и атрибут с именем el_class.

Данная функция добавляет параметры к стандартным или же пользовательским шорткодам. Так же как и с функцией vc_remove_param(), выбираем шорткод по его имени, например, выбираем шорткод с именем vc_column, и добавляем массив с параметрами:

Данная функция похожа на функцию vc_add_param(), с одной лишь разницей, она позволяет добавить сразу несколько параметров. Найти полный список типов параметров можно здесь.

Чтобы добавить или удалить параметры, а также добавить новые элементы, нам необходимо изменить интеграционный файл, в нашем случае это файл ninzio_vc.php.

  1. Начнем с отключения фронт-энд редактора. Фронт-энд редактор прекрасная функция, но он не поддерживается нашими пользовательскими элементами. Все зависит от вас будете ли вы поддерживать фронт-энд и/или бэк-энд редакторы.
  2. Удаляем все ненужные или неподдерживаемые параметры из нашего целевого элемента с помощью vc_remove_param();
  3. Добавляем новые параметры к элементу с помощью функции vc_add_param(); или vc_add_params();
  4. Добавляем новые элементы…

Добавление новых элементов контента в Visual Composer происходит, когда файл с шорткодами загружается с вашей темой или, как в нашем случае, файл с расширениями к теме (ninzio-addons). Поэтому нам сначала надо убедиться, что наш плаги ninzio-addons установлен и активен:

Откуда Visual Composer узнает, что были добавлены новые элементы? С помощью vc_action();

Мы воспользуетмся “действием” init и получим следующий результат:

Теперь мы готовы добавить новые элементы, для которых нам нужна еще одна функция:

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

Какой большой список параметров! Давайте рассмотрим самые важные из них:

  • name дает вашему пользовательскому элементу уникальное имя. Пользователи будут видеть его во вкладке Visual Composer.
  • base, не менее важный, чем name – это имя тега шорткода. Если вы знакомы с созданием пользовательских шорткодов, вы знаете, что все пользовательские шорткоды имеют теги. Например наш пользовательский разделитель имеет тег nz_sep. Base элементов должен быть уникальным и он должен быть назван именно так, как и имя шорткода в файле shortcodes.php(как, например, в нашей теме Focuson):
  • class не критический, но очень важный параметр, выступающий в качестве неуникального идентификатора. Наименования должны быть содержательными и использоваться без пробелов, тире или знак подчеркивания.
  • show_settings_on_create – это логический параметр, значение которого понятно из названия.
  • category имеет важное значение. Если вы хотите сгруппировать пользовательские элементы в пределах одной вкладки меню Visual Composer, следует добавить пользовательскую категорию. Если же вы хотите, добавить элементы в уже существующую категорию, воспользуйтесь именем существующего меню вкладки:
  • icon похож на class. Добавим имя для icon, чтобы можно было стилизовать шорткод в меню Visual Composer. Например:
  • description добавляет небольшое описание к вашему пользовательскому элементу. Это будет отображаться для пользователей.
  • js_view является очень важным параметром. Если ваши пользовательские элементы составляют родительские и дочерние компоненты (например блоки контента, которые включают основной родительский контейнер и дочерние элементы, где родительские и дочерние элементы имеют отдельные атрибуты), этот параметр должен иметь значение VcColumnView. Мы изучим более сложные детали через минуту.
  • params – это массив параметров, которые будут добавлены к пользовательскому элементу. Она работает аналогично функции vc_add_params(), но включен в функцию vc_map().

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

Например, допустим мы хотим добавить новый элемент «Блок Контента». Наш элемент “Блок Контента” состоит из двух частей:

  1. родительского элемента с атрибутами
  2. и дочерних блок-элементов, каждый с собтсвенными атрибутами.

Один блок контента может влючать неограниченное количество дочерних элементов. Таким образом на надо решить два вопроса:

  1. Каким-то образом нам нужно дать знать Visual Composer, что блок контента родительский либо дочерний элемент,
  2. Затем, что блок является единственно возможным дочерним элементом родительского элемента, и что элемент блок контента является единственно возможным родительским элементом дочерних элементов.

Чтобы избежать путаницы, насколько это возможно, давайте рассмотрим уже существующий элемент. В нашей теме Focuson есть элемент «Блок Контента», с двумя дополнительными параметрами, представляющими особый интерес:

Помните параметр base функции vc_map()? C помощью as_parent, зарегистрируем элемент nz_content_box как единственный родительский элемент дочернего элемента nz_box.

Если параментр js_view имеет значение VcColumnView, Visual Composer добавит функциональность интерфейса для этого элемента в редакторе, так мы можем добавить новый дочерний элемент.

В том же духе, код элемента nz_box имеет дополнительный параметр:

С помощью as_child мы регистрируем элемент nz_box как дочерний элемент, но только для родительского элемента nz_content_box.

Если теперь вы перейдете в меню Visual Composer и кликните на добавленный элемент контента, вы увидите…, что он не работает. Ни родительские ни дочернии функции не были добавлены, так как нам нужно сделать еще одну вещь – нам нужно расширить следующие классы:

  • WPBakeryShortCodesContainer
  • WPBakeryShortCode

Первый класс отвечает за родительские элементы, второй отвечает за дочерние. Таким образом, сразу после action функции добавляем:

Как вы помните, base блока контента родительского элемента был nz_content_box, это имя также должно присутствовать в имени класса, который расширяет класс WPBakeryShortCodesContainer. В нашем случае новое имя класса будет WPBakeryShortCode_nz_Content_Box.

То же самое верно и для дочернего элемента. Имя параметра base  nz_box и имя нового класса будет WPBakeryShortCode_nz_Box.

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

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

Теперь мы можешь пожать плоды тяжелого труда. Взглянем на главную страницу темы Focuson. Давайте создадим такую же домашнюю страницу с помощью Visual Composer.

Структура страницы может быть разбита на несколько разделов:

  • Слайдер
  • Блок с контентом
  • Избранные проекты
  • Счетчики
  • Дополнительная информация, типа “Почему выбирают нас”, состоящая из двух колонок
  • Баннер
  • Члены команды
  • Еще один блок дополнительной информации с двумя столбцами
  • Отзывы клиентов
  • Логотипы спонсоров

Чтобы все это воссоздать потребуется всего лишь несколько минут работы с Visual Composer.

Мы поместим каждый блок внутри отдельного элемента «Ряд», содержащего по крайней мере один элемент «столбец». Как мы уже говорили, это минимально требуемая структура страницы в Visual Composer.

Тема Focuson включает интегрированный Revolution Slider. Слайдер не добавлен в Visual Composer, однако, как только вы установите Revolution Slider и Visual Composer, вы увидите новый элемент “Revolution Slider” в Visual Composer. Это бесплатное дополнение к Revolution Slider, и с помощью этого элемента вы можете добавить слайдер на страницу, даже если ваша тема не интегрирована с Visual Composer.

Помните пример с элементом «Блоки Контента»? Мы можем создавать удивительные блоки контента с помощью наших пользовательских элементов:

В этом разделе мы используем

  1. text_column
  2. Элемент пробел, чтобы добавить интервалы
  3. изображение в центре (которое служит прикрасным разделителем строк)
  4. еще  один пробел
  5. и элемент «Последние проекты»

Почти все элементы здесь пользовательские.

Для счетчиков мы использовали параметр “фон ряда” (изображение и цвет) для эстетики. Все эти опции пользовательские и добавлены из Ninzio. Мы добавим пользовательский элемент счетчик внутрь данного ряда.

В столбец Visual Composer мы может добавить двойной столбец:

Почти все эти элементы являются пользовательскими, и только элемент «Custom Heading» добавлен в Visual Composer по умолчанию. В бэк-энд редакторе он выглядит асимметричным, но во фронт-энд редакторе это вполне достойная конструкция. Управление контентом состоит не только из заполнения страниц, это также логический и творческий процесс. Вам нужно принять во внимание размеры изображения и текста, а так же продумать как они будут выглядеть на различных устройствах. Иногда необходимо ввести адаптивные поправки. К счастью Visual Composer имеет необходимые инструменты. Вы можете найти вкладку Responsive Options (Адаптивные Опции) в опциях изменения столбцов, здесь вы можете изменить размер столбца в зависимости от групп устройств.

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

А это дополнительный элемент из Ninzio; карусель членов команды.

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

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

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

И последний раздел “Логотипы спонсоров”. Это карусель логотипов внутри ряда с серым фоном. Этот элемент тоже пользовательский.

Ну вот и все! Теперь вы знаете все, что необходимо для интеграции Visual Сomposer с вашей темой, и быстрого и легкого создания страниц. Как ресурс для дальнейшего изучения предлагаю вам просмотреть официальную вики-страницу Visual Composer. Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь оставляйте комментарий внизу!

Did you find apk for android? You can find new Free Android Games and apps.
Была ли эта статья полезной для вас? Да 1 Нет 1

Как мы можем помочь?