U ovom članku pomoći za WordPress, provest ću vas korak po korak kroz proces dodavanja prilagođenih fontova u vaše WordPress blok teme. To znači da možete dodati SVE fontove BILO KOJOJ temi, kao što je dodavanje Google Fontova temi Twenty Twenty Three.
Pokazat ću vam kako izvršiti ovaj zadatak pomoću dodatka Create Block Theme koji je izravno razvio WordPress tim programera. To dodatak čini ultra laganim, visokim performansama i vrlo jednostavnim za korištenje s blok temama.
Ovom metodom možete se povezati na fontove (tj. povezati na Google Fontove) ili ugraditi fontove lokalno na svoje web mjesto (za bolju izvedbu web mjesta). Uđimo u to!
Video: Dodajte prilagođene fontove u WordPress
1. Instalirajte dodatak "Create Block Theme".
Za početak, trebali biste se prijaviti u svoje WordPress administratorsko područje, koje će vas odvesti na nadzornu ploču. Od tamo idite na Plugins>Add New iz glavne navigacije (crvena strelica na gornjoj slici).
Potražite dodatak "Create Block Theme" koristeći traku za pretraživanje u gornjem desnom kutu (označeno zelenom bojom na gornjoj fotografiji). Nakon što se prikaže dodatak Create Block Theme, kliknite gumb "Instaliraj sada" da biste ga instalirali na svoje web mjesto (crvena strelica).
Zatim kliknite gumb "Aktiviraj" da biste aktivirali dodatak.
2. Onemogućite sigurnosni dodatak (privremeno)
Kako bi ostatak ovog procesa tekao glatko, morat ćete privremeno onemogućiti sve sigurnosne dodatke koje ste instalirali i koji blokiraju mogućnost korisnika da uređuju teme ili dodatke.
U mom konkretnom slučaju koristim dodatak SG Security (koji dolazi sa svim WordPress web stranicama hostirano putem Sitegrounda – hosta koji toplo preporučujem). Pouzdano znam da ovaj dodatak ometa proces dodavanja prilagođenih fontova, pa ću onemogućiti postavku koja smeta.
U ovom slučaju, otići ću do odjeljka “Sigurnost web-mjesta” dodatka SG Security koristeći glavnu navigaciju (crvena strelica na gornjoj slici).
Zatim ću se pomaknuti prema dolje do opcije s oznakom "Onemogući uređivač tema i dodataka" (označeno zelenom bojom na gornjoj slici). Vidjet ćete prekidač s desne strane ove opcije – kliknite prekidač da biste onemogućili ovu značajku (crvena strelica). Trebali biste vidjeti iskačuću poruku "Uspjeh" u plavoj strelici u desnom kutu).
S privremeno onemogućenim sigurnosnim dodatkom, možemo prijeći na sljedeći korak odabira i učitavanja fontova koje želimo koristiti na našoj stranici.
Postoje dvije opcije za korištenje prilagođenih fontova u WordPressu.
3. Odaberite prilagođene fontove za WordPress (povezani Google fontovi)
Prva opcija je povezivanje s fontovima na web-mjestu treće strane, Google Fontovi. Ova je opcija jednostavnija i zahtijeva manje vremena za postavljanje, ali usporava brzinu učitavanja stranice vaše web stranice. Također vas ograničava na fontove dostupne u Google Fontovima (iako Google nudi mnoštvo sjajnih, besplatnih fontova). Ako ste manje upućeni u tehnologiju i ne smeta vam korištenje Google Fontova, preporučujem ovu opciju.
Za početak, idite na "Izgled>Upravljanje fontovima teme" iz glavne navigacije (crvena strelica na gornjoj slici).
U radnom području “Upravljanje fontovima teme” vidjet ćete sve zadane fontove koji su trenutno instalirani u WordPressu (označeni zelenom bojom na gornjoj slici). Vaši fontovi također su navedeni duž desne strane radnog područja, zajedno s različitim varijacijama svakog fonta i veličine datoteke za svaku varijaciju fonta (ocrtane plavom bojom).
Da biste svojoj temi dodali novi font, kliknite gumb "Dodaj Google font" (crvena strelica).
Kliknite padajući izbornik "Odaberite font" i potražite Google font koji želite dodati na svoju stranicu (fontovi su poredani abecednim redom). Ako niste sigurni kako svaki font izgleda, preporučujem pregledavajući web stranicu Google Fontovi za istraživanje fontova i njihovo testiranje. Nakon što pronađete font koji želite koristiti, odaberite ga s padajućeg izbornika (plava strelica).
Sada ćete vidjeti popis svih dostupnih varijanti koje možete instalirati na svoju temu za taj font. Možete potvrditi okvir pored pojedinačnih varijanti ili kliknuti gornji potvrdni okvir (crvena strelica na gornjoj slici) da odaberete sve varijante. Vidjet ćete popis odabranih varijanti, zajedno s njihovom veličinom datoteke, na desnoj strani zaslona. Kada budete spremni, kliknite "Dodaj Google fontove svojoj temi" (zelena strelica).
Sada biste trebali vidjeti poruku na vrhu radnog područja da je font instaliran na vašu temu (u ovom slučaju na temu Twenty-Twenty Three). Zatim možete kliknuti vezu "Upravljanje fontovima" unutar okvira s porukom o uspjehu ili kliknuti malu strelicu prema natrag (crvena strelica na gornjoj slici) za povratak u radno područje "Upravljanje fontovima teme".
Sada ćete vidjeti svoju novoinstaliranu obitelj fontova na popisu s ostalim fontovima vaše teme (crvena strelica na gornjoj slici). Također ćete vidjeti svoju obitelj fontova i sve povezane varijacije fontova na desnoj strani radnog područja (označeno zelenom bojom).
4. Ugradite prilagođene fontove za WordPress (lokalni fontovi za bolji SEO)
Druga opcija za dodavanje fontova na vaše WordPress web mjesto je "ugraditi" ili "lokalno ugostiti" svoje fontove. Drugim riječima, vaše datoteke fontova bit će smještene unutar istog web poslužitelja koji ugošćuje vašu web stranicu.
Prednost ove metode je u tome što ne zahtijeva dohvaćanje fontova s domene treće strane. Kao rezultat toga, vaši fontovi se učitavaju brže, a time i vaša web stranica. Web stranice koje se brže učitavaju bolje su za korisničko iskustvo, što znači da mogu pomoći vašoj web stranici da se bolje rangira na tražilicama i ostvari više prometa.
Drugim riječima, ugrađeni fontovi bolji su za SEO (optimizacija tražilica).
Iako ova metoda zahtijeva nekoliko dodatnih koraka, još uvijek je prilično jednostavna i koristi isti dodatak koji smo prethodno instalirali (dodatak za stvaranje blok tema).
Da biste instalirali svoje fontove lokalno, započnite navigacijom do Izgled>Upravljanje fontovima teme iz glavne navigacije (ako već niste tamo od zadnjeg koraka – plava strelica na gornjoj slici). Zatim kliknite gumb "Dodaj lokalni font" u gornjem desnom kutu radnog područja (crvena strelica).
Bit ćete preusmjereni na područje "Lokalni fontovi" gdje možete odabrati datoteku sa svog računala za prijenos u svoju temu. Ispod gumba "Odaberi datoteku" vidjet ćete popis podržanih formata datoteka fontova. Ove formate možete nabaviti s bilo kojeg pouzdanog web mjesta za fontove, uključujući Google Fontove.
Pronađite i preuzmite svoj font po izboru s Google Fontova
Skočit ću na Google Fontove i upotrijebit ću traku za pretraživanje (crvena strelica) da potražim font koji želim – u ovom slučaju font "Catamaran". Nakon što je font naveden u rezultatima, kliknut ću na njega da pogledam stranicu s fontom (zelena strelica).
Zatim ću kliknuti gumb "Preuzmi obitelj" da preuzmem ovaj font i sve njegove varijacije na svoje računalo. Možete se pomaknuti prema dolje na stranici fonta ako želite vidjeti sve dostupne varijacije za ovaj font.
Kliknite "Spremi" da biste spremili zip datoteku fonta na svoje računalo.
Raspakirajte svoju mapu s fontovima za pristup datotekama s fontovima
Nakon što je preuzimanje završeno, kliknite strelicu pored završenog preuzimanja (crvena strelica) i kliknite "Prikaži u mapi" (zelena strelica).
Desnom tipkom miša kliknite zip datoteku u pregledniku datoteka i kliknite "Izdvoj sve".
Prikazat će se skočni prozor koji će vam pokazati gdje se ekstrahiraju fontovi (crvena strelica). Možete promijeniti ovu lokaciju ako želite, u suprotnom kliknite gumb s oznakom "Izdvoj" (zelena strelica). Ovo će raspakirati mapu i stvoriti novu datoteku na vašem računalu sa svim raspakiranim datotekama fontova. Ova bi se mapa trebala otvoriti automatski.
Ako ste datoteke fontova preuzeli pomoću Google Fontova, unesite mapu s oznakom "static" da biste vidjeli sve svoje datoteke fontova. U suprotnom, jednostavno potražite datoteke koje su OTF, TTF, WOFF ili WOFF2.
Unutar ove "statične" mape vidjet ćete popis svih varijacija fontova koje smo preuzeli za font Catamaran s Google Fontova. Postoji ukupno 9 varijacija, a možemo ih učitati sve na našu web stranicu ili samo varijacije koje želimo/trebamo. Kliknite lokaciju mape u pregledniku datoteka (zelena strelica), zatim kliknite desnom tipkom miša i odaberite "Kopiraj".
Učitajte svoje prilagođene fontove u WordPress
Vratite se na WordPress gdje imate otvoreno radno područje "Lokalni fontovi". Pritisnite gumb "Odaberi datoteku" (crvena strelica na gornjoj slici) da odaberete svoje fontove. Možete ručno doći do lokacije na računalu gdje su pohranjeni vaši fontovi. Ili jednostavno kliknite na adresnu traku preglednika datoteka (plava strelica), izbrišite adresu koja se trenutno tamo nalazi, zatim desnom tipkom miša kliknite i odaberite "Zalijepi" (zelena strelica). Ovo će zalijepiti adresu koju ste kopirali u prethodnom koraku. Pritisnite tipku enter i bit ćete prebačeni u mapu s vašim fontovima.
Morate učitati svoje varijacije fonta jednu po jednu. Za ovaj primjer, jednostavno ću prenijeti varijaciju fonta "Catamaran-Regular" klikom na nju (zelena strelica), zatim klikom na gumb "Otvori" (crvena strelica).
Sada biste trebali vidjeti informacije za "NAZIV FONTA", "STIL FONTA" i "TEŽINU FONTA", kao i pregled fonta na desnoj strani. Kliknite "Učitaj font u svoju temu" (crvena strelica) za prijenos varijacije fonta.
Pregledajte prilagođene fontove tema
Sada biste trebali vidjeti poruku o uspjehu na vrhu radnog područja (označeno zelenom bojom na gornjoj slici). Čestitamo – vaš prilagođeni font sada je učitan u vašu temu kao lokalni font! Možete nastaviti kliknuti "Odaberi datoteku" i učitati onoliko varijacija fonta koliko želite.
Kada završite, kliknite vezu "Upravljanje fontovima" unutar okvira s porukom o uspjehu ili strelicu natrag (označenu crvenom strelicom) za povratak u radno područje Upravljanje fontovima teme.
Sada ćete vidjeti novu obitelj fontova "Catamaran" na popisu s ostalim obiteljima fontova vaše teme (crvena strelica). Osim toga, vidjet ćete obitelj fontova i sve varijacije koje ste instalirali na desnoj strani prozora Upravljanje fontovima teme (označeno zelenom bojom).
5. Promijenite fontove vaše teme u prilagođene fontove
Sad kad ste instalirali nove fontove, vrijeme je za zabavni dio!
Da biste promijenili fontove svoje teme u svoje prilagođene fontove, idite do uređivača web-mjesta tako da odete na Izgled>Uređivač (crvena strelica na gornjoj slici).
Kliknite bilo gdje unutar područja glavnog sadržaja (crvena strelica) uređivača web-mjesta da biste prikazali kontrole.
U gornjem izborniku kliknite na ikonu "Stilovi" (plava strelica). Zatim kliknite "Tipografija" (crvena strelica).
U odjeljku "Elementi" možete promijeniti font za tekst, veze, naslove ili gumbe. Odabrat ću opciju "Naslovi" za ovaj primjer.
Sada ćete vidjeti padajući izbornik pod “Tipografija” gdje možete odabrati bilo koji od svojih tematskih fontova (crvena strelica). Možete vidjeti da su fontovi "Neuton" i "Catamaran" koje sam dodao za ovaj vodič navedeni ovdje. Odabrat ću "Neuton" za svoj font naslova.
Kliknite gumb "Spremi" u gornjem desnom kutu da biste spremili promjene.
Kliknite "Spremi" još jednom (crvena strelica) i vaš će prilagođeni font sada biti spremljen za sve naslove na vašoj web stranici!
Zatim možete kliknuti vezu View>View Site u gornjem desnom kutu uređivača web stranice (crvene strelice na gornjoj fotografiji) da vidite kako vaša web stranica izgleda s vašim novim fontom. Vratite se u Site Editor i ponovite ovaj postupak za sve druge elemente čiji font želite prilagoditi.
Za povratak na WordPress Admin Area kliknite logotip u gornjem lijevom kutu uređivača web mjesta (zelena strelica), a zatim ponovno kliknite logotip.
6. Kako izbrisati prilagođene fontove iz WordPressa
Da biste izbrisali bilo koji od svojih prilagođenih fontova, počnite vraćanjem na Izgled>Upravljanje fontovima teme.
Možete izbrisati cijelu obitelj fontova tako da mišem prijeđete iznad desne strane naziva obitelji fontova i kliknete ikonu kante za smeće koja se pojavi (plava strelica). Ili zadržite pokazivač miša iznad pojedinačnih varijacija fonta i kliknite ikonu smeća (varijacije fontova nalaze se unutar zeleno označenog područja). Također možete kliknuti vezu "Ukloni obitelj fontova" da biste izbrisali bilo koju obitelj fontova (ljubičasta strelica).
To je to za ovaj udžbenik! Ako vam se svidjelo, možete provjeriti moju drugu Članci pomoći za WordPress ili se upišite u moj WordPress masterclass na Udemyju.
