WordPress как на ладони
wordpress jino

wp_head хук-событие . WP 1.5.0

Событие срабатывает в <head> части страницы. В момент этого события обычно подключаются скрипты (jquery и другие), стили (css сайта) и разные SEO мета-теги страницы (title, description, robots). Это один из основных хуков темы (шаблона) WordPress.

Это событие вызывается одноименной функцией wp_head(), которая в свою очередь вызывается в файле темы header.php перед тегом </head>.

Вызов функции wp_head() обязателен для всех тем (шаблонов) WordPress. Делается так:

    ...
	<?php wp_head(); ?>
</head>

В момент этого события срабатывает очень много «родных» функций WordPress. Например, одна из таких функций добавляет подключенные через wp_enqueue_style() стили.

Это событие активно используется самим WordPress и многими плагинами, например SEO плагинами. Поэтому это очень важное событие.

Этот хук предназначен в первую очередь для разработчиков тем. Они обязаны добавлять функцию wp_head() в создаваемую тему. Чтобы плагины могли подключаться к хуку и добавлять данные в заголовки HTML.

Есть еще одно аналогичное событие - wp_footer - но оно вызывается функцией wp_footer() в подвале шаблона - файле footer.php.

Использование

add_action( 'wp_head', 'action_function_name_11' );
function action_function_name_11(){
	// action...
}

Хук не передает никаких параметров и, как и любое событие, используется, чтобы в нужный момент запустить PHP функцию, которая выведет на экран нужный HTML код. Например, код подключения js или css файла.

Оглавление:

Примеры

#1 Выведем произвольные CSS стили и JS скрипт в head

Это демонстрация того как можно вывести HTML код в HEAD документа:

## CSS в head документа
add_action('wp_head', 'hook_css');
function hook_css(){
	echo '<style>.wp_head_example{ background-color : #f1f1f1; } </style>';
}

## JS в head документа
add_action('wp_head','hook_javascript');
function hook_javascript() {
	echo "<script> alert('Page is loading...'); </script>";
}

#2 Выведем SEO мета-теги страницы

Для поисковых роботов есть 3 метатега: description keywords и robots. Для примера, выведем все три.

add_action( 'wp_head', 'head_seo_meta_tags' );
function head_seo_meta_tags(){
	// description
	echo '<meta name="description" content="В статье описывается как динамически подключить ..." />';

	// keywords
	echo '<meta name="keywords" content="Код, Теория WordPress, jQuery, Оптимизация" />';

	// robots
	echo '<meta name="robots" content="index,nofollow" />';

	// для мобильников.
	echo '<meta name="viewport" content="width=device-width, initial-scale=1">';

}

Подробнее про метатеги и легкой замены SEO плагинам, я писал в этой статье.

Подключение CSS и JS файлов через wp_head

Стили и скрипты подключаются в HEAD не через хук wp_head, а через соответствующие функции: wp_enqueue_style() и wp_enqueue_script().

Дело в том, что эти функции добавляют указанные файлы на вывод, а затем эти файлы выводятся автоматически в момент хука wp_head. Их выводят прикрепленные к wp_head функции ядра: wp_print_styles() и wp_print_head_scripts(). Так они подключаются в WP:

add_action( 'wp_head',             'wp_enqueue_scripts',               1    );
add_action( 'wp_head',             'wp_print_styles',                  8    );
add_action( 'wp_head',             'wp_print_head_scripts',            9    );

Таким образом, чтобы подключить css или js файл к хуку wp_head, можно и почти всегда нужно, использовать специальные функции wp_enqueue_style() - для стилей и wp_enqueue_script() - для скриптов.

Примеры подключения стилей в wp_head

add_action('wp_enqueue_scripts', 'my_wp_head_css' ); // хук автоматом сработает во время wp_head
function my_wp_head_css() {
	wp_enqueue_style( 'my_head_style', get_stylesheet_directory_uri() .'/css/my_style.css', array(), null );
}

Такая запись будет равносильна записи:

<?php
add_action('wp_head', 'my_wp_head_css', 1 );
function my_wp_head_css(){
	?>
	<link rel='stylesheet' id='theme_my_head_style'  href='<?php echo get_stylesheet_directory_uri() ?>/css/my_style.css' type='text/css' media='all' />
	<?php
}

Но использовать лучше wp_enqueue_style(), потому что это стандарт и например в плагинах которые собираются стили в один файл второй вариант может не работать...

Иногда удобнее вывести в документ сами стили - без подключения файла:

<?php
add_action('wp_head', 'my_wp_head_css');
function my_wp_head_css() {
	?>
	<style>
		.selector{ display:none; }
	</style>
	<?php
}

Примеры подключения скриптов в wp_head

Со скриптами все делается точно как со стилями...

