Остановить WordPress Wrapping Изображения в теге «P»

33

Я искал высоко и низко для простого решения этого, но безрезультатно. Wordpress продолжает оборачивать мои изображения в p-теги, и из-за эксцентричной природы макета сайта, над которым я работаю, это очень раздражает.

Я создал решение jQuery для распаковки изображений, но это не так уж и здорово. Он запаздывает из-за загрузки других материалов на странице, поэтому изменения происходят медленно. Есть ли способ предотвратить перенос Wordpress только изображения с тегами p? Возможно, можно запустить крючок или фильтр.

Это происходит при загрузке изображения, а затем вставке его в редактор WYSIWYG. Вручную войти в представление кода и удалить теги p не вариант, так как клиент не настолько технически неэффективен.

Я понимаю, что изображения встроены, но то, как у меня есть изображения, закодированные на сайте, находится внутри элементов div и настроено на блокировку, поэтому они являются действительным кодом.

Дуэйн Чаррингтон
источник

Ответы:

34

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

<?php
/*
Plugin Name: Image P tag remover
Description: Plugin to remove p tags from around images in content outputting, after WP autop filter has added them. (oh the irony)
Version: 1.0
Author: Fublo Ltd
Author URI: http://fublo.net/
*/

function filter_ptags_on_images($content)
{
    // do a regular expression replace...
    // find all p tags that have just
    // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
    // replace it with just the image tag...
    return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default.
add_filter('the_content', 'filter_ptags_on_images');

Если вы поместите его в php-файл в папке / wp-content / plugins и затем активируете его, он должен удалить теги p из любого параграфа, который просто содержит изображение.

Я не уверен, насколько сильным является регулярное выражение с точки зрения того, будет ли оно неудачным с выходами из других редакторов - например, если тег img закрыт только>, он потерпит неудачу. Если у кого-то есть что-то более сильное, это было бы очень полезно.

Ура,

Джеймс

--- Улучшенный фильтр ---

Для работы с изображениями, обернутыми в ссылки, он сохраняет ссылки в выводе и удаляет теги p.

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
jamesc
источник
Без сомнения, это правильный ответ. Спасибо Джеймс, я попробовал это, и это работает потрясающе.
Дуэйн Чаррингтон
Привет @Dwayne - спасибо за отзыв. Я добавил улучшенный фильтр, который будет обрабатывать ссылки, теперь мы используем его на нашем клиентском сайте.
Jamesc
Вы должны обязательно поместить это в хранилище плагинов Wordpress. Быстрый поиск в Google показывает, что многие люди имеют эту проблему без хорошего решения.
Джеффри Бердетт
1
Обратите внимание, что это не будет работать с imgразметкой по умолчанию HTML5 , то есть <img ...>без закрывающей косой черты. Лучше сделать это необязательным в своем регулярном выражении. Или еще лучше, вы можете оставить это, как .*позаботится об этом.
Брэм Ванрой
Кто-нибудь заставил это работать <img ...>без />?
Runnick
13

По сути, вам нужно сделать так, чтобы WordPress обрабатывал img как элемент уровня блока для форматирования. Такие элементы жестко закодированы,wpautop() и список, к сожалению, не фильтруется.

Что бы я сделал, это:

  1. Вилка wpautop()под другим именем.
  2. Добавьте imgв регулярное выражение в $allblocksпеременной.
  3. Удалить wpautopиз the_contentфильтра.
  4. Добавьте свою раздвоенную версию в the_content.
  5. Возможно, вам придется поиграть с приоритетом и, возможно, удалить и повторно добавить другие фильтры, если что-то сломалось из-за изменения порядка обработки.
Rarst
источник
Я собираюсь попробовать этот подход. Я никогда не думал о добавлении тега img в переменную allblocks, это гениальная идея. Я посмотрю, как я пойду.
Дуэйн Чаррингтон
Сначала хорошо сработало, потом я попал в сценарий, когда изображение находится внутри тега привязки, и оба уже находятся внутри абзаца (поэтому p> img> a). Когда img рассматривается как блок, wp-autop закрывает тэг абзаца перед началом тэга img, разрушая макет.
benz001
2

возможно это поможет

remove_filter('the_content', 'wpautop')

Но затем вы добавите абзацы для всего остального вручную.

Soska
источник
Я рассмотрел этот подход, но поскольку макет эксцентричен, как я уже сказал, он в значительной степени зависит от необходимости использования p-тегов. Поскольку я делаю текст с двумя столбцами, где p-теги плавают слева, чтобы создать видимость двух столбцов текста. Таким образом, вы можете понять, почему ap-тег, обертывающий изображение, будет проблемой, потому что он тоже плавает.
Дуэйн Чаррингтон
1

Соску дали один / легкий путь.

Но я извлекаю изображение из контента и отображаю его отдельно.

Авинаш
источник
Я тоже обдумал это, и это все еще вариант. Однако, поскольку это всего лишь одно изображение, чтобы сохранить все хлопоты, я мог бы просто использовать вместо этого избранные миниатюры постов, которые позволили бы мне контролировать способ отображения изображения.
Дуэйн Чаррингтон
также вы можете добавить настраиваемое поле к записи / странице, например, изображение большого пальца и сохранить путь к изображению в его значении ...
Avinash
1

Этот пост немного старый, но есть гораздо более простое решение, за исключением CSS с вашей стороны.

Обертывание тега img в div имеет небольшой отрицательный эффект.

Лаоши Ма
источник
1

Я разработал плагин, который исправил эту проблему: http://wordpress.org/extend/plugins/unwrap-images/

Это лучше, чем установка поля или погружение прямо в код Wordpress для тех, кто не хочет возиться с кодом, потому что он использует встроенную функцию развертывания jQuery, чтобы развернуть все изображения своих тегов p.

Надеюсь, это поможет кому-то! Ура, Брайан

gnzlz
источник
по-видимому, еще 30+ активных установок: D
Julix
1

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

Вот код:

function wpautop_forked($pee, $br = 1) {

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li
|pre|select|option|form|map|area|blockquote|img|address|math|style|input
|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer
|nav|figure|figcaption|details|menu|summary)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!(</' . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, '<object') !== false ) {
$pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
// make paragraphs, including one at the end
$pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
$pee = '';
foreach ( $pees as $tinkle )
$pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
$pee = preg_replace('|<p>\s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
$pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "<WPPreserveNewline />", $matches[0]);'), $pee);
$pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
$pee = str_replace('<WPPreserveNewline />', "\n", $pee);
}
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
$pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
if (strpos($pee, '<pre') !== false)
$pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n</p>$|", '</p>', $pee );

return $pee;
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');

Ура!

rlesko
источник
1

Я не эксперт, но я провел весь день, пытаясь найти де-факто, заключенное в p-теги, и это сработало для меня.

Я работаю над темой на основе WordPress и просто добавил это в файл functions.js

Jquery функция развернуть

> $(document).ready(function (){
> 
> // for images wraped in a tags
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> //for images wraped in just p tags
> $(‘.entry img’).unwrap(‘p’);

теперь я могу работать p и img отдельно.

Также можно добавить div с другим классом arround img, используя это:

$(document).ready(function (){

$('.entry img').wrap('<div class="justImg"></div>');

последний не решил мою проблему, потому что я хотел сделать p-теги с display: none; так что я действительно должен был взять эти img оттуда.

М Джоана
источник
3
Вы действительно используете фигурные кавычки? :)
fuxia
Я действительно рассматривал этот подход в первый раз, когда, но мысль о ненужных манипуляциях с DOM через jQuery была слишком большой риск и потенциальные ненужные накладные расходы, когда вы можете сделать это в PHP с хитрыми регулярными выражениями.
Дуэйн Чаррингтон
0

В зависимости от публикации, другим решением может быть использование плагина WP Unformatted для отключения функции auto-p для каждого поста.

Synetech
источник
Это довольно полезно, хотя единственное предостережение, которое я вижу, это то, что если вы хотите, чтобы изображения не имели P-тегов, но содержали текст на вашей странице, это будет один большой беспорядок. Это, вероятно, было бы хорошо для постов, которые просто имеют изображения и, возможно, несколько строк текста. Тем не менее, полезно.
Дуэйн Чаррингтон
Да, именно поэтому я сказал, что это зависит от должности.
Synetech
0

В случае, если кто-то ищет быстрый и грязный способ исправить это для любого тега, вот что я сделал:

  1. перейдите в wp-content / formatting.php
  2. найти функцию wpautop. (если вы пропустили это, это WP-AUTO-P , получите это?)
  3. fins переменная "все блоки", должна быть что-то вроде $allblocks = '(?:table|thead|tfoot|capti...
  4. в конце добавьте блок, который вы хотите опустить - img, aи т. д., например, если он заканчивается (...)menu|summary)';изменением на, (...)menu|summary|a)';чтобы добавить aтег и избежать его автоматического ввода . Обратите внимание на |разделитель каналов - это синтаксис регулярных выражений !

Вот и все, счастливого Wordpressing!

JDuarteDJ
источник