Как отключить CSS и JavaScript, добавленные плагинами

31.05.2019 Оставте коментарий 3,346 Просмотров

Одна из самых неприятных вещей во Вселенной WordPress-это плагины и темы, которые условно не загружают свои скрипты и стили (т. е. файлы JavaScript и CSS). Например, вы устанавливаете плагин панели мониторинга, и он загружает свои скрипты во всю административную область и интерфейс. Вместо этого разработчик должен был использовать условную логику, чтобы не загружать скрипт на интерфейсе (например, via!is_admin()) или где-либо в административной области, кроме панели управления (например, viaget_current_screen()). Это просто элементарная человеческая порядочность.

К сожалению, многие плагины терпят неудачу, когда дело доходит до условной загрузки активов. Они просто выплевывают JavaScripts и CSS-файлы повсюду, на каждой странице сайта. И это расстраивает моих друзей. Особенно, когда производительность имеет значение, и вы пытаетесь оптимизировать загрузку скрипта и стиля.

К счастью, WordPress позволяет легко отключить любые нежелательные скрипты или стили. Итак, давайте положим конец глупости и отключим любые нежелательные файлы CSS и JavaScript. Этот учебник объясняет, как сделать это в два этапа.

Шаг 1: Получить идентификатор

Первое, что нам нужно, это конкретный идентификатор сценария или стиля, который мы хотим отключить. Существует множество способов получения этой информации, от самых простых до самых трудоемких:

Проверьте <script>или <style>тег
Используйте функцию скрипта / стиля-инспектора, как показано ниже
Найдите исходный код, ответственный за добавление скрипта
Образованная догадка тогда спросите

Теоретически, вы можете просто просмотреть список, пока не найдете идентификатор. На практике, однако, поиск идентификаторов сценариев / стилей-это скорее форма искусства, проб и ошибок, пока она не будет работать. Поэтому в основном просто используйте этот список в качестве руководства и попробуйте каждую технику, пока не получите желаемый идентификатор. Это критический шаг для любого сценария или стиля, который требуется отключить. Давайте на минутку рассмотрим каждую технику..

Проверьте скрипт или тег стиля

Самый простой способ получить идентификатор-просто изучить <script><style>тег or в разметке веб-страницы. Например, допустим, мы хотим отключить стили плагинов EDD. Глядя на исходный код одной из наших страниц, мы находим теги стиля, выводимые в <head>разделе:

<link rel='stylesheet' id='media-styles-css'   href='https://example.com/wp/wp-content/themes/example/lib/css/media.css' type='text/css' media='all' />
<link rel='stylesheet' id='default_styles-css' href='https://example.com/wp/wp-content/themes/example/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='edd-styles-css'     href='https://example.com/wp/wp-content/themes/example/lib/css/edd.css' type='text/css' media='all' />

Здесь у нас есть три тега стиля, Каждый из которых загружает отдельный CSS-файл. Ключевым моментом здесь являются idатрибуты. У нас есть следующие значения ID:

media-styles-css
default_styles-css
edd-styles-css

Кажется простым, не так ли? Неправильный. Если вы попытаетесь использовать эти идентификаторы для отключения или отмены связанных стилей, это не сработает. Почему? Потому что эти значения не являются фактическими идентификаторами стиля. Нет. WordPress добавляет -css(«dash css») к фактическим значениям идентификатора. Применяя этот эзотерический бит знаний, наш список идентификаторов стилей теперь выглядит так:

media-styles
default_styles
edd-styles

Итак, теперь у нас есть правильный идентификатор для нежелательной таблицы стилей EDD edd-styles. Давайте вспомним, что значение, как мы будем использовать его в шаге 2.

Использование скрипта / функции инспектора стилей.

Предыдущий метод получения идентификатора является самым простым. Но проблема в том, что WordPress не включает idатрибут в <script>теги. Таким образом, чтобы получить идентификатор любых нежелательных скриптов, мы можем использовать простую функцию «script-inspector», такую как это небольшое число по-вашему:

/*
	Get Script and Style IDs
	Adds inline comment to your frontend pages
	View source code near the <head> section
	Lists only properly registered scripts
	@ https://digwp.com/2018/08/disable-script-style-added-plugins/
*/
function shapeSpace_inspect_script_style() {
	
	global $wp_scripts, $wp_styles;
	
	echo "\n" .'<!--'. "\n\n";
	
	echo 'SCRIPT IDs:'. "\n";
	
	foreach($wp_scripts->queue as $handle) echo $handle . "\n";
	
	echo "\n" .'STYLE IDs:'. "\n";
	
	foreach($wp_styles->queue as $handle) echo $handle . "\n";
	
	echo "\n" .'-->'. "\n\n";
	
}
add_action('wp_print_scripts', 'shapeSpace_inspect_script_style');

Как это работает? Просто добавьте в файл темыfunctions.php, загрузите и обновите страницу. Никаких изменений не требуется, если вы не хотите, чтобы оживить его. Как есть, функция отобразит список всех правильно зарегистрированных скриптов и идентификаторов стилей. Поэтому в вашей разметке в <head>разделе ищите что-то вроде этого:

<!--

SCRIPT IDs:
jquery
jquery-migrate
edd-checkout-global
edd-ajax

STYLE IDs:
media-styles
default_styles
edd-styles

—>

И это фактические идентификаторы, ничего не добавлено или что-то странное. Поэтому, надеюсь, здесь указан нежелательный скрипт или стиль, поэтому вы можете получить идентификатор с помощью этого метода, а затем перейти к Шагу 2.

Найдите исходный код, ответственный за добавление скрипта.

Если ни один из предыдущих методов не работает, эффективным способом получить идентификатор является grep через фактический исходный код плагина. Есть много стратегий для поиска через файлы плагинов и код, так что используйте свой поиск skillz и приступить к работе. Совет: поиск имени файла и пути к нему, и / или только имени файла, должен дать некоторые результаты.

Еще одна хорошая стратегия-поиск имен функций WordPress, которые могут быть использованы для добавления нежелательного скрипта или стиля. Например, поискwp_enqueue_script(),wp_register_script(), и друзей.

Образованная догадка тогда спросите.

Если все остальное не удается, угадайте. Посмотрите на фактическое имя файла, которое вы хотите исключить. Например, если у вас есть это:

<script type='text/javascript' src='https://example.com/wp/wp-content/plugins/amazing-plugin
/assets/js/amazing-plugin.min.js?ver=1.2.3'></script>
 Существует довольно хороший шанс, что правильный идентификатор будет amazing-pluginили что-то подобное. Если нет, и / или если все остальное не удается: cпросите разработчика  Конечно, разработчик сможет предоставить правильные идентификаторы сценариев и стилей.

Шаг 2: сценарий или стиль отмены очереди

Если у вас есть правильный идентификатор, фактически отключить скрипт или стиль просто. Идя с примером EDD, идентификатор нежелательной таблицы edd-stylesстилей . Поэтому, чтобы отключить, мы можем добавить следующее в functions.phpфайл нашей темы:

// disable stylesheet (example)

function shapeSpace_disable_scripts_styles() {

wp_dequeue_style(‘edd-styles’);

}

add_action(‘wp_enqueue_scripts’, ‘shapeSpace_disable_scripts_styles’, 100);

Выполнено. При наличии этого кода таблица стилей EDD не будет загружаться ни на какую страницу внешнего интерфейса. Мы знаем, что это интерфейс только из-за конкретного крючка действий, который мы используем, wp_enqueue_scripts . Если мы хотим отключить таблицы стилей в области администратора, мы вместо этого будем использовать admin_enqueue_scripts .Единственным секретом здесь является функция WordPress, используемая для отключения таблицы стилей wp_dequeue_style (). Если мы хотим отключить добавление файла JavaScript, мы вместо этого будем использовать wp_dequeue_script() . Нажмите эти ссылки для более подробной информации о любой из этих превосходных функций.

Образцы

Теперь, когда мы понимаем, как все работает, вот мой растущий сбор реальных примеров отключения CSS и JavaScript, добавленных плагинами.

