A WordPress betűtípusainak módosítása

Nagyszerű módszer a márkaépítés és az individualizmus hozzáadásához a WordPress webhelyéhez, ha megváltoztatja a témában szereplő betűtípusokat.

A tipográfia és más sávos elemek jó első benyomást keltenek, megalapozzák a webhely látogatóinak hangulatát. , és állapítsa meg a márka identitását. A Tanulmányok azt is megállapították, hogy a betűtípusok befolyásolják az olvasók képességét a tanulásra, információk felidézésére és a szövegek memorizálására.

Ha csak telepített egy WordPress témát vagy van némi CSS és kódolási tapasztalata, megmutatunk néhány lehetőséget, amelyek segítségével módosíthatja a betűtípusokat a WordPress programban.

Betűtípusok módosítása a WordPress alkalmazásban

Három fő lehetőség áll rendelkezésre a betűtípusok megváltoztatására a WordPress alkalmazásban:

Használjon olyan webes betűtípusokat, mint Google Fonts, Fonts.com vagy Adobe Edge webes betűtípusok amelyek egy harmadik fél webhelyén találhatók.

A webes betűtípusokat kódolja be a témájába, és vonja le őket

A betűtípusokat a webhelyen tárolja, és adja hozzá a témához

1. A WordPress betűtípusainak megváltoztatása a webes betűtípusok használatával

A webes betűtípusok használata egyszerűbb és gyorsabb módja a betűtípusok megváltoztatásának a WordPressben, mint a betűtípusfájlok letöltése és feltöltése.

Ezzel opcióval különböző betűtípusok elérése anélkül frissítheti őket, hogy minden változás bekövetkezne, és ez nem veszélyezteti a kiszolgáló helyét a tárhelyen. A betűtípusokat közvetlenül a szolgáltató szervereiről jelenítik meg egy plugin segítségével, vagy kód hozzáadásával a webhelyéhez.

In_content_1 all: [300x250] / dfp: [640x360]->

Győződjön meg arról, hogy a webhelyéhez választott webes betűtípusok megegyeznek-e a márkanévvel, könnyen olvashatóak-e a törzsszöveg számára, ismerősek-e a webhely látogatói, és milyen hangulatot és képet mutatnak Önnek

Webes betűtípusokat WordPress beépülő modul használatával vagy manuálisan is hozzáadhat néhány kódsor hozzáadásával a webhelyéhez. Fedezzük fel mindkét lehetőséget.

Webes betűtípusok hozzáadása a WordPress beépülő modul használatával

A választott webes betűtípustól függően használhat WordPress-t is beépülő modul a betűtípusok könyvtárának eléréséhez, és válassza ki a kívánt webhelyet. Ebben az útmutatóban a Google Betűtípusokat választottuk, és a Google Fonts tipográfia beépülő modult használtuk.

A kezdéshez jelentkezzen be a WordPress adminisztrációs irányítópultjára, és válassza a Bővítmények>Újhozzáadása.

Írja be a Google betűtípusok tipográfiájáta keresőmezőbe, és válassza az Telepítés most.

Válassza az Aktiválás.

lehetőséget

Ezután nyissa meg a Testreszabóta Megjelenés>Testreszabásmenüpont megnyitásával.

Válassza a Google Betűtípusokszakaszt.

Ezután kattintson a linkre a betűtípusok beállításainak megnyitásához és konfigurálásához az alábbiak szerint:

Az Alapbeállításokalatt állítsa be a test alapértelmezett betűtípusát szöveg, fejlécek és gombok.

A Speciális beállításokalatt állítsa be a webhely címét és leírását felirat, menü, fejlécek és tartalom, oldalsáv és lábléc.

A Betűtípus betöltéseszakaszban törölje a nem kívánt betűsúlyok jelölését s>8.

Ha vannak olyan betűtípusok a webhelyén, amelyek nem megfelelően jelennek meg vagy működnek, használja a Hibakeresésszakaszt a hibaelhárításhoz.

Ezeket a beállításokat a Testreszabóban tesztelheti, hogy megbizonyosodjon arról, hogy a kívánt módon működnek-e, majd válassza a lehetőséget. Közzététel.

Megjegyzés: Ha elfelejtette kiválasztani a közzétételt a Testreszabóban, elveszíti az összes elvégzett módosítást.

Webes betűtípusok hozzáadása a kód használatával

Ön telepítheti és használhatja a webes betűtípusokat, ha hozzáfér a témája kódjához. Ez egy manuális alternatíva egy extra plugin hozzáadásához, de nem bonyolult, ha gondosan követi a lépéseket.

Ugyanakkor különböző lépéseket kell megtenni, ha a WordPress témakönyvtárból származó témát használ testreszabott téma.

Ha egy témát a WordPress témakönyvtárából vásárolt, hozzon létre egy gyermek témát, majd adja meg neki a style.css és a functions.php fájlt. Könnyebb, ha testreszabott témával rendelkezik, mivel szerkesztheti a stíluslapot és a funkciófájlt a témájából.

Az induláshoz válasszon egy betűtípust a Google Fonts könyvtárból, és válassza a + (plusz)ikont, hogy hozzáadja a könyvtárához.

Ezután válassza ki az alul található fület, ahol megtalálja a webhelyéhez hozzáadandó kódot. Lépjen a Beágyazásfülre a Beágyazásrészhez. Megtalálja a Google Fonts által generált kódot, amely így néz ki:

Megjegyzés: A Work Sans-t választottuk ehhez az útmutatóhoz, így a betűtípus a név eltérhet a sajátjától, attól függően, hogy mit választott.

