Новый Custom HTML виджет в WordPress для удобного добавления пользовательского кода

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

Система не экранирует теги, не обрезает скрипты и не пытается интерпретировать содержимое – вставляется ровно то, что написано. Это критично, когда нужна точная структура.

Вот базовый пример подключения сервиса отслеживания действий:


<script async src=\"https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X\"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag(\'js\', new Date());
  gtag(\'config\', \'UA-XXXXXXX-X\');
</script>


Поддерживаются любые элементы, включая iframe, кастомные блоки с JSON-LD, или вызовы API сторонних сервисов. Это не редактор, не вид отображения, а пустая оболочка, куда можно вставить все что угодно.

Важно: любые ошибки в синтаксисе приведут к полной недееспособности блока. Проверяйте вставляемое содержимое заранее.

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


<style>
  .button-custom { background: #000; color: #fff; padding: 10px; transition: 0.3s; }
  .button-custom:hover { background: #ff0; color: #000; }
</style>
<a href=\"#target\" class=\"button-custom\">Нажми</a>


Управление поведением – на вашей стороне. Можно использовать обработчики событий, таймеры, сетевые запросы или даже внедрение web-компонентов. Этот способ – не просто контейнер. Это инструмент точечного управления контентом и логикой.

Проверяйте итоговый результат в режиме инкогнито и разных браузерах – не все скрипты загружаются одинаково. Если используется CDN, обязательно указывайте crossorigin и integrity.

Добавляйте только необходимое. Это не поле для фантазий – это хирургический инструмент. Никаких поблажек.

Как добавить виджет Custom HTML в боковую панель сайта

Открой консоль управления: перейди в раздел Внешний вид → Виджеты. Если используется редактор блоков, нажми «Боковая панель» и выбери нужную область отображения. При классическом интерфейсе – просто перетащи нужный блок в панель.

Найди элемент с заголовком Произвольный HTML. Перетащи его мышкой в нужную зону. В редакторе блоков нажми «+», введи «HTML», выбери подходящий блок. Всё. Появилось пустое поле. Туда вставляешь содержимое.

Внимание! Браузеры не простят ошибок в разметке – одна незакрытая <div> может сломать внешний вид всей панели.

Добавить можно всё, что не запрещено политикой безопасности сайта. Например:


<div style=\"padding:10px;background:#f1f1f1;\">
    <h3>Контакты</h3>
    <p>Тел: +7 (900) 123-45-67</p>
    <p>Email: info@example.com</p>
</div>


Если панель не обновилась – очисть кеш. Проверь, не блокирует ли плагин безопасности загрузку стороннего скрипта или iframe. Нередко это приводит к «пустой зоне» без ошибок.

Хотите вставить скрипт? Оберни его в <script>, но только если в настройках не отключено выполнение JavaScript в таких блоках. Это может быть заблокировано хостингом или политикой CORS.

Важно помнить: боковые панели адаптируются под тему. Некоторые шаблоны жёстко ограничивают ширину. Используй style=\"max-width:100%\", чтобы не сломать вёрстку.

Если редактор на блоках не показывает блок с HTML – включи классический вид через Параметры экрана → Устаревшие виджеты. Либо установи плагин Classic Widgets. Он возвращает прежнюю логику перетаскивания, без Гутенберга.

Не забывай про мобильную адаптацию. Код, который выглядит нормально на десктопе, может «поплыть» на телефоне. Тестируй в инспекторе браузера или через Chrome DevTools – режим эмуляции экрана устройства.

Где найти и как открыть редактор кода в Custom HTML

Перейдите в админку. Откройте раздел Внешний вид – затем Настройки блоков. Найдите элемент с названием HTML. Не перепутайте с Текстом – они разные.

Кликните по блоку. Справа появится панель с параметрами. Она бесполезна. Весь контроль – внутри самого блока. Внутри белого поля кликните дважды. Появится текстовая форма. Это и есть доступ к исходнику.

Другой способ – переключение режима редактирования. В правом верхнем углу редактора нажмите три точки. Выберите пункт Редактировать как HTML. Интерфейс полностью очистится от визуального шума. Останется только код.

Важно знать: редактор не проверяет синтаксис. Ошибки появятся только после сохранения. Автоматического завершения тегов нет. Подсветки тоже.

Внимание! Один забытый символ может полностью нарушить отображение содержимого.

Если вставляете JavaScript – окружайте его тегами <script></script>. Для стилей – <style></style>. Не используйте <head> и <body> – они игнорируются системой.

Для проверки результата – переключитесь обратно в режим визуального просмотра. Иногда отображается некорректно. Это не баг. Сохраните изменения и проверьте на фронте.

Важно помнить: редактор работает как песочница. Некоторые команды могут блокироваться из соображений безопасности.

Нужна точная настройка? Подключайте отладку через консоль браузера. Без неё – как вслепую писать на клавиатуре. Ошибётесь. Не заметите.

Запомните последовательность: выбрать блок – открыть исходник – вставить фрагмент – проверить. Нет автоматизации. Всё вручную. Именно это – сила и слабость.

Какие типы кода поддерживает виджет Custom HTML

Вставляйте только чистую разметку. Всё остальное – под вопросом. Строгий фильтр wp_kses_post() срабатывает молниеносно.

• HTML 5 – теги <section>, <article>, <aside>, <figure> и другие – обрабатываются без нареканий. Но inline-скрипты? Сразу блокируются.
• CSS – только встроенные стили в атрибуте style. Ни одного <style> внутри не пройдет. Зачем? Безопасность. Попробуйте вставить position: fixed; – и поймете, как WordPress борется с агрессивной версткой.
• JavaScript – нет. <script> блокируется. Попытка внедрения? Превратится в простой текст. Хотите повесить обработчик на кнопку? Придется использовать хук wp_footer или подключение через enqueue.
• Фреймы – <iframe> иногда работает. Только если разрешён в фильтрах. YouTube, Vimeo – чаще да, чем нет. Но всё зависит от текущей конфигурации фильтрации kses.
• SVG – по умолчанию вырезается. Даже если скормите корректный <svg> – будет удалён. Хакать ядро? Не стоит. Есть фильтры, например safe_svg, но это уже другая история.

Внимание! Скрипты и стили работают корректно только при размещении через правильные хуки и функции enqueue. Вставка напрямую – мина замедленного действия.

1. HTML – да.
2. CSS – частично.
3. JavaScript – нет.
4. iframe – условно.
5. SVG – почти всегда блокируется.

Работает строго по принципу whitelisting. Только явно разрешённое – проходит. Всё остальное – в мусор.

Важно помнить: WordPress фильтрует содержимое не только на фронтенде, но и на сохранении. Что вы видите в редакторе – не всегда то, что будет на странице.

Решение? Используйте хуки. Используйте enqueue. И не забывайте про фильтры wp_kses_allowed_html() и allowed_tags, если всё же хотите расширить допустимый список.

Нужен полноценный JavaScript? Используйте кастомный плагин или добавляйте через functions.php. Надежнее. Контролируемо. По-взрослому.

Как избежать конфликтов с JavaScript и CSS внутри виджета

Используйте неймспейсы. Каждый скрипт и стиль должен быть изолирован: уникальные имена функций, переменных и классов. Пример:


<script>
(function() {
function myWidgetInit() {
const el = document.querySelector(\'.my-widget-container\');
if (!el) return;
el.addEventListener(\'click\', function() {
console.log(\'Clicked!\');
});
}
document.addEventListener(\'DOMContentLoaded\', myWidgetInit);
})();
</script>


Загрузка jQuery? Не дублируйте. В WordPress уже есть jQuery. Подключайте её через:


wp_enqueue_script(\'jquery\');


Не вставляйте jQuery через CDN внутри блока. Конфликт версий обеспечен.

Стили? Только с префиксами. Никаких общих селекторов типа div, ul, a. Все классы должны быть специфичными, вроде .my-widget-button. Пример:


<style>
.my-widget-container .my-widget-button {
background-color: #0073aa;
color: #fff;
}
</style>


Важно помнить: любой общий селектор, используемый без префикса, может неожиданно изменить внешний вид всей страницы.

Используйте wp_add_inline_script и wp_add_inline_style вместо вставки через HTML. Это безопаснее. Пример:


wp_add_inline_style(\'my-style-handle\', \'.my-widget-container { margin-top: 20px; }\');


Для JavaScript:


wp_add_inline_script(\'my-script-handle\', \'console.log(\"Init\");\');


Ограничьте область действия скриптов. Используйте querySelector внутри контейнера. Никогда не манипулируйте DOM глобально. Это разрушит тему.

Внимание! Глобальные функции или переменные могут быть перезаписаны плагинами или темой. Последствия непредсказуемы.

Если подключаете свои библиотеки – заверните их в UMD или IIFE. Пример:


(function(root, factory) {
if (typeof define === \'function\' && define.amd) {
define([], factory);
} else if (typeof exports === \'object\') {
module.exports = factory();
} else {
root.myWidgetLib = factory();
}
}(this, function() {
return {
sayHello: function() {
console.log(\'Hello\');
}
};
}));


Подключение стороннего CSS? Используйте id или атрибут scoped через JS. Статическое подключение почти всегда приводит к коллизиям.

Вставка через iframe – крайняя мера. Помогает, если ничего другое не сработало. Полная изоляция, но теряется доступ к DOM страницы.