Отключить скрипт и стиль на интерфейсе.

В моем последнем редизайне сайта я удалил кучу плагинов и скриптов, которые больше не были нужны. После очистки моих плагинов мне больше не нужно было явно отключать файлы CSS или JavaScript. Таким образом, я смог удалить следующую функцию:

function shapeSpace_disable_scripts_styles() {
	
	// easy digital downloads
	if (!is_page('checkout') && !is_page('purchase-confirmation') && !is_page('purchase-history') && !is_page('transaction-failed')) {
		
		wp_dequeue_script('edd-ajax');
		wp_dequeue_script('edd-password-meter-passfield-locales');
		wp_dequeue_script('edd-password-meter-passfield');
		wp_dequeue_script('edd-password-meter');
		
		wp_dequeue_style('edd-sl-styles');
		wp_dequeue_style('edd-password-meter-passfield');
		wp_dequeue_style('edd-password-meter');
		
	}
	
	// super stripe plugin
	if (!is_page('direct') && !is_page('custom') && !is_page('cancel') && !is_page('success')) {
		
		wp_dequeue_script('supstr-aweber-js');
		wp_dequeue_script('supstr-shortcode-js');
		wp_dequeue_script('supstr-validate-js');
		
	}
	
	// search everything
	wp_dequeue_style('se-link-styles');
	remove_action('wp_head', 'se_global_head');
	
	
	// yet another related posts plugin
	wp_dequeue_style('yarppWidgetCss');
	
}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100); 

Эта функция отключает различные скрипты и стили, добавленные с помощью EDD, Super Stripe, Search Everything и YARPP. Мне было очень приятно убирать весь этот беспорядок. В качестве бонуса, обратите внимание на использованиеremove_action(), чтобы удалить ненужный Поиск все вещи из <head>раздела.

Отключить скрипт и стиль в админке.

Далее, вот функция, которая отключает некоторый стиль плагина в области администратора:

function shapeSpace_disable_scripts_styles_admin_area() {

wp_dequeue_style(‘jquery-ui-css’);

}

add_action(‘admin_enqueue_scripts’, ‘shapeSpace_disable_scripts_styles_admin_area’, 100);

Как объяснялось ранее, ключ к таргетингу на область администратора использует admin_enqueue_scriptsкрючок.

Отключить сценарий и стиль в другом месте.

И последнее, но не менее важное: вот два примера, которые демонстрируют важный момент. Не все функции регистрируют и ставят в очередь файлы CSS и JavaScript в соответствии с рекомендациями. И в этих случаях ранее прописанные методы могут не сработать. Поэтому иногда нам приходится проявлять творческий подход с использованием альтернативных методов и крючков. Вот хороший пример:

// via the wp_print_styles hook

function shapeSpace_disable_download_manager_styles() {

wp_deregister_style(‘dlm-frontend’);

}

add_action(‘wp_print_styles’, ‘shapeSpace_disable_download_manager_styles’, 100);

По какой-то причине единственный способ отключить таблицу стилей этого конкретного плагина-использовать wp_deregister_style()hooked into wp_print_styles. Что бы это ни работало. Чтобы быть справедливым, у меня не было много времени, чтобы возиться с нежелательными стилями плагинов, поэтому может быть какое-то рациональное объяснение.

А второй пример еще более необычен. Наблюдать:

// had to use the get_footer hook!!!

function shapeSpace_disable_yarpp_styles() {

wp_dequeue_style(‘yarppRelatedCss’);

}

add_action(‘get_footer’, ‘shapeSpace_disable_yarpp_styles’);

Обратите внимание на крюк, используемый здесь:get_footer!!! Чтооо.? Действительно странно, но это было единственное, что будет работать, чтобы отключить нежелательные стили YARRP. Не уверен, что я рекомендовал бы этот метод на любом другом живом сайте, просто потому, что он чувствует себя странно wp_dequeue_style()с помощью get_footerкрючка.

Это все на данный момент, Спасибо за посещение 🙂

ZZIZZ.SU Блог- ДмитрияН