add_action('wp_enqueue_scripts', 'my_wp_head_js' ); // хук автоматом сработает во время wp_head
function my_wp_head_js() {
	wp_enqueue_script( 'my_head_js', get_stylesheet_directory_uri() .'/js/my_script.js', array(), null );
}


Это равносильно записи:

<?php
add_action('wp_head', 'my_wp_head_js', 1 );
function my_wp_head_js(){
	?>
	<script type='text/javascript' src='<?php echo get_stylesheet_directory_uri() ?>/js/my_script.js'></script>
	<?php
}

Скрипт в коде, без подключения файла:

<?php
add_action('wp_head', 'my_wp_head_js');
function my_wp_head_js() {
	?>
	<script>
		var my_var = 'значение переменной';
		console.log('скрипт работает!');
	</script>
	<?php
}

Приоритеты подключения js, css файлов

Для скриптов, в отличии от стилей, очень важно какой код идет до, а какой после. Поэтому важен порядок подключения фалов. Например, если выполнять jQuery код до того, как подключена библиотека jQuery, то код вызовет ошибку, потому что библиотеки нет, а мы её используем. Т.е. очень важно, чтобы файл с jQuery кодом подключался после файла самой библиотеки jQuery.

Приоритет через спец. функции WordPress

При подключении файлов через одну из функций: wp_enqueue_style(), wp_enqueue_script(), wp_register_style() и wp_register_script(), приоритет можно указать в третьем параметр $deps. Там нужно указать название скрипта от которого зависит подключаемый скрипт, тогда скрипт будет подключаться после скрипта от которого он зависит. Например:

add_action( 'wp_enqueue_scripts', 'my_jquery_js' );
function my_jquery_js(){
	// произвольный скрипт который работает на базе jquery 
	wp_enqueue_script( 'my_jquery', get_stylesheet_directory_uri() . '/my_jquery.js', array('jquery') );

	// jQuery - он уже зарегистрирован в WP поэтому его просто подключаем по названию
	wp_enqueue_script('jquery');

	// Можно еще раз вызвать эту функцию, например в другом файле, при этом
	// скрипт будет подключен всего один раз.
	// Это еще раз показывает, почему удобно использовать специальные функции
	// для подключения скриптов.
	wp_enqueue_script('jquery');

}

Здесь, сначала подключается произвольный скрипт my_jquery.js с указанием зависимости от jQuery, а затем сам jQuery. Но по факту, в HTML коде скрипты подключатся в порядке: jquery, потом my_jquery.js. Так происходит из-за указанной зависимости...

Приоритет через хук wp_head

Если подключается не файл, а код и нужно учесть приоритет подключения, то его можно указать в третьем параметр add_action(). Смотрим на примере:

<?php
// вывод JS переменной
add_action('wp_head', 'my_wp_head_js2', 20);
function my_wp_head_js2() {
	?>
	<style>
		alert( my_var );
	</style>
	<?php
}

// Регистрация JS переменной
add_action('wp_head', 'my_wp_head_js', 10);
function my_wp_head_js() {
	?>
	<script>
		var my_var = 'Переменная, которая определена';
	</script>
	<?php
}

Тут, первому коду указан приоритет 20, а второму 10. В результате в HTML коде коды будут выведены в обратном порядке: по приоритетам - от меньшего к большему - 10, затем 20. Таким образом получится, что мы сначала зарегистрировали переменную, а затем вывели её через alert();

Удаление функций WP из wp_head

WordPress по умолчанию подключает кучу функций к хуку wp_head. Большая часть подключаемых к хуков находятся в файле ядра wp-includes/default-filters.php:

add_action( 'wp_head',             '_wp_render_title_tag',            1     );
add_action( 'wp_head',             'wp_enqueue_scripts',              1     );
add_action( 'wp_head',             'wp_resource_hints',               2     );
add_action( 'wp_head',             'feed_links',                      2     );
add_action( 'wp_head',             'feed_links_extra',                3     );
add_action( 'wp_head',             'rsd_link'                               );
add_action( 'wp_head',             'wlwmanifest_link'                       );
add_action( 'wp_head',             'adjacent_posts_rel_link_wp_head', 10, 0 );
add_action( 'wp_head',             'locale_stylesheet'                      );
add_action( 'wp_head',             'noindex',                          1    );
add_action( 'wp_head',             'print_emoji_detection_script',     7    );
add_action( 'wp_head',             'wp_print_styles',                  8    );
add_action( 'wp_head',             'wp_print_head_scripts',            9    );
add_action( 'wp_head',             'wp_generator'                           );
add_action( 'wp_head',             'rel_canonical'                          );
add_action( 'wp_head',             'wp_shortlink_wp_head',            10, 0 );
add_action( 'wp_head',             'wp_site_icon',                    99    );

Чтобы удалить подключенный хук, используйте функцию remove_action() с нужным приоритетом, в плагине или файле темы functions.php.

Например, удалим ссылки на фиды:

remove_action( 'wp_head',             'feed_links',                      2     );
Готовый код для удаления лишнего с head
// Удаляем лишнее с head части сайта
// 2.0
remove_action( 'wp_head', 'feed_links_extra', 3 ); // ссылки доп. фидов (на рубрики)
remove_action( 'wp_head', 'feed_links',       2 ); // ссылки фидов (основные фиды)
// <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://site.ru/xmlrpc.php?rsd" /> для публикации статей через сторонние сервисы
remove_action( 'wp_head', 'rsd_link'            ); 
// <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://site.ru/wp-includes/wlwmanifest.xml" /> . Используется клиентом Windows Live Writer. 
remove_action( 'wp_head', 'wlwmanifest_link'    ); 
//remove_action( 'wp_head', 'index_rel_link'      ); // не поддерживается с версии 3.3

add_filter('the_generator', '__return_empty_string'); // Убираем версию WordPress

// 3.0
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10 ); // Ссылки на соседние статьи (<link rel='next'... <link rel='prev'...)
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10 );// Короткая ссылка - без ЧПУ <link rel='shortlink'

// 4.6
remove_action( 'wp_head', 'wp_resource_hints', 2); // Prints resource hints to browsers for pre-fetching, pre-rendering and pre-connecting to web sites.

Удаление стилей и скриптов плагинов

Отключение скриптов плагина

Скрипты или стили плагинов могут мешать нормальной работает вашей темы или другого плагина. Например, у нас есть плагины "А" и "Б". Скрипты плагина "А" мешают нормальной работе плагина "Б". Для исправления нужно убрать подключение скрипта плагина "А" и подключить его в подвале, в самом конце.

Чтобы отключить скрипт плагина, его можно убрать из очереди на вывод функцией wp_dequeue_style(). Но для этого нужно знать ID скрипта. Чтобы узнать ID откроем код плагина и найдем скрипт подключаемый через: wp_enqueue_script('ID') или wp_register_script('ID'). Первый параметр в этой функции - это ID скрипта. Отключаем скрипт добавлением такого кода в functions.php темы.

add_action('wp_head', function(){  wp_dequeue_script( 'ID' );  }, 5 ); // приоритет важен (от 2 до 7)!

Затем отключенный файл скрипта можно подключить самостоятельно там где нужно и как нужно...

Отключение CSS стилей плагина

Найти ID подключаемого файла стилей проще. Для этого открываем HTML код страницы и находим строку, где файл стилей подключается, и смотрим ID в атрибуте id:

<!-- ID = dashicons -->
<link rel='stylesheet' id='dashicons-css'  href='http://site.ru/wp-includes/css/dashicons.min.css?ver=4.6.1' type='text/css' media='all' />

<!-- ID = admin-bar -->
<link rel='stylesheet' id='admin-bar-css'  href='http://site.ru/wp-includes/css/admin-bar.min.css?ver=4.6.1' type='text/css' media='all' />

Отключаем аналогично, только используем wp_dequeue_style():

add_action('wp_head', function(){  wp_dequeue_style( 'ID' );  }, 5 ); // приоритет важен (от 2 до 7)!

Связи хука

Используется в: wp_head()

Фрагменты кода хука wp_head

Фрагмент из: wp-includes/general-template.php WP 4.8.2
...
}

/**
 * Fire the wp_head action.
 *
 * See {@see 'wp_head'}.
 *
 * @since 1.2.0
 */
function wp_head() {
	/**
	 * Prints scripts or data in the head tag on the front end.
	 *
	 * @since 1.5.0
	 */
	do_action( 'wp_head' );
}

/**
 * Fire the wp_footer action.
 *
 * See {@see 'wp_footer'}.
 *
 * @since 1.5.1
 */
function wp_footer() {
	/**
	 * Prints scripts or data before the closing body tag on the front end.
	 *
	 * @since 1.5.1
	 */
...
wp_head 15 комментариев
Полезные 1 Все
  • campusboy1848 cайт: wp-plus.ru

    Ещё парочка примеров, полезных для СЕО:

    // При присутствии в URL GET-параметра "p" добавить мета-тег неиндексирования в секцию <head>...</head>
    function meta_noindex_my_pages(){
      if( isset($_GET['p']) ){
    	echo '<meta name="robots" content="noindex,nofollow" />';
      }  
    }
    add_action( 'wp_head', 'meta_noindex_my_pages' );
    
    // При присутствии в URL любого GET-параметра добавить мета-тег неиндексирования в секцию <head>...</head>
    function meta_noindex_my_pages(){
      if( ! empty($_GET) ){
    	echo '<meta name="robots" content="noindex,nofollow" />';
      }  
    }
    add_action( 'wp_head', 'meta_noindex_my_pages' );
  • У вас тут не ошибочка?

    </head>
    <?php wp_head(); ?>
    1
  • Сергей @

    Подскажите,
    wp_enqueue_style() и wp_enqueue_script().
    в каком файле подключаются?
    Файла wp_head не нашел.

    • campusboy1848 cайт: wp-plus.ru

      Они могут подключаться в разных файлах, в зависимости от задумки разработчика темы/плагина. Обычно это делается в файле темы functions.php.

      1
  • Сергей @

    Подскажите, вношу такую запись:

    add_action('wp_enqueue_style', 'export_css' ); // хук автоматом сработает во время wp_head
    function export_css() {
    	wp_enqueue_style( 'export_css', get_stylesheet_directory_uri() .'http://www.tourtrans.ru/css/export.css', array(), null );
    }
    

    Получаю в коде

    Все, что в средних скобках, подсвечивается как простой текст. Что я не так делаю?

    • campusboy1848 cайт: wp-plus.ru
      add_action('wp_enqueue_style', 'export_css' );
      function export_css() {
        wp_enqueue_style( 'export_css', 'http://www.tourtrans.ru/css/export.css', array(), null );
      }
      1
      • campusboy1848 cайт: wp-plus.ru

        Замечу, что так делать не желательно. Файлы стилей и скриптов желательно хранить в папке с темой! И подключать так:

        add_action('wp_enqueue_style', 'export_css' );
        function export_css() {
        	wp_enqueue_style( 'export_css', get_stylesheet_directory_uri() .'/css/export.css', array(), null );
        }

        Где css - это папка в папке с темой, а внутри уже export.css. Ну и разные варианты отсюда пляшут. Если же хочется хранить стили так, как они сейчас, то лучше сделать в данный вариант переписать так:

        add_action('wp_enqueue_style', 'export_css' );
        function export_css() {
        	wp_enqueue_style( 'export_css', home_url() .'/css/export.css', array(), null );
        }

        Функция home_url будет возвращать адрес главной страницы, это удобно - смените домен и всё автоматом измениться как надо.

        1
        • Сергей @

          Дело в том, что это не мои стили, они должны подгружаться с сайта поставщика модуля, также как и скрипт.

          • campusboy1848 cайт: wp-plus.ru

            Я не пойму, что Вы там не так делаете. Я обычно делаю так:

            // Правильно подключаем JS и CSS
            function my_scripts_and_css() {
            	$url = get_stylesheet_directory_uri();
            
            	# Подключение CSS со сторонних сайтов
            	wp_enqueue_style( 'roboto', '//fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' );
            	wp_enqueue_style( 'slick', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css', array(), null, 'all' );
            
            	# Подключение CSS темы
            	wp_enqueue_style( 'main', $url . '/assets/css/main.css', array(), null, 'all' );
            	wp_enqueue_style( 'mobile', $url . '/assets/css/mobile.css', array(), null, 'all' );
            
            	# Подключение JS со сторонних сайтов
            	wp_enqueue_script('slick', '//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js',    array('jquery'), null, 0);
            
            	# Подключение JS темы
            	wp_enqueue_script('custom', get_template_directory_uri() . '/assets/js/custom.js',  array('jquery'), null, 0);
            }
            add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
            1
            • Сергей @

              Возможно, я не понимаю очевидных для Вас вещей, но php не знаю, потому и ищу совета.
              В файл functions вставляю такой код:

              function my_scripts_and_css() {
              $url = get_stylesheet_directory_uri();
              wp_enqueue_style( 'roboto', '//fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' );
              }

              Ничего не происходит.

              Если такой:

              add_action('wp_enqueue_style', 'export_css' );
              function export_css() {
              wp_enqueue_style( 'export_css', get_stylesheet_directory_uri() .'/css/export.css', array(), null );
              }

              Fatal error.

      • Сергей @

        Еще раз посмотрел - та строка, которую я приводил, выводится из-за попытки добавить css через стили темы, сейчас я ее удалил.

        Добавление кода в functions дочерней темы - ничего не меняется. Через functions основной - выдает ошибку.

        • Сергей @

          Не добавилось: получаю

          <style type="text/css"><link rel="stylesheet" type="text/css" href="http://www.tourtrans.ru/css/export.css"/></style>
  • Alex
    <style>
    		var my_var = 'Привет! Говорит переменная которая определена';
    	</style>

    Это новый метод регистрации переменой в js? laugh Ошибочка в теге однако...

    1
    Ответитьмесяц назад #

Здравствуйте, !

Ваш комментарий