Selles WordPressi abiartiklis juhendan teid samm-sammult läbi kohandatud fontide lisamise WordPressi plokiteemadele. See tähendab, et saate IGASLE teemale lisada MIS TAHES fonte, näiteks lisada teemale Twenty Twenty Three. Google'i fondid.

Näitan teile, kuidas seda ülesannet täita, kasutades pluginat Loo plokitee, mille on välja töötanud otse WordPressi arendajate meeskond. See muudab pistikprogrammi ülikergeks, suure jõudlusega ja plokiteemadega väga hõlpsasti kasutatavaks.

Selle meetodi abil saate linkida fontidele (st linkida Google Fontsile) või manustada fonte kohapeal oma saidile (saidi paremaks toimimiseks). Lähme asjasse!

Sisukord

Video: lisage WordPressile kohandatud fonte

1. Installige plugin "Loo plokiteema".

WordPressi pistikprogrammi lisamiseks liikuge jaotisse Pluginad> Lisa uus

Alustuseks peaksite logima sisse oma WordPressi administraatorialasse, mis viib teid juhtpaneelile. Sealt minge põhinavigeerimisribalt valikusse Pluginad> Lisa uus (ülaloleval pildil punane nool).

Otsige "Loo blokeeritav teema" ja klõpsake "Installi kohe"

Otsige pistikprogrammi "Loo plokkiteema", kasutades paremas ülanurgas olevat otsinguriba (ülaloleval fotol on roheline piirjoon). Kui kuvatakse Plokkiteema loomise pistikprogramm, klõpsake selle oma saidile installimiseks nuppu "Installi kohe" (punane nool).

Aktiveerige Plokkiteema loomise pistikprogramm

Järgmisena klõpsake pistikprogrammi aktiveerimiseks nuppu "Aktiveeri".

WordPressi lihtsustamine: Davies Media Designi kursus võimsate veebisaitide loomise kohta

2. Keela turvaplugin (ajutiselt)

Ülejäänud protsessi tõrgeteta kulgemiseks peate ajutiselt keelama kõik installitud turbepluginad, mis blokeerivad kasutajate võimaluse muuta teemasid või pistikprogramme.

Minu konkreetsel juhul kasutan SG Security pistikprogrammi (mis on kõigi WordPressi veebisaitidega kaasas hostitud Sitegroundi kaudu – majutajat, keda soovitan soojalt). Tean kindlalt, et see pistikprogramm segab kohandatud fontide lisamise protsessi, seega keelan seade, mis takistab.

Liikuge jaotisse SG Security> Saidi turvalisus

Sel juhul navigeerin SG Security pistikprogrammi jaotisse „Saidi turvalisus”, kasutades põhinavigeerimist (punane nool ülaloleval pildil).

Lülitage suvand Keela teemade ja pistikprogrammide redaktor asendisse Väljas

Järgmisena kerin alla valikuni "Keela teemade ja pistikprogrammide redaktor" (ülaloleval pildil roheliselt esile tõstetud). Näete sellest valikust paremal lülitit – selle funktsiooni keelamiseks klõpsake lülitil (punane nool). Peaksite nägema paremas nurgas olevas sinises nooles hüpikakent "Edu").

Kui meie turvaplugin on ajutiselt keelatud, saame liikuda järgmise sammu juurde, milleks on fontide valimine ja üleslaadimine, mida oma saidil kasutada tahame.

Kohandatud fontide kasutamiseks WordPressis on kaks võimalust.

