Код

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

Код - это поле Pro. бесплатный плагин включает ограниченный конструктор виджетов, и полный набор полей поставляется с Мастер Аддоны Про.

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

• Добавляет на панель вашего виджета в Elementor редактор кода, с номерами строк и подсветкой.
• Основные моменты на выбранном вами языке: от HTML и CSS до JSON, SVG и PHP.
• Сохраняет все, что было вставлено в текст.
• Печатает его через токен, например {{ badge_markup }}, очищенный с помощью собственного фильтра содержимого публикации WordPress, поэтому разрешены рендеры HTML и теги сценариев удалены.
• Имеет raw фильтр для редкого случая, когда фрагмент должен выйти нетронутым.

Новое для строителя? Прочитать Обзор виджета-строителя сначала вернитесь с открытым виджетом.

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в конструкторе виджетов Пример в этом руководстве - виджет “Trust Badges”: Текстовое поле для заголовка и поле Code named badge_markup то берет значок провайдера HTML.

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

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. Добавить раздел на Содержание вкладка, например “Badges”.
3. Тип code в поле поиска слева.
4. Драг Код в раздел Нажмите на карандаш на поле, чтобы открыть его настройки.

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

• Этикетка: текст над редактором в Elementor, например “Badge Markup”.
• Имя: уникальный идентификатор поля и название его токена Используйте только буквы, цифры и подчеркивания, например badge_markup.
• Описание: подсказка, показанная под редактором в Elementor.Используйте ее, чтобы сказать, чего ожидает поле, например “Вставьте HTML, который дает вам поставщик платежей или обзоров.”
• Язык: режим подсветки В списке есть HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig и Typescript.HTML - по умолчанию.

Язык меняет только подсветку, Он не ограничивает то, что редактор может вставить, и не меняет, как напечатано значение.

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

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

Распечатайте код в своем шаблоне #

Поместите жетон туда, куда должен приземлиться фрагмент, и защитите его, чтобы пустое поле не оставляло после себя обертки:

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

Стиль обертки в панели CSS как обычно. сам сниппет приносит любые классы, которые поставщик дал ему, поэтому стоит добавить свой собственный класс обертки для управления интервалом и выравниванием.

Что полоски жетона #

Значение проходит через тот же фильтр, который WordPress использует для содержания сообщений. Теги, разрешенные в сообщениях, выходят как вставленные: div, span, a, img а остальное. удаляются теги сценариев и iframe.

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

Необработанный фильтр #

Добавление raw к маркерным отпечаткам именно то, что было вклеено, прилагались сценарии и ифрам

{{ badge_markup|raw }}

В наших тестах эта версия сохранила iframe и запустила скрипт. это полезно для управляемого вами встраивания, и рискованно везде, потому что любой, кто может редактировать виджет, может затем запустить JavaScript на странице. Используйте его только тогда, когда каждому редактору этой страницы уже доверен нефильтрованный HTML, и держите простой токен для виджетов, к которым клиенты прикасаются.

Механизм шаблонов также принимает trim, upper и lower на токене, который иногда удобен для короткого фрагмента обычного текста.

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

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

Редактор - это маленькое окно, поэтому внутри него прокручивается длинный фрагмент Это нормально для вставки, в меньшей степени для чтения; напишите фрагмент где-нибудь более просторным, если вы планируете редактировать его вручную.

Вот готовый виджет на передней части, построенный из трех вставленных блоков значков:

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

• Платежные, обзорные и доверительные бейджи, которые поставщики раздают в формате HTML.
• Блоки схемы или структурированных данных, которые редактору необходимо вставить на страницу.
• Небольшие значки или логотипы SVG вставлены в качестве разметки.
• Короткий фрагмент CSS или JSON, который читает сценарий вашего виджета.

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

• Скажите, что вставить в Описание. Редакторы не могут сказать из пустого редактора, чего ждет поле.
• Защитите жетон {% if %}. В противном случае неиспользуемое поле оставило бы на странице пустую обертку.
• Проверьте реальный фрагмент поставщика один раз. Так и узнаешь, какие детали пережили фильтр.
• Держать raw только для доверенных редакторов. Простой токен - это безопасный дефолт для клиентских сайтов.
• Отформатированный текст, а не разметка? Используйте Поле WYSIWYG таким образом, редакторы получают визуальный редактор вместо кода.

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

Завершая #

Бросьте поле "Код" в раздел "Содержимое", выберите язык, напишите описание, в котором будет указано, что вставить, и распечатайте токен внутри раздела {% if %} охранник. Сохраняйте простой токен для клиентских сайтов и обращайтесь к ним raw только с доверенными редакторами. чтобы узнать о богатом тексте вместо разметки, см Поле WYSIWYGи проверьте ценообразование за то, что включает каждый план.