Kaip pridėti SVG prie „WordPress“: vektorinių vaizdų vadovas „WordPress“
„WordPress“ palaiko įvairius vaizdų formatus, įskaitant „ .JPG, .JPEG, .png, ir .gif. Tačiau tai neleidžia naudoti „Scalable Vector Graphics“ (SVG), kuris yra vienas iš lanksčiausių vaizdų tipų. Laimei, išmokti pridėti SVG prie „WordPress“ yra gana paprasta.
Norėdami įjungti šį vaizdo formatą, viskas, ką jums reikia padaryti, yra pataisyti keletą failų. Po to savo turinyje SVG galėsite naudoti kaip įprastus vaizdus, logotipus ir dar daugiau. Be to, „WordPress“ nepriekaištingai veikia su SVG, kai įjungsite failo tipą.
Šiame straipsnyje mes kalbėsime apie tai, kas yra SVG ir kodėl jie yra tokie naudingi. Tada išmokysime, kaip pridėti SVG prie „WordPress“ dviem skirtingais metodais, ir paaiškinsime, kaip jas pagyvinti naudojant CSS. Pradėkime!
Contents
Kas yra keičiamoji vektorinė grafika (SVG) (ir kodėl ji naudinga)
SVG (tokios kaip šios iš „Freepik“) idealiai tinka paprastiems vaizdams, kuriuose nėra per daug sudėtingų elementų, tokių kaip piktogramos.
Pats SVG nėra vaizdo formatas. Tiesą sakant, tai iš tikrųjų žymėjimo kalba, naudojama kuriant dvimačius vaizdus, sudarytus iš vektorių. Teoriškai tai gali atrodyti sudėtinga, tačiau praktiškai SVG naudosite tose pačiose situacijose, kaip ir kituose vaizduose.
Tai svarbu, nes SVG turi tam tikrų pranašumų, palyginti su dažnesniais vaizdų tipais, tokiais kaip PNG ir JPG. Pavyzdžiui:
- Jie užima mažiau vietos. Vietoj pikselių SVG sudaro vektoriai. Taigi jūsų vaizdai sveria mažiau, o tai turėtų padėti jūsų svetainei įkelti greičiau.
- Galite lengvai juos pakeisti mastu. Kaip jau žinote, yra ribų, kiek galite padidinti įprastų vaizdų dydį, kol jie pradeda atrodyti baisiai. Tai netaikoma SVG, nes vektoriai gali būti keičiami aukštyn arba žemyn, neprarandant kokybės (ar nepakeitus failo dydžio)..
- Galite animuoti SVG naudodami CSS. Vektorius galima pagyvinti naudojant CSS, kuris gali suteikti unikalių efektų (apie tai plačiau kalbėsime vėliau).
Sukurti savo SVG gali būti sunku, jei neturite pagrindinio dizaino. Tačiau visada galite ieškoti SVG paveikslėlių arba paprašyti savo dizainerio, ar jie gali atkartoti kai kuriuos jūsų svetainės elementus naudodami formatą.
Atminkite, kad kuo sudėtingesnis vaizdas, tuo sunkiau jį atkartoti naudojant vektorius. Kitaip tariant, SVG yra gera alternatyva paprastoms grafikoms, tokioms kaip logotipai ir piktogramos, tačiau neveikia ir nuotraukos.
Kaip pridėti SVG prie „WordPress“ (du paprasti būdai)
Kaip jau minėjome anksčiau, „WordPress“ nepalaiko SVG vienoje vietoje. Tačiau šią funkciją galite įjungti rankiniu būdu arba naudoti papildinį. Pradėkime nuo pastarojo metodo, nes jis yra paprasčiausias.
1 būdas: naudokite „SVG Support“ papildinį
Jei ieškote greičiausio būdo, kaip pridėti SVG prie „WordPress“, tai jis. Ketiname naudoti SVG palaikymo papildinį, kuris įgalina šį konkretų vaizdo formatą ir prideda tai palaikymą jūsų medijos bibliotekoje:
Procesas yra paprastas. Jums tiesiog reikia įdiegti ir suaktyvinti papildinį, kaip įprasta, ir tada galėsite pridėti SVG prie savo „WordPress“ svetainės.
Dabar „WordPress“ reikalauja, kad turėtume
Tačiau yra dar du parametrai, kuriuos galbūt norėsite pakeisti atsižvelgiant į jūsų poreikius. Pirmiausia eikime į Nustatymai → SVG palaikymas skirtukas:
Viduje rasite dvi parinktis. Pirmasis įjungia papildinį Išplėstinis režimas, kuri leidžia nukreipti savo SVG naudojant CSS. Jei nenorite animuoti savo SVG, galite praleisti šią parinktį.
Antra, jūs taip pat galite apriboti galimybę įkelti SVG administratoriams tik įgalinę Tik administratoriams? bruožas. Tai priklauso nuo jūsų!
2 būdas: pakeiskite savo svetainės versiją funkcijos.php byla
Kiekviena „WordPress“ svetainė turi savo funkcijos.php byla. Šis esminis komponentas apima svarbias funkcijas, klases ir filtrus. Tai taip pat yra jūsų bilietas į SVG palaikymo pridėjimą prie „WordPress“ per kelias kodo eilutes.
Norėdami pasiekti šį failą, turėsite pasiekti savo svetainę naudodami FTP. Jei neturite kliento, rekomenduojame naudoti „FileZilla“. Suradę FTP kredencialus ir apsilankę svetainėje norėsite kreiptis į savo šaknis aplankas, kuris paprastai yra arba vadinamas public_html arba pavadinta jūsų svetainės vardu:
Dabar įveskite wp apima aplanką ir ieškokite funkcijos.php failą. Svarbu atminti, kad tai yra pirminis failas, nors yra ir atskirų funkcijos.php kiekvienos temos failai:
Šiame pavyzdyje kodą pridėsime prie pagrindinio failo. Tačiau galite pastebėti, kad pakeitimai prarandami atnaujinus „WordPress“, todėl nedvejodami pridėkite jį prie konkrečios temos. funkcijos.php failą, atsižvelgiant į jums patogesnį požiūrį.
(Redaktoriaus pastaba: tai padaryti yra jūsų funkcijų faile iš tikrųjų yra rekomenduojamas metodas.)
Prisijunkite prie funkcijos.php failą dabar spustelėdami jį dešiniuoju pelės mygtuku ir pasirinkdami Peržiūrėti / redaguoti variantas. Tai bus atidaryta naudojant numatytąjį teksto rengyklę. Dabar slinkite į apačią ir įklijuokite šį kodo fragmentą ten:
funkcija add_file_types_to_uploads ($ file_types) {
$ new_filetypes = masyvas ();
$ new_filetypes ['svg'] = 'vaizdas / svg + xml';
$ file_types = array_merge ($ file_types, $ new_filetypes);
grąžinti $ failų tipus;
}
add_filter ('upload_mimes', 'add_file_types_to_uploads');Išsaugokite pakeitimus faile ir uždarykite jį. Tada galite grįžti į prietaisų skydelį ir išbandyti savo naują funkciją įkeldami SVG failą į savo daugialypės terpės biblioteką, kuri turėtų veikti be kliūčių.!
Pagyvinkite savo SVG vaizdus naudodami CSS
Savo SVG animacija yra šiek tiek sudėtingas procesas, ypač jei neturite daug patirties naudojant CSS. Tačiau ši funkcija gali padėti jums sukurti paprastas animacijas, kurios sveria labai mažai, ypač priešingai nei GIF. Be to, galite padidinti savo animuotų SVG dydį pagal poreikį aukštyn arba žemyn, o tai (vėlgi) GIF negali padaryti gerai.
Jei norite daugiau sužinoti apie tai, kaip pagyvinti SVG naudojant CSS, galite rasti internetinių vadovėlių, kurie padės jums sužinoti apie proceso pagrindus. Be to, peržiūrėkite keletą pavyzdžių, ką galite sukurti, jei pagalvosite.
Išvada
SVG yra vienas iš įdomiausių vaizdų tipų, kuriuos galite naudoti savo svetainėje. Dėl jų mastelio, jie tampa geru pasirinkimu jautriai reaguojančioms svetainėms, taip pat galite juos pagyvinti, kad tam tikrose situacijose jie galėtų pakeisti GIF. Be to, nepaprastai paprasta juos įgalinti „WordPress“.
Tiesiog pasirinkite vieną iš šių dviejų būdų, jei norite pridėti SVG prie „WordPress“, ir galėsite žaisti su savo širdies turinio failo tipu:
- Naudokite SVG palaikymo įskiepį, jei nenorite susipainioti su kodu.
- Pakeiskite savo
funkcijos.phpfailą, kad pridėtumėte SVG palaikymą, jei nenorite įdiegti papildomo papildinio.
Ar turite klausimų, kaip pridėti SVG prie „WordPress“? Klauskite toliau komentarų skiltyje!
