Ferma Wordpress che avvolge le immagini in un tag “P”

Ho cercato in alto e in basso una soluzione semplice a questo, ma senza risultati. Wordpress continua a racchiudere le mie immagini in tag p e, a causa della natura eccentrica del layout per un sito su cui sto lavorando, questo è molto fastidioso.

Ho creato una soluzione jQuery per scartare le immagini, ma non è eccezionale. È in ritardo a causa di altre cose caricate sulla pagina e quindi le modifiche sono lente da apportare. C'è un modo per impedire a Wordpress di avvolgere solo le immagini con tag p? Forse un hook o un filtro che può essere eseguito.

Ciò accade quando si carica un'immagine e la si inserisce nell'editor WYSIWYG. Passare manualmente alla visualizzazione del codice e rimuovere i tag p non è un'opzione poiché il client non è tecnicamente inetto.

Capisco che le immagini sono in linea, ma il modo in cui ho le immagini codificate nel sito è all'interno di div e impostato per bloccare, quindi sono codice valido.

ecco cosa abbiamo fatto ieri su un sito client con cui stavamo riscontrando questo esatto problema ... Ho creato un filtro rapido come plugin e l'ho attivato.

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

Se lo trascini in un file php nella cartella / wp-content / plugins e poi lo attivi, dovrebbe rimuovere i tag p da qualsiasi para che contenga solo un'immagine.

Non sono sicuro di quanto sia forte il regexp in termini di errore con output di altri editor, ad esempio se il tag img viene chiuso solo con> non riuscirà. Se qualcuno ha qualcosa di più forte, sarebbe davvero utile.

Saluti,

Giacomo

--- Filtro migliorato ---

Per lavorare con immagini racchiuse in collegamenti, mantiene i collegamenti nell'output e rimuove i tag p.

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

Fondamentalmente devi fare in modo che WordPress tratti img come un elemento a livello di blocco ai fini della formattazione. Tali elementi sono codificatiwpautop() e l'elenco purtroppo non è filtrato.

Quello che vorrei fare è:

1. Biforcare wpautop()con un nome diverso.
2. Aggiungi imga regexp in $allblocksvariabile.
3. Rimuovi wpautopdal the_contentfiltro.
4. Aggiungi la tua versione biforcuta a the_content.
5. Potrebbe essere necessario giocare con priorità ed eventualmente rimuovere e aggiungere nuovamente altri filtri se qualcosa si interrompe a causa di un ordine di elaborazione modificato.

forse questo aiuterà

remove_filter('the_content', 'wpautop')

Ma poi aggiungerai i paragrafi per tutto il resto manualmente.

Soska ha dato un modo semplice.

Ma quello che faccio è estrarre l'immagine dal contenuto e visualizzarla separatamente.

Questo post è un po 'vecchio, ma esiste una soluzione molto più semplice, a parte CSS.

Avvolgere il tag img in un div ha poco effetto negativo.

Ho sviluppato un plug-in che ha risolto questo problema esatto: http://wordpress.org/extend/plugins/unwrap-images/

È meglio che impostare il margine o immergersi direttamente nel codice Wordpress per coloro che non vogliono pasticciare con il codice perché utilizza la funzione di eliminazione nativa di jQuery per scartare tutte le immagini dei loro tag p.

Spero che questo aiuti qualcuno! Saluti, Brian

La risposta accettata mi ha aiutato solo con le immagini ma il codice rivisto non gestisce bene le immagini collegate sul mio sito. Questo post sul blog ha un codice che funziona perfettamente.

Ecco il codice:

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

Saluti!

Non sono un esperto, ma ho appena trascorso il buco nel pomeriggio cercando di risolvere de img avvolto in tag p e questo ha funzionato per me.

Sto lavorando su un tema basato su wordpress e l'ho appena aggiunto al file Functions.js

Funzione jquery da scartare

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

ora posso lavorare p e img separatamente.

Inoltre puoi aggiungere un div con una classe diversa attorno a img usando questo:

$(document).ready(function (){

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

quest'ultimo non ha risolto il mio problema perché volevo creare tag p con display: none; quindi ho dovuto davvero togliere quei img da lì.

A seconda del post, un'altra soluzione potrebbe essere quella di utilizzare il plug-in WP non formattato per disabilitare la funzione auto-p in base al post.

Nel caso in cui qualcuno cerchi un modo rapido e sporco per risolvere questo problema per qualsiasi tag, ecco cosa ho fatto:

1. vai su wp-content / formatting.php
2. trova la funzione wpautop. (nel caso lo avessi perso, è WP-AUTO-P , capito?)
3. pinne la variabile "tutti i blocchi", dovrebbe essere qualcosa di simile $allblocks = '(?:table|thead|tfoot|capti...
4. alla fine aggiungere il blocco che si desidera omettere - img, aecc., ad esempio, se termina con la (...)menu|summary)';modifica (...)menu|summary|a)';per aggiungere il atag ed evitare la visualizzazione automatica . Nota il |separatore di tubi : è la sintassi regex !

Tutto qui, felice Wordpressing!