Руководства/Создание контента/Код/Добавление блока «Произвольный HTML»

Добавление блока «Произвольный HTML»

Вставьте блок «Произвольный HTML», чтобы разместить HTML-код, и проверьте результат в ходе редактирования. В этом руководстве рассказывается, как применять этот блок, чтобы разместить код на веб-сайте.

Подготовка

Прежде чем начать работу, учтите, что блок «Произвольный HTML» предназначен для добавления необработанного HTML-кода на одну страницу или в запись. Это не универсальный инструмент. Если результат, который вы хотите получить, совпадает с одним из описанных ниже действий, разумнее будет выполнить процедуру, описанную по соответствующей ссылке.

  • Вставить видео, карту, запись в соцсетях или на стороннем сервисе (YouTube, Spotify, Instagram, Giphy, Pinterest и др.): см. раздел Встраивание контента с других платформ. Блок «Вставка» доступен с любым тарифным планом и поддерживает контент множества популярных сервисов без пользовательского кода.
  • Собирать контактные данные, данные о регистрации или отзывы: см. блок «Форма». Блок «Форма» позволяет создать рабочую форму без HTML.
  • Добавить стили CSS на сайт: см. раздел Добавление пользовательских CSS.
  • Добавить код в заголовки сайта (метатеги верификации, сторонние скрипты, которые загружаются на всём сайте): см. раздел Добавление кода в заголовки.

Как вставить блок «Произвольный HTML»

Чтобы вставить блок «Произвольный HTML», выполните следующие действия:

  1. Перейдите в консоль сайта и выберите страницу, запись или шаблон, куда вы хотите добавить HTML.
  2. Нажмите значок «+» инструмента вставки блоков и выполните поиск по запросу HTML.
  3. Нажмите на блок «Произвольный HTML», чтобы добавить его в ваш контент.
A box drawn around the Custom HTML block in the block selector.

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

Добавление кода HTML

Разместив блок, выполните следующие действия, чтобы добавить HTML-код:

  1. Нажмите кнопку «Редактировать HTML».
The HTML block with an Edit HTML button.
  1. Введите с клавиатуры или вставьте код HTML в левой части редактора.
    • При создании HTML-кода справа отображается предварительный просмотр.
  2. Когда всё будет готово, нажмите кнопку Обновить.
The HTML editor with code on the left and a preview on the right.

В редакторе вы увидите, как будет выглядеть ваш код HTML на сайте. Чтобы внести изменения, нажмите кнопку «Редактировать HTML» на панели инструментов блока.

Поддерживаемый HTML

HTML — это компьютерный язык, который сообщает браузерам, как отображать контент веб-сайта. На WordPress.com вы можете применять следующие теги HTML, пользуясь любым тарифным планом:

  • a
  • address
  • abbr
  • acronym
  • area
  • article
  • aside
  • b
  • big
  • blockquote
  • br
  • caption
  • cite
  • class
  • code
  • col
  • del
  • details
  • dd
  • div
  • dl
  • dt
  • em
  • figure
  • figcaption
  • footer
  • font
  • h1, h2, h3, h4, h5, h6
  • header
  • hgroup
  • i
  • img
  • ins
  • kbd
  • li
  • map
  • mark
  • ol
  • p
  • pre
  • q
  • rp
  • rt
  • rtc
  • ruby
  • s
  • section
  • small
  • span
  • strike
  • strong
  • sub
  • summary
  • sup
  • table
  • tbody
  • td
  • tfoot
  • th
  • thead
  • tr
  • tt
  • u
  • ul
  • var

Чтобы пользоваться следующими тегами, вам потребуется платный тарифный план с активированными функциями хостинга. Как активировать функции хостинга в тарифном плане.

embed, frame, iframe, form, input, object, textarea, script, style, link

Подробную информацию о типах кода, который можно добавить на веб-сайт, а также об альтернативных вариантах на случай, если тип кода не поддерживается, см. в руководстве по добавлению кода на веб-сайт.

Исправление распространённых ошибок

Если после сохранения HTML-код выглядит не так, как ожидалось, то чаще всего это бывает вызвано одной из рассмотренных далее причин.

Код исчезает после сохранения

WordPress.com фильтрует определённые HTML-теги в целях обеспечения безопасности. Такие теги, как iframe, script, style, form, embed и object, могут применяться только при условии приобретения платного тарифного плана с активированными функциями хостинга.

Если после сохранения код исчезает полностью или частично, пройдите следующие проверки по порядку:

  1. Проверьте свой тарифный план на соответствие требованиям. Перейдите в консоль вашего сайта и выберите Платные услуги → Тарифные планы. Блок «Произвольный HTML» поддерживает теги с ограниченным доступом только по условиям платного тарифного плана. Если вы пользуетесь бесплатным тарифным планом, перейдите на любой из платных, чтобы продолжить начатое.
  2. Активируйте функции хостинга. Недостаточно просто приобрести платный тарифный план: необходимо также активировать функции хостинга. Установите на сайте хотя бы один плагин, чтобы активировать тарифный план и размещать пользовательский код.
  3. Введите код заново. Если ваш тарифный план оплачен и функции хостинга активированы, вы можете вновь вставить свой код в блок «Произвольный HTML» и сохранить его.

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

Вставка стороннего контента без пользовательского кода

Если вы пытаетесь встроить контент сторонних сервисов — видео, музыку, карты, записи в социальных сетях, календари, рассылки или средства просмотра документов, — лучше воспользоваться блоком «Вставка». Блок «Вставка» работает с любым тарифным планом, не требует написания HTML и поддерживает такие сервисы, как YouTube, Vimeo, Spotify, X, Instagram, TikTok и многие другие.

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

Устранение ошибки «Непредусмотренный или недопустимый контент»

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

Copied to clipboard!