wp_head() — хук для подключения CSS, JS, jQuery и добавления мета-тегов

  1.2.0     wp-includes / general-template.php  /  Кодекс WordPress

Функция, а точнее хук WordPress do_action('wp_head'), используется для заполнения тега <head>, а в него, как вы знаете, можно затолкать вот что:

  • CSS,
  • JavaScript (в том числе jQuery),
  • какой-нибудь HTML-код, например мета-теги;

Возникает следующий вопрос — для чего собственно нужна эта функция, если я допустим могу открыть файл темы и вставить туда всё, что захочу вручную? Да, возможно у вас и получится это сделать, а вот плагины не могут редактировать файлы темы и движка — как раз для них и нужны все эти хуки.

Функцию wp_head() вы скорее всего найдёте в файле темы header.php, и она будет выглядеть следующим образом:

<?php wp_head() ?>

Сама по себе функция не имеет никаких параметров и ничего не возвращает.

Подключение CSS-стилей через wp_head()

Сразу хочу уточнить некоторые моменты относительно CSS — вы ведь знаете, что чем меньше общее количество подключенных на странице файлов стилей, тем меньше количество HTTP-запросов, а от них напрямую зависит скорость загрузки сайта. Так вот, перечисленные ниже способы подходят исключительно для написания плагинов, в остальных же случаях я рекомендую просто добавить ваши стили к основному файлу style.css, который находится в папке с текущей темой.

Способ 1. wp_enqueue_style()

Рассмотрим несложный пример. В нём мы подключим какой-нибудь произвольный файл стилей, находящийся в папке с темой, в поддиректории /css, где wp_head_style — что-то типо названия-идентификатора данного файла, можете назвать его как-нибудь по-своему.

И кстати, если вы не знаете, куда вставлять код из данного поста, то вставляйте в functions.php вашей текущей темы WordPress.

function css_to_wp_head() {
 	wp_enqueue_style( 'wp_head_style', get_stylesheet_directory_uri() . '/css/style-2.css', array(), null );
}
 
add_action( 'wp_enqueue_scripts', 'css_to_wp_head' );

Способ 2. Выводим стили непосредственно через HTML-тег <style>

По возможности советую использовать первый способ. Размещать стили непосредственно в HTML документе — не самая лучшая идея.

<?php
add_action("wp_head", "wp_head_css");
 
function wp_head_css() {
	?>
	<style>
		#widget_1{display:none;}
	</style>
	<?php
}

Аналогичным образом можно добавить и мета-теги, читайте подробнее чуть ниже.

Отключаем ненужные CSS из wp_head()

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

Так вот, допустим какой-то вредный плагин наподключал вам на сайт всяких CSS, которые вам не нужны. Или допустим они вам всё-таки нужны, но вы хотите объединить их содержимое в один файл style.css (ну как вариант). Как следует поступать в таких случаях?

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

Почему нельзя удалить найденный кусок кода прямо из плагина? Да потому что нам нельзя изменять содержимое файлов плагинов и движка — это не профессионально. К тому же такие тёмные дела обычно чреваты последствиями.

Итак, с идентификатором файла разобрались, что дальше? А дальше в ход идёт функция wp_dequeue_style(). В итоге в файл functions.php у нас идёт примерно следующий код:

function remove_css_from_wp_head() {
	wp_dequeue_style( 'тут_идентификатор_отключаемого_файла' );
}
 
add_action( 'wp_enqueue_scripts', 'remove_css_from_wp_head', 9999 ); // параметр 9999 можно опустить, это чтобы наверняка

Подключение JavaScript через wp_head()

Способ 1. wp_enqueue_script()

Всё примерно так же, как и со стилями. С одним единственным «НО», о котором следует помнить — скрипты лучше помещать в самый конец сайта, перед закрывающим тегом </body>. О том, как это сделать, вы можете почитать в документации к функции wp_enqueue_script().

function js_to_wp_head() {
 	wp_enqueue_script( 'wp_head_js', get_stylesheet_directory_uri() . '/js/script.js', array(), null );
}
 
add_action( 'wp_enqueue_scripts', 'js_to_wp_head' );

Способ 2. Выводим скрипты непосредственно через HTML-тег <script>

<?php
add_action("wp_head", "wp_head_js");
 
function wp_head_js() {
	?>
	<script>
		var totalWidth = 500;
	</script>
	<?php
}

jQuery в wp_head(). Конфликты.

Прежде чем читать этот пункт, хочу обратить ваше внимание, что очень часто то, из-за чего отказываются работать некоторые jQuery-эффекты — это несовместимость версий.

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

Подключение jQuery-версии по умолчанию

В WordPress уже зарегистрирован файл jQuery, он идёт вместе с движком (его версия меняется по ходу появления новых версий самого WordPress). Чтобы подключить стандартную версию файла, используем этот код:

function jquery_to_wp_head() {
 	wp_enqueue_script( 'jquery' );
}
 
add_action( 'wp_enqueue_scripts', 'jquery_to_wp_head' );

Изменение подключаемой версии jQuery

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

После этого нам помогут функции wp_deregister_script() и wp_register_script():

function jquery_another_version() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/jquery-1.3.2.js', array(), '1.3.2' );
}
 
add_action( 'wp_enqueue_scripts', 'jquery_another_version' );

Переносим jQuery из wp_head() в wp_footer()

Вообще я сторонник того, чтобы все скрипты находились не в шапке сайта, а в футере, где-нибудь перед закрывающим тегом </body>. Конечно, если без JavaScript ваш сайт отображается ужасно или не отображается вообще, тогда целесообразнее задействовать скрипты прямо перед загрузкой страницы, во всех остальных случаях — пусть находятся в футере.

Итак, переносим jQuery и все зависимые от него скрипты в футер:

function jquery_in_footer() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true );
}
 
add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );

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

Функции wp_enqueue_style(), wp_enqueue_script(), wp_register_style() и wp_register_script() также позволяют установить порядок подключения стилей и скриптов. В плане стилей это обычно не так важно, но в плане скриптов всё очень серьёзно. Например у нас есть файл jquery.js и какой-то плагин jquery.fancybox.js (к примеру). Ну так вот, jquery.fancybox.js должен обязательно подключаться после jquery.js, иначе ничерта работать не будет.

Как же установить приоритет? Легко — для этого нам понадобится третий параметр указанных выше функций. В данном параметре нам в виде массива нужно передать все названия-идентификаторы файлов, от которых зависит подключаемый файл. Рассмотрим на примере того же самого jquery.fancybox.js. Итак:

function jquery_fancybox() {
	wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/jquery.fancybox.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'jquery_fancybox' );

Более подробно — в документации вышеуказанных функций (всё это есть на моём блоге — просто перейдите по соответствующим ссылкам).

Мета-теги в wp_head()

Вы можете использовать wp_head() для добавления собственных мета-тегов. В примере я вывел тег description, значение которого я взял из произвольного поля поста (а вы например можете взять в качестве его значения первое предложения поста или содержимое поля «Цитата»).

<?php
add_action("wp_head", "wp_head_meta_description", 1);
 
function wp_head_meta_description() {
	global $post;
	if( is_single() ) {
		echo "<meta name=\"description\" value=\"" . esc_attr( get_post_meta( $post->ID, 'seo_description', true ) ) ."\" />\n\r";
	}
}

Удаление некоторых стандартных тегов из wp_head()

RSD

Этот тег выглядит следующим образом <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ваш-сайт.ru/xmlrpc.php?rsd" /> Если вы публикуете\редактируете свои посты только через админку и не используете для этих целей какие-либо сервисы или клиенты (например приложения для iPhone или iPad), то можете удалить этот тег:

remove_action( 'wp_head', 'rsd_link' );

wlwmanifest

Вот такой тег: <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ваш-сайт.ru/wp-includes/wlwmanifest.xml" /> . Используется клиентом Windows Live Writer. Если не юзаете — удаляйте:

remove_action( 'wp_head', 'wlwmanifest_link' );

generator

Содержит текущую используемую версию WordPress: <meta name="generator" content="WordPress 3.5.1" />. Рекомендую к удалению.

remove_action( 'wp_head', 'wp_generator' );

Это не единственное место, где отображается версия движка. Если хотите полностью скрыть её, читайте этот пост.

Кодекс WordPress: Хуки: add_filter(), apply_filters(), do_action(), remove_action(), remove_all_actions(), remove_all_filters(), remove_filter(), wp_footer(), wp_head()

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Комментарии — 56

Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.

Миша Рудрастых и WordPress

Полезности из мира WordPress и жизни студии.

Мой телеграм-канал