WordPress — как изменить разметку отдельных элементов в посте

Посмотрите на расположение картинок и текст их описания на скриншоте выше. Сверстать подобное не составит никакого труда, если это редактор кода и свободный полет фантазии.

Ссылка на статью: https://devarts.pro/202-shillien-knight_guige.html

Еще ссылка: https://devarts.pro/311-destroyer_guide_hf.html

Но что делать, если нужно сверстать подобным образом статью внутри редактора Gutenberg? Проблемы начнутся уже на 2-3 картинке, когда правило обтекания текста вокруг изображений начнет применяться к самим картинкам. Пробовал решить проблему на CSS, но задолбался и нашел обходной путь.

Самый простой способ — создать отдельный тип записи и сверстать для нее отдельный шаблон. В моем случае планировалось написание всего двух таких статей, поэтому смысла от отдельного шаблона не было. Нашел более хитрое решение. 

Оказывается, WordPress настолько гибкая CMS, что здесь можно делать самые невероятные вещи. Скриншот верстки статьи со скриншота выше. О WordPress публикую тот материал, с которым столкнулся и проверил на своих проектах. Если хотите больше подобного контента, советую заглянуть на блог вебмастера romua1d.

В поле комментария к картинке (обычно используется для указания источника фото) расположен основной текст. Стилями CSS ему придан внешний вид текста из абзацев P.

В исходном коде ничего не изменяется, лишь добавляется класс .to-left. Логическим решением было бы назначить стили для класса .wp-block-image .to-left, но из-за обтекания текста по левой стороне часто стили родительских блоков мешают и не мне вам объяснять, сколько иногда приходится возиться с кодом.

Находим новый родительский блок

Нужен CSS класс, которым можно сбросить стили по умолчанию и задать новые значения. Для большинства CMS сделать это не просто т.к. используется единый шаблон, все значения хранятся в базе данных, а пользователю доступен лишь редактор текста. Одним из способов, за что можно зацепиться в WordPress, является PHP переменная body_class().

Стояла задача создать две подобные статьи, поэтому проще всего было использовать идентификатор статьи, записанный в виде CSS класса — postid-202.

Переназначаем CSS для конкретных блоков

Блок MAIN в котором прописан класс postid является контейнером статьи, поэтому стили будут действовать глобально.

Собственно и все! Задаем стили контейнеру, избавляемся от всех проблем с конфликтом стилей и решаем задачу.

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

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

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