3. Valige WordPressi jaoks kohandatud fondid (lingitud Google'i fondid)

Esimene võimalus on linkida kolmanda osapoole saidi fontidele, Google Fondid. See valik on lihtsam ja selle seadistamine võtab vähem aega, kuid aeglustab teie veebisaidi lehe laadimise kiirust. See piirab teid ka Google Fontsist saadaolevate fontidega (kuigi Google pakub palju suurepäraseid tasuta fonte). Kui olete vähem tehniline ja te ei soovi Google Fontsi kasutada, soovitan seda valikut.

Liikuge jaotisse Välimus> Teemafondide haldamine

Alustuseks navigeerige põhinavigeerimismenüüst jaotisse „Välimus> Teema fontide haldamine” (punane nool ülaloleval pildil).

Sellel lehel kuvatakse olemasolevad WordPressi teemafondid, klõpsake nuppu Lisa Google'i fondid

Tööalal „Halda teemafonte” näete kõiki praegu WordPressi installitud vaikefonte (ülaloleval pildil roheliselt esile tõstetud). Teie fondid on loetletud ka tööala paremas servas koos iga fondi erinevate variatsioonide ja iga fondivariatsiooni failisuurusega (sinisega).

Teemale uue fondi lisamiseks klõpsake nuppu "Lisa Google'i font" (punane nool).

Valige rippmenüüst Google'i font

Klõpsake rippmenüül "Vali font" ja otsige Google'i fonti, mille soovite oma saidile lisada (fondid on tähestikulises järjekorras). Kui te pole kindel, kuidas iga font välja näeb, soovitan Google Fontsi veebisaiti sirvides fonte uurida ja neid katsetada. Kui olete leidnud fondi, mida soovite kasutada, valige see rippmenüüst (sinine nool).

Vaadake ja valige Google'i fondi variandid, seejärel klõpsake "Lisa oma teemale Google'i fonte"

Nüüd näete loendit kõigist saadaolevatest variantidest, mida saate selle fondi jaoks oma teemasse installida. Kõigi variantide valimiseks võite märkida kasti üksikute variantide kõrval või klõpsata ülemist märkeruutu (punane nool ülaloleval pildil). Näete ekraani paremas servas valitud variantide loendit koos failisuurusega. Kui olete valmis, klõpsake "Lisa oma teemale Google'i fonte" (roheline nool).

Pärast kohandatud fondi lisamist WordPressile klõpsake tagasinoolt

Nüüd peaksite nägema tööala ülaosas teadet, et font on teie teemasse installitud (antud juhul teemasse Twenty-Twenty Three). Seejärel saate klõpsata eduteatekasti lingil „Halda fonte” või klõpsata väikest tagasinoolt (punane nool ülaloleval pildil), et naasta tööalale „Halda teemafonte”.

Installitud kohandatud font ja selle variandid kuvatakse nüüd WordPressis

Nüüd näete oma äsja installitud fondiperekonda koos ülejäänud teema fontidega (punane nool ülaloleval pildil). Samuti näete oma fondiperekonda ja kõiki sellega seotud fondivariatsioone tööala paremal küljel (roheliselt esile tõstetud).

4. Manustage WordPressi kohandatud fondid (kohalikud fondid parema SEO jaoks)

Teine võimalus oma WordPressi veebisaidile fontide lisamiseks on fontide manustamine või lokaalne hostimine. Teisisõnu, teie fondifailid asuvad samas veebiserveris, mis majutab teie veebisaiti.

Selle meetodi eeliseks on see, et see ei nõua fontide hankimist kolmanda osapoole domeenist. Selle tulemusena laaditakse teie fonte kiiremini ja seega laaditakse teie veebileht kiiremini. Veebilehtede kiirem laadimine on kasutajakogemuse jaoks parem, mis tähendab, et see võib aidata teie saidil olla otsingumootorites kõrgemal kohal ja saada rohkem liiklust.

Teisisõnu, manustatud fondid on SEO (otsingumootori optimeerimise) jaoks paremad.

Kuigi see meetod võtab paar lisatoimingut, on see siiski üsna lihtne ja kasutab sama pistikprogrammi, mille me varem installisime (plugin Plokkteemad loomine).

Fontide arvutist oma WordPressi saidile üleslaadimiseks klõpsake "Lisa kohalik font".

Lokaalselt fontide installimiseks navigeerige põhinavigeerimismenüüst jaotisse Välimus> Teemafondide haldamine (kui te pole seal juba viimasest sammust saadik – sinine nool ülaloleval pildil). Järgmisena klõpsake tööala paremas ülanurgas nuppu "Lisa kohalik font" (punane nool).

Kohandatud fondifaili üleslaadimiseks klõpsake "Vali fail".

Teid suunatakse alale „Kohalikud fondid”, kus saate valida arvutist faili, mille oma teemasse üles laadida. Nupu „Vali fail” all näete toetatud fondifailivormingute loendit. Neid vorminguid saate hankida mis tahes usaldusväärselt fontide veebisaidilt, sealhulgas Google Fontsist.

Otsige ja laadige alla oma valitud font teenusest Google Fonts

Kohandatud fondi otsimiseks külastage saiti Google Fonts

Hüppan Google Fontsi juurde ja kasutan otsinguriba (punast noolt), et otsida soovitud fonti – antud juhul fonti “Catamaran”. Kui font on tulemustes loetletud, klõpsan sellel fondilehe vaatamiseks (roheline nool).

Google'i fondi arvutisse allalaadimiseks klõpsake nuppu Laadi perekond alla

Järgmisena klõpsan selle fondi ja kõigi selle variatsioonide arvutisse allalaadimiseks nuppu „Laadi perekond alla”. Kui soovite näha selle fondi kõiki saadaolevaid variatsioone, saate fondi lehel allapoole kerida.

Valige kohandatud fondi allalaadimiskoht ja klõpsake nuppu "Salvesta"

Fondi ZIP-faili arvutisse salvestamiseks klõpsake nuppu "Salvesta".

Fondifailidele juurde pääsemiseks pakkige oma fondikaust lahti

Vaadake allalaaditud fonti failihalduris

Kui allalaadimine on lõppenud, klõpsake lõpetatud allalaadimise kõrval olevat noolt (punane nool) ja klõpsake nuppu "Kuva kaustas" (roheline nool).

Paremklõpsake oma fondi ZIP-failil ja valige "Extract All"

Paremklõpsake oma failiuurijas ZIP-failil ja klõpsake nuppu "Extract All".

Valige ekstraktitud fondifailide allalaadimiskoht

Kuvatakse hüpikaken, mis näitab, kus fonte ekstraheeritakse (punane nool). Soovi korral saate seda asukohta muuta, vastasel juhul klõpsake nuppu „Extract” (roheline nool). See pakkib kausta lahti ja loob teie arvutisse uue faili kõigi lahtipakkitud fondifailidega. See kaust peaks automaatselt avanema.

Kõigi kohandatud fondivariantide vaatamiseks topeltklõpsake kaustal "staatiline".

Kui laadisite fondifailid alla teenuse Google Fonts abil, sisestage kõigi fondifailide vaatamiseks kaust nimega „staatiline”. Vastasel juhul otsige lihtsalt OTF-, TTF-, WOFF- või WOFF2-faile.

Kopeerige failiuurija ülemisele ribale fondivariantide faili asukoht

Selles "staatilises" kaustas näete loendit kõigist fondivariatsioonidest, mille katamaraani fondi jaoks Google Fontsist alla laadisime. Kokku on 9 varianti ja me saame need kõik oma veebisaidile üles laadida või ainult need variandid, mida me tahame/vajame. Klõpsake failiuurijas kausta asukohta (roheline nool), seejärel paremklõpsake ja valige "Kopeeri".

Laadige oma kohandatud fondid WordPressi üles

WordPressis klõpsake "Vali fail" ja jätke oma fondivariantide faili asukoht mööda

Navigeerige tagasi WordPressi, kus on avatud tööala „Kohalikud fondid”. Fontide valimiseks klõpsake nuppu "Vali fail" (ülaloleval pildil punane nool). Saate käsitsi navigeerida oma arvutis asukohta, kus teie fondid on salvestatud. Või klõpsake lihtsalt failiuurija aadressiribal (sinine nool), kustutage seal olev aadress, seejärel paremklõpsake ja valige "Kleebi" (roheline nool). See kleebib eelmises etapis kopeeritud aadressi. Vajutage sisestusklahvi ja teid suunatakse fontidega kausta.

Valige soovitud fondi variandid ja klõpsake nuppu Ava

Peate oma fondi variatsioonid ükshaaval üles laadima. Selle näite puhul laadin lihtsalt üles fondivariatsiooni „Catamaran-Regular”, klõpsates sellel (roheline nool), seejärel klõpsates nuppu „Ava” (punane nool).

WordPressi kohandatud fontide lisamiseks klõpsake käsul Laadi font üles oma teemasse

Nüüd peaksite nägema teavet "FONT NAME", "FONT STYLE" ja "FONT WEIGHT" kohta, samuti paremal pool fondi eelvaadet. Fondivariatsiooni üleslaadimiseks klõpsake "Laadi font üles oma teemasse" (punane nool).

Vaadake oma kohandatud teema fonte

Kui kohandatud WordPressi fondid on teie teemasse kohapeal üles laaditud, klõpsake nuppu Tagasi

Nüüd peaksite tööala ülaosas nägema eduteadet (ülaloleval pildil on roheline piirjoon). Õnnitleme – teie kohandatud font laaditakse nüüd teie teemasse üles kohaliku fontina! Võite jätkata klõpsamist „Vali fail” ja laadida üles nii palju fondivariatsioone, kui soovite.

Kui olete lõpetanud, klõpsake eduteatekastis linki „Halda fonte” või tagasinoolt (tähistatud punase noolega), et naasta tööalale Teema fontide haldamine.

Teie uus font kuvatakse koos selle variantidega lehel Teemafondide haldamine

Nüüd näete uut "Catamaran" fondiperekonda koos ülejäänud teema fondiperekondadega (punane nool). Lisaks näete fondiperekonda ja kõiki installitud variatsioone teemafondide haldamise akna paremas servas (roheliselt esile tõstetud).

5. Muutke oma teema fondid kohandatud fontideks

Nüüd, kui teil on uued fondid installitud, on aeg lõbusamaks osaks!

Teema fontide muutmiseks liikuge jaotisse Välimus>Redaktor

Teema fontide muutmiseks kohandatud fontideks minge saidiredaktorisse, avades valiku Välimus>Redaktor (punane nool ülaloleval pildil).

WordPressi saidiredaktori avamiseks klõpsake põhisisualal

Juhtelementide kuvamiseks klõpsake saidiredaktori põhisisualal (punane nool).

Klõpsake plokkide redigeerija ülamenüüs ikooni Styles ja klõpsake nuppu Tüpograafia

Ülemises menüüs klõpsake ikooni "Stiilid" (sinine nool). Seejärel klõpsake "Tüpograafia" (punane nool).

Kohandatud pealkirjafondide lisamiseks klõpsake suvandit Pealkirjad

Jaotises „Elements” saate muuta teksti, linkide, pealkirjade või nuppude fonti. Ma valin selle näite jaoks valiku „Pealkirjad”.

Valige rippmenüüst oma kohandatud WordPressi font

Nüüd näete jaotises „Tüpograafia” rippmenüüd, kus saate valida mis tahes oma teemafondide hulgast (punane nool). Siin näete selle õpetuse jaoks lisatud fonte "Neuton" ja "Catamaran". Ma valin oma pealkirjafondiks "Neuton".

Muudatuste salvestamiseks klõpsake paremas ülanurgas nuppu "Salvesta".

Kohandatud WordPressi teemafondide salvestamiseks klõpsake nuppu "Salvesta".

Klõpsake veel üks kord nuppu „Salvesta” (punane nool) ja teie kohandatud font salvestatakse nüüd kõigi saidi pealkirjade jaoks!

Fontide eelvaate kuvamiseks klõpsake ülemises menüüs Blokeeri vaadet ja klõpsake linki Vaata saiti

Järgmisena saate saidiredaktori paremas ülanurgas klõpsata linki Vaade>Vaata saiti (punased nooled ülaloleval fotol), et näha, kuidas teie veebisait uue fondi puhul välja näeb. Naaske saidi redaktorisse ja korrake seda protsessi kõigi muude elementide puhul, mille fonti soovite kohandada.

WordPressi administraatorialasse naasmiseks klõpsake saidiredaktori vasakus ülanurgas oleval logol (roheline nool), seejärel klõpsake uuesti logol.

6. Kuidas WordPressist kohandatud fonte kustutada

Kohandatud fontide kustutamiseks avage Välimus>Halda teemafonte

Kohandatud fondi kustutamiseks alustage navigeerimisega tagasi jaotisesse Välimus> Teemafondide haldamine.

Klõpsake oma kohandatud WordPressi fondi rippmenüüs linki "Eemalda fondiperekond".

Saate kustutada kogu fondiperekonna, hõljutades kursorit fondiperekonnanime parempoolses servas ja klõpsates kuvataval prügikastiikoonil (sinine nool). Või hõljutage kursorit üksikute fondivariatsioonide kohal ja klõpsake prügikasti ikooni (fondi variatsioonid asuvad rohelisel esiletõstetud alal). Samuti saate fondiperekonna kustutamiseks klõpsata lingil „Eemalda fondiperekond” (lilla nool).

See on selle õpetuse jaoks! Kui teile meeldis, võite vaadata minu muud WordPressi abiartiklid või registreeruge minu WordPressi meistriklass Udemy kohta.