wp_head
Событие срабатывает в <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', 'wp_kama_head_action' );
/**
* Function for `wp_head` action-hook.
*
* @return void
*/
function wp_kama_head_action(){
// 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://example.com/xmlrpc.php?rsd" /> для публикации статей через сторонние сервисы
remove_action( 'wp_head', 'rsd_link' );
// <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/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.
- Также вместе с этим можно удалить REST API
- И еще, можно удалить промежуточные размеры для картинок в контенте: Как отключить адаптивные размеры картинок (srcset) в WordPress 4.4.
Удаление стилей и скриптов плагинов
Отключение скриптов плагина
Скрипты или стили плагинов могут мешать нормальной работает вашей темы или другого плагина. Например, у нас есть плагины "А" и "Б". Скрипты плагина "А" мешают нормальной работе плагина "Б". Для исправления нужно убрать подключение скрипта плагина "А" и подключить его в подвале, в самом конце.
Чтобы отключить скрипт плагина, его можно убрать из очереди на вывод функцией 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://example.com/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://example.com/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)!Список изменений
| С версии 1.5.0 | Введена. |
Где вызывается хук
do_action( 'wp_head' );
Где используется хук в WordPress
add_action( 'wp_head', 'wpmu_activate_stylesheet' );
add_action( 'wp_head', 'wp_strict_cross_origin_referrer' );
add_action( 'wp_head', 'do_activate_header' );
remove_action( 'wp_head', $header_callback );
add_action( 'wp_head', '_block_template_viewport_meta_tag', 0 );
remove_action( 'wp_head', '_wp_render_title_tag', 1 ); // Remove conditional title tag rendering...
add_action( 'wp_head', '_block_template_render_title_tag', 1 ); // ...and make it unconditional.
add_action( 'wp_head', 'wp_admin_bar_header' );
add_action( 'wp_head', $header_callback );
add_action( 'wp_head', array( $this, 'customize_preview_loading_style' ) );
add_action( 'wp_head', array( $this, 'remove_frameless_preview_messenger_channel' ) );
add_action( 'wp_head', 'rest_output_link_wp_head', 10, 0 );
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', 'wp_preload_resources', 1 );
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', 'locale_stylesheet' );
add_action( 'wp_head', 'wp_robots', 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_custom_css_cb', 101 );
add_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_head', 'wp_post_preview_js', 1 );
add_action( 'wp_head', '_custom_logo_header_styles' );
add_action( 'wp_head', 'wp_maybe_inline_styles', 1 ); // Run for styles enqueued in <head>.
add_action( 'wp_head', 'wp_oembed_add_discovery_links' );
add_action( 'wp_head', 'wp_oembed_add_host_js' ); // Back-compat for sites disabling oEmbed host JS by removing action.
add_action( 'wp_head', 'wp_print_font_faces', 50 );
remove_action( 'wp_head', 'feed_links_extra', 3 ); // Just do this yourself in 3.0+.
remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
add_action( 'wp_head', $args[0]['wp-head-callback'] );
add_action( 'wp_head', $args[0]['wp-head-callback'] );
remove_action( 'wp_head', $support[0]['wp-head-callback'] );
remove_action( 'wp_head', $support[0]['wp-head-callback'] );
add_action( 'wp_head', array( $this, 'recent_comments_style' ) );
add_action( 'wp_head', 'do_signup_header' );
add_action( 'wp_head', 'wpmu_signup_stylesheet' );