Impedire a WordPress di Avvolgere le Immagini nei Tag "P"

Fondamentalmente devi far sì che WordPress tratti img come un elemento a livello di blocco per quanto riguarda la formattazione. Questi elementi sono hardcoded in wpautop() e purtroppo l'elenco non è filtrato.

Quello che farei è:

1. Fork di wpautop() con un nome diverso.
2. Aggiungere img alla regex nella variabile $allblocks.
3. Rimuovere wpautop dal filtro the_content.
4. Aggiungere la tua versione forkata a the_content.
5. Potresti aver bisogno di giocare con la priorità e possibilmente rimuovere e riaggiungere altri filtri se qualcosa si rompe a causa del cambiamento nell'ordine di elaborazione.

forse questo ti aiuterà

remove_filter('the_content', 'wpautop')

Ma poi dovrai aggiungere manualmente i paragrafi per tutto il resto.

Questo articolo è un po' datato, ma esiste una soluzione molto più semplice, a parte il CSS sul tuo sito.

Avvolgere il tag img in un div ha un impatto negativo minimo.

Soska ha fornito un modo semplice.

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

Ho sviluppato un plugin che risolve esattamente questo problema: http://wordpress.org/extend/plugins/unwrap-images/

È meglio che impostare i margini, o intervenire direttamente sul codice di Wordpress per coloro che non vogliono pasticciare con il codice, perché utilizza la funzione nativa unwrap di jQuery per rimuovere tutti i tag p che racchiudono le immagini.

Spero che questo possa aiutare qualcuno! Saluti, Brian

La risposta accettata mi ha aiutato solo con le immagini, ma il codice rivisto non gestisce bene le immagini collegate nel mio sito. Questo articolo del blog contiene un codice che funziona perfettamente.

Ecco il codice:

function wpautop_forked($pee, $br = 1) {

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // per semplificare, aggiunge un newline alla fine
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Aggiunge spaziatura
$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); // newline cross-platform
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); // gestisce i duplicati
// crea i paragrafi, incluso uno alla fine
$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); // in alcune condizioni strane può creare un P di soli spazi
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // non modificare i tag
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problema con liste annidate
$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); // opzionalmente aggiunge interruzioni di riga
$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 passato tutto il pomeriggio cercando di risolvere il problema delle img avvolte nei tag p e questo ha funzionato per me.

Sto lavorando su un tema basato su WordPress e ho appena aggiunto questo al file functions.js

Funzione jQuery unwrap

> $(document).ready(function (){
> 
> // per immagini avvolte in tag a
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> // per immagini avvolte solo in tag p
> $(‘.entry img’).unwrap(‘p’);

Ora posso lavorare con i tag p e img separatamente.

Posso anche aggiungere un div con una classe diversa attorno all'img usando questo codice:

$(document).ready(function (){

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

Quest'ultimo non ha risolto il mio problema perché volevo impostare i tag p con display:none; quindi dovevo davvero togliere quelle img da lì.

Inserisci la tua immagine all'interno di un tag <div>, senza alcun carattere di spazio bianco tra di loro. Quindi invece di:

<div class="your_container">
    <div class="element1">...</div>
    <div class="element2">...</div>
    <img src="image.jpg" />
</div>

Scrivi così:

<div class="your_container">
    <div class="element1">...</div>
    <div class="element2">...</div>
    <div><img src="image.jpg" /></div>
</div>

Ho avuto lo stesso problema con gli elementi <a>, e questa soluzione ha funzionato per me.

A seconda del post, un'altra soluzione potrebbe essere utilizzare il plugin WP Unformatted per disabilitare la funzione auto-p su base individuale per ogni articolo.

Nel caso qualcuno stia cercando un modo veloce e sporco per risolvere questo problema per qualsiasi tag, ecco cosa ho fatto:

1. vai su wp-content/formatting.php
2. cerca la funzione wpautop. (nel caso te lo fossi perso, è WP-AUTO-P, capito?)
3. trova la variabile "all blocks", dovrebbe essere qualcosa tipo $allblocks = '(?:table|thead|tfoot|capti...
4. alla fine aggiungi il blocco che vuoi escludere - img, a, ecc... ad esempio se termina con (...)menu|summary)'; cambia in (...)menu|summary|a)'; per aggiungere il tag a ed evitare che venga autopizzato. Nota il separatore pipe | - è sintassi regex!

Tutto qui, buon WordPressing!