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 является контейнером статьи, поэтому стили будут действовать глобально.

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