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 блокам внутри статьи

Читайте также

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

Folders — плагин WordPress для создания отдельного независимого каталога для записей
Folders — плагин, который создает дополнительный катало для записей независимый от основного. Он органично вписывается в дизайн и никак не...
Image Zoom — плагин WordPress для плавного увеличения изображений в модальном окне
Стандартная ситуация: нужно разместить большое изображение на сайте так, чтобы оно вписалось в габариты страницы, и пользователь мог просмотреть на...
Полезные плагины для CMS WordPress
WordPress — самая популярная Open Source система управления контентом. Эту планку проект удерживает уже более 10 лет. Главными ее преимуществами...
WordPress — простая HTML карта сайта без модулей
Есть несколько способов настроить HTML карту сайта для CMS WordPress. Можно установить модуль и приукрасить его на CSS. Но для...
WordPress — SQL запрос для смены адреса сайта
Случается так, что сайт меняет доменное имя. Ничего страшного в этом нет, но WordPress остается привязан к старому адресу на...

Комментарии

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

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