Deje de envolver imágenes de Wordpress en una etiqueta "P"

He buscado por todas partes una solución simple a esto, pero fue en vano. Wordpress sigue envolviendo mis imágenes en etiquetas p y, debido a la naturaleza excéntrica del diseño de un sitio en el que estoy trabajando, esto es muy molesto.

He creado una solución jQuery para desenvolver imágenes, pero no es tan genial. Se retrasa debido a que otras cosas se cargan en la página y, por lo tanto, los cambios son lentos. ¿Hay alguna manera de evitar que Wordpress ajuste solo imágenes con etiquetas p? Un gancho o filtro tal vez que pueda ejecutarse.

Esto sucede al cargar una imagen y luego insertarla en el editor WYSIWYG. Entrar manualmente en la vista de código y eliminar las etiquetas p no es una opción, ya que el cliente no es tan técnicamente inepto.

Entiendo que las imágenes están en línea, pero la forma en que tengo las imágenes codificadas del sitio están dentro de divs y se configuran para bloquear, por lo que son códigos válidos.

Esto es lo que hicimos ayer en un sitio de cliente con el que teníamos este problema exacto ... Creé un filtro rápido como complemento y lo activé.

<?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');

Si coloca eso en un archivo php en su carpeta / wp-content / plugins y luego lo activa, debería eliminar las etiquetas p de cualquier parámetro que solo contenga una imagen.

No estoy seguro de cuán fuerte es la expresión regular en términos de si fallará con las salidas de otros editores, por ejemplo, si la etiqueta img se cierra con solo> fallará. Si alguien tiene algo más fuerte, eso sería realmente útil.

Aclamaciones,

James

--- Filtro mejorado ---

Para trabajar con imágenes envueltas en enlaces, mantiene los enlaces en la salida y elimina las etiquetas p.

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

Básicamente, debe hacer que WordPress trate a img como un elemento de nivel de bloque con el propósito de formatear. Dichos elementos están codificadoswpautop() y desafortunadamente la lista no se filtra.

Lo que haría es:

1. Horquilla wpautop()con otro nombre.
2. Añadir imga regexp en $allblocksvariable.
3. Retirar wpautopdel the_contentfiltro.
4. Agregue su versión bifurcada a the_content.
5. Es posible que deba jugar con prioridad y posiblemente eliminar y volver a agregar otros filtros si algo se rompe debido al cambio en el orden de procesamiento.

tal vez esto ayude

remove_filter('the_content', 'wpautop')

Pero luego va a agregar los párrafos para todo lo demás manualmente.

Soska ha dado una / manera fácil.

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

Esta publicación es un poco antigua, pero hay una solución mucho más simple, salvo CSS por su parte.

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

Desarrollé un complemento que solucionó este problema exacto: http://wordpress.org/extend/plugins/unwrap-images/

Es mejor que configurar el margen, o sumergirse directamente en el código de Wordpress para aquellos que no quieren meterse con el código porque usa la función de desenvoltura nativa de jQuery para desenvolver todas las imágenes de sus etiquetas p.

¡Espero que esto 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 vinculadas 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"; // 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');

¡Aclamaciones!

No soy un experto, pero acabo de pasar la tarde tratando de resolver de img envuelto en etiquetas p y esto funcionó para mí.

Estoy trabajando en un tema basado en WordPress y acabo de agregar esto al archivo functions.js

Función Jquery desenvolver

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

ahora puedo trabajar p e img por separado.

También puede agregar un div con una clase diferente alrededor del img usando esto:

$(document).ready(function (){

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

este último no resolvió mi problema porque quería hacer etiquetas p con display: none; así que realmente tuve que sacar esos img de allí.

Dependiendo de la publicación, otra solución podría ser utilizar el complemento WP sin formato para deshabilitar la función de auto-p por publicación.

En caso de que alguien busque una forma rápida y sucia de arreglar esto para cualquier etiqueta, esto es lo que hice:

1. ir a wp-content / formatting.php
2. Encuentra la función wpautop. (en caso de que te lo hayas perdido, es WP-AUTO-P , ¿entiendes?)
3. aletas la variable "todos los bloques", debería ser algo así como $allblocks = '(?:table|thead|tfoot|capti...
4. al final añadir el bloque que desea omitir - img, a, etc ... por ejemplo si termina en (...)menu|summary)';el cambio a (...)menu|summary|a)';añadir la aetiqueta y evitar autopeeing ella. Tenga en cuenta el |separador de tubería : ¡es la sintaxis de expresiones regulares !

Eso es todo, feliz Wordpressing!