Код

The Поле кода помещает редактор реального кода в панель пользовательского виджета Подсветка синтаксиса, моноширинный текст, номера строк, все это любезно предоставлено редактором Ace. Он существует для случаев, когда редактору нужно вставить разметку, а не писать прозу: встроить фрагменты, блоки схем, значок HTML от третьей стороны. Внутри главных аддонов Виджет Строитель, вы выбираете язык выделения и как высоко редактор сидит на панели.

Как и каждое поле Widget Builder, поле Code поддерживает Условия для видимости панели и ее токенов распечатывается через Механизм шаблонов Twig-синтаксиса с безопасным HTML разрешен автоматически. См. оба руководства для настройки и ограничений.

Вывод проходит очистку WordPress Значение печатается с помощью обычного токена, и время выполнения проходит через него wp_kses_postтот же фильтр WordPress применяется к содержимому публикации. Безопасные HTML-теги выживают; <script> теги удалены. Этот дефолт защищает сайт от всего, что вставлено в поле.

Что делает поле Код #

• Отдает редактор кода Ace на панели Elementor виджета с подсветкой синтаксиса выбранного языка.
• Хранит вставленный код в виде строки.
• Печатает эту строку {{ your_field_name }}дезинфицированный с wp_kses_post таким образом, разрешенные рендеры HTML и сценарии удаляются.
• Предлагает а |raw аварийный люк фильтра, который обходит очистку сценариев доверенного администратора.
• Устанавливает видимую высоту с помощью ряда, поэтому длинные фрагменты освобождают место на панели.

Если вы никогда не создавали виджет с конструктором, прочтите Обзор виджета-строителя первый; полевые страницы предполагают эту основу.

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет значка доверия, где указано поле Code badge_markup принимает значок HTML, который раздают поставщики платежей и отзывов.

Как добавить поле "Код" #

Перетащите Код поле с панели полей в раздел под Содержание вкладка. варианты поля открываются слева в момент приземления.

Объяснены параметры поля кода #

• Этикетка: текст, показанный над редактором в Elementor, например “Badge Markup”.
• Имя: уникальный идентификатор, на который ссылаются ваши шаблоны Буквы, цифры и подчеркивания только, например badge_markup.
• По умолчанию: начальный код, с которым поставляется виджет, полезен в качестве заполненного примера того, чего ожидает поле.
• Язык: режим подсветки синтаксиса, HTML, CSS, JavaScript и другие распространенные режимы. Это влияет только на подсветку, а не на то, что можно набрать.
• Ряды: видимая высота редактора на панели.

Подключите поле "Код" своим токеном #

Поле "Код" - это поле токена. Распечатайте его там, где вставленная разметка должна попасть на панель HTML:

<div class="tb-badges">
  {{ badge_markup }}
</div>

На выходе значение проходит wp_kses_post. На практике это означает, что теги, которые WordPress допускает в содержимом публикации, <div>, <a>, <img>, <span>, а остальное, передать как вклеенное, пока <script> теги и атрибуты обработчика событий удалены. Для значка или фрагмента схемы, созданного на основе простой разметки, поведение по умолчанию - это именно то, что вы хотите.

Имейте в виду, что kses снимает теги молча. если вставленный фрагмент отображается на странице полупустым, ничего не ошибается; фильтр удалил запрещенный тег и сохранил остальные. Проверить фрагменты провайдера на промежуточной странице один раз перед передачей виджета клиенту, чтобы вы знали, какие части сохранились.

Когда фрагменту действительно нужно выжить нетронутым, |raw фильтр обходит дезинфекцию:

{{ badge_markup|raw }}

Осторожно: |raw выводит все, что было вставлено, включая скрипты. достигайте этого только тогда, когда всем, кто может редактировать виджет, уже доверяют нефильтрованный HTML, эффективно пользователи уровня администратора, и никогда на виджетах, которые могут касаться редакторы или клиенты с более низкими привилегиями. очищенный по умолчанию токен является правильным выбором почти для каждого отправленного вами виджета.

Защитите от пустого поля, как любое необязательное значение, поэтому неиспользуемое поле кода не оставляет после себя случайной оболочки:

{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}

Используйте элемент управления кодом в Elementor #

Добавьте свой пользовательский виджет на страницу в Elementor, или перезагрузите редактор, если страница уже была открыта Поле Code отображается как темный блок редактора под вашей меткой, размер которого соответствует установленным вами строкам.

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

Обычные случаи использования #

• Значок и сертификационная наценка от поставщиков платежей, безопасности и отзывов.
• Схема и фрагменты структурированных данных плагин SEO не покрывает.
• Встраивать коды для игроков и форм, где достаточно очищенного подмножества.
• Пользовательская разметка таблицы или списка было бы больно перестраиваться с отдельными полями.
• Рекламные или промо-блоки чей HTML меняется за кампанию без переиздания виджета.

Советы по работе с полем Код #

• Доверьтесь очистке по умолчанию. wp_kses_post сохраняет нормальную разметку нетронутой и тихо удаляет опасные части. Большинство “мой фрагмент сломан.” отчеты являются урезанными <script> тег делает свою работу.
• Резерв |raw для виджетов только для администраторов. Он полностью отключает систему безопасности для этого токена.
• Установите язык в соответствии с содержимым. Подсветка - это средство корректуры; Режим HTML делает отсутствующий закрывающий тег видимым с первого взгляда.
• Отправить фрагмент по умолчанию. Комментируемый пример показывает редакторам, какая именно форма кода принадлежит в поле.
• Завернуть токен {% if %} когда фрагмент необязателен, пустое поле не отображает пустой контейнер.
• Используйте WYSIWYG для прозы. Если редакторы будут писать текст, а не вставлять разметку, Поле WYSIWYG является ли более дружелюбным контролем.

Часто задаваемые вопросы #

Завершая #

Поле Widget Builder Code превращает “вставить свой фрагмент здесь” в правильный рабочий процесс: выделенный редактор на панели, один токен в шаблоне и очистка WordPress-класса между пастой и страницей. Используйте его для разметки, сохраняйте |raw для редкого доверенного случая и обратитесь к Поле WYSIWYG когда содержание проза вместо кода Исследуйте остальное Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.