Вот уже продолжительное время в своих проектах я использую замечательный плагин — Wpbakery Visual Composer page builder. И все бы ничего, но на днях мне понадобилось расширить стандартный набор иконок в шорткоде vc_icon, и в документации, естественно, была уже устаревшая информация о том как это сделать. Пришлось идти обходными путями…
Перед началом работы
В начале, предполагается, что у вас уже установлен и активирован WPBakery Page Builder плагин. Если нет, то купить и скачать его можно на ThemeForest или отправить соответствующий запрос в свободной форме мне в Telegram , где я вам просто предоставлю свежую лицензионную версию в ознакомительных целях к этой статье 😉 .
Все ли так плохо с плагином Visual Composer?
И да и нет…, но скорее всего, лично для меня да т.к плагин обладает огромным потенциалом, который хоронят в полностью устаревшей документации и почти нулевом сообществе + он еще платный, что явно не добавляет ему плюсов. Вишенкой на торте, является полностью маразматический код/решения (хоть хорошо не всего плагина, а отдельных частей): как например объединения шорткодов Tab и Tour в единое целое с невозможностью нормально их кастомизировать. В любом случае этот плагин решает очень много проблем при заполнении контента, поэтому нужно всячески выкручиваться и постоянно изучать код Visual Composer на предмет новых фич. Итак, давайте теперь перейдем непосредственно к решению проблемы, но сразу хочу сделать оговорку, что ниже приведенный пример полностью работает на плагине Visual Composer WordPress версии 5.0.1 и я очень надеюсь, что будет работать и с более новыми версиями.
Подключаем необходимые файлы
Будем поступать мудро и создадим новый файл, например visual-composer.php в inc директории темы, и подключим его в functions.php:
/** * Visual Composer Settings * * @since Theme Name 1.0 */ require( trailingslashit( get_template_directory() ) . 'inc/visual-composer.php' );
Теперь, внутри подключаемого файла для подстраховки напишем следующую конструкцию:
if ( !in_array( 'js_composer/js_composer.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
return;
}
Формируем новый список иконочных шрифтов
Сперва, нам нужно подключить хук-событие vc_after_init и в вызываемой функции vc_after_init_actions, для начала просто получить параметры выпадающего списка шрифтов, которые затем мы просто дополним. Параметры получим с помощью создания экземпляра класса WPBMap, который принимает два значения — имя шорткода и имя его получаемого параметра (WPBMap::getParam( $shortcode, $param );). Может так случиться, что вы не будете знать название параметра, но из этой ситуации можно выйти создав новый экземпляр класса WPBMap и вывести все параметры заданного шорткода с помощью метода getShortCode :
$params = WPBMap::getShortCode('vc_icon');
var_dump($params);
Далее, в полученный параметр (массив) просто добавим имя шрифта и его идентификатор и в конце, обновленный массив параметров загоним в Visual Composer с помощью функции vc_update_shortcode_param. Ниже, пример добавления имени шрифта Feather в общий выпадающий список:
if ( ! function_exists( 'vc_after_init_actions' ) ) {
/**
* VC after init actions
*/
function vc_after_init_actions() {
$vc_shortcodes = array(
'vc_icon' => array( 'type' )
);
foreach ( $vc_shortcodes as $key => $value ) {
foreach ( $value as $param_value ) {
$param = WPBMap::getParam( $key, $param_value );
switch ( $key ) {
case 'vc_icon' :
$param['value'][ __( 'Feather', 'theme' ) ] = 'feather';
$param['weight'] = 90;
break;
}
vc_update_shortcode_param( $key, $param );
}
}
}
add_action( 'vc_after_init', 'vc_after_init_actions', 999 );
}
Код, выше естественно можно описать намного проще. Просто я взял пример со своего проекта в котором нужно кастомизировать кучу шорткодов, поэтому для удобства я и создал массив $vc_shortcodes который прогоняю и изменяю, что нужно под себя. Также, обратите внимание на следующую строчку кода: $param['weight'] = 90;. Эта строчка очень важна т.к определяет сортировку/положение элемента внутри билдера т.е. чем больше значение тем выше элемент в списке. Подробнее можно прочитать тут, однако там информация уже устаревшая, но для общего плана я думаю будет полезной 🙂
Добавляем новые параметры в vc_icon
Итак, имя/ключ шрифта добавили. Теперь, как добавить сами иконки в общий выпадающий список ниже? Для этого нам понадобится функция vc_add_params или vc_add_param() (в зависимости от того, что вам нужно — добавить много параметров или только один). Добавляем функцию сразу после foreach из кода выше:
vc_add_params( 'vc_icon', array( array( 'type' => 'iconpicker', 'heading' => __( 'Icon', 'theme' ), 'param_name' => 'icon_feather', 'value' => "icon-eye", 'settings' => array( 'emptyIcon' => false, 'iconsPerPage' => 131, 'type' => 'feather' ), 'weight' => 80, 'dependency' => array( 'element' => 'type', 'value' => 'feather', ), 'description' => __( 'Select icon from library.', 'theme' ) ) ) );
Обратите внимание на ключ type — он очень важен и именно опираясь на его значение, мы будем дальше подключать все необходимые классы иконок, и не только. Теперь, оставляем функцию vc_after_init_actions и подключаем фильтр, который будет брать наш шрифт с type = feather и подключать к нему массивс иконками, вида — имя_класса => читаемое_название. Естественно, все названия классов берем с файла стилей, который идет с каждым шрифтом. Поэтому добавляем фильтр vc_iconpicker-type-имя_типа т.е в нашем случае будет vc_iconpicker-type-feather:
function vc_iconpicker_type_feather( $icons ) {
$icons = array(
array('icon-eye' => 'Eye'),
array('icon-paper-clip' => 'Paper clip'),
array('icon-mail' => 'Mail'),
array('icon-toggle' => 'Toggle'),
array('icon-layout' => 'Layout') # Далее перечисление всех классов
);
return $icons;
}
add_filter( 'vc_iconpicker-type-feather', 'vc_iconpicker_type_feather', 999 );
В коде выше, я естественно, в целях экономии описал не все классы, а лишь описал несколько для примера.
Подключаем необходимые стили
Это финальный шаг, на котором остается только подключить все css файлы шрифта во front/back сайта:
/**
* Define Template URL
*/
if ( ! defined( 'TEMPLATE_URL' ) ) {
define( 'TEMPLATE_URL', trailingslashit( get_template_directory_uri() ) );
}
/**
* Define CSS URL
*/
if ( ! defined( 'CSS_PATH ' ) ) {
define( 'CSS_PATH ', TEMPLATE_URL . 'assets/css/' );
}
add_action( 'vc_base_register_front_css', 'feather_vc_iconpicker_base_register_css' );
add_action( 'vc_base_register_admin_css', 'feather_vc_iconpicker_base_register_css' );
function feather_vc_iconpicker_base_register_css(){
wp_register_style('feather', CSS_PATH . 'feather.css');
}
add_action( 'vc_backend_editor_enqueue_js_css', 'feather_vc_iconpicker_editor_jscss' );
add_action( 'vc_frontend_editor_enqueue_js_css', 'feather_vc_iconpicker_editor_jscss' );
function feather_vc_iconpicker_editor_jscss(){
wp_enqueue_style( 'feather' );
}
add_action('vc_enqueue_font_icon_element', 'feather_enqueue_font');
function feather_enqueue_font($font){
switch ( $font ) {
case 'feather':
wp_enqueue_style( 'feather' );
break;
}
}
Все, после этих строк, уже можно переходить в шорткод Icon и пользоваться новым набором иконок.
В заключение
Возможно вы уже догадались, что подключать все шрифты в фильтре vc_iconpicker-type-feather, «ручками» очень трудоемкая и ненужная работа (если классов очень много конечно), т.к приходиться брать имя класса, класть в строку, а потом еще писать читабельное название. Поэтому, все это дело я решил автоматизировать и по быстрому накидал следующий не очень красивый/правильный, но рабочий код:
$string = '
.icon-eye:before {
content: "\e000";
}
.icon-paper-clip:before {
content: "\e001";
}
.icon-mail:before {
content: "\e002";
}';
$string = preg_replace(
array(
'/\./',
'/{/',
'/}/',
'/:before/',
'/content: "(.*?)";/',
'/(.*?)-(.*?)-(.*?)\s/',
'/(?<=\s|^)(icon)-(.*?)\s/',
"/(\r?\n){2,}/"
),
array(
'',
'',
'',
'',
'',
'array(\'$1-$2-$3\' => \'$2 $3\'),',
'array(\'icon-$2\' => \'$2\'),',
""
), $string );
var_dump($string);
Как вы могли уже догадаться, код выше чистит css шрифта Feather и выводить на экран, то что можно просто скопировать и вставить внутрь функции vc_iconpicker_type_feather. Также, возможно кому-то будет полезен код для Bootstrap иконок:
$string = preg_replace(
array(
'/\./',
'/{/',
'/}/',
'/:before/',
'/content: "(.*?)"/',
'/,/',
'/(.*?)-(.*?)-(.*?)\s/',
'/(?<=\s|^)(glyphicon)-(.*?)\s/',
"/(\r?\n){2,}/"
),
array(
'',
'',
'',
'',
'',
"\n",
'array(\'$1-$2-$3\' => \'$2 $3\'),',
'array(\'glyphicon-$2\' => \'$2\'),',
""
), $string );
echo preg_replace_callback('/=> \'[a-z]/', 'upper', $string);
function upper($matches) {
return strtoupper($matches[0]);
}