Подключение CSS и JS в зависимости от используемых блоков в контенте

Цель этого поста – показать вам одну из встроенных функций в WordPress 5.0+, позволяющую вам делать разное, в зависимости от того, есть ли определённые блоки Gutenberg в контенте поста или страницы или нет.

Также хочу порекомендовать вам свой видеокурс по созданию блока для Gutenberg.

Как определить, задействован ли блок Gutenberg на странице?

Мы будем это проверять функцией has_block(), которая кстати мне очень помогла, когда я только-только переносил все свои сайты на Gutenberg.

У функции два параметра:

  • $block_type – название блока, которое может содержать только латинские буквы в нижнем регистре, цифры и слэши и начинаться с буквы.
  • $post – ID или объект поста, либо по умолчанию будет использоваться текущий пост.

Совсем лёгкий пример ниже:

if ( has_block( 'gallery' ) ) {
	// делаем что-либо, если блок галереи используется в контенте текущего поста
}

А теперь подключаем стили и скрипты в зависимости от используемых блоков

Идея заключается в том, что вы создали свой классный блок, но для его работы на сайте нужно много дополнительного CSS и JS, который вам не хотелось бы подключать на каждой странице сайта.

И тут вам приходит на помощь этот код:

add_action( 'wp_enqueue_scripts', 'truemisha_block_frontend_scripts' );
 
function truemisha_block_frontend_scripts() {
 
	// блок не используется? ничего не делаем
	if ( ! has_block( 'truemisha/cool-block' ) ) {
		return;
	}
 
	wp_enqueue_script(
		'truemisha-cool-block-js',
		plugins_url( 'dist/truemisha-cool-block.js', __FILE__ ),
		array( 'jquery' ),
		filemtime( plugin_dir_path( __FILE__ ) . 'dist/truemisha-cool-block.js' )
	);
 
}

Пару моментов по коду:

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.