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

Если на своем 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;
		}
	}
}

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

  1. Первая функция просто конвертирует px значение в rem. Ee можно использовать для частных случаев, например для фильтрации inline стилей внутри шорткодов.  Также она служит callback функцией для второй функции;
  2. Вторая функция, ищет в строке значения по шаблону, которые имеют структуру — «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' );
}

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