logo

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

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

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


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

Комментарии

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