Как убрать тег «P» вокруг изображений?

Question

[Расул Гитинов]

В интернете нет конкретной информации о решении этой проблемы. Нужно чтобы при добавлении записи только картинки не оборачивались в тег "P". Я нашел такой кусок кода, который нужно разместить в файле functions.php:

function filter_ptags_on_images($content){
//функция preg replace, которая убивает тег p
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

но он не заработал.

А вообще это нужно для решения такой проблемы: У контентной части будут отступы padding, а картинки в записи будут несмотря на это занимать всю ширину блока, тем самым картинка будет шире чем текст:



и в итоге должно получиться вот так:



Может есть другие варианты решения этой задачи?

Answer 1

[ProjectSoft]

Вы точно прописал в файл functions.php именно используемой темы?
Ибо данный вами метод работает.

Comments

[Расул Гитинов]

Он убирает тег P только у картинок?
И он убирает их у уже загруженных картинок или только у тех, которые были добавлены после?

[Расул Гитинов]

Я вставил его заново, но ничего не заработало. У изображений остался тег P

[ProjectSoft]

Расул Гитинов: в редакторе вставляю картинку
Результат без хука

Результат с хуком

[Расул Гитинов]

ProjectSoft: Интересно, а почему у меня не активируется. А можете показать как вставили?

[ProjectSoft]

Расул Гитинов: take.ms/bTmLj

[Расул Гитинов]

ProjectSoft: Ну вот, я так же вставил вроде prntscr.com/dasxls

[ProjectSoft]

Расул Гитинов: Нужно саму тему смотреть. Таковой нет в наличии.
А так же код места, где вы выводите контент.

Answer 2

[Денис Янчевский]

У себя на сайте реализовывал нечто подобное. Такой вариант нужен?

img {
    max-width: 120%;
    margin-left: -10%;
    margin-right: -10%;
    height: auto !important;
}

Comments

[Расул Гитинов]

Да, точно

[Расул Гитинов]

А лечше все таки в процентах делать или можно как то в пикселях тоже реализовать?

[Денис Янчевский]

Расул Гитинов: вынес CSS-код в ответ ну или можно посмотреть с помощью инструментов разработчика на сайте.

[Денис Янчевский]

Расул Гитинов: Ну Вы можете же сдвигать и на фиксированную ширину. На каком-то из сайтов я писал js-скрипт для этого, который сдвигал каждое изображение на нужное количество пикселей влево, но пока не могу вспомнить на каком.

[Расул Гитинов]

Денис Янчевский: Понял, но все равно ваш ответ мне понравился, наверно буду использовать именно этот вариант. Спасибо!

[Денис Янчевский]

Расул Гитинов: нашел вариант с js-кодом recyclemag.ru/article/6-samyih-ekologichnyih-napol... , но css-кодом, наверное, всё же лучше :).

[Расул Гитинов]

Денис Янчевский: Спасибо! :)

Answer 3

[Игорь Воротнёв]

Код, который вы нашли, правильный и точно работает, удаляя обертывающий тег P вокруг изображений, вставленных в визуальный редактор. Собственно, у вас на скриншоте "с хуком" тега P как раз и нет. Вообще нет. А вот растянуть картинку на всю ширину - это уже другая задача, и она из мира CSS.

Comments

[Расул Гитинов]

А этот вариант не слетит после обновления версии wordpress?: 1) Находим в проекте wordpress файл, который называется formatting.php (должен лежать в папке wp-includes)
2) В этом файле находим функцию, которая называется wpautop
3) Там находим переменную $allblocks (188 строка должна быть)
4) Туда дописываем img
5) PROFIT!

[Игорь Воротнёв]

Расул Гитинов: ненене, так нельзя, НИКОГДА) все слетит, и вообще лазить в ядро не вариант. Хуки для того и существуют, чтобы менять под себя

[Расул Гитинов]

Игорь Воротнёв: А могут быть какие-либо причины по которым этот хук не работает? А то я вставлял в functions.php как обычно, но по факту картинки остались в обертке

[Расул Гитинов]

Игорь Воротнёв: Аа все, активировался вроде. Спасибо Игорь большое!

Answer 4

[Антон Иванов]

Как насчёт отрицательных margin у картинки? А тег P оставить в покое.

Comments

[Расул Гитинов]

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

[Антон Иванов]

Сделайте несколько вариантов отрицательных margin для разных размеров viewport

[Антон Иванов]

Расул Гитинов А вы вообще то уверены, что у тега P есть правые/левые отступы? А то мне кажется, на картинке отступы у родительского блока сделаны.

[Расул Гитинов]

Антон: Нет, мне нужно чтобы размер картинки тоже уменьшался, например если бы небыло тега P я бы сделал max-width: 100%, а поскольку тег P есть, то когда я так делаю он принимает размер относительно тега P

[Расул Гитинов]

Антон: Да, это у родительского блока Content установлены padding

[Soho]

Расул Гитинов: как раз столкнулся с проблемой как у вас. Нашли как решить? у меня есть функция которая картинку оборачивает в div, но там другая проблема появляется((( 3 дня ищу решение

Answer 5

[KingAnton]

Добавьте в functions.php

remove_filter( 'the_content', 'wpautop' );

Comments

[Расул Гитинов]

Так она у всех элементо тег P убирает, а мне нужно чтобы только у IMG

[KingAnton]

Расул Гитинов: поработайте в редакторе, обернуть ваши тексты в тег не так сложно

Answer 6

[sergski]

Решается так:

p img {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Comments

[Расул Гитинов]

Изображение растягивается: prntscr.com/dasv5w

[sergski]

Расул Гитинов: Видимо, зафиксирована высота, сделайте для img height: auto;

[GreatRash]

Это костыль, а не решение.

[Расул Гитинов]

sergski: prntscr.com/daswn6 она увеличилась, но слишком большая. Нужно чтобы была не больше 690 px, но при этом если контент меньшего размера, то соответсвенно уменьшается

Answer 7

[GreatRash]

Basically you need to make WordPress treat img like block-level element for the purpose of formatting. Such elements are hardcoded in wpautop() and list is unfortunately not filtered.

What I would do is:

1) Fork wpautop() under different name.
2) Add img to regexp in $allblocks variable.
3) Remove wpautop from the_content filter.
4) Add your forked version to the_content.

You might need to play with priority and possibly remove and re-add other filters if something breaks because of changed processing order.

(c) - последний ответ особенно интересен

Comments

[Расул Гитинов]

Я не очень разобрался, объясните пожалуйста если не сложно

[GreatRash]

Расул Гитинов: Что именно не понятно?

[Расул Гитинов]

GreatRash: Процесс решения, имеется ввиду весь

[GreatRash]

Расул Гитинов:
1) Находим в проекте wordpress файл, который называется formatting.php (должен лежать в папке wp-includes)
2) В этом файле находим функцию, которая называется wpautop
3) Там находим переменную $allblocks (188 строка должна быть)
4) Туда дописываем img
5) PROFIT!

[Расул Гитинов]

GreatRash: Сейчас попробую

[Расул Гитинов]

GreatRash: Шикарно, помогло. Но после обновления версии wordpress она не слетит?

[GreatRash]

Расул Гитинов: Не уверен, надо проверять.