Evitar que WordPress envuelva las imágenes en etiquetas "P"

Básicamente, necesitas hacer que WordPress trate a img como un elemento a nivel de bloque para fines de formato. Estos elementos están codificados directamente en wpautop() y la lista desafortunadamente no se puede filtrar.

Lo que yo haría es:

1. Hacer un fork de wpautop() con un nombre diferente.
2. Añadir img a la expresión regular en la variable $allblocks.
3. Eliminar wpautop del filtro the_content.
4. Añadir tu versión modificada a the_content.
5. Puede que necesites ajustar la prioridad y posiblemente eliminar y volver a añadir otros filtros si algo se rompe debido al cambio en el orden de procesamiento.

quizás esto te ayude

remove_filter('the_content', 'wpautop')

Pero entonces tendrás que añadir los párrafos manualmente para todo lo demás.

Esta publicación es un poco antigua, pero existe una solución mucho más simple, excluyendo el CSS de tu parte.

Envolver la etiqueta img en un div tiene poco efecto negativo.

Soska ha proporcionado una forma fácil.

Pero lo que hago es extraer la imagen del contenido y mostrarla por separado.

Desarrollé un plugin que soluciona este problema exacto: http://wordpress.org/extend/plugins/unwrap-images/

Es mejor que configurar márgenes o meterse directamente en el código de WordPress para aquellos que no quieren lidiar con código, ya que utiliza la función nativa unwrap de jQuery para eliminar las etiquetas p que envuelven a las imágenes.

¡Espero que esto le ayude a alguien! Saludos, Brian

La respuesta aceptada me ayudó solo con las imágenes, pero el código revisado no maneja bien las imágenes enlazadas en mi sitio. Esta publicación de blog tiene un código que funciona perfectamente.

Aquí está el código:

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

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // para facilitar las cosas, rellenamos el final
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Espaciar un poco los elementos
$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); // saltos de línea multiplataforma
if ( strpos($pee, '<object') !== false ) {
$pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no contenido dentro de object/embed
$pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // manejar duplicados
// crear párrafos, incluyendo uno al final
$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); // en ciertas condiciones extrañas podría crear un P de solo espacios
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // no aplicar formato a una etiqueta
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problema con listas anidadas
$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); // opcionalmente crear saltos de línea
$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');

¡Saludos!

No soy un experto pero pasé toda la tarde intentando resolver el problema de las imágenes envueltas en etiquetas p y esto funcionó para mí.

Estoy trabajando en un tema basado en WordPress y simplemente agregué esto al archivo functions.js

Función jQuery unwrap

> $(document).ready(function (){
> 
> // para imágenes envueltas en etiquetas a
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> // para imágenes envueltas solo en etiquetas p
> $(‘.entry img’).unwrap(‘p’);

Ahora puedo trabajar con las etiquetas p e img por separado.

También se puede agregar un div con una clase diferente alrededor de la imagen usando esto:

$(document).ready(function (){

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

Esta última no resolvió mi problema porque quería hacer que las etiquetas p tuvieran display:none;, así que realmente tuve que sacar esas imágenes de ahí.

Coloca tu imagen dentro de una etiqueta <div>, sin ningún carácter de espacio en blanco entre ellas. Así que en lugar de:

<div class="your_container">
    <div class="element1">...</div>
    <div class="element2">...</div>
    <img src="image.jpg" />
</div>

Escribe esto:

<div class="your_container">
    <div class="element1">...</div>
    <div class="element2">...</div>
    <div><img src="image.jpg" /></div>
</div>

He tenido el mismo problema con elementos <a>, y esto lo solucionó para mí.

Dependiendo de la entrada, otra solución podría ser usar el plugin WP Unformatted para desactivar la función auto-p en una base por entrada.

En caso de que alguien esté buscando una forma rápida y sucia de solucionar esto para cualquier etiqueta, esto es lo que hice:

1. Ve a wp-content/formatting.php
2. Busca la función wpautop. (por si no lo pillaste, es WP-AUTO-P, ¿entiendes?)
3. Busca la variable "all blocks", debería ser algo como $allblocks = '(?:table|thead|tfoot|capti...
4. Al final añade el bloque que quieras omitir - img, a, etc... Por ejemplo, si termina en (...)menu|summary)'; cámbialo a (...)menu|summary|a)'; para añadir la etiqueta a y evitar que le aplique el autopeeing. ¡Fíjate en el separador de barra vertical | - es sintaxis de regex!

¡Eso es todo, feliz WordPresseo!