Rendi responsivi i tweet incorporati in WordPress

WordPress ti consente di incorporare tweet incollando l’URL del tweet nei tuoi post. Ottieni una bella carta con il tweet e tutti i dettagli rilevanti. Purtroppo, questa scheda non funzionerà su siti reattivi a causa di una larghezza di correzione applicata da Twitter. In questo post vedremo come rimuoverlo e anche rendere il nostro tweet incorporato adeguatamente reattivo.

Panoramica

Prima che il tweet venga elaborato per mostrare la scheda con l’autore, l’avatar Twitter, il pulsante Segui e altri metadati, viene visualizzato come un semplice elemento HTML blockquote con l’attributo di larghezza fissa impostato, che per impostazione predefinita è 500px. Ovviamente, questa larghezza fissa interromperà il nostro layout reattivo, quindi in pratica dobbiamo rimuovere questo attributo in modo che la scheda tweet elaborata appaia senza larghezza fissa.

Dopo averlo rimosso, applicheremo un semplice stile CSS in modo che funzioni in modo reattivo con il resto delle dimensioni del sito.

WordPress oEmbed e filtri

Il nostro tweet viene posizionato utilizzando oEmbed, una tecnologia utilizzata da WordPress che ci consente di inserire contenuti da altri siti semplicemente inserendo il collegamento nel nostro editor di post. WordPress interrogherà automaticamente il sito del provider (che non può essere solo Twitter, ma YouTube, Vimeo e altri) e otterrà l’HTML da inserire nel nostro sito.

L’HTML restituito dal sito del provider può essere elaborato utilizzando uno dei filtri forniti da WordPress per farlo e modificare il markup. Utilizzeremo il filtro oembed_result, che viene eseguito dopo aver ottenuto l’HTML dal provider oEmbed e prima che venga salvato nella cache. Il vantaggio di ciò è che il filtro non dovrà essere eseguito ogni volta che si visita il sito, con conseguente risposta più rapida e, naturalmente, tempi di caricamento più rapidi.

Filtraggio del tweet

Questo codice dovrebbe essere inserito nel file functions.php del tuo tema

Il $urlparametro è il collegamento al tweet che stiamo incorporando. Stiamo controllando se proviene da Twitter, altrimenti non vogliamo eseguirlo. Stiamo usando str_replace per cercare la stringa width="500"sostituendola con una stringa vuota.

Rendere reattiva la scheda tweet

Abbiamo ancora bisogno di aggiungere alcuni CSS per renderlo reattivo, quindi inserisci quanto segue nel foglio di stile del tuo tema (o plug-in).

#main .twitter-tweet-rendered, #main .twt-border {
    max-width: 100% !important; 
}

e proprio con questo i tuoi tweet incorporati saranno reattivi.