Когда вы создаете тему, то вы добавляете css-стили, как из основного файла style.css, так и из других файлов (например, каких-либо сторонних плагинов). Когда вы уже написали тему, добавили сайт в Google Search Console и решили проверить скорость загрузки страниц в Google PageSpeed Insights, вдруг оказывается, что стилей у вас слишком много, часть из них не используется и при этом замедляет загрузку сайта. И вы стоите перед проблемой - а как же теперь убрать лишние стили? И тот же вопрос касается скриптов. И он является очень важным, потому что вопросам оптимизации сайта Google уделяет много внимания.
Функции для удаления стилей и скриптов
Для удаления стилей и/или скриптов, зарегистрированных в теме или в любых плагинах, можно использовать такие функции:
- wp_dequeue_style($handle)
- wp_deregister_style($handle) - отменяет регистрацию файла CSS-стилей. Функция может пригодится, когда нужна перерегистрация стилей, когда нужно изменить файл стилей, но оставить прежний идентификатор.
- wp_enqueue_scripts($handle) - отменяет подключение скрипта, который был добавлен в очередь ранее.
- wp_deregister_script($handle) - удаляет ранее зарегистрированный скрипт.
$handle - это идентификатор файла стилей, который нужно удалить из очереди на вывод. То есть это атрибут id, который указан в тегах link, style или script. Идентификатор устанавливается при регистрации стилей в функциях wp_register_style(),wp_enqueue_style() или wp_enqueue_script().
wp_enqueue_style() или wp_enqueue_script(). Если любая из функций вида wp_dequeue_... или wp_deregister_... будет вызвана до того, как отключаемый стиль или скрипт будет добавлен в очередь, то она работать не будет, а будет только зря будет потреблять ресурсы.Поэтому, чтобы использовать эти функции, нужно вызвать их, привязав вызов к одному из хуков:
wp_print_styleswp_print_scriptswp_enqueue_scriptswp_default_scriptsinit
Для того чтобы отключение произошло наверняка, можно указать более поздний приоритет для хука. Значение по умолчанию равно 10, поэтому для более позднего запуска нужно значение 11 и больше, например, 20 или 100. Это последний параметр в функции add_action():
| 1 2 3 4 5 | add_action( 'wp_enqueue_scripts', 'my_theme_dequeue_style', 20 ); function my_theme_dequeue_style(){ wp_dequeue_style( 'my_style' ); } |
Если вы удаляете какие-либо стили или скрипты для админ-панели, используйте такие хуки-события:
admin_enqueue_scripts,admin_print_scripts,admin_print_styles
Для страница входа нужноиспользовать хук login_enqueue_scripts.
Хук init, например, используется для отключения такого скрипта, как Heartbeat, что позволяет оптимизировать нагрузку на ЦП вашего веб-сервера.
Убираем стили блочного редактора Gutenberg
В том случае, если блочный редактор в WordPress вам пришелся не по душе, стоит не только подключить плагин Classic Editor, но и удалить ссылку на уже неиспользуемую его стилевую таблицу:
| 1 2 3 4 5 | add_action( 'wp_default_scripts', 'my_theme_deregister_styles' ); function my_theme_deregister_styles() { wp_dequeue_style( 'wp-block-library' ); } |
После этого из кода вашей страницы должна исчезнуть ссылка вида
| 1 | <link rel='stylesheet' id='wp-block-library-css' href='https://mysite.com/wp-includes/css/dist/block-library/style.min.css?ver=6.3' type='text/css' media='all' /> |
Обратите внимание на атрибут id в этой ссылке. Из текста id='wp-block-library-css' в качестве id для удаления скрипта мы берем только 'wp-block-library', без приставки "-css", т.к. ее добавляет сам WordPress.
Убираем inline-стили
Однако, это еще не все. Оказывается часть стилей добавляется в виде inline-кода. Поэтому в коде страницы вы встречаете примерно такой код:
| 1 2 3 4 5 6 7 8 9 10 11 | /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%); ... .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> |
Тут тоже важно обратить внимание на id для тега <style>. Например, id='global-styles-inline-css' содержит в конце такую же приставку '-css', как и в предыдущем примере. Однако убрать только ее из встроенного в <head> inline-стиля будет недостаточно. Нужно убирать приставку "-inline-css".
Код будет таким:
| 1 2 3 4 5 6 7 | add_action( 'wp_default_scripts', 'my_theme_deregister_styles' ); function my_theme_deregister_styles() { wp_dequeue_style( 'wp-block-library' ); //все стили редактора wp_dequeue_style( 'global-styles' ); wp_dequeue_style( 'classic-theme-styles' ); } |
Проверьте свой код - встроенные стили должны уйти.
Удаляем стили и скрипты ContactForm 7
Достаточно часто вы добавляете плагины, которые используются на 1-2 страницах, но свой css- и js-код добавляют на все страницы сайта. Например, у вас есть страница контактов, на которой используется форма из плагина ContactForm 7. Вы больше нигде не используете формы, однако плагин добавляет данные о скриптах и стилях на все страницы. Поэтому стоит удалить ссылки на css- и js-файлы отовсюду, кроме страницы контактов.
В коде ниже мы проверяем в функции is_page() слаг страницы контактов ('kontakty'), а для остальных страниц удаляем стили и скрипты.
| 1 2 3 4 5 6 7 | function my_theme_scripts() { if(!is_page( 'kontakty' )){ wp_deregister_style( 'contact-form-7' ); wp_deregister_script( 'contact-form-7' ); } } add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 100 ); |
Проверьте страницы - вы не найдете на них стилей и скриптов ContactForm 7.
Удаляем jQuery Migrate
В том случае, когда у вас есть код на jQuery, но он написан для современных версий, вы можете удалить файл jQuery Migrate,
| 1 2 3 4 5 6 7 8 9 | function my_theme_remove_jq_migrate( $scripts ) { if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) { $script = $scripts->registered['jquery']; if ( $script->deps ) { $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) ); } } } add_action( 'wp_default_scripts', 'my_theme_remove_jq_migrate' ); |
Обратите внимание, что мы вызываем функцию для отмены в хуке wp_default_scripts, как и для удаления стилей wp-block-library.
Доброго времени и благодарю за такой подробный материал!
Но у меня не получается удалить линки. Вставляю код в function.php своей темы, естественно везде заменяю (my_theme) на свою тему, результат ноль. Может быть есть мысли в чем причина?
Сложно, конечно, без просмотра кода, ответить на этот вопрос, но, возможно, стоит поискать причину в id ваших скриптов. Некоторые темы добавляют свои, очень специфичные id. Иногда стоит посмотреть файлы темы, чтобы найти, как именно подключались скрипты. То же касается и файлов плагинов. Можно поискать код подключения стиля/скрипта, чтобы удалить его по правильному id.
Второй момент касается хуков подключения. Как правило, подключение скриптов и стилей связано с хуком
wp_enqueue_scripts, но ваш стиль или скрипт может быть подключен с помощью другого хука, например,wp_default_scripts, поэтому удаление тоже не срабатывает.По поводу хуков - может еще отрабатывать более высокий приоритет хука в той функции, где его подключают, чем в вашей. Почитайте тут. Также есть последовательность срабатывания хуков, когда ваш хук будет вызван перед тем, который подключает скрипт или стиль. Подробнее читаем здесь.
И последнее, что приходит в голову - это неверный вызов функции. Например, вы написали
add_action( 'wp_enqueue_scripts', 'my_theme_scripts', 100 );, а функцию назвалиfunction temp_scripts() { ... }