Detener Wordpress envolver imágenes en una etiqueta "P"

31

He buscado alta y baja en busca de una solución simple para esto, pero sin éxito. 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 buena. 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 envuelva solo imágenes con etiquetas p? Un gancho o filtro tal vez se puede ejecutar.

Esto sucede cuando se carga una imagen y luego se inserta en el editor WYSIWYG. Ir manualmente a la vista de código y eliminar las etiquetas p no es una opción, ya que el cliente no es 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 son dentro de divs y están configuradas para bloquear, por lo que son un código válido.

    
pregunta Dwayne Charrington 17.01.2011 - 05:08

10 respuestas

32

Esto es lo que hicimos ayer en un sitio de cliente con el que tuvimos este problema exacto con ... 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', '', $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 para que solo contenga una imagen.

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

Saludos,

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', '', $content);
    
respondido por el jamesc 02.02.2011 - 13:26
13

Básicamente, necesitas hacer que WordPress trate a img como un elemento de nivel de bloque con el propósito de formatear. Tales elementos son hardcoded en wpautop() y lista desafortunadamente no está filtrado.

Lo que haría es:

  1. Bifurcación wpautop() con un nombre diferente.
  2. Agregue img a regexp en $allblocks variable.
  3. Elimine wpautop del filtro the_content .
  4. Agrega tu 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 a un cambio en el orden de procesamiento.
respondido por el Rarst 17.01.2011 - 09:33
2

tal vez esto ayude

remove_filter('the_content', 'wpautop')

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

    
respondido por el Soska 17.01.2011 - 08:54
1

Soska ha dado una / manera fácil.

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

    
respondido por el Avinash 17.01.2011 - 10:46
1

Desarrollé un complemento que solucionó este problema exacto: enlace

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

Espero que esto ayude a alguien! Saludos, Brian

    
respondido por el gnzlz 04.11.2011 - 09:18
1

No soy un experto, pero pasé el hoyo por la tarde tratando de resolver el problema de img wraped in p tags y esto me funcionó.

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

La función Jquery se desenvuelve

> $(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 pantalla: ninguna; así que realmente tuve que sacar a esos img de allí.

    
respondido por el M Joana 18.02.2013 - 19:29
0

Dependiendo de la publicación, otra solución podría ser utilizar el complemento WP Unformatted para deshabilitar la función automática. p función en una base por publicación.

    
respondido por el Synetech 23.02.2011 - 02:33
0

Esta publicación es un poco antigua, pero hay una solución mucho más sencilla, salvo CSS en tu extremo.

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

    
respondido por el Laoshi Ma 19.08.2011 - 20:48
0

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

¡Salud!

    
respondido por el rlesko 01.01.2012 - 14:19
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. vaya a wp-content / formatting.php
  2. encuentra la función wpautop. (En caso de que te lo perdieras, es WP-AUTO-P , ¿entiendes?)
  3. encuentra la variable "todos los bloques", debería ser algo así como $allblocks = '(?:table|thead|tfoot|capti...
  4. al final agregue el bloque que desea omitir - img , a , etc ... por ejemplo, si finaliza en (...)menu|summary)'; , cambie a (...)menu|summary|a)'; para agregar la etiqueta a y evitar que se envíe automáticamente . Tenga en cuenta la tubería | separador: ¡es la sintaxis de regex !

¡Eso es, feliz Wordpressing!

    
respondido por el JDuarteDJ 12.08.2018 - 00:04

Lea otras preguntas en las etiquetas