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

wordpress post cover 620x377 - WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи
Блок с индивидуальным дизайном внутри текста статьи WordPress

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

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

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

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

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

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

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

wordpress post cover editor 620x264 - WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи
Добавление блоку CSS класса .post-cover

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

wordpress post source 620x354 - WordPress — как лаконично добавить дополнительный класс CSS блокам внутри статьи
WordPress — дополнительный класс CSS в исходном коде

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

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

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

Как настроить WEBP изображения для WordPress
Из коробки WordPress не умеет работать с WebP картинками. На данном этапе механизм включения  WebP реализуется только с помощью сторонних...
Особенности выбора хостинга для CMS WordPress для блога или сайта
Есть три вида хостинга, которые ощутимо различаются по качественным и финансовым характеристикам. Все три подходят для WordPress, но не во...
ImbaChat – обзор и основные возможности бесплатного плагина онлайн чата для CMS WordPress
ImbaChat — это продвинутый онлайн чат для вордпресс, представленный в виде стороннего плагина с возможностью совершать аудио и видео звонки....
Несколько советов по ускорению загрузки сайта на WordPress
CMS WordPress — самый популярный движок для сайтов в мире. Их используют везде: блоги, порталы, портфолио, коммерческие сайты, лендинги, визитки,...
Folders — плагин WordPress для создания отдельного независимого каталога для записей
Folders — плагин, который создает дополнительный катало для записей независимый от основного. Он органично вписывается в дизайн и никак не...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

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