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

wordpress special markup 620x393 - 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.

wordpress special markup main in post 620x324 - WordPress — как изменить разметку отдельных элементов в посте

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

wordpress special markup 2 620x285 - WordPress — как изменить разметку отдельных элементов в посте

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

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

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

wordpress php body class - WordPress — как изменить разметку отдельных элементов в посте
wordpress special markup main class 620x245 - WordPress — как изменить разметку отдельных элементов в посте

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

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

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

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

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

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

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

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

Комментарии

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

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

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