Как использовать настраиваемый HTML-блок WordPress

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

В этой статье мы подробно рассмотрим настраиваемый блок HTML. Мы увидим, как добавить его в свои сообщения и страницы, рассмотрим его настройки и параметры, увидим советы по его использованию и увидим часто задаваемые вопросы.

Подпишитесь на наш канал Youtube

Как добавить настраиваемый блок HTML в сообщение или страницу

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

В качестве альтернативы вы можете ввести / html в том месте, где вы хотите, чтобы блок отображался, и нажмите Enter или выберите его из опций над областью блока.

Теперь у вас есть пользовательский блок HTML в вашем контенте, в который вы можете добавить HTML. Мы увидим несколько примеров с кодом по мере настройки.

Пользовательские настройки и параметры блока HTML

В отличие от большинства блоков, пользовательский блок HTML не включает параметры на боковой панели редактора. Вы найдете все необходимые параметры на панели инструментов.

Панель инструментов настраиваемого HTML-блока

Щелкните в любом месте блока, чтобы увидеть его инструменты. Если вы не видите их всех, щелкните под блоком в новой области, и остальные инструменты отобразятся, когда вы снова выберете блок.

Каждый блок имеет свои собственные определенные элементы управления, где вы можете выбрать параметры для блока. Небольшой набор параметров блока над панелью инструментов позволяет вам изменить тип блока, преобразовать в блоки и открыть параметры.

Давайте подробно рассмотрим каждую настройку.

Пользовательский блок или стиль изменения HTML

Выбор HTML в параметрах открывает раскрывающееся окно, в котором вы можете преобразовать блок в блоки других типов. Возможные варианты: Код, Столбцы или Группа.

Код - преобразует настраиваемый блок HTML в блок кода, чтобы вы могли отображать различные типы кода.

Столбцы - помещает блок в столбцы.

Группа - добавляет блок в группу, чтобы вы могли настроить их как единый блок.

Инструмент перетаскивания пользовательского блока HTML

Инструмент перетаскивания включает шесть точек, которые вы можете переместить мышью.

Затем просто перетащите блок в любое место вашего контента и отпустите его. Появится синяя линия, указывающая, куда будет брошен блок, когда вы его перетаскиваете.

Как только вы увидите, что синяя линия появляется там, где вы хотите блок, отпустите кнопку мыши, и ваш блок будет помещен в новое место.

Пользовательское перемещение блока HTML

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

Пользовательский HTML-блок HTML и предварительный просмотр

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

Выбор «Предварительный просмотр» показывает, как HTML-код будет выглядеть во внешнем интерфейсе, когда он выполняется в браузере. Легко переключаться между представлениями, чтобы отредактировать HTML и посмотреть, как он будет выглядеть для конечного пользователя. Это отличный способ внести правки и быстро просмотреть результаты. В этом примере показана встроенная карта Google в том виде, в котором она будет отображаться в содержимом.

В качестве другого примера приведу HTML-код для добавления стиля к строке текста. Это представление HTML, в котором я могу создавать и редактировать HTML.

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

Пользовательские параметры блока HTML

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

Вот что могут сделать параметры настраиваемого блока HTML:

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

Преобразовать в блоки - преобразует контент в другие соответствующие блоки. Текст будет преобразован в блоки абзаца, изображения в блоки изображений и т. Д. Встроенный код, такой как код Google Map, который я использовал в своем примере, останется как пользовательский блок HTML. Если другой HTML-код в блоке можно преобразовать, он будет удален из блока при размещении в другом блоке.

Копировать - копирует блок в буфер обмена, чтобы вы могли вставить его в любом месте редактора.

Дублировать - дублирует блок под оригиналом.

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

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

Переместить в - позволяет перемещать блок вверх или вниз с помощью клавиш со стрелками. Вы переместите синюю линию. Когда он достигнет нужного места, нажмите Enter, и блок мгновенно переместится.

Добавить в повторно используемые блоки - добавляет пользовательский блок HTML к вашим повторно используемым блокам, чтобы вы могли использовать его снова на любой странице или в публикации.

Группа - добавляет блок в группу, чтобы вы могли настраивать блоки как единое целое.

Удалить блок - удаляет блок.

Советы и рекомендации по эффективному использованию настраиваемого блока HTML

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

Используйте этот блок для встроенных карт, рекламы, видео и т. Д. Это избавляет вас от необходимости переходить в режим просмотра редактора кода и добавлять код в другие типы блоков, такие как блок абзаца.

Использование этого блока вместо версии редактора кода ваших страниц и сообщений избавляет вас от необходимости работать с тегами страницы и публикации. Это создает более чистую рабочую среду, которую проще использовать.

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

Не используйте тег скрипта в блоке. Его можно удалить, и тогда ваш код не будет работать.

Часто задаваемые вопросы о пользовательском блоке HTML

Что делает пользовательский блок HTML?

Он позволяет вам вводить HTML в поле, чтобы вы могли работать с ним, сохраняя страницу или публикацию в визуальном редакторе.

Как можно использовать настраиваемый блок HTML?

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

Будет ли он кодировать разметку цветом?

Нет, разметка в блоке похожа на любой текстовый редактор.

Заполняет ли настраиваемый блок HTML HTML?

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

Поддерживаются ли все теги HTML?

Нет. Вы можете увидеть список поддерживаемых HTML-тегов на странице поддерживаемого кода WordPress.

Заключение

Это наш взгляд на настраиваемый блок HTML. Этот блок предназначен не только для разработчиков. Основное преимущество использования этого блока - вам не нужно переключаться между визуальным редактором и редактором кода для работы с HTML. Это означает, что вы можете работать с остальным контентом, отображаемым в обычном режиме. Затем вы можете работать с HTML в блоке и предварительно просмотреть его в любое время. Пользовательский блок HTML обеспечивает простой способ работы с HTML в редакторе блоков.

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

Лучшее изображение через enterlinedesign / shutterstock.com