Tässä WordPress-ohjeartikkelissa opastan sinut vaihe vaiheelta mukautettujen kirjasimien lisäämisen WordPress-lohkoteemoihin. Tämä tarkoittaa, että voit lisätä MITÄ tahansa kirjasinta MIKKI teemaan, kuten Google-kirjasinten lisääminen Twenty Twenty Three -teemaan.

Voit katsoa alla olevan opetusvideon tai ohittaa sen ja lukea artikkelin (joka on saatavilla useilla kielillä tämän sivun käännösominaisuuksien avulla). 

Näytän sinulle, kuinka voit suorittaa tämän tehtävän käyttämällä Create Block Theme -laajennusta, jonka WordPress-kehittäjätiimi on kehittänyt suoraan. Tämä tekee laajennuksesta erittäin kevyen, tehokkaan ja erittäin helpon käyttää lohkoteemoja. Näytän myös, kuinka voit ratkaista yleisen käyttöoikeusongelman, joka voi ilmetä tämän laajennuksen kanssa työskennellessä.

Tällä menetelmällä voit joko linkittää kirjasimiin (eli linkittää Google Fontsiin) tai upottaa kirjasimia paikallisesti sivustollesi (sivuston tehokkuuden parantamiseksi). Mennään asiaan!

Sisällysluettelo

1. Asenna "Luo lohkoteema" -laajennus

Ensinnäkin sinun kannattaa kirjautua sisään WordPressin hallinta-alueelle, joka vie sinut hallintapaneeliin. Siirry sieltä päänavigointivalikosta kohtaan Plugins> Add New (punainen nuoli yllä olevassa kuvassa).

Etsi "Create Block Theme" -laajennus käyttämällä oikeassa yläkulmassa olevaa hakupalkkia (vihreä ääriviivat yllä olevassa kuvassa). Kun Create Block Theme -laajennus tulee näkyviin, napsauta "Asenna nyt" -painiketta asentaaksesi se sivustollesi (punainen nuoli).

Napsauta seuraavaksi "Aktivoi" -painiketta aktivoidaksesi laajennuksen.

Yksinkertaistettu WordPress: Tehokkaiden verkkosivustojen rakentaminen Davies Media Designin kurssi

2. Poista suojauslaajennus käytöstä (tilapäisesti)

Jotta tämän prosessin loppuosa sujuisi sujuvasti, sinun on väliaikaisesti poistettava käytöstä kaikki asentamasi suojauslaajennukset, jotka estävät käyttäjien mahdollisuudet muokata teemoja tai laajennuksia.

Omassa tapauksessani käytän SG Security -laajennusta (joka tulee kaikkien WordPress-sivustojen mukana isännöi Sitegroundin kautta – isäntä, jota suosittelen lämpimästi). Tiedän varsinaisesti, että tämä laajennus häiritsee mukautettujen kirjasimien lisäämistä, joten poistan estävän asetuksen käytöstä.

Tässä tapauksessa siirryn SG Security -laajennuksen "Site Security" -osioon käyttämällä päänavigointia (punainen nuoli yllä olevassa kuvassa).

Seuraavaksi vieritän alas kohtaan "Poista teema- ja laajennuseditori käytöstä" (korostettu vihreällä yllä olevassa kuvassa). Näet valitsimen tämän vaihtoehdon oikealla puolella – napsauta kytkintä poistaaksesi tämän ominaisuuden käytöstä (punainen nuoli). Sinun pitäisi nähdä "Onnistuminen" -viesti ponnahdusikkunaan oikeassa kulmassa olevaan siniseen nuoleen).

Kun suojauslaajennus on väliaikaisesti poistettu käytöstä, voimme siirtyä seuraavaan vaiheeseen, jossa valitaan ja ladataan fontit, joita haluamme käyttää sivustollamme.

Mukautettujen kirjasimien käyttämiseen WordPressissä on kaksi vaihtoehtoa.

3. Valitse mukautetut kirjasimet WordPressille (Linkitetyt Google-kirjasimet)

Ensimmäinen vaihtoehto on linkittää kolmannen osapuolen sivuston kirjasimiin, Google Fonts. Tämä vaihtoehto on yksinkertaisempi ja sen määrittäminen vie vähemmän aikaa, mutta hidastaa verkkosivustosi sivun latausnopeutta. Se myös rajoittaa sinut Google Fontsista saatavilla oleviin kirjasimiin (vaikka Google tarjoaa paljon hienoja, ilmaisia ​​kirjasimia). Suosittelen tätä vaihtoehtoa, jos olet vähemmän tekninen etkä välitä Google Fontsin käyttämisestä.

