Как добавить CSS на одну страницу сайта WordPress? –

Хотя WordPress предлагает множество настроек в интерфейсе панели администратора, этого недостаточно для всех целей. Например, вы не можете добавить фрагмент кода CSS на одну страницу. Вы столкнетесь с трудностями, если часто захотите вставить пользовательские стили CSS на уровне страницы. В этой статье мы объясним различные доступные варианты добавления CSS на одну страницу сайта WordPress.

Проблемы с добавлением CSS для всего сайта в WordPress

Существует три часто используемых метода добавления CSS в WordPress.

• Перейдите в раздел «Внешний вид > Настройщик > Дополнительный CSS» и вставьте свой код.
• В противном случае перейдите в «Внешний вид > Редактор файлов темы» и вставьте код CSS в файл темы style.css. Вы можете использовать дочернюю тему для этой цели, чтобы изменения не были стерты при обновлении родительской темы.
• Существует также множество плагинов, предлагающих функцию добавления CSS для всего сайта в раздел заголовка.

Проблема этих методов в том, что добавленный CSS будет загружаться на все страницы вашего сайта. Это будет проблемой, если вы захотите вставить сотни строк кода. Другая проблема заключается в том, что это повлияет на поведение всего сайта, а не только на страницу, где вам нужен код. Допустим, вы видите горизонтальную полосу прокрутки на своей домашней странице и хотите ее отключить. Вы можете использовать body{overflow-x:hidden;}, чтобы легко сделать это. Когда вы используете вышеуказанные методы, этот код будет загружен на все страницы и повлияет на страницы, где вы действительно хотели показать горизонтальную полосу прокрутки, например страницы с большими таблицами с несколькими столбцами.

Добавление CSS на одну страницу

Есть два способа добиться этого в WordPress — вы можете использовать пользовательский блок HTML или использовать сторонний плагин.

Добавьте CSS с пользовательским блоком HTML

Пользовательский HTML — это один из блоков по умолчанию, который поставляется с редактором Gutenberg. Итак, если вы используете Gutenberg, вы не используете никаких дополнительных плагинов с этим методом.

• Отредактируйте страницу, на которую хотите добавить пользовательский CSS.
• Введите /custom и выберите в результатах Пользовательский блок HTML. Если вы не видите блокировку, возможно, вы по ошибке отключили ее. Узнайте больше о том, как показать все скрытые блоки в редакторе Gutenberg.
• Вставьте код CSS между открытыми и закрытыми тегами стиля. Например, ниже должен быть код для скрытия горизонтального переполнения.