Visual Composer: добавляем новые иконки в шорткод vc_icon

Вот уже продолжительное время в своих проектах я использую замечательный плагин — Wpbakery Visual Composer page builder. И все бы ничего, но на днях мне понадобилось расширить стандартный набор иконок в шорткоде vc_icon, и в документации, естественно, была уже устаревшая информация о том как это сделать. Пришлось идти обходными путями…

Все ли так плохо с плагином Visual Composer?

И да и нет…, но скорее всего, лично для меня да т.к плагин обладает огромным потенциалом, который хоронят в полностью устаревшей документации и почти нулевом сообществе + он еще платный (хотя я думаю, что visual composer nulled версию можно спокойно найти тут ), что явно не добавляет ему плюсов. Вишенкой на торте, является полностью маразматический код/решения (хоть хорошо не всего плагина, а отдельных частей): как например объединения шорткодов Tab и Tour в единое целое с невозможностью нормально их кастомизировать. В любом случае этот плагин решает очень много проблем при заполнении контента, поэтому нужно всячески выкручиваться и постоянно изучать код Visual Composer на предмет новых фич. Итак, давайте теперь перейдем непосредственно к решению проблемы, но сразу хочу сделать оговорку, что ниже приведенный пример полностью работает на плагине Visual Composer WordPress версии 5.0.1 и я очень надеюсь, что будет работать и с более новыми версиями. 

Подключаем необходимые файлы

Будем поступать мудро и создадим новый файл, например visual-composer.php в inc директории темы, и подключим его в functions.php:

Теперь, внутри подключаемого файла для подстраховки напишем следующую конструкцию:

Формируем новый список иконочных шрифтов

Сперва, нам нужно подключить хук-событие vc_after_init и в вызываемой функции vc_after_init_actions, для начала просто получить параметры выпадающего списка шрифтов, которые затем мы просто дополним. Параметры получим с помощью создания экземпляра класса WPBMap, который принимает два значения — имя шорткода и имя его получаемого параметра (WPBMap::getParam( $shortcode, $param );). Может так случиться, что вы не будете знать название параметра, но из этой ситуации можно выйти создав новый экземпляр класса WPBMap и вывести все параметры заданного шорткода с помощью метода getShortCode :

Далее, в полученный параметр (массив) просто добавим имя шрифта и его идентификатор и в конце, обновленный массив параметров загоним в Visual Composer с помощью функции vc_update_shortcode_param. Ниже, пример добавления имени шрифта Feather в общий выпадающий список:

Код, выше естественно можно описать намного проще. Просто я взял пример со своего проекта в котором нужно кастомизировать кучу шорткодов, поэтому для удобства я и создал массив $vc_shortcodes который прогоняю и изменяю, что нужно под себя. Также, обратите внимание на следующую строчку кода: $param['weight'] = 90;. Эта строчка очень важна т.к определяет сортировку/положение элемента внутри билдера т.е. чем больше значение тем выше элемент в списке. Подробнее можно прочитать тут, однако там информация уже устаревшая, но для общего плана я думаю будет полезной 🙂

 Новый шрифт feather

Добавляем новые параметры в vc_icon

Итак, имя/ключ шрифта добавили. Теперь, как добавить сами иконки в общий выпадающий список ниже? Для этого нам понадобится функция vc_add_params или vc_add_param() (в зависимости от того, что вам нужно — добавить много параметров или только один). Добавляем функцию сразу после foreach из кода выше:

Обратите внимание на ключ type — он очень важен и именно опираясь на его значение, мы будем дальше подключать все необходимые классы иконок, и не только. Теперь, оставляем функцию vc_after_init_actions и подключаем фильтр, который будет брать наш шрифт с type = feather и подключать к нему массивс иконками, вида — имя_класса => читаемое_название. Естественно, все названия классов берем с файла стилей, который идет с каждым шрифтом. Поэтому добавляем фильтр vc_iconpicker-type-имя_типа т.е в нашем случае будет vc_iconpicker-type-feather:

В коде выше, я естественно, в целях экономии описал не все классы, а лишь описал несколько для примера. 

Подключаем необходимые стили

Это финальный шаг, на котором остается только подключить все css файлы шрифта во front/back сайта:

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

Новые иконки в visual composer

В заключение

Возможно вы уже догадались, что подключать все шрифты в фильтре vc_iconpicker-type-feather, «ручками» очень трудоемкая и ненужная работа (если классов очень много конечно), т.к приходиться брать имя класса, класть в строку, а потом еще писать читабельное название. Поэтому, все это дело я решил автоматизировать и по быстрому накидал следующий не очень красивый/правильный, но рабочий код:

Как вы могли уже догадаться, код выше чистит css шрифта Feather и выводить на экран, то что можно просто скопировать и вставить внутрь функции vc_iconpicker_type_feather. Также, возможно кому-то будет полезен код для Bootstrap иконок:

Подписаться на новые статьи