WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи

Блок с индивидуальным дизайном внутри текста статьи WordPress

Задача: разработать для статей блок с индивидуальным дизайном дабы была возможность выделять некоторый контент. Данный блок должен вставляться в статью с минимальным количеством стороннего кода и вообще — должен быть частью редактора. 

Пример со скриншота выше: https://devarts.pro/2672-actionteaser-ppc-partner-program.html

Относительно новая разработка CMS WordPress — редактор текста Gutenberg позволяет делать самые необычные штуки, как с текстом, так и с кодом внутри контента статьи. При этом все лаконично интегрировано в интерфейс самого редактора. 

Дополнительный CSS в Gutenberg

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

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

Свой класс я назвал .post-cover (обертка для поста). Пример применения дополнительного класса в контенте статьи WordPress на скриншоте ниже.

Добавление блоку CSS класса .post-cover

В исходном коде все выглядит очень красиво и не вносит лишней HTML-обертки.

WordPress — дополнительный класс CSS в исходном коде

Думаю, что делать дальше не стоит объяснять. Данному классу прописываются стиле в любом подключенном к шаблону файлу CSS и все работает. Пример на скриншоте ниже.

Похожие записи

Особенности и возможности современных шаблонов для CMS WordPress
CMS WordPress — это мощная система с безграничными возможностями кастомизации шаблона и настройки функционала. На этом движке можно создать проект...
WordPress: плавное увеличение изображений на Higslide
Плагин для плавного увеличения изображений для CMS WordPress. Что делает плагин: при клике на изображение оно плавно увеличивается в модальном...
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
Как в CMS WordPress использовать символ «$» вместо «jQuery» подключаемых в скриптах
Разработчики WordPress умышленно заблокировали стандартный символ «$» в виде доллара для языка jQuery. Вы не сможете использовать данный символ без...
Как настроить WEBP изображения для WordPress
Из коробки WordPress не умеет работать с WebP картинками. На данном этапе механизм включения  WebP реализуется только с помощью сторонних...

Добавить комментарий