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

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

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

WordPress — простая HTML карта сайта без модулей
Есть несколько способов настроить HTML карту сайта для CMS WordPress. Можно установить модуль и приукрасить его на CSS. Но для...
WordPress — SQL запрос для смены адреса сайта
Случается так, что сайт меняет доменное имя. Ничего страшного в этом нет, но WordPress остается привязан к старому адресу на...
WordPress — как изменить разметку отдельных элементов в посте
Посмотрите на расположение картинок и текст их описания на скриншоте выше. Сверстать подобное не составит никакого труда, если это редактор...
WordPress SEO Friendly Images — плагин для изображений
SEO Frendly Images — плагин для WordPress, автоматически добавляющий HTML5 разметку для изображений FIGURE, FIGCAPTION (точно не уверен — возможно...
WordPress — правильное подключение скриптов
Есть два варианта, как можно добавить сторонний скрипт в WordPress: классический способ — указать путь в HEAD или перед закрывающим...

Комментарии

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *