Прекратите Обертывать Изображения Wordpress Тегом "P"
Я искал повсюду простое решение этой проблемы, но безрезультатно. Wordpress продолжает упаковывать мои изображения в теги p, и из-за эксцентричного характера макета сайта, над которым я работаю, это очень раздражает.
Я создал решение jQuery для разворачивания изображений, но оно не так уж и здорово. Он отстает из-за загрузки других материалов на страницу, поэтому изменения вносятся медленно. Есть ли способ предотвратить обертывание Wordpress только изображениями с помощью теги p? Возможно, крючок или фильтр, который можно запустить.
Это происходит при загрузке изображения и последующей вставке его в редактор WYSIWYG. Вручную войти в представление кода и удалить теги p - это не вариант, так как клиент не настолько технически неумел.
Я понимаю, что изображения встроены, но то, как я закодировал изображения на сайте, находится внутри divs и настроено на блокировку, поэтому они являются допустимым кодом.
11 answers
Вот что мы сделали вчера на клиентском сайте, с которым у нас была именно такая проблема... Я создал быстрый фильтр в качестве плагина и активировал его.
<?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);
В основном вам нужно заставить WordPress обрабатывать img как элемент уровня блока для целей форматирования. Такие элементы жестко закодированы в wpautop()
и список, к сожалению, не отфильтрован.
Что бы я сделал, так это:
- Вилка
wpautop()
под другим именем. - Добавьте
img
в регулярное выражение в переменной$allblocks
. - Удалить
wpautop
из фильтраthe_content
. - Добавьте свою раздвоенную версию в
the_content
. - Возможно, вам придется играть с приоритетом и возможно, удалите и повторно добавьте другие фильтры, если что-то сломается из-за изменения порядка обработки.
Может быть, это поможет
remove_filter('the_content', 'wpautop')
Но затем вы собираетесь добавить абзацы для всего остального вручную.
Соска дал один/простой способ.
Но что я делаю, так это извлекаю изображение из содержимого и отображаю его отдельно.
Этот пост немного устарел, но есть гораздо более простое решение, запрещающее CSS с вашей стороны.
Обертывание тега img в div имеет небольшой отрицательный эффект.
Я разработал плагин, который исправил именно эту проблему: http://wordpress.org/extend/plugins/unwrap-images/
Это лучше, чем устанавливать поля или погружаться прямо в код Wordpress для тех, кто не хочет возиться с кодом, потому что он использует встроенную функцию разворачивания jQuery для разворачивания всех изображений их тегов p.
Надеюсь, это кому-то поможет! Твое здоровье, Брайан
Принятый ответ помог мне только с изображениями, но пересмотренный код плохо обрабатывает связанные изображения на моем сайте. В этом сообщении в блоге есть код, который отлично работает.
Вот код:
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');
Ура!
Я не эксперт, но только что провел весь день, пытаясь решить проблему с img, завернутым в теги 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 с другим классом вокруг img, используя это:
$(document).ready(function (){
$('.entry img').wrap('<div class="justImg"></div>');
Этот последний не решил мою проблему, потому что я хотел сделать теги p с дисплей: нет; так что мне действительно пришлось убрать оттуда эти изображения.
В зависимости от публикации другим решением может быть использование неформатированного плагина WP для отключения функции auto-p для каждой публикации.
На случай, если кто-то ищет быстрый и грязный способ исправить это для любого тега вот что я сделал:
- перейдите к wp-content/formatting.php
- найдите функцию wpautop. (на случай, если вы пропустили это, это WP-AUTO-P, понятно?)
- определяет переменную "все блоки", должно быть что-то вроде
$allblocks = '(?:table|thead|tfoot|capti...
- в конце добавьте блок, который вы хотите опустить -
img
,a
, и т.д... например, если он заканчивается на(...)menu|summary)';
, измените его на(...)menu|summary|a)';
, чтобы добавить тегa
и избегайте автоматического просмотра этого. Обратите внимание на разделитель каналов|
- это регулярное выражение синтаксис!
Вот и все, счастливого набора слов!
Поместите изображение внутри тега <div>
, без каких-либо пробелов между ними. Поэтому вместо:
<div class="your_container">
<div class="element1">...</div>
<div class="element2">...</div>
<img src="image.jpg" />
</div>
Вы пишете это:
<div class="your_container">
<div class="element1">...</div>
<div class="element2">...</div>
<div><img src="image.jpg" /></div>
</div>
У меня была такая же проблема с элементами <a>
, и это решило для меня.