Ebben a WordPress súgócikkben lépésről lépésre végigvezetem az egyéni betűtípusok WordPress blokktémáihoz való hozzáadásának folyamatán. Ez azt jelenti, hogy BÁRMILYEN betűtípust hozzáadhat BÁRMILYEN témához, például hozzáadhat Google Fonts-ot a Twenty Twenty Three témához.

Megnézheti az alábbi oktatóvideót, vagy átugorhatja és elolvashatja a cikket (amely több nyelven is elérhető az oldalon található fordítási funkciók segítségével). 

Megmutatom, hogyan hajthatja végre ezt a feladatot a Create Block Theme bővítmény segítségével, amelyet közvetlenül a WordPress fejlesztői csapata fejlesztett ki. Ez rendkívül könnyűvé, nagy teljesítményűvé teszi a bővítményt, és nagyon könnyen használható blokktémákkal. Azt is bemutatom, hogyan lehet megoldani egy gyakori engedélyekkel kapcsolatos problémát, amely a bővítmény használatakor előfordulhat.

Ezzel a módszerrel vagy betűtípusokra hivatkozhat (azaz link a Google Fontsra), vagy helyileg beágyazhat betűtípusokat a webhelyére (a webhely jobb teljesítménye érdekében). Menjünk bele!

Tartalomjegyzék

1. Telepítse a „Blokktéma létrehozása” beépülő modult

Kezdetnek be kell jelentkeznie a WordPress adminisztrátori területére, amely az irányítópultra viszi. Innen lépjen a Plugins> Add New menüpontra a fő navigációs menüben (piros nyíl a fenti képen).

Keresse meg a „Blokktéma létrehozása” beépülő modult a jobb felső sarokban található keresősáv segítségével (a fenti képen zölddel jelölve). Miután megjelenik a Blokktéma létrehozása bővítmény, kattintson a „Telepítés most” gombra, hogy telepítse a webhelyére (piros nyíl).

Ezután kattintson az „Aktiválás” gombra a bővítmény aktiválásához.

WordPress egyszerűsített: Hogyan készítsünk hatékony webhelyeket Davies Media Design tanfolyam

2. A biztonsági beépülő modul letiltása (ideiglenesen)

A folyamat többi részének zökkenőmentes lebonyolításához ideiglenesen le kell tiltania minden olyan telepített biztonsági beépülő modult, amely blokkolja a felhasználók számára a témák vagy beépülő modulok szerkesztését.

Az én konkrét esetemben az SG Security beépülő modult használom (amely az összes WordPress webhelyhez tartozik a Sitegroundon keresztül üzemeltetve – nagyon ajánlom). Pontosan tudom, hogy ez a bővítmény zavarja az egyéni betűtípusok hozzáadásának folyamatát, ezért letiltom az akadályozó beállítást.

Ebben az esetben a fő navigáció segítségével (a fenti képen látható piros nyíl) az SG Security bővítmény „Webhelybiztonság” részéhez navigálok.

Ezután lefelé görgetek a „Témák és beépülő modulok szerkesztő letiltása” opcióig (a fenti képen zöld színnel kiemelve). A beállítástól jobbra egy kapcsolót fog látni – kattintson a kapcsolóra a funkció letiltásához (piros nyíl). A jobb sarokban lévő kék nyílban megjelenik egy „Siker” üzenet.

Ha biztonsági bővítményünket ideiglenesen letiltjuk, továbbléphetünk a következő lépésre: kiválasztjuk és feltöltjük az oldalunkon használni kívánt betűtípusokat.

Két lehetőség van az egyéni betűtípusok használatára a WordPressben.

3. Válassza ki az Egyéni betűtípusokat a WordPresshez (Linked Google Fonts)

Az első lehetőség egy harmadik fél webhelyén található betűtípusokra mutató hivatkozás, Google Fonts. Ez a lehetőség egyszerűbb, és kevesebb időt vesz igénybe a beállítás, de lelassítja a webhely oldalbetöltési sebességét. Ezenkívül a Google Fontsból elérhető betűtípusokra korlátozza (bár a Google rengeteg nagyszerű, ingyenes betűtípust kínál). Ha kevésbé jártas a technikában, és nem bánja a Google Fonts használatát, akkor ezt a lehetőséget ajánlom.

