Удалить встроенные глобальные стили и встроенные стили классической темы из заголовка WordPress

WordPress добавляет множество кодов в раздел заголовка между тегами и. Эти коды не требуются для большинства блогов WordPress, но они все равно загружаются при каждой загрузке страницы, если их не удалить. Ленты — лучший пример, который вам может не понадобиться в заголовке. Начиная с версии 5.9, WordPress также добавляет встроенные глобальные стили и встроенные стили классической темы в CSS. Это большой мусор, если вы им не пользуетесь, и вот как их можно удалить из шапки вашего сайта.

Поиск классических стилей темы и глобальных стилей встроенного CSS

По умолчанию у вас нет возможности удалить эти коды стилей, поскольку они взяты из /wp-включает/ папка. Встроенный стиль классической темы будет содержать несколько классов, как указано ниже, но встроенный глобальный стиль огромен.

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

Откройте любую страницу вашего сайта во вкладке браузера.
Щелкните правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или «Показать исходный код страницы» или аналогичный вариант в контекстном меню.
Проверьте раздел заголовка, где вы можете найти эти стили в исходном коде вашего сайта.

Встроенный CSS в глобальной и классической теме в заголовке WordPress

Еще один запутанный аспект заключается в том, что в классических стилях тем будет отображаться комментарий типа /*! Этот файл создается автоматически */, что может вас смутить. Запишите идентификаторы CSS для обоих встроенных стилей, которые должны выглядеть следующим образом:

классические стили-темы-inline-css
глобальные стили-inline-css

Удаление глобальных стилей из встроенного CSS

Во-первых, давайте удалим глобальный встроенный CSS.

Войдите в панель администратора WordPress и перейдите в раздел «Внешний вид > Редактор файлов тем».
Убедитесь, что выбрана текущая активная тема, и выберите файл function.php из списка файлов.
Скопируйте и вставьте следующий код внизу существующего содержимого файла.

/** Удаление глобальных встроенных стилей */ add_action( ‘wp_enqueue_scripts’, function() { wp_dequeue_style( ‘global-styles-inline’); }, 20);

Нажмите кнопку «Обновить файл», чтобы сохранить изменения.

Код для удаления глобальных встроенных стилей

Теперь проверьте исходный код, и вы увидите, что раздел global-styles-inline-css удален.

Удаление стилей классической темы из встроенного CSS

Процесс аналогичен удалению глобальных стилей из заголовка WordPress.

Перейдите в панель администратора WordPress и перейдите в раздел «Внешний вид > Редактор файлов тем».
Выберите активную тему, а затем файл function.php.
Вставьте следующий фрагмент кода в конец файла.

/** Удалить классический встроенный стиль */ add_action( ‘wp_enqueue_scripts’, function() { wp_dequeue_style( ‘classic-theme-styles’); }, 20);

Нажмите кнопку «Обновить файл», чтобы сохранить изменения.

Код для удаления встроенных стилей классической темы

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

Примечание: Вместо редактирования файла из «Редактора файлов темы» вы также можете использовать приложение «Диспетчер файлов» из учетной записи хостинга или получить удаленный доступ к серверу через FTP. Вы можете найти файл function.php в разделе /public_html/wp-content/themes/<имя-вашей-темы>/” раздел. Вам также может потребоваться использовать файловый менеджер или FTP, если вы отключили функцию редактирования файлов в панели администратора по соображениям безопасности.

Использование плагина фрагмента кода или дочерней темы

Какой бы метод вы ни использовали для редактирования файла function.php, изменения будут удалены при обновлении темы. У вас есть два варианта избежать этого.

Используйте дочернюю тему и добавьте код в ее файл function.php.
Используйте плагины типа Фрагменты кода для вставки фрагментов PHP без непосредственного редактирования файла function.php.

Использование Perfmatters для удаления глобальных стилей из встроенного CSS

Perfmatters — это плагин оптимизации, который помогает удалить раздутый контент из заголовка WordPress в дополнение ко многим другим опциям. Если вы уже используете этот плагин, выполните следующие действия, чтобы удалить глобальные стили.

Находясь в панели администратора WordPress, перейдите в раздел «Настройки > Perfmatters».
Перейдите в раздел «Общие» и отключите опцию «Удалить глобальные стили».
Нажмите кнопку «Сохранить изменения», чтобы удалить глобальный CSS, добавленный WordPress.

Удалить глобальные стили в плагине Perfmatters

Благодаря этому он помогает удалить только глобальные встроенные стили, а не встроенные стили классической темы. Узнайте больше о всех функциях, предлагаемых плагином Perfmatters.

Будьте осторожны перед удалением встроенных стилей глобальных и классических тем.

Независимо от того, используете ли вы плагин Perfmatters или фрагмент кода, удаление глобальных/классических стилей темы вызовет следующие проблемы:

Выравнивание кнопок не будет работать. Например, если вы выровняете содержимое по центру, кнопка всегда будет отображаться слева. Аналогично, кнопки со значками социальных сетей могут работать некорректно.
Цвет фона блока не будет работать.
Некоторые блоки, такие как цитата, цитата и галерея, могут работать не так, как ожидалось.
Это может повлиять на все функции редактирования сайта.
Функция двухтонального фильтра может не работать.

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

Цвет фона блока удален.

Заключительные слова

Добавление встроенного CSS в раздел заголовка не является хорошей практикой. В идеале вам нужно использовать файл CSS и вставить его в раздел заголовка, используя тег ссылки с rel=”таблица стилей” атрибут. Однако в настоящее время принято выгружать CSS в заголовок с помощью тегов

, чтобы избежать блокировки рендеринга и удалить неиспользуемые предупреждения CSS в Google PageSpeed Insights. Но в панели администратора должна быть опция для отключения этих материалов, вставленных ядром WordPress. Без этого вам нужно добавить фрагмент кода в файл function.php или использовать плагины, такие как Perfmatters, для удаления встроенных CSS-стилей глобальных стилей и встроенных CSS-стилей классической темы из заголовка сайта WordPress.