Aloita navigoimalla päänavigointivalikosta "Ulkoasu> Hallitse teemafontteja" (punainen nuoli yllä olevassa kuvassa).

"Hallinnoi teemafontteja" -työalueella näet kaikki WordPressiin tällä hetkellä asennetut oletusfontit (korostettu vihreällä yllä olevassa kuvassa). Kirjasimesi näkyvät myös työalueen oikealla puolella sekä kunkin kirjasimen eri muunnelmat ja kunkin fonttimuunnelman tiedostokoot (viivattu sinisellä).

Jos haluat lisätä teemaasi uuden kirjasimen, napsauta "Lisää Google-kirjasin" -painiketta (punainen nuoli).

Napsauta avattavaa "Valitse kirjasin" -valikkoa ja etsi Google-kirjasin, jonka haluat lisätä sivustollesi (kirjasimet ovat aakkosjärjestyksessä). Jos et ole varma, miltä kukin fontti näyttää, suosittelen selaamalla Google Fonts -verkkosivustoa tutkia fontteja ja testata niitä. Kun olet löytänyt fontin, jota haluat käyttää, valitse se avattavasta valikosta (sininen nuoli).

Näet nyt luettelon kaikista käytettävissä olevista versioista, jotka voit asentaa teemaasi kyseiselle kirjasimelle. Voit joko valita yksittäisten versioiden vieressä olevan valintaruudun tai valita kaikki versiot napsauttamalla yläosan valintaruutua (punainen nuoli yllä olevassa kuvassa). Näet luettelon valitsemistasi versioista ja niiden tiedostokoosta näytön oikeassa reunassa. Kun olet valmis, napsauta "Lisää Google-kirjasimia teemaasi" (vihreä nuoli).

Sinun pitäisi nyt nähdä työalueen yläosassa viesti, että kirjasin on asennettu teemaasi (tässä tapauksessa Twenty-Twenty Three -teemaan). Voit sitten napsauttaa "Hallinnoi kirjasimia" -linkkiä onnistumisviestiruudun sisällä tai napsauttaa pientä taaksepäin osoittavaa nuolta (punainen nuoli yllä olevassa kuvassa) palataksesi "Hallinnoi teemafontteja" -työalueelle.

Näet nyt juuri asennetun kirjasinperheen luettelossa muiden teemasi fonttien kanssa (punainen nuoli yllä olevassa kuvassa). Näet myös kirjasinperheesi ja kaikki siihen liittyvät kirjasinmuunnelmat työalueen oikealla puolella (korostettu vihreällä).

4. Upota mukautettuja kirjasimia WordPressille (paikalliset kirjasimet parempaan hakukoneoptimointiin)

Toinen vaihtoehto kirjasimien lisäämiseksi WordPress-verkkosivustollesi on "upottaa" tai "isännöidä paikallisesti" kirjasimia. Toisin sanoen fonttitiedostosi sijaitsevat samassa verkkopalvelimessa, joka isännöi verkkosivustoasi.

Tämän menetelmän etuna on, että se ei vaadi kirjasimien hakemista kolmannen osapuolen toimialueelta. Tämän seurauksena kirjasimesi latautuvat nopeammin ja siten verkkosivusi latautuu nopeammin. Verkkosivujen nopeampi lataaminen parantaa käyttökokemusta, mikä tarkoittaa, että se voi auttaa sivustoasi sijoittumaan korkeammalle hakukoneissa ja saamaan lisää liikennettä.

Toisin sanoen upotetut fontit ovat parempia SEO:lle (hakukoneoptimointi).

Vaikka tämä menetelmä vaatii muutaman lisävaiheen, se on silti melko helppoa ja käyttää samaa laajennusta, jonka asensimme aiemmin (Create Block Themes -laajennus).

Jos haluat asentaa fontit paikallisesti, aloita navigoimalla päänavigointivalikosta Ulkoasu>Hallinnoi teemafontteja (jos et ole siellä jo viimeisessä vaiheessa – sininen nuoli yllä olevassa kuvassa). Napsauta seuraavaksi "Lisää paikallinen kirjasin" -painiketta työalueen oikeassa yläkulmassa (punainen nuoli).

