Wp_head() - функция WordPress

Опубликовано: 01.09.2018

видео wp_head() - функция WordPress

WordPress Pluggable Functions

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

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

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


Хуки в WordPress и как ими пользоваться

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

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

Подключение 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' ) ;

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

rss