WPBakery Page Builder — добавляем поддержку rem

Если на своем WordPress сайте вы используете WPB плагин, то прекрасно знаете, что помимо «грязного кода» и ужасной структуры WPBakery производит все вычисления и выводит стили в px. Естественно, если ваша тема использует гибкие единицы измерения (rem, em и т.п), то вы столкнетесь с проблемами отображения. Поэтому далее я опишу способ, который поможет вам исправить эту проблему в Visual Composer

Перед началом работы

В начале, предполагается, что у вас уже установлен, активирован и настроен WPBakery Page Builder плагин. Если нет, то купить и скачать его можно на ThemeForest или отправить соответствующий запрос в свободной форме мне в Telegram , где я вам просто предоставлю свежую лицензионную версию в ознакомительных целях к этой статье 😉 .

Переводим WPBakery стили из PX в REM

Для начала открываем functions.php файл и добавляем туда две функции:

Что делает каждая из функций?

  1. Первая функция просто конвертирует px значение в rem. Ee можно использовать для частных случаев, например для фильтрации inline стилей внутри шорткодов.  Также она служит callback функцией для второй функции;
  2. Вторая функция, ищет в строке значения по шаблону, которые имеют структуру — «Npx», где N любое число.

Настройка фильтрации Visual Composer стилей

Теперь добавим в functions.php код, который будет фильтровать все стили в тегах </head> и «на лету» менять пиксели на rem:

Изменяем стили WPBakery в редактируемом контенте темы

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

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