Kezdetnek navigáljon a „Megjelenés>Témabetűtípusok kezelése” elemhez a fő navigációs menüben (piros nyíl a fenti képen).

A „Témabetűtípusok kezelése” munkaterületen láthatja a WordPressben jelenleg telepített összes alapértelmezett betűtípust (a fenti képen zöld színnel kiemelve). A betűtípusok a munkaterület jobb oldalán is megjelennek, az egyes betűtípusok különböző változataival és az egyes betűtípusváltozatokhoz tartozó fájlméretekkel együtt (kék körvonallal).

Ha új betűtípust szeretne hozzáadni a témához, kattintson a „Google betűtípus hozzáadása” gombra (piros nyíl).

Kattintson a „Betűtípus kiválasztása” legördülő menüre, és keresse meg a webhelyéhez hozzáadni kívánt Google-betűtípust (a betűtípusok ábécé sorrendben vannak). Ha nem biztos abban, hogy az egyes betűtípusok hogyan néznek ki, ajánlom a Google Fonts webhely böngészése fontok felfedezéséhez és teszteléséhez. Ha megtalálta a használni kívánt betűtípust, válassza ki a legördülő menüből (kék nyíl).

Ekkor megjelenik az összes elérhető változat listája, amelyet telepíthet a témára az adott betűtípushoz. Az összes változat kiválasztásához bejelölheti az egyes változatok melletti jelölőnégyzetet, vagy kattintson a felső jelölőnégyzetre (piros nyíl a fenti képen). A képernyő jobb oldalán megjelenik a kiválasztott változatok listája a fájlméretükkel együtt. Ha készen áll, kattintson a „Google betűtípusok hozzáadása a témához” (zöld nyíl) lehetőségre.

Ekkor megjelenik egy üzenet a munkaterület tetején, hogy a betűtípus telepítve van a témához (jelen esetben a Huszonhárom témához). Ezután kattintson a „Betűtípusok kezelése” hivatkozásra a sikerüzenet mezőben, vagy kattintson a kis vissza nyílra (piros nyíl a fenti képen), hogy visszatérjen a „Téma betűtípusok kezelése” munkaterületre.

Ekkor megjelenik az újonnan telepített betűtípuscsalád a téma többi betűtípusával együtt (piros nyíl a fenti képen). A munkaterület jobb oldalán (zöld színnel kiemelve) láthatja a betűtípuscsaládját és az összes kapcsolódó betűtípus-változatot.

4. Egyéni betűtípusok beágyazása a WordPresshez (Helyi betűtípusok a jobb keresőoptimalizálás érdekében)

A második lehetőség a betűtípusok WordPress webhelyéhez való hozzáadására a betűtípusok „beágyazása” vagy „helyi tárolása”. Más szavakkal, a betűtípus-fájlok ugyanazon a webszerveren belül találhatók, amelyen webhelye is található.

Ennek a módszernek az az előnye, hogy nem igényel betűtípusokat harmadik féltől származó tartományból. Ennek eredményeként a betűtípusok gyorsabban töltődnek be, és így a weboldal is gyorsabban töltődik be. A weboldalak gyorsabb betöltése javítja a felhasználói élményt, ami azt jelenti, hogy webhelye magasabb helyezést érhet el a keresőkben, és nagyobb forgalmat érhet el.

Más szóval, a beágyazott betűtípusok jobbak a SEO (keresőoptimalizálás) számára.

Bár ez a módszer néhány további lépést igényel, még mindig meglehetősen egyszerű, és ugyanazt a bővítményt használja, amelyet korábban telepítettünk (Block Themes bővítmény).

A betűtípusok helyi telepítéséhez először lépjen a Megjelenés>Témabetűkészletek kezelése elemre a fő navigációs menüből (ha még nem volt ott az utolsó lépéstől – kék nyíl a fenti képen). Ezután kattintson a „Helyi betűtípus hozzáadása” gombra a munkaterület jobb felső sarkában (piros nyíl).