Sinut ohjataan "Paikalliset kirjasimet" -alueelle, jossa voit valita tietokoneeltasi tiedoston, joka ladataan teemaasi. "Valitse tiedosto" -painikkeen alla näet luettelon tuetuista fonttitiedostomuodoista. Voit saada nämä muodot miltä tahansa luotetulta kirjasinsivustolta, mukaan lukien Google Fonts.

Etsi ja lataa haluamasi kirjasin Google Fontsista

Siirryn Google Fontsiin ja käytän hakupalkkia (punainen nuoli) etsimään haluamaani kirjasinta – tässä tapauksessa "Catamaran"-fonttia. Kun kirjasin on listattu tuloksissa, napsautan sitä avataksesi kirjasinsivun (vihreä nuoli).

Napsauta seuraavaksi "Lataa perhe" -painiketta ladataksesi tämän fontin ja kaikki sen muunnelmat tietokoneelleni. Voit vierittää kirjasinsivua alaspäin, jos haluat nähdä kaikki tämän fontin saatavilla olevat muunnelmat.

Napsauta "Tallenna" tallentaaksesi fontin zip-tiedoston tietokoneellesi.

Pura fonttikansiosi käyttääksesi kirjasintiedostoja

Kun lataus on valmis, napsauta valmiin latauksen vieressä olevaa nuolta (punainen nuoli) ja napsauta "Näytä kansiossa" (vihreä nuoli).

Napsauta hiiren kakkospainikkeella zip-tiedostoa tiedostojenhallinnassa ja napsauta "Pura kaikki".

Näkyviin tulee ponnahdusikkuna, joka näyttää, missä fontit puretaan (punainen nuoli). Voit muuttaa tätä sijaintia, jos haluat, muussa tapauksessa napsauta "Extract" -painiketta (vihreä nuoli). Tämä purkaa kansion ja luo tietokoneellesi uuden tiedoston, jossa on kaikki puretut fonttitiedostot. Tämän kansion pitäisi avautua automaattisesti.

Jos latasit kirjasintiedostoja Google Fontsin avulla, avaa staattinen kansio nähdäksesi kaikki kirjasintiedostosi. Muussa tapauksessa etsi tiedostoja, jotka ovat OTF-, TTF-, WOFF- tai WOFF2-tiedostoja.

Tämän "staattisen" kansion sisällä näet luettelon kaikista kirjasinmuunnelmista, jotka latasimme Catamaran-kirjasimelle Google Fontsista. Variantteja on yhteensä 9, ja voimme joko ladata ne kaikki verkkosivustollemme tai vain haluamamme/tarvitsemme muunnelmat. Napsauta kansion sijaintia tiedostonhallinnassa (vihreä nuoli), napsauta hiiren kakkospainikkeella ja valitse "Kopioi".

Lataa mukautetut fontit WordPressiin

Siirry takaisin WordPressiin, jossa Paikalliset kirjasimet -työalue on auki. Napsauta "Valitse tiedosto" -painiketta (punainen nuoli yllä olevassa kuvassa) valitaksesi fontit. Voit navigoida manuaalisesti tietokoneesi sijaintiin, johon kirjasimet on tallennettu. Tai napsauta tiedostonhallinnan osoitepalkkia (sininen nuoli), poista siellä oleva osoite, napsauta hiiren kakkospainikkeella ja valitse "Liitä" (vihreä nuoli). Tämä liittää edellisessä vaiheessa kopioimasi osoitteen. Paina enter-näppäintä ja sinut ohjataan kansioon, jossa on fontit.

Sinun on ladattava kirjasinmuunnelmasi yksi kerrallaan. Tässä esimerkissä lataan "Catamaran-Regular" -kirjasinmuunnelman napsauttamalla sitä (vihreä nuoli) ja napsauttamalla sitten "Avaa"-painiketta (punainen nuoli).

Sinun pitäisi nyt nähdä tiedot "FONT NAME", "FONT STYLE" ja "FONT WEIGHT" sekä fontin esikatselu oikealla puolella. Napsauta "Lataa kirjasin teemaasi" (punainen nuoli) ladataksesi fonttimuunnelman.

Tarkastele mukautettuja teemafonttejasi

