Šajā WordPress palīdzības rakstā es soli pa solim aprakstīšu pielāgotu fontu pievienošanu jūsu WordPress bloķēšanas motīviem. Tas nozīmē, ka JEBKURAI motīvam varat pievienot JEBKURU fontu, piemēram, pievienot Google fontus motīvam Twenty Twenty Three.
Es parādīšu, kā paveikt šo uzdevumu, izmantojot spraudni Create Block Theme, ko tieši izstrādājusi WordPress izstrādātāju komanda. Tas padara spraudni īpaši vieglu, augstu veiktspēju un ļoti viegli lietojamu ar bloku motīviem.
Izmantojot šo metodi, varat izveidot saiti uz fontiem (ti, saiti uz Google fontiem) vai iegult fontus lokāli savā vietnē (lai uzlabotu vietnes veiktspēju). Iedziļināsimies tajā!
Video: pievienojiet pielāgotus fontus WordPress
1. Instalējiet spraudni “Izveidot bloka motīvu”.
Iesācējiem vēlēsities pieteikties savā WordPress administratora apgabalā, kas novirzīs jūs uz informācijas paneli. No turienes galvenajā navigācijas panelī dodieties uz sadaļu Spraudņi> Pievienot jaunu (sarkanā bultiņa augšējā attēlā).
Meklējiet spraudni “Izveidot bloka motīvu”, izmantojot meklēšanas joslu augšējā labajā stūrī (iepriekš redzamajā fotoattēlā iezīmēts zaļā krāsā). Kad tiek parādīts spraudnis Izveidot bloka motīvu, noklikšķiniet uz pogas “Instalēt tūlīt”, lai to instalētu savā vietnē (sarkanā bultiņa).
Pēc tam noklikšķiniet uz pogas "Aktivizēt", lai aktivizētu spraudni.
2. Atspējojiet drošības spraudni (īslaicīgi)
Lai pārējais process noritētu nevainojami, uz laiku ir jāatspējo visi instalētie drošības spraudņi, kas bloķē lietotāju iespējas rediģēt motīvus vai spraudņus.
Manā gadījumā es izmantoju spraudni SG Security (kas tiek piegādāts kopā ar visām WordPress vietnēm mitināts, izmantojot Siteground — saimnieku, kuru ļoti iesaku). Es zinu, ka šis spraudnis traucē pielāgoto fontu pievienošanas procesu, tāpēc es atspējošu iestatījumu, kas traucē.
Šādā gadījumā es pārešu uz SG Security spraudņa sadaļu Vietnes drošība, izmantojot galveno navigāciju (sarkanā bultiņa iepriekš redzamajā attēlā).
Pēc tam es ritināšu uz leju līdz opcijai “Atspējot motīvu un spraudņu redaktoru” (iepriekš redzamajā attēlā iezīmēta zaļā krāsā). Pa labi no šīs opcijas redzēsit slēdzi — noklikšķiniet uz slēdža, lai atspējotu šo funkciju (sarkanā bultiņa). Labajā stūrī zilajā bultiņā vajadzētu redzēt uznirstošo ziņojumu “Veiksme”.
Ja mūsu drošības spraudnis ir īslaicīgi atspējots, mēs varam pāriet uz nākamo soli, izvēloties un augšupielādējot fontus, kurus vēlamies izmantot mūsu vietnē.
Ir divas iespējas izmantot pielāgotus fontus programmā WordPress.
3. Atlasiet pielāgotos fontus pakalpojumam WordPress (saistītie Google fonti)
Pirmā iespēja ir izveidot saiti uz fontiem trešās puses vietnē, Google Fonts. Šī opcija ir vienkāršāka, un tās iestatīšana prasa mazāk laika, taču tā palēnina jūsu vietnes lapas ielādes ātrumu. Tas arī ierobežo fontus, kas pieejami pakalpojumā Google fonti (lai gan Google piedāvā daudz lielisku bezmaksas fontu). Ja esat mazāk lietpratīgs un neiebilstat par Google fontu izmantošanu, es iesaku šo iespēju.
Iesācējiem galvenajā navigācijas panelī dodieties uz "Izskats> Pārvaldīt motīvu fontus" (sarkanā bultiņa augšējā attēlā).
Darba apgabalā “Pārvaldīt motīvu fontus” redzēsit visus noklusējuma fontus, kas pašlaik ir instalēti programmā WordPress (iepriekš redzamajā attēlā ir iezīmēti zaļā krāsā). Jūsu fonti ir norādīti arī darba apgabala labajā pusē, kā arī katra fonta dažādie varianti un faila lielums katram fonta variantam (konticēts zilā krāsā).
Lai motīvam pievienotu jaunu fontu, noklikšķiniet uz pogas “Pievienot Google fontu” (sarkanā bultiņa).
Noklikšķiniet uz nolaižamās izvēlnes “Atlasīt fontu” un meklējiet Google fontu, kuru vēlaties pievienot savai vietnei (fonti ir alfabētiskā secībā). Ja neesat pārliecināts, kā katrs fonts izskatās, iesaku pārlūkojot vietni Google Fonts lai izpētītu fontus un pārbaudītu tos. Kad esat atradis fontu, kuru vēlaties izmantot, atlasiet to nolaižamajā izvēlnē (zilā bultiņa).
Tagad tiks parādīts saraksts ar visiem pieejamajiem variantiem, kurus varat instalēt savā motīvā šim fontam. Varat atzīmēt izvēles rūtiņu blakus atsevišķiem variantiem vai noklikšķināt uz augšējās izvēles rūtiņas (sarkanā bultiņa attēlā iepriekš), lai atlasītu visus variantus. Ekrāna labajā pusē būs redzams atlasīto variantu saraksts, kā arī to faila lielums. Kad esat gatavs, noklikšķiniet uz “Pievienot Google fontus savam motīvam” (zaļā bultiņa).
Tagad darba apgabala augšdaļā vajadzētu redzēt ziņojumu, ka fonts ir instalēts jūsu motīvam (šajā gadījumā motīvam Divdesmit trīs). Pēc tam veiksmes ziņojuma lodziņā varat noklikšķināt uz saites "Pārvaldīt fontus" vai noklikšķināt uz mazās atpakaļbultiņas (sarkanā bultiņa attēlā iepriekš), lai atgrieztos darba apgabalā "Pārvaldīt motīvu fontus".
Tagad jūs redzēsit savu tikko instalēto fontu saimi kopā ar pārējiem motīva fontiem (sarkanā bultiņa augšējā attēlā). Jūs redzēsiet arī savu fontu saimi un visus ar to saistītos fontu variantus darba apgabala labajā pusē (izcelts zaļā krāsā).
4. Ievietojiet pielāgotus fontus pakalpojumam WordPress (vietējie fonti labākam SEO)
Otra iespēja fontu pievienošanai savai WordPress vietnei ir fontu “iegulšana” vai “lokāla mitināšana”. Citiem vārdiem sakot, jūsu fontu faili atradīsies tajā pašā tīmekļa serverī, kurā tiek mitināta jūsu vietne.
Šīs metodes priekšrocība ir tāda, ka tai nav nepieciešams izgūt fontus no trešās puses domēna. Tā rezultātā jūsu fonti tiek ielādēti ātrāk, un tādējādi jūsu tīmekļa lapa tiek ielādēta ātrāk. Ātrāka tīmekļa lapu ielāde ir labāka lietotāja pieredzei, kas nozīmē, ka tā var palīdzēt jūsu vietnei ieņemt augstāku vietu meklētājprogrammās un iegūt lielāku trafiku.
Citiem vārdiem sakot, iegultie fonti ir labāki SEO (meklētājprogrammu optimizācijai).
Lai gan šī metode veic dažas papildu darbības, tā joprojām ir diezgan vienkārša un izmanto to pašu spraudni, ko instalējām iepriekš (spraudnis Izveidot bloķēšanas motīvus).
Lai instalētu fontus lokāli, sāciet, pārejot uz Izskats> Pārvaldīt motīvu fontus no galvenās navigācijas (ja neesat tur jau no pēdējās darbības - zilā bultiņa augšējā attēlā). Pēc tam noklikšķiniet uz pogas “Pievienot vietējo fontu” darba zonas augšējā labajā stūrī (sarkanā bultiņa).
Jūs tiksit novirzīts uz apgabalu “Vietējie fonti”, kur savā datorā varat atlasīt failu, ko augšupielādēt savā motīvā. Zem pogas “Izvēlēties failu” tiks parādīts atbalstīto fontu failu formātu saraksts. Šos formātus varat iegūt no jebkuras uzticamas fontu vietnes, tostarp Google Fonts.
Atrodiet un lejupielādējiet savu izvēlēto fontu pakalpojumā Google fonti
Es pārietu uz Google fontiem un izmantošu meklēšanas joslu (sarkano bultiņu), lai meklētu vajadzīgo fontu — šajā gadījumā fontu “Catamaran”. Kad fonts būs redzams rezultātos, es noklikšķināšu uz tā, lai skatītu fonta lapu (zaļā bultiņa).
Pēc tam es noklikšķināšu uz pogas “Lejupielādēt saimi”, lai datorā lejupielādētu šo fontu un visas tā variācijas. Varat ritināt uz leju fontu lapā, ja vēlaties redzēt visus pieejamos šī fonta variantus.
Noklikšķiniet uz “Saglabāt”, lai saglabātu fonta zip failu savā datorā.
Izpakojiet savu fontu mapi, lai piekļūtu fontu failiem
Kad lejupielāde ir pabeigta, noklikšķiniet uz bultiņas blakus pabeigtajai lejupielādei (sarkanā bultiņa) un noklikšķiniet uz “Rādīt mapē” (zaļā bultiņa).
Ar peles labo pogu noklikšķiniet uz zip faila failu pārlūkā un noklikšķiniet uz "Izvilkt visu".
Tiks parādīts uznirstošais logs, kas parāda, kur fonti tiek izvilkti (sarkanā bultiņa). Ja vēlaties, varat mainīt šo atrašanās vietu, pretējā gadījumā noklikšķiniet uz pogas “Izvilkt” (zaļā bultiņa). Tas izsaiņos mapi un datorā izveidos jaunu failu ar visiem izspiestajiem fontu failiem. Šai mapei vajadzētu atvērties automātiski.
Ja lejupielādējāt fontu failus, izmantojot Google fontus, ievadiet mapi ar apzīmējumu “static”, lai skatītu visus savus fontu failus. Pretējā gadījumā vienkārši meklējiet visus failus, kas ir OTF, TTF, WOFF vai WOFF2 faili.
Šajā “statiskajā” mapē redzēsit visu to fontu variantu sarakstu, kurus mēs lejupielādējām fontam Catamaran no pakalpojuma Google Fonts. Kopumā ir 9 varianti, un mēs varam augšupielādēt tos visus mūsu vietnē vai tikai tos variantus, kurus mēs vēlamies/nepieciešam. Noklikšķiniet uz mapes atrašanās vietas failu pārlūkā (zaļā bultiņa), pēc tam ar peles labo pogu noklikšķiniet un atlasiet “Kopēt”.
Augšupielādējiet savus pielāgotos fontus pakalpojumā WordPress
Dodieties atpakaļ uz WordPress, kur ir atvērta darba zona “Vietējie fonti”. Noklikšķiniet uz pogas “Izvēlēties failu” (sarkanā bultiņa augstāk esošajā attēlā), lai atlasītu fontus. Varat manuāli pāriet uz vietu savā datorā, kur tiek glabāti fonti. Vai arī vienkārši noklikšķiniet uz failu pārlūka adreses joslas (zilā bultiņa), izdzēsiet tur esošo adresi, pēc tam ar peles labo pogu noklikšķiniet un atlasiet “Ielīmēt” (zaļā bultiņa). Tādējādi tiks ielīmēta adrese, kuru nokopējāt iepriekšējā darbībā. Nospiediet ievadīšanas taustiņu, un jūs tiksit novirzīts uz mapi ar saviem fontiem.
Fonta varianti ir jāaugšupielādē pa vienam. Šajā piemērā es vienkārši augšupielādēšu fonta variantu “Catamaran-Regular”, noklikšķinot uz tā (zaļā bultiņa), pēc tam noklikšķinot uz pogas “Atvērt” (sarkanā bultiņa).
Tagad jums vajadzētu redzēt informāciju par "FONT NAME", "FONT STYLE" un "FONT WEIGHT", kā arī fonta priekšskatījumu labajā pusē. Noklikšķiniet uz “Augšupielādēt fontu savā motīvā” (sarkanā bultiņa), lai augšupielādētu fonta variantu.
Skatiet savus pielāgotos motīvu fontus
Tagad darba zonas augšdaļā vajadzētu redzēt veiksmes ziņojumu (iepriekš redzamajā attēlā iezīmēts zaļā krāsā). Apsveicam! Jūsu pielāgotais fonts tagad ir augšupielādēts jūsu motīvā kā vietējais fonts! Varat turpināt noklikšķināt uz “Izvēlēties failu” un augšupielādēt tik daudz fontu variantu, cik vēlaties.
Kad esat pabeidzis, noklikšķiniet uz saites “Pārvaldīt fontus” veiksmes ziņojuma lodziņā vai uz atpakaļvērstās bultiņas (apzīmēta ar sarkano bultiņu), lai atgrieztos darba apgabalā Pārvaldīt motīvu fontus.
Tagad redzēsit jauno “Catamaran” fontu saimi kopā ar pārējām motīva fontu saimēm (sarkanā bultiņa). Turklāt loga Motīvu fontu pārvaldība labajā pusē būs redzama fontu saime un visi instalētie varianti (izcelti zaļā krāsā).
5. Nomainiet motīva fontus uz pielāgotajiem fontiem
Tagad, kad ir instalēti jaunie fonti, ir pienācis laiks jautrajai daļai!
Lai mainītu motīva fontus uz pielāgotajiem fontiem, pārejiet uz vietnes redaktoru, dodoties uz Izskats>Redaktors (sarkanā bultiņa iepriekš redzamajā attēlā).
Noklikšķiniet jebkurā vietā vietnes redaktora galvenā satura apgabalā (sarkanā bultiņa), lai atvērtu vadīklas.
Augšējā izvēlnē noklikšķiniet uz ikonas "Stili" (zilā bultiņa). Pēc tam noklikšķiniet uz “Tipogrāfija” (sarkanā bultiņa).
Sadaļā “Elementi” varat mainīt teksta, saišu, virsrakstu vai pogu fontu. Šim piemēram es atlasīšu opciju Virsraksti.
Tagad sadaļā “Tipogrāfija” redzēsit nolaižamo izvēlni, kurā varēsit izvēlēties kādu no motīva fontiem (sarkanā bultiņa). Šeit var redzēt fontus “Neuton” un “Catamaran”, ko pievienoju šai apmācībai. Es atlasīšu “Neuton” savam virsraksta fontam.
Noklikšķiniet uz pogas “Saglabāt” augšējā labajā stūrī, lai saglabātu izmaiņas.
Vēlreiz noklikšķiniet uz “Saglabāt” (sarkanā bultiņa), un jūsu pielāgotais fonts tagad tiks saglabāts visiem vietnes virsrakstiem!
Pēc tam varat noklikšķināt uz saites Skatīt > Skatīt vietni vietnes redaktora augšējā labajā stūrī (sarkanas bultiņas iepriekš redzamajā fotoattēlā), lai redzētu, kā jūsu vietne izskatās ar jauno fontu. Atgriezieties vietnes redaktorā un atkārtojiet šo procesu visiem citiem elementiem, kuru fontu vēlaties pielāgot.
Lai atgrieztos WordPress administrēšanas apgabalā, vietnes redaktora augšējā kreisajā stūrī noklikšķiniet uz logotipa (zaļā bultiņa), pēc tam vēlreiz noklikšķiniet uz logotipa.
6. Kā izdzēst pielāgotos fontus no WordPress
Lai dzēstu kādu no saviem pielāgotajiem fontiem, vispirms dodieties atpakaļ uz Izskats> Pārvaldīt motīvu fontus.
Varat izdzēst visu fontu saimi, virzot peles kursoru virs fontu saimes nosaukuma labās puses un noklikšķinot uz parādītās miskastes ikonas (zilā bultiņa). Vai arī virziet kursoru virs atsevišķiem fontu variantiem un noklikšķiniet uz miskastes ikonas (fontu varianti atrodas zaļi iezīmētajā apgabalā). Varat arī noklikšķināt uz saites “Noņemt fontu saimi”, lai izdzēstu jebkuru fontu saimi (violeta bultiņa).
Tas ir par šo mācību! Ja jums patika, varat pārbaudīt manu citu WordPress palīdzības raksti vai reģistrēties manā WordPress meistarklase par Udemy.