A „Helyi betűtípusok” területre kerül, ahol kiválaszthat egy fájlt a számítógépéről, amelyet feltölthet a témába. A „Fájl kiválasztása” gomb alatt megjelenik a támogatott betűtípus-fájlformátumok listája. Ezeket a formátumokat bármely megbízható betűtípus-webhelyről beszerezheti, beleértve a Google Fonts-t is.

Keresse meg és töltse le kedvenc betűtípusát a Google Fonts szolgáltatásból

Átugrok a Google Fonts-ra, és a keresősávot (piros nyíl) használom a kívánt betűtípus – jelen esetben a „Katamarán” betűtípus – kereséséhez. Ha a betűtípus megjelenik a találatok között, rákattintok a betűtípus oldal megtekintéséhez (zöld nyíl).

Ezután a „Család letöltése” gombra kattintva letöltöm ezt a betűtípust és annak összes változatát a számítógépemre. Lefelé görgethet a betűtípus oldalon, ha meg szeretné tekinteni a betűtípus összes elérhető változatát.

Kattintson a „Mentés” gombra a font zip fájl számítógépre mentéséhez.

Csomagolja ki a betűtípus mappát a betűtípusfájlok eléréséhez

Ha a letöltés befejeződött, kattintson a kész letöltés melletti nyílra (piros nyíl), majd kattintson a „Megjelenítés mappában” (zöld nyíl) gombra.

Kattintson jobb gombbal a zip fájlra a fájlkezelőben, és kattintson az „Összes kibontása” elemre.

Megjelenik egy felugró ablak, amely megmutatja, hol történik a betűtípusok kibontása (piros nyíl). Ezt a helyet módosíthatja, ha akarja, ellenkező esetben kattintson a „Kivonat” feliratú gombra (zöld nyíl). Ez kicsomagolja a mappát, és új fájlt hoz létre a számítógépen az összes kicsomagolt betűtípusfájllal. Ennek a mappának automatikusan meg kell nyílnia.

Ha a Google Fonts segítségével töltött le betűtípusfájlokat, az összes betűtípusfájl megtekintéséhez lépjen be a „static” feliratú mappába. Ellenkező esetben egyszerűen keressen olyan fájlokat, amelyek OTF, TTF, WOFF vagy WOFF2 fájlok.

Ebben a „statikus” mappában megjelenik az összes betűtípus-változat listája, amelyet letöltöttünk a Catamaran betűtípushoz a Google Fonts szolgáltatásból. Összesen 9 variáció létezik, és vagy mindegyiket feltölthetjük weboldalunkra, vagy csak azokat a variációkat, amelyeket szeretnénk/szükségünk van. Kattintson a mappa helyére a fájlkezelőben (zöld nyíl), majd kattintson a jobb gombbal, és válassza a „Másolás” lehetőséget.

Töltse fel egyéni betűtípusait a WordPress-re

Lépjen vissza a WordPresshez, ahol meg van nyitva a „Helyi betűtípusok” munkaterület. Kattintson a „Fájl kiválasztása” gombra (piros nyíl a fenti képen) a betűtípusok kiválasztásához. Manuálisan navigálhat arra a helyre a számítógépén, ahol a betűtípusokat tárolja. Vagy egyszerűen kattintson a fájlkezelő címsorára (kék nyíl), törölje a jelenleg ott lévő címet, majd kattintson a jobb gombbal, és válassza a „Beillesztés” lehetőséget (zöld nyíl). Ezzel beilleszti az előző lépésben másolt címet. Nyomja meg az Enter billentyűt, és a betűtípusokat tartalmazó mappába kerül.

Egyenként kell feltöltenie a betűtípus-változatokat. Ebben a példában egyszerűen feltöltöm a „Catamaran-Regular” betűtípus-változatot, rákattintva (zöld nyíl), majd a „Megnyitás” gombra (piros nyíl).

Most látnia kell a „BETŰKÉPNEV”, „BETŰTÍLUS” és a „BETŰKÖRŰ” információkat, valamint a betűtípus előnézetét a jobb oldalon. Kattintson a „Betűtípus feltöltése a témához” (piros nyíl) lehetőségre a betűtípusváltozat feltöltéséhez.

Tekintse meg egyéni téma betűtípusait

Most egy sikerüzenetet kell látnia a munkaterület tetején (a fenti képen zölden körvonalazva). Gratulálunk – egyéni betűtípusa mostantól helyi betűtípusként feltöltődik témájába! Továbbra is rákattinthat a „Fájl kiválasztása” gombra, és annyi betűtípust tölthet fel, amennyit csak szeretne.

Ha végzett, kattintson a „Betűtípusok kezelése” hivatkozásra a sikerüzenet mezőben vagy a vissza nyílra (amelyet piros nyíl jelöl), hogy visszatérjen a Téma betűtípusok kezelése munkaterületre.

Ekkor megjelenik az új „Catamaran” betűtípuscsalád a téma többi betűtípus-családjával együtt (piros nyíl). Ezenkívül a Téma betűtípusok kezelése ablak jobb oldalán láthatja a betűtípuscsaládot és a telepített változatokat (zölddel kiemelve).

5. Módosítsa a téma betűtípusait az egyéni betűtípusokra

Most, hogy telepítette az új betűtípusokat, itt az ideje a szórakoztató résznek!

A téma betűtípusainak egyéni betűtípusokra cseréléséhez lépjen a Webhelyszerkesztőbe a Megjelenés>Szerkesztő menüpontban (piros nyíl a fenti képen).

Kattintson bárhová a Webhelyszerkesztő fő tartalmi területén (piros nyíl) a vezérlők megjelenítéséhez.

A felső menüben kattintson a „Stílusok” ikonra (kék nyíl). Ezután kattintson a „Tipográfia” elemre (piros nyíl).

Az „Elemek” alatt módosíthatja a szöveg, a hivatkozások, a címsorok vagy a gombok betűtípusát. Ehhez a példához a „Címsorok” lehetőséget választom.

Most egy legördülő menü jelenik meg a „Tipográfia” alatt, ahol bármelyik téma-betűtípus közül választhat (piros nyíl). Itt láthatja az oktatóanyaghoz hozzáadott „Neuton” és „Catamaran” betűtípusokat. A „Neuton”-t választom a címsor betűtípusának.

A változtatások mentéséhez kattintson a jobb felső sarokban található „Mentés” gombra.

Kattintson még egyszer a „Mentés” gombra (piros nyíl), és az egyéni betűtípust a rendszer elmenti a webhely összes címsorához!

Ezután kattintson a Nézet>Webhely megtekintése hivatkozásra a webhelyszerkesztő jobb felső sarkában (piros nyilak a fenti képen), hogy megnézze, hogyan néz ki webhelye az új betűtípussal. Térjen vissza a Webhelyszerkesztőbe, és ismételje meg ezt a folyamatot minden olyan elemnél, amelynek betűtípusát testre szeretné szabni.

A WordPress adminisztrációs területére való visszatéréshez kattintson a webhelyszerkesztő bal felső sarkában lévő logóra (zöld nyíl), majd kattintson ismét a logóra.

6. Egyéni betűtípusok törlése a WordPressből

Bármely egyéni betűtípus törléséhez lépjen vissza a Megjelenés>Témabetűtípusok kezelése részhez.

Törölheti a teljes betűtípuscsaládot úgy, hogy az egeret a betűtípuscsalád nevének jobb oldalára viszi, és rákattint a megjelenő kuka ikonra (kék nyíl). Vagy vigye az egeret az egyes betűtípus-változatok fölé, és kattintson a kuka ikonra (a betűtípus-változatok a zölden kiemelt területen találhatók). A „Betűtípuscsalád eltávolítása” hivatkozásra kattintva bármely betűtípuscsaládot törölhet (lila nyíl).

Ennyi ez az oktatóprogram! Ha tetszett, megnézheti a másik oldalamat WordPress súgócikkek vagy iratkozz be az enyémbe WordPress mesterkurzus az Udemy-n.

Kenni Pinterest