30
Мар

Создаем свои собственные виджеты для “Visual Composer”

Многим из тех, кто сталкивался с разработкой сайтов на CMS WordPress, приходилось работать с достаточно популярным плагином для визуального редактирования страниц “Visual Composer“. Этот, достаточно удобный инструмент, нередко идет в поставке с большинством премиум тем, его очень часто хотят видеть на своих сайтах заказчики, так как он делает создание новых страниц очень простым и доступным, даже для тех кто очень отдаленно знаком с web-разработкой, или незнаком с таковой, в принципе.

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

Каков выход из этой ситуации?

Есть  варианта решения проблемы:

  1. Искать подходящие виджеты на просторах интернета. 21-й век, интернет всемогущ, и его необъятные просторы содержат в себе неисчислимое количество мусора, в котором, возможно, вы сможете найти подходящее решение . Такой вариант подойдет для тех, кто, ошибочно, захочет сэкономить себе немного времени, либо для тех кто не умеет, или не хочет программировать. Также очень даже неплохим вариантом это будет, если нужно прицепить к сайту, какой-либо “типичный” блок, внешний вид которого не сильно важен.
  2. Создать свой виджет для Visual Composer. Этот вариант будет беспроигрышным если у вас есть готовая верстка, либо если задача, которую поставил перед вами заказчик (либо же вы сами) не типична. В интернете очень мало нужной англоязычной информации(а русскоязычной и подавно),  и это главная проблема при создании кастомного виджета для Visual Composer. В этой статье, я расскажу о том как сделать свой виджет для Visual Composer с минимальными временными затратами для вас.

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

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

Visual Composer – плагин, цель которого максимально упростить разработку сайта для человека, у которого нет специальных навыков. Разработка сайта может производиться, как в бэк-энд, так и во фронт-энд режиме, с помощью функционала, построенного по принципу “тащи и бросай”. Если говорить о том, с помощью чего сделаны виджеты VC, основные составляющие плагина – можно выделить 2 основных части:

  • шорт-код, который дает возможность размещения виджета в WordPress удобным образом.
  • описательная часть виджета, которая объясняет плагину каким образом должен отображаться виджет на странице редактирования, каковым должен быть набор полей ввода, каков тип должен быть у этих самых полей ввода. Без описательной части виджета, интеграция его с Visual Composer невозможна.

Когда у меня впервые возникла необходимость сделать свой виджет для VC, я естественно первым делом полез гуглить, но, на мое удивление, нужной информации я не нашел ни на русскоязычных, ни на англоязычных ресурсах. Единственной зацепкой стала страница официальной документации VC(https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524332/vc+map). Там можно было посмотреть параметры, которые способна принимать основная функция:

// PHP CODE

vc_map($params);

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

// PHP CODE

add_action( 'vc_before_init', function () {
vc_map( array(
'name' => __( 'Тестовый пример', 'itnyou' ), //название виджета
'base' => 'test_widget', //слаг любого шорткода, который уже существует в wordpress, который вы собираетесь использовать
'class' => 'test_widget_class', //класс, который добавится к вашему виджету, на странице редактирования записи из админки. Поможет, если вы хотите изменить его внешний вид
'category' => __( 'Content', 'itnyou'), //название вкладки, на которой будет располагаться виджет в админке. Можно задать имя уже существующей вкладки
'admin_enqueue_js' => array(get_template_directory_uri().'/vc_extend/test_widget.js'),
'admin_enqueue_css' => array(get_template_directory_uri().'/vc_extend/test_widget.css'),
'params' => array(
array(
'type' => 'textfield', // тип поля ввода. сейчас стоит обычное однострочное текстовое поле, но также может принимать значения textarea_html(WYSIWYG редактор), textarea(обычное многострочное текстовое поле), dropdown(выпадающий список), attach_image(выбор единственного изображения), attach_images(выбор изображений в любом количестве), posttypes(выбор типа поста, в котором будут отображаться все типы записей, зарегистрированные в WordPress по умолчанию и пользовательские типы), colorpicker(выбор цвета), exploded_textarea(поле ввода, в котором строки должны быть разделены запятой), widgetised_sidebars(выбор доступной области для сайдбара), textarea_raw_html(данные, которые будут введены в это поле, вы сможете получить в шорт-коде, только в base64), link(ссылка, официальная документация рекомендует использовать для вывода функцию vc_build_link), checkbox(флажок), loop(поле для "построения алгоритма” выборки постов, для вывода их во фронте), css(поле для ввода стилей, с подсветкой).
'holder' => 'div', // тег в который будет обернуто поле виджета при редактировании страницы
'class' => 'test_field_class', //класс с которым будет выводиться значения поля при редактировании
'heading' => __( 'Your Text', 'itnyou' ), // заголовок поля
'param_name' => 'test_field', // имя поля, которое будет использоваться для получения значения в шорткоде
'value' => __( 'Default value', 'itnyou' ), // значение по умолчанию
'description' => __( 'Description for foo param.', 'itnyou' ) // описание поля
)
)
) );
});
add_shortcode('test_widget', function ($atts, $content = null){ //объявляем шорткод, ставим ему стандартные параметры atts и content. В массиве $atts будут находиться все значения полей созданного вами виджета VC, кроме textarea_html, значение которого будет находиться в переменной $content.
echo '
<div class="test_widget">'.$atts['test_field'].'</div>
'; // Выводим значение поля 'Your Text'
});

В данном случае, мы вводим через пользовательский интерфейс значение единственной переменной “test_field” и выводим(в данном случае сразу печатаем) ее значение с помощью шорт-кода “test_widget”.
Степень возможной сложности виджета определяется лишь вашей(или заказчика) фантазией и умением программировать.