Muutke WordPressi manustatud säutsud tundlikuks

WordPress võimaldab teil säutse manustada, kleepides säutsu URL-i oma postitustesse. Saate kena kaardi säutsu ja kõigi asjakohaste üksikasjadega. Kahjuks ei tööta see kaart tundlikel saitidel Twitteri paranduslaiuse tõttu. Selles postituses näeme, kuidas seda eemaldada ja ka meie manustatud säuts korralikult reageerivaks muuta.

Ülevaade

Enne kui säutsu töödeldakse, et kuvada kaart koos autori, Twitteri avatari, jälgimisnupu ja muude metaandmetega, kuvatakse see tavalise HTML-i blockquote elemendina, mille atribuudiks on määratud fikseeritud laius, mis vaikimisi on 500 pikslit. Muidugi rikub see fikseeritud laius meie reageerivat paigutust, nii et põhimõtteliselt peame selle atribuudi eemaldama, et töödeldud säutsukaart ilmuks fikseeritud laiusega.

Pärast selle eemaldamist rakendame lihtsat CSS-stiili, et see toimiks tundlikult ka ülejäänud saidi mõõtmetega.

WordPressi oEmbed ja filtrid

Meie säuts on paigutatud oEmbedi abil, mis on WordPressi kasutatav tehnoloogia, mis võimaldab meil sisestada teistelt saitidelt sisu, lihtsalt asetades lingi meie postituse redaktorisse. WordPress esitab automaatselt päringu teenusepakkuja saidilt (mis ei saa olla ainult Twitter, vaid ka YouTube, Vimeo ja teised) ning hankib HTML-i meie saidile sisestamiseks.

Pakkuja saidi tagastatud HTML-i saab töödelda ühe filtri abil, mille WordPress pakub selleks ja märgistuse muutmiseks. Kasutame filtrit oembed_result, mis käivitatakse pärast HTML-i hankimist oEmbedi pakkujalt ja enne selle vahemällu salvestamist. Selle eeliseks on see, et filtrit ei pea käivitama iga kord, kui saiti külastate, mille tulemuseks on kiirem reageerimine ja loomulikult kiirem laadimisaeg.

Säutsu filtreerimine

See kood tuleks paigutada teie teema faili functions.php

Parameeter $urlon link meie manustatava säutsu juurde. Kontrollime, kas see pärineb Twitterist, sest muidu ei taha me seda käivitada. Kasutame str_replace’i stringi otsimiseks, mis width="500"asendab selle tühja stringiga.

Säutsukaardi tundlikuks muutmine

Peame siiski lisama CSS-i, et see reageeriks, nii et sisestage oma teema (või pistikprogrammi) laadilehele järgmine tekst

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

ja just sellega reageerivad teie manustatud säutsud.