Másolja a kód ezen részét: https://fonts.googleapis.com/css2?family = Munka + Sans

Ez lehetővé teszi a stílus megjelenítését a Google Fonts szerverekről, hogy megakadályozza a harmadik féltől származó plug-inekkel való ütközést. Ez lehetővé teszi a gyermektéma egyszerűbb módosítását is. (Cserélje le a linket a Google Betűtípusoktól kapott linkre):

function wosib_add_google_fonts () {
wp_register_style ('googleFonts', ' https://fonts.googleapis.com/css?family=Work Sans ');

wp_enqueue_style (' googleFonts ');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

adjon hozzá egy új sort a függvényéhez, vagy ugyanahhoz a sorhoz, ha a jövőben további betűtípusokat szeretne hozzáadni, az alábbiak szerint:

function mybh_add_google_fonts () {
wp_register_style ('googleFonts', 'https://fonts.googleapis.com/css?family=Cambria|Work Sans');

wp_enqueue_style ('googleFonts') ;
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_font s ');

Ebben az esetben mind a Cambria, mind a Work Sans betűtípusokat felépítettük.

A következő lépés a betűkészletek hozzáadása a téma stíluslapjához tegye a betűtípust a webhelyén működőképessé.

Ehhez nyissa meg a téma style.css fájlt, és adja hozzá a kódot az egyes elemek stílusához a webes betűtípusokkal az alábbiak szerint:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif ;
}

Ebben az esetben a fő betűtípus Work Sans lesz, míg a fejléc elemek, mint például a h1, h2 és h3, Cambria.

Ha elkészült, mentse el a stíluslapot, és ellenőrizze, hogy a betűtípusai a megfelelő módon működnek-e. Ha nem, akkor ellenőrizze, hogy a betűtípusokat nem írják-e felül a stíluslapon, vagy törölje a böngésző gyorsítótárát, és próbálja újra.

Tartson helyén egy biztonsági másolatot, hogy a betűtípusok könnyen előállíthatók vagy hozzáférhetők, különösen azoknak a felhasználóknak, akiknek régi eszközei vannak, gyenge a kapcsolatuk, vagy ha a betűtípus-szolgáltatónak technikai problémái vannak. Ehhez lépjen a stíluslapra, és szerkessze a CSS-t az alábbiak szerint:

body {
font-family: 'Work Sans ', Arial, sans-serif;
}

h1, h2, h3 {
betűtípus -család: 'Cambria', Times New Roman, serif;
}

Ha minden rendben van, a webhely látogatói meglátják az alapértelmezett webes betűtípusokat, esetünkben Work Sans és Cambria. Ha problémák merülnek fel, a tartalék betűtípusokat látják, esetünkben például az Arial vagy a Times New Roman.

2. A betűtípusok megváltoztatása a WordPress alkalmazásban betűtípusok tárolásával

A betűtípusok saját szerveren történő tárolása optimalizálja a webes betűtípusok teljesítményét, de biztonságosabb módon ezzel is ahelyett, hogy harmadik féltől származó webhelyeket keresne be.

A Google Betűtípusok és más webes betűtípusok lehetővé teszik a betűkészletek letöltését helyben tárolt betűtípusokként való felhasználáshoz, de más betűtípusokat továbbra is letölthet a számítógépére, ha a licenc engedélyezi tegye meg.

A kezdéshez töltse le, csomagolja ki, töltse fel a betűtípusfájlt a webhelyére, majd kapcsolja össze a stíluslappal. Ebben az esetben nem kell betűtípusokat beillesztenie a functions.php fájlba, mint a webes betűtípusoknál. Mielőtt felhasználná őket a webhelyén, ellenőrizze, hogy a feltöltött fájlok .woff formátumban vannak-e.

Ezután lépjen a wp-content / themes / themenamea betűtípusfájl feltöltéséhez a témádba.

Nyissa meg a stíluslapot, és adja hozzá a következő kódot (ebben az esetben a Work Sans betűtípust használjuk, de ezt helyettesítheti saját betűtípusaival):

@ font-face {
font-family: 'Work Sans';
src: url („fontok / Work Sans-Medium.ttf”) formátum ('woff'); / * közepes * /
font-weight: normal;
font-style: normal;
}ős>

@ font-face {
font-family: 'Work Sans';
src: url ( „Fonts / Work Sans-Bold.ttf”) formátum („woff”); / * közepes * /
font-weight: bold;
font-style: normal;
}ős>

@ font-face {
font-family: 'Cambria';
src: url (“ fontok / Cambria.ttf ”) formátum („ woff ”); / * közepes * /
font-weight: normal;
font-style: normal;
}ős>

Megjegyzés: A @fontface használatával félkövér, dőlt és más betűtípus-variánsokat használhat, amelyek után megadhatja az egyes betűtípusok súlyát vagy stílusát.

Ezután adja hozzá az elemeket a következők szerint:

body {
font-family: 'Work Sans ', Arial, sans-serif;
src: url (“/ fonts / Work Sans-Medium.ttf”);
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

A WordPress tipográfia testreszabása

A WordPress betűtípusainak megváltoztatása remek ötlet a márkaépítés és a felhasználói élmény javításához. Ez nem egyszerű feladat, de jobban szabályozhatja a témáját.

Meg tudta-e testelni a webhely betűtípusait az ebben az útmutatóban található tippek alapján végrehajtott lépésekkel? Mondja el nekünk a megjegyzéseket.

Kapcsolódó hozzászólások: