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

33

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.

Dwayne Charrington
fuente

Respuestas:

34

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);
jamesc
fuente
Sin duda, esta es la respuesta adecuada. Gracias James, lo probé y funciona de maravilla.
Dwayne Charrington
Hola @Dwayne: gracias por los comentarios. Agregué un filtro mejorado que manejará los enlaces, ahora lo estamos usando en nuestro sitio cliente.
jamesc
Definitivamente deberías poner esto en el repositorio de plugins de Wordpress. Una búsqueda rápida en Google muestra que muchas personas están teniendo este problema sin una buena solución.
Geoffrey Burdett
1
Tenga en cuenta que esto no funcionará con el imgmarcado predeterminado de HTML5 , es decir, <img ...>sin la barra inclinada de cierre. Es mejor hacer eso opcional en su expresión regular. O mejor aún, puede dejarlo fuera, ya .*que se encargará de ello.
Bram Vanroy
¿Alguien lo ha hecho funcionar para <img ...>fuera />?
Runnick
13

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.
Rarst
fuente
Voy a intentar este enfoque. Nunca pensé en agregar la etiqueta img a la variable allblocks, es una idea genial. Veré cómo me va.
Dwayne Charrington
Al principio funcionó bien, luego llegué al escenario cuando una imagen está dentro de una etiqueta de anclaje y ambas ya están dentro de un párrafo (entonces p> img> a). Con img tratado como un bloque, wp-autop cierra la etiqueta de párrafo antes de que comience la etiqueta img, rompiendo el diseño.
benz001
2

tal vez esto ayude

remove_filter('the_content', 'wpautop')

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

Soska
fuente
Considere este enfoque, pero debido a que el diseño es excéntrico como dije, depende en gran medida de la necesidad de etiquetas p. Como estoy haciendo un texto de 2 columnas donde las etiquetas p flotan a la izquierda para dar la apariencia de 2 columnas de texto. Entonces, puede ver por qué una etiqueta ap envolver una imagen sería un problema porque también está flotando.
Dwayne Charrington
1

Soska ha dado una / manera fácil.

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

Avinash
fuente
También consideré esto y todavía es una opción. Sin embargo, debido a que es solo una imagen para guardar toda la molestia, podría usar miniaturas de publicaciones destacadas que me permitirían controlar cómo se muestra la imagen.
Dwayne Charrington
También puede agregar un campo personalizado a la publicación / página, como la imagen del pulgar y guardar la ruta de la imagen en su valor ...
Avinash
1

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.

Laoshi Ma
fuente
1

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

gnzlz
fuente
aparentemente todavía tiene más de 30 instalaciones activas: D
Julix
1

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!

rlesko
fuente
1

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í.

M Joana
fuente
3
¿Realmente usas comillas rizadas? :)
fuxia
En primer lugar, consideré este enfoque, pero la idea de una manipulación DOM innecesaria a través de jQuery era demasiado arriesgado y una sobrecarga innecesaria potencial cuando se puede hacer esto en PHP con expresiones regulares difíciles.
Dwayne Charrington
0

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.

Synetech
fuente
Eso es bastante útil, aunque la única advertencia que puedo ver es que si quieres que las imágenes no tengan etiquetas P pero también tengan texto dentro de tu página, será un desastre enorme. Esto probablemente sería bueno para publicaciones que solo tienen imágenes y tal vez algunas líneas de texto. Aún así, útil.
Dwayne Charrington
Sí, por eso dije que depende de la publicación.
Synetech
0

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!

JDuarteDJ
fuente