wp_head │ хук-подія │ WP 1.5.0

Подія спрацьовує у частині сторінки. У момент цієї події зазвичай підключаються скрипти (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.

Використання

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 файлу.

• Приклади
  
  
  
• Підключення CSS та JS файлів через wp_head
  
  
  
• Пріоритети підключення js, css файлів
  
  
  
• Видалення функцій WP з wp_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>";
}

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">';

}

Додати свій приклад

Підключення CSS та JS файлів через wp_head

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

Справа в тому, що ці функції додають зазначені файли на висновок, а потім ці файли виводяться автоматично в момент хука wp_head . Їх виводять прикріплені до wp_head функції ядра: 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_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)!