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

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


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Особенности и возможности современных шаблонов для CMS WordPress
CMS WordPress — это мощная система с безграничными возможностями кастомизации шаблона и настройки функционала. На этом движке можно создать проект...
WordPress: плавное увеличение изображений на Higslide
Плагин для плавного увеличения изображений для CMS WordPress. Что делает плагин: при клике на изображение оно плавно увеличивается в модальном...
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...

Комментарии

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