Вопрос или проблема
На моей странице WordPress есть HTML-блоки с HTML, CSS и JavaScript. Когда я сохраняю страницу, WordPress продолжает добавлять <br /> и <p> теги в каждой строке, что делает JS и CSS недействительными.
На самом деле он сохраняет это правильно, но когда вы повторно открываете страницу в редакторе, он добавляет эти теги в каждом HTML-блоке в каждой строке. Как я могу предотвратить это? Так было не три недели назад.
Это не работает, потому что HTML-блок не является сырым произвольным HTML-блоком. В конце концов, все HTML в контенте сообщений проходит через фильтры безопасности, которые удаляют все, что не появляется в белом списке тегов и атрибутов. Не имеет значения, ввели ли вы это вручную, они были вставлены блоком или введены в пользовательский HTML-блок.
Вот почему блоки, которые зависят от стилей и скриптов, динамически рендерят эти теги в PHP или полагаются на API, такие как OEmbed.
Если вы хотите написать собственный CSS для конкретной страницы или блока, у вас есть следующие варианты:
- Используйте расширенную панель, чтобы добавить HTML-класс для целевой настройки из статического CSS-файла, стили/варианты блоков можно использовать для упрощения этого процесса и дать редактору блоков показать это с помощью кнопок GUI и предварительных просмотров
- Используйте поле пользовательского CSS в редакторе глобальных стилей или настройщике
- Если ваш CSS специфичен для страницы, вам не нужно помещать CSS в контент этой страницы, WordPress добавляет классы к
<body>тегу, которые вы можете использовать для целевой настройки, все отhomeилиsingle, типа сообщения, используемого шаблона, до классов, содержащих имя страницы и ID, так что вы можете точно нацелить на конкретное сообщение с помощью правила CSS
Но не забывайте, что вы не хотите хранить CSS или JS в содержимом сообщений, будь то сообщение/страница/шаблон. Это по соображениям безопасности.
Ответ или решение
К сожалению, использование HTML-блоков в WordPress может привести к проблемам с автоматическим добавлением тегов <br> и <p> в вашем HTML-коде после сохранения. Давайте рассмотрим эту проблему более детально и предложим возможные решения.
Причина проблемы
При сохранении содержимого постов и страниц WordPress использует механизм фильтрации для обеспечения безопасности контента. Этот механизм автоматически добавляет теги блоков и оборачивает текст в параграфы <p> и переносы строк <br>, чтобы избежать потенциальных уязвимостей — это связано со стремлением WordPress предотвратить выполнение вредоносного JavaScript-кода или инъекций HTML.
Это изменение произошло не так давно, и, скорее всего, связано с последним обновлением платформы или изменением в конфигурации.
Что можно сделать?
Для предотвращения нежелательного поведения добавления тегов <br> и <p> в HTML-блоки, рассмотрим несколько подходов:
-
Используйте блоки, предназначенные для кода:
- Вместо добавления кода в обычные блоки, используйте специальные блоки для кода, такие как "Custom HTML". Они могут поддерживать более точное отображение без дополнительных тегов.
-
Избегайте хранения CSS и JS в контенте:
- Лучшей практикой является хранение CSS и JavaScript в файлах темы или же в плагинах для управления стилями и скриптами. Это не только убережет ваш код от изменений, но и позволит повысить безопасность.
-
Добавление кастомного CSS:
- Если вам нужно добавить CSS для конкретной страницы, используйте следующий подход:
- В глобальном редакторе стилей или в кастомизаторе вы можете вставить свой код в секцию "Дополнительный CSS".
- Также рассмотрите возможность добавления класса к блокам через панель "Дополнительно", чтобы затем использовать его в глобальных стилях.
- Если вам нужно добавить CSS для конкретной страницы, используйте следующий подход:
-
Используйте методы работы с API:
- Если вы хотите динамически добавлять скрипты и стили, рассмотрите использование API WordPress для создания пользовательских шорткодов или блоков, которые будут генерировать необходимый HTML с использованием PHP.
-
Воспользуйтесь плагинами:
- Существуют плагины, такие как "Code Snippets" или "Insert Headers and Footers", которые позволяют добавлять скрипты и стили в заголовок или футер вашего сайта, предотвращая их появление в контенте поста.
Заключение
Работа с HTML, CSS и JavaScript в WordPress требует определенных навыков и понимания архитектуры платформы. Следуя указанным методам, вы сможете избежать автоматического добавления тегов, что не только сохранит ваш код в чистоте, но и повысит безопасность вашего сайта. Не забывайте обновлять плагины и тему, чтобы обеспечить актуальность всех функций и безопасность вашего ресурса.