Як показати всі підключені JS та CSS-скрипти WordPress

Привіт:) Зазвичай у процесі доопрацювання теми або плагіну WordPress зручно виводити всі завантажені на сторінці JS- та CSS-скрипти. Покажу як це зробити.

Зміст

Для чого це потрібно
Додатково

У прикладі виведу всі ID JS-скриптів та CSS-стилів, викликаних у шапці та підвалі.

Для цього у файл functions.php додайте PHP-код

add_action( 'wp_head', function() {
    global $wp_scripts;
	global $wp_styles;

	echo '<pre>'; 
	print_r( $wp_scripts->done ); 
	echo '</pre>';

	echo '<pre>'; 
	print_r( $wp_styles->done ); 
	echo '</pre>';

}, 9999 );

add_action( 'wp_footer', function() {
    global $wp_scripts;
	global $wp_styles;

	echo '<pre>';
	print_r( $wp_scripts->done ); 
	echo '</pre>';

	echo '<pre>'; 
	print_r( $wp_styles->done ); 
	echo '</pre>';

}, 9999 );

У результаті в хедері або футері користувацької частини сайту виведеться вміст масиву ID скриптів/стилів:

Array
(
    [0] => wp-block-library
    [1] => ct-main-styles
    [2] => child-style
)

до змісту ↑

Для чого це потрібно

Такий спосіб корисний, коли потрібно:

зрозуміти, які саме ресурси підключаються вашою темою або плагінами;
перевірити, чи не дублюються однакові CSS або JS файли;
виявити скрипти, що вантажаться зайво або у невідповідному місці (наприклад, у <head> замість <footer>).

Це особливо актуально для оптимізації швидкості завантаження сайту. Ви можете побачити, які файли можна об’єднати, мінімізувати або перенести в кінець сторінки.

до змісту ↑

Додатково

Якщо потрібно вивести детальнішу інформацію, наприклад шлях до кожного файлу або залежності між скриптами, скористайтеся властивостями:

$wp_scripts->registered
$wp_styles->registered

У них зберігаються об’єкти, що містять URL файлу, залежності, версію тощо.

Також для зручності можна обгорнути результат у <pre> лише у режимі розробки (наприклад, коли увімкнено WP_DEBUG), щоб не виводити його на продакшн.