Если на своем WordPress сайте вы используете WPB плагин, то прекрасно знаете, что помимо «грязного кода» и ужасной структуры WPBakery производит все вычисления и выводит стили в px. Естественно, если ваша тема использует гибкие единицы измерения (rem, em и т.п), то вы столкнетесь с проблемами отображения. Поэтому далее я опишу способ, который поможет вам исправить эту проблему в Visual Composer…
Перед началом работы
В начале, предполагается, что у вас уже установлен, активирован и настроен WPBakery Page Builder плагин. Если нет, то купить и скачать его можно на ThemeForest или отправить соответствующий запрос в свободной форме мне в Telegram , где я вам просто предоставлю свежую лицензионную версию в ознакомительных целях к этой статье 😉 .
Переводим WPBakery стили из PX в REM
Для начала открываем functions.php файл и добавляем туда две функции:
if ( ! function_exists( 'ziscod_rem' ) ) { function ziscod_px_to_rem( $value = 0 ) { if ( is_array( $value ) ) { // Check preg replace data $value = isset( $value['1'] ) ? (float) $value['1'] : 0; } if ( $value == 0 ) { return 0; } return $value / 16 . 'rem'; } } if ( ! function_exists( 'ziscod_px_to_rem_cb' ) ) { function ziscod_px_to_rem_cb( $buffer = '', $pattern = '#(\d+|\d*\.\d+)px#is', $echo = false ) { $buffer = preg_replace_callback( $pattern, 'ziscod_px_to_rem', $buffer ); if ( $echo ) { echo $buffer; } else { return $buffer; } } }
Что делает каждая из функций?
- Первая функция просто конвертирует px значение в rem. Ee можно использовать для частных случаев, например для фильтрации inline стилей внутри шорткодов. Также она служит callback функцией для второй функции;
- Вторая функция, ищет в строке значения по шаблону, которые имеют структуру — «Npx», где N любое число.
Настройка фильтрации Visual Composer стилей
Теперь добавим в functions.php код, который будет фильтровать все стили в тегах </head>
и «на лету» менять пиксели на rem:
if ( ! function_exists( 'ziscod_head_buffer_start' ) ) { /** * Start for filtrate wp_head (<head> tag) */ function ziscod_head_buffer_start() { ob_start(); } add_action( 'wp_head', 'ziscod_head_buffer_start', 0 ); } if ( ! function_exists( 'ziscod_head_buffer_end' ) ) { /** * Finish for filtrate wp_head (<head> tag) */ function ziscod_head_buffer_end() { $buffer = ob_get_clean(); // Convert all styles PX -> REM in cb function echo ziscod_px_to_rem_cb( $buffer ); } add_action( 'wp_head', 'ziscod_head_buffer_end', PHP_INT_MAX ); }
Изменяем стили WPBakery в редактируемом контенте темы
В финале добавляем код, который фильтрует весь выводимый плагином контент и также преобразует единицы измерения:
if ( ! function_exists( 'ziscod_content_filter' ) ) { function ziscod_content_filter( $content ) { // Convert all styles PX -> REM $content = ziscod_px_to_rem_cb( $content ); return $content; } add_filter( 'the_content', 'ziscod_content_filter' ); }