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\u00e0 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.<\/p>\n
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 \u00e8 500px. Ovviamente, questa larghezza fissa interromper\u00e0 il nostro layout reattivo, quindi in pratica dobbiamo rimuovere questo attributo in modo che la scheda tweet elaborata appaia senza larghezza fissa.<\/p>\n
Dopo averlo rimosso, applicheremo un semplice stile CSS in modo che funzioni in modo reattivo con il resto delle dimensioni del sito.<\/p>\n
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\u00e0 automaticamente il sito del provider (che non pu\u00f2 essere solo Twitter, ma YouTube, Vimeo e altri) e otterr\u00e0 l’HTML da inserire nel nostro sito.<\/p>\n
L’HTML restituito dal sito del provider pu\u00f2 essere elaborato utilizzando uno dei filtri forniti da WordPress per farlo e modificare il markup. Utilizzeremo il filtro oembed_result<\/strong>, che viene eseguito dopo aver ottenuto l’HTML dal provider oEmbed e prima che venga salvato nella cache. Il vantaggio di ci\u00f2 \u00e8 che il filtro non dovr\u00e0 essere eseguito ogni volta che si visita il sito, con conseguente risposta pi\u00f9 rapida e, naturalmente, tempi di caricamento pi\u00f9 rapidi.<\/p>\n Questo codice dovrebbe essere inserito nel file functions.php del tuo tema<\/p>\n Il Abbiamo ancora bisogno di aggiungere alcuni CSS per renderlo reattivo, quindi inserisci quanto segue nel foglio di stile del tuo tema (o plug-in).<\/p>\n e proprio con questo i tuoi tweet incorporati saranno reattivi.<\/p>\nFiltraggio del tweet<\/h2>\n
<?php\n\/** Remove fixed width from embedded tweets. First step to make them responsive. \n * @param string $html HTML that should be used to embed \n * @param string $url The URL to the content that should be attempted to be embedded. \n * @param array $args Optional arguments. \n * @author Elio Rivero \n * @link https:\/\/startfunction.com \n *\/ \nfunction startfunction_oembed_result($html, $url, $args)\n{\n \/\/ Check if it's a tweet looking for 'twitter' in the url pasted in the post\n if (stripos($url, 'twitter')) {\n \/\/ Before the tweet is processed, it's displayed as a blockquote \/\/ with its width attribute set, so let's remove it. \n return preg_replace('#width=\"(.*)\"#', '', $html);\n }\n \/\/ Otherwise return the HTML as is. \n return $html;\n} \n\/\/ Filter the result of the oEmbed extraction. \nadd_filter('oembed_result', 'startfunction_oembed_result', 10, 3);\n<\/code><\/pre>\n$url<\/code>parametro \u00e8 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\"<\/code><\/strong>sostituendola con una stringa vuota.<\/p>\nRendere reattiva la scheda tweet<\/h2>\n
#main .twitter-tweet-rendered, #main .twt-border {\n max-width: 100% !important; \n}<\/code><\/pre>\n