Новый хук wp_body_open в Wordpress. Как теперь правильно установить Google Tag Manager (GTM) в Wordpress

Новый хук в wordpress 5.2. Как теперь правильно подключать google tag manager в wordpress

Йо-йо! В версии 5.2.0 в WordPress появилась новая функция и хук к ней. Суть функции заключается в том, что она позволяет напечатать произвольный код сразу после открывающегося тэга body.

На самом деле я пока не могу понять как использовать данный хук, кроме печати инициализатора для google tag manager, ведь только он просить включить его сразу после открывающегося тэга body. Если вы знаете другие скрипты, которые просят то же самое размещение то напишите в комментариях.

Начало использования

Для того, чтобы начать использовать wp_body_open вам нужно прописать сразу после открывающего тэга body код. Выглядит это так:

<body <?php body_class(); ?>> <!-- Открывающий тэг body -->
<?php 
if ( function_exists( 'wp_body_open' ) ) { // Проверка существования функции, она не существует до версии 5.2
    wp_body_open();
} else {
    do_action( 'wp_body_open' ); // Вызываем как событие если нет функции
}

Если вы всё же хотите использовать wp_body_open как функции вы можете прописать в файле functions.php код:

if ( ! function_exists( 'wp_body_open' ) ) {
    function wp_body_open() {
        do_action( 'wp_body_open' );
    }
}

Тогда в body это будет выглядеть так

<body <?php body_class(); ?>> <!-- Открывающий тэг body -->
<?php 
wp_body_open();

Как использовать

Объявляем в functions.php обработчик события и вперёд.

add_action( 'wp_body_open', 'xakpl_body_open_func', 10 );
function xakpl_body_open_func(){
	// Печатаем произвольных код
	?>
	<script>alert('Привет');</script>
	<?php
}

На том месте где я написал скрипт вы можете (должны) написать код для GTM. С версии 5.2 это единственный верный способ.

Полное описание подключения GTM

  1. Создаёте js-файл с тем кодом, который GTM говорит разместить в HEAD
  2. В functions.php пишите код
wp_enqueue_script('gtm', get_template_directory_uri() . '/gtm.js', array(), null, false); // gtm.js -файл с тем кодом, в папке темы
  1. В там же пишем обработку wp_body_open() и вставляем туда то что gtm говорит поставить после тэга body
add_action( 'wp_body_open', 'xakpl_gtm_init', 10 );
function xakpl_gtm_init(){
	?>
	<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TL3asd3"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
	<?php
}

Вуаля. Вы мастер подключения скриптов в wp). Почти, но не совсем, если вы хотите более продвинуто уметь подключать скрипты в wp то можете прочитать мою статью «Правильное подключение JS и CSS в WordPress«

Примечание к wp_body_open

Функция позволяет вам напечатать любой произвольный html, однако разработчики не рекомендуют его использовать ни для чего кроме печати скриптов

Usage of this hook should be reserved for output of unseen elements like <script>tags or additional metadata. It should not be used to add arbitrary HTML content to a page that could break layouts or lead to unexpected situations.

William Earnhardt

Перевести это можно так: Использование этого хука должно быть зарезервировано для вывода невидимых элементов, таких как тэги <script> или дополнительных мета-данных. Его не следует использовать для добавления произвольного содержимого HTML на страницу т.к. оно может нарушить макеты или привести к неожиданным ситуациям.

P.S.

Как вы считаете эта функция полезна или только для гиков?!