Sinun pitäisi nyt nähdä onnistumisviesti työalueen yläosassa (vihreällä ääriviivalla yllä olevassa kuvassa). Onnittelut – mukautettu fonttisi on nyt ladattu teemaasi paikallisena fonttina! Voit jatkaa napsauttamalla "Valitse tiedosto" ja ladata niin monta kirjasinmuunnelmaa kuin haluat.

Kun olet valmis, napsauta "Hallinnoi kirjasimia" -linkkiä onnistumisviestiruudun sisällä tai takaisin-nuolta (merkitty punaisella nuolella) palataksesi Teemafonttien hallinta -työalueelle.

Näet nyt uuden "Catamaran"-kirjasinperheen luettelossa muiden teemasi kirjasinperheiden kanssa (punainen nuoli). Lisäksi näet kirjasinperheen ja kaikki asentamasi muunnelmat Manage Theme Fonts -ikkunan oikealla puolella (korostettu vihreällä).

5. Muuta teemasi fontit mukautetuiksi fonteiksi

Nyt kun olet asentanut uudet fontit, on hauskan osan aika!

Jos haluat muuttaa teemasi kirjasimia mukautetuiksi kirjasimillesi, siirry sivustoeditoriin valitsemalla Ulkoasu>Muokkaaja (punainen nuoli yllä olevassa kuvassa).

Napsauta mitä tahansa sivustoeditorin pääsisältöalueen sisällä (punainen nuoli), jolloin säätimet tulevat näkyviin.

Napsauta ylävalikossa "Tyylit" -kuvaketta (sininen nuoli). Napsauta sitten "Typografia" (punainen nuoli).

Elementit-kohdassa voit muuttaa tekstin, linkkien, otsikoiden tai painikkeiden fonttia. Valitsen "Otsikot" -vaihtoehdon tälle esimerkille.

Näet nyt avattavan valikon kohdassa "Typografia", josta voit valita minkä tahansa teemafonteistasi (punainen nuoli). Näet tässä opetusohjelmassa lisäämäni "Neuton"- ja "Catamaran"-fontit. Valitsen otsikkofontiksi "Neuton".

Napsauta "Tallenna" -painiketta oikeassa yläkulmassa tallentaaksesi muutokset.

Napsauta "Tallenna" vielä kerran (punainen nuoli), ja mukautettu fonttisi tallennetaan nyt kaikille sivustosi otsikoille!

Seuraavaksi voit napsauttaa Näytä>Näytä sivusto -linkkiä sivustoeditorin oikeassa yläkulmassa (punaiset nuolet yllä olevassa kuvassa) nähdäksesi, miltä verkkosivustosi näyttää uudella fontillasi. Palaa sivustoeditoriin ja toista tämä prosessi kaikille muille elementeille, joiden fonttia haluat mukauttaa.

Voit palata WordPressin hallinta-alueelle napsauttamalla logoa sivustoeditorin vasemmassa yläkulmassa (vihreä nuoli) ja napsauttamalla logoa uudelleen.

6. Kuinka poistaa mukautettuja kirjasimia WordPressistä

Jos haluat poistaa mukautettuja kirjasimia, aloita siirtymällä takaisin kohtaan Ulkoasu> Hallitse teemafontteja.

Voit poistaa koko kirjasinperheen viemällä hiiren kirjasinperheen nimen oikealle puolelle ja napsauttamalla näkyviin tulevaa roskakorikuvaketta (sininen nuoli). Tai vie hiiri yksittäisten kirjasinmuunnelmien päälle ja napsauta roskakorikuvaketta (fonttimuunnelmat sijaitsevat vihreällä korostetulla alueella). Voit myös napsauttaa "Poista kirjasinperhe" -linkkiä poistaaksesi minkä tahansa kirjasinperheen (violetti nuoli).

Siinä se tässä oppaassa! Jos pidit siitä, voit tutustua toiseen WordPressin ohjeartikkelit tai ilmoittaudu mukaani WordPress-mestarikurssi Udemylla.

Davies Media Design ilmainen luovien sovellusten sähköpostiuutiskirje

Tilaa DMD-uutiskirje

Rekisteröidy saadaksesi uusia opetusohjelmia, kurssipäivityksiä ja viimeisimmät uutiset ilmaisista luovista suosikkisovelluksistasi!

Tilaaminen onnistui!

Pin Se Pinterest