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


33

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.


Risposte:


34

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

Senza dubbio, questa è la risposta corretta. Grazie James, l'ho provato e funziona perfettamente.
Dwayne Charrington,

Ciao @Dwayne - grazie per il feedback. Ho aggiunto un filtro migliorato che gestirà i collegamenti, ora lo stiamo usando sul nostro sito client.
Jamesc

Dovresti assolutamente inserirlo nel repository dei plugin di Wordpress. Una rapida ricerca su Google mostra che molte persone hanno questo problema senza una buona soluzione.
Geoffrey Burdett,

1
Nota che questo non funzionerà con il imgmarkup predefinito HTML5 , cioè <img ...>senza la barra di chiusura. È meglio renderlo facoltativo nella tua regex. O meglio ancora, puoi lasciarlo fuori come se .*ne occuperà.
Bram Vanroy,

Qualcuno l'ha fatto funzionare <img ...>senza />?
Runnick,

13

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.

Proverò questo approccio. Non ho mai pensato di aggiungere effettivamente il tag img alla variabile allblocks, è un'idea geniale. Vedrò come vado.
Dwayne Charrington,

All'inizio ha funzionato bene, quindi ho colpito lo scenario quando un'immagine è all'interno di un tag di ancoraggio ed entrambi sono già all'interno di un paragrafo (quindi p> img> a). Con img trattato come un blocco wp-autop chiude il tag di paragrafo prima dell'inizio del tag img, eliminando il layout.
benz001,

2

forse questo aiuterà

remove_filter('the_content', 'wpautop')

Ma poi aggiungerai i paragrafi per tutto il resto manualmente.


Ho considerato questo approccio, ma poiché il layout è eccentrico, come ho detto, si basa fortemente sulla necessità di p tag. Mentre sto facendo una cosa di testo a 2 colonne in cui i tag p vengono spostati a sinistra per dare l'aspetto di 2 colonne di testo. Quindi puoi capire perché il tag ap che avvolge un'immagine sarebbe un problema perché anche questo è mobile.
Dwayne Charrington,

1

Soska ha dato un modo semplice.

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


Ho considerato anche questo ed è ancora un'opzione. Tuttavia, poiché è solo una immagine per salvare tutta la seccatura, potrei semplicemente usare le anteprime post in primo piano che mi permetterebbe di controllare come viene visualizzata l'immagine.
Dwayne Charrington,

inoltre puoi aggiungere un campo personalizzato al post / alla pagina, come l'immagine del pollice e salvare il percorso dell'immagine nel suo valore ...
Avinash

1

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.


1

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


apparentemente ha ancora più di 30 installazioni attive: D
Julix

1

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!


1

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


3
Usi davvero le virgolette? :)
fuxia

Ho preso in considerazione questo approccio al primo tentativo quando, ma il pensiero di manipolazioni DOM non necessarie tramite jQuery era un rischio eccessivo e un potenziale sovraccarico non necessario quando è possibile farlo in PHP con espressioni regolari difficili.
Dwayne Charrington,

0

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.


È piuttosto utile, anche se l'unico avvertimento che posso vedere è che se vuoi che le immagini non abbiano tag P ma abbiano anche del testo all'interno della tua pagina, sarà un casino enorme. Questo sarebbe probabilmente utile per i post che hanno solo immagini e forse alcune righe di testo. Comunque utile.
Dwayne Charrington,

Sì, ecco perché ho detto che dipende dal post.
Synetech,

0

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!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.