Tee WordPressin upotetuista twiiteistä responsiivisia

Viimeisin päivitys marras 10, 2022

Sisältö

WordPressin avulla voit upottaa twiittejä liittämällä twiitin URL-osoitteen viesteihisi. Saat mukavan kortin, jossa on twiitti ja kaikki asiaankuuluvat tiedot. Valitettavasti tämä kortti ei toimi responsiivisilla sivustoilla Twitterin käyttämän korjausleveyden vuoksi. Tässä viestissä näemme, kuinka se poistetaan ja kuinka upotettu twiittimme saadaan reagoimaan kunnolla.

Yleiskatsaus

Ennen kuin twiitti käsitellään niin, että se näyttää kortin, jossa on kirjoittaja, Twitter-avatar, seurantapainike ja muut metatiedot, se näytetään pelkkänä blockquote-HTML-elementtinä kiinteän leveyden attribuutilla, joka on oletuksena 500 pikseliä. Tietenkin tämä kiinteä leveys rikkoo reagoivan asettelumme, joten periaatteessa meidän on poistettava tämä attribuutti, jotta käsitelty twiittikortti näkyy ilman kiinteää leveyttä.

Sen poistamisen jälkeen käytämme yksinkertaista CSS-tyyliä, jotta se toimii responsiivisesti muiden sivuston mittojen kanssa.

WordPress oEmbed ja suodattimet

Tweetimme on sijoitettu käyttämällä oEmbediä, WordPressin käyttämää tekniikkaa, jonka avulla voimme lisätä sisältöä muilta sivustoilta vain asettamalla linkin tekstieditoriin. WordPress tekee automaattisesti kyselyn palveluntarjoajan sivustolta (joka ei voi olla vain Twitter, vaan YouTube, Vimeo ja muut) ja saa HTML-koodin lisättäväksi sivustoomme.

Palveluntarjoajan sivuston palauttama HTML voidaan käsitellä jollakin WordPressin tarjoamista suodattimista ja muuttaa merkintöjä. Käytämme suodatinta oembed_result, joka suoritetaan sen jälkeen, kun HTML-koodi on hankittu oEmbed-palveluntarjoajalta ja ennen kuin se on tallennettu välimuistiin. Tämän etuna on, että suodatinta ei tarvitse suorittaa joka kerta, kun sivustolla vieraillaan, mikä johtaa nopeampaan reagointiin ja tietysti nopeampiin latausaikaan.

Tweetin suodatus

Tämä koodi tulee sijoittaa teemasi functions.php-tiedostoon

<?php
/** Remove fixed width from embedded tweets. First step to make them responsive. 
 * @param string $html HTML that should be used to embed 
 * @param string $url The URL to the content that should be attempted to be embedded. 
 * @param array $args Optional arguments. 
 * @author Elio Rivero 
 * @link https://startfunction.com 
 */ 
function startfunction_oembed_result($html, $url, $args)
{
    // Check if it's a tweet looking for 'twitter' in the url pasted in the post
    if (stripos($url, 'twitter')) {
        // Before the tweet is processed, it's displayed as a blockquote // with its width attribute set, so let's remove it. 
        return preg_replace('#width="(.*)"#', '', $html);
    }
    // Otherwise return the HTML as is. 
    return $html;
} 
// Filter the result of the oEmbed extraction. 
add_filter('oembed_result', 'startfunction_oembed_result', 10, 3);

Parametri $urlon linkki upotettavaan twiittiin. Tarkistamme, onko se Twitteristä, koska muuten emme halua suorittaa tätä. Käytämme str_replacea etsimään merkkijonoa, width="500"joka korvaa sen tyhjällä merkkijonolla.

Tweettikortin tekeminen reagoivaksi

Meidän on vielä lisättävä hieman CSS:ää, jotta se reagoisi, joten lisää seuraava teemasi (tai laajennuksen) tyylitaulukkoon

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

ja juuri tämän avulla upotetut twiittisi reagoivat.

: startfunction.com