Premi “Invio” per saltare al contenuto

Abilitare il tag iframe e altri tag vietati nell’editor di WordPress

TinyMCE è l’editor di testo che utilizzate quando scrivete articoli sul vostro sito in WordPress. Tra i vari compiti di questo editor c’è anche la pulizia del codice HTML, e questo è un bene altrimenti un articolo potrebbe “rompere” la grafica di un sito o addirittura comprometterne la sicurezza.

Recentemente ho dovuto rispondere a una richiesta di questo tipo, l’esigenza era molto semplice e mi fornisce lo spunto per spiegarvi come aggiungere il supporto di TinyMCE ai tag non supportati.

Per sapere se un tag è supportato dal vostro sito WordPress basterà provare ad utilizzarlo, quindi accedendo all’editor del vostro sito per modificare o inserire un nuovo articolo, passate alla modalità Testo e scrivete il codice:

<div>UNO</div>

<daniele>DUE</daniele>

Ovviamente il tag daniele non è un tag standard dell’HTML, per questo motivo non è sicuramente tra quelli supportati. Se a questo punto passate alla modalità Visuale e poi nuovamente alla modalità Testo noterete un cambiamento:

<div>UNO</div>

DUE

Cosa è accaduto? I tag non riconosciuti dall’editor vengono eliminati.

Come risolvere il problema?

Possiamo facilmente aggiungere altri tag all’elenco di quelli accettati, basta scrivere un po’ di codice all’interno del file functions.php del tema che stiamo usando.

add_filter('tiny_mce_before_init', 'aggiungi_tag');
function aggiungi_tag($settings) {
    $settings["extended_valid_elements"] = "daniele[id|class|style|name]";
    return $settings;
};

Il codice qui sopra abiliterà l’uso del tag daniele e per questo tag consentirà tutta una serie di attributi, elencati tra le parentesi quadre e separati da un pipe |.

Ma a me serve il tag iFrame, che me ne faccio del tag “daniele”?

A questo punto dovreste essere in grado di aggiungere al vostro editor di WordPress tutti i tag che vi servono, basterà modificare leggermente il codice di qui sopra.

Ma…

Se vi serve solo il supporto per il tag iFrame, e se volete aiutare questo blog, o se non avete voglia di mettere mano al codice, oppure se preferite un plugin da installare facile facile che funzioni anche dopo che avrete cambiato tema utilizzate il pulsante qui sotto per scaricare il plugin bello, pronto, testato e funzionante:

Inserisci nome e indirizzo email per iscriverti alla mia newsletter e ricevere il file immediatamente.
In breve: i dati inseriti in questo modulo saranno utilizzati per inviarti il link per scaricare il file che desideri, saranno conservati da un servizio esterno che si chiama MailChimp e in qualsiasi momento potrai cancellare la tua iscrizione al seguente link: https://danielealessandra.us7.list-manage.com/unsubscribe?u=546bebc381e525372d2120083&id=326af7d230.

Puoi leggere l'informativa completa cliccando sul link Privacy Policy che trovi dovunque su questa pagina, e comunque visitando in qualsiasi momento l'indirizzo https://www.danielealessandra.com/privacy-policy/
Ho letto e accetto l’informativa sulla privacy.

Per richieste, ringraziamenti e insulti, utilizzate i commenti qui sotto.

loading spinner

7 Commenti

  1. monica 4 Dicembre 2018

    ciao, cercando sul web ho trovato questa pagina. devo creare un sito WordPress per un mio cliente ed ho trovato temi davvero carini. il fatto è che un loro fornitore mi ha inviato due codici iframe che dovrei inserire, in pratica dovrei visionare la loro grigia prodotti senza caricarla e loro si preoccuperebbero dell’aggiornamento prodotti. non mi era ancora capitato e non sono bene come inserirlo.

    loading spinner
    • Daniele Alessandra 5 Dicembre 2018

      Ciao Monica, non so perché tu debba utilizzare WordPress per il lavoro che descrivi, il mio plugin abilita l’inserimento del tag IFRAME dall’editor TinyMCE ma come saprai proprio domattina sarà disponibile WordPress 5.0 e questo significa che possiamo dire addio a TinyMCE.
      Quello che farei io al tuo posto è un file ad hoc per una pagina, questo è più facile se fai un tema child, ed è sempre una buona idea utilizzare temi child.
      Non so che dimestichezza tu abbia con lo sviluppo di temi WordPress ma sappi che se inserisci all’interno della cartella del tema un file chiamato page-prodotti.php e crei una pagina il cui slug è esattamente “prodotti” il contenuto del file “page-prodotti.php” viene utilizzato per la visualizzazione. Potresti utilizzare uno dei file già presenti sul tema padre come punto di partenza per creare questa speciale vista e al suo interno inseriresti tutto il codice HTML che ti serve (una buona base di partenza sarebbe “page.php” o “single.php” che trovi già all’interno del tema).
      Spero che questo spunto ti sarà utile.

      loading spinner
  2. Giuseppe Vitale 24 Maggio 2016

    Io ho aggiunto e attivato il plugin al mio blog che ha la versione 4.5.2 di WordPress e purtroppo non funziona :( Che posso fare?

    loading spinner
    • Daniele Alessandra 25 Maggio 2016

      Ciao Giuseppe, mi dispiace che non stia funzionando. Vediamo di capire perché…
      Puoi spiegarmi i passaggi per riprodurre l’errore?

      loading spinner
      • Giuseppe Vitale 25 Maggio 2016

        Ho capito e risolto il problema! In realtà il tuo plugin funziona benissimo. Solo che io ho installato nel mio browser Chrome l’estensione uBlock che tengo per evitare la miriade di popup e tutte le pubblicità indesiderate. Essa però quando inserivo il tag iframe nel codice dei post che scrivo nel mio blog con l’editor di WordPress impediva le necessarie comunicazioni con il server a cui il codice nell’iframe fa riferimento. mi è bastato sospendere l’estensione per il mio sito per far funzionare tutto per bene. Grazie Daniele! ;)

        loading spinner
  3. Pino 30 Aprile 2016

    Salve, ma su wordpress.com è possibile fare qualcosa? essendo che plugin i non sono compatibili

    loading spinner
    • Daniele Alessandra 30 Aprile 2016

      Ciao Pino, grazie per aver letto il mio articolo.
      Come sai wordpress.com è un servizio per blogger basato su CMS WordPress, ha numerosi limiti tra cui l’impossibilità di installare temi e plugin a piacere.
      Se la tua necessità è limitata a un singolo caso puoi provare a inserire il tuo HTML disattivando l’editor wysiwyg, dovresti essere in grado di far passare qualsiasi tag senza validazione.
      Ti consiglio comunque di passare da wordpress.com a un’installazione autonoma di WordPress.
      Buon lavoro.

      loading spinner

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *