Detener las imágenes de envoltura de WordPress en una etiqueta "P"

Question

He buscado en alto y bajo una solución simple para esto, pero fue en vano. WordPress sigue envolviendo mis imágenes en etiquetas P y debido a la naturaleza excéntrica del diseño para 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 bueno. Se retrasa debido a que otras cosas se cargan en la página y, por lo tanto, los cambios son lentos para realizarse. ¿Hay alguna manera de evitar que WordPress envuelva solo imágenes con etiquetas P? Un gancho o filtro tal vez que se pueda ejecutar.

Esto está sucediendo 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 inepto 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 los DIV y se establecen para bloquear, por lo que son un código válido.

Answer 1

Esto es lo que hicimos ayer en un sitio de cliente con el que estábamos teniendo 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 lo deja caer en un archivo PHP en su carpeta /WP-Content /Plugins y luego lo activa, debe eliminar las etiquetas P de cualquier para que solo contenga una imagen.

No estoy seguro de qué tan fuerte es el regexp en términos de si fallará con las salidas de otros editores, por ejemplo, si la etiqueta IMG está cerrada con solo> fallará. Si alguien tiene algo más fuerte, eso sería realmente útil.

Salud,

Jaime

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

Answer 2

Básicamente necesitas hacer un trato de WordPress img como elemento de nivel de bloque con el propósito de formatear. Tales elementos son codificado wpautop() y la lista desafortunadamente no está filtrada.

Lo que haría es:

1. Tenedor wpautop() bajo un nombre diferente.
2. Agregar img para regexp en $allblocks variable.
3. Remover wpautop de the_content filtrar.
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 a una orden de procesamiento modificada.

Answer 3

tal vez esto ayude

remove_filter('the_content', 'wpautop')

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

Answer 4

Soska ha dado una forma fácil.

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

Answer 5

Esta publicación es un poco vieja, pero hay una solución mucho más simple, salvo CSS en su extremo.

Envolver la etiqueta IMG en un DIV tiene poco efecto negativo.

Answer 6

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

Es mejor que establecer 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 Unwrap nativa de JQuery para desenvolver todas las imágenes de sus etiquetas P.

¡Espero que esto ayude a alguien! Saludos, Brian

Answer 7

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. Este El 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!

Answer 8

No soy un experto, pero acabo de pasar la tarde del hoyo 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

JQuery function Unwrap

> $(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, 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 la pantalla: Ninguno; Así que realmente tuve que sacar a esos IMG de allí.

Answer 9

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

Answer 10

En caso de que alguien busque un rápido y sucio Manera de arreglar esto para ningún Etiqueta Esto es lo que hice:

1. Vaya a WP-Content/Formatting.php
2. Encuentre la función WPAUTOP. (en caso de que te lo hayas perdido, es WP-Auto-P, ¿Consíguelo?)
3. aleta 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 termina en (...)menu|summary)'; cambiar a (...)menu|summary|a)'; Para agregar el a etiqueta y evita piloto automático eso. Tenga en cuenta la tubería | Separador - Es regex ¡sintaxis!

¡Eso es todo, feliz WordPressing!