Tee WordPressin upotetuista twiiteistä responsiivisia

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

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.