Shtimi i shkronjave të personalizuara në WordPress

/ *
Emri i temës: Njëzet e Shtatëmbëdhjetë Fëmijë
Tema URI: https://wordpress.org/themes/twentyseventeen/
Model: njëzet e njëmbëdhjetë
Autori: ekipi i WordPress
Autori URI: https://wordpress.org/
Versioni: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS shtesë shkon këtu * /

Duke vepruar kështu do të ngarkoni fontin në faqen tuaj nga fleta e stilit. Duket si një zgjidhje e thjeshtë, apo jo? Pse atëherë rekomandohet më pak?

Arsyeja është çështje e performancës. përdorim @ import nuk është më mënyra e rekomanduar për të shkuar sepse parandalon që shfletuesit të shkarkojnë disa fletë stilesh menjëherë. Pasoja: koha më e ngadaltë e ngarkimit të faqeve. Qëndroni larg prej tij nëse mundeni.

2. Duke përdorur një skedar shablloni WordPress

Një metodë e dytë për të marrë shkronjat në faqen tuaj është të merrni kodin e siguruar nga bibliotekat e fonteve dhe t'i kopjoni ato në header.php skedar shablloni. Shumica e temave standarde të WordPress i kanë.

Sigurohuni që ta vendosni diku midis dhe kllapa. Në atë mënyrë, fonti juaj do të ngarkojë sa herë që është ngarkuar një faqe.

Nëse jeni duke përdorur një temë për fëmijë, sigurohuni që të kopjoni temën e prindërve header.php regjistrohuni në drejtorinë e temave të fëmijëve dhe bëni ndryshimet atje.

Disa tema vijnë me cilësime që ju lejojnë të shtoni kodin personal në header dhe footer tuaj përmes backend. Ky është gjithashtu një mundësi e zbatueshme.

3. duke përdorur @ Font-face

Deri më tani, kemi folur vetëm për mënyrën e përdorimit të shkronjave të personalizuara në WordPress që janë pritur diku tjetër, gjegjësisht serverët e Google dhe Adobe. Sidoqoftë, është gjithashtu e mundur të presni fonte në faqen tuaj dhe t'i ofroni ato në shfletuesit e vizitorëve nga atje.

Për ta bërë këtë, së pari duhet të shkarkoni fontin në fjalë. Mos harroni butonin e shkarkimit në Fonts Google? Ai do të bëhet i dobishëm tani. Ofruesit e tjerë gjithashtu ju lejojnë të shkarkoni fonte.

Kur e bëni këtë, sigurohuni që ta merrni në një format të shkronjave në internet. Kjo do të thotë TTF, OTF ose WOFF. Do të gjeni më shumë informacion mbi të këtu. Nëse nuk keni formatin e duhur të shkronjave në internet, mund të përdorni gjithashtu ky shërbim për të kthyer fontin tuaj në një të mbështetur.

Pasi të keni gati skedarët tuaj të shkronjave, duhet t'i ngarkoni ato në faqen tuaj të WordPress përmes FTP. Një vend i mirë për t'i ruajtur ata është në një nëndrejtori me temën e fëmijës tuaj të quajtur fonts (krijuese, ne e dimë).

Pas kësaj, ju duhet të ngarkoni fontin në fletën tuaj të stilit përmes @ Font-face. Ja si duket:

@ font-face
font-familje: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
pesha e shkronjave: normale;
}

Mos harroni të zëvendësoni emrin e fontit dhe adresën për vendndodhjen e tij në faqen tuaj. Pas kësaj, fonti juaj i ri me porosi do të jetë i përdorshëm.

Sidoqoftë, kjo gjithashtu nuk është zgjidhja më e mirë, veçanërisht e mençur nga performanca. Serverët e Google janë me siguri më të shpejtë se sa tuajat dhe për këtë arsye ngarkimi i shkronjave të personalizuara nga atje ka të ngjarë zgjidhja më e mirë.

4. Fonts Enquueing - "Mënyra WordPress"

Nëse vërtet dëshironi të shtoni shkronja të personalizuara në WordPress në mënyrën e duhur, do të përdorni functions.php skedar (brenda drejtorisë së temës tuaj aktualisht aktive) dhe funksionit  wp_enqueue_script ose wp_enqueue_style.

Me ndihmën e tyre, ne mund të marrim copat e kodit të dhëna nga faqet e fontit. Sidoqoftë, në vend që t'i kopjojmë ato në një skedar, ne do t'i shtojmë ato në kokë përmes një funksioni.

Cili është ndryshimi midis wp_enqueue_script dhe wp_enqueue_style? Siç sugjerojnë emrat e tyre, një është për shtimin e skenareve, një për fletët e stilit. Cila është e drejta për t'u përdorur varet nga mënyra se si fontet tuaja personale janë siguruar nga burimi i tyre.

Për shembull, Google Fonts ju jep shkronja si fletë stili. Në atë rast, ju do t'i shtoni ato në faqen tuaj të WordPress në këtë mënyrë:

funksioni add_google_fonts ()
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Në kontrast me atë, shkronjat nga Adobe Edge Web Fonts vijnë si JavaScript. Prandaj, për t'i pasuruar ato në faqen tuaj, kodi do të duket kështu:

funksioni add_adobe_fonts ()
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Nuk ishte aq e vështirë, ishte? Plus, ju merrni pikë shtesë për ta bërë atë në mënyrën WordPress.

5. Thirrni fontet e personalizuara në fletën tuaj të stilit

Tani që fontet janë shtuar në faqen tuaj, ju mund t'i përdorni zyrtarisht ato. Për ta bërë këtë, gjithçka që mbetet është të shtoni një deklaratë për fontin e ri në fletën tuaj të stilit. Për shembull, për të ndryshuar fontin për etiketat tuaja të titullit, do të përdorni diçka të tillë:

H1,
h2,
h3,
H4,
H5,
h6 {
font-familje: 'Roboto';
}

Shënim: Kushtojini vëmendje mënyrës sesi shërbimi që po përdorni specifikon deklaratën CSS për fontet tuaja. Në faqen tonë të testimit, ne duket se nuk mund t'i bëjmë të punojnë Adobe Edge Fonts Web sepse ata i quajnë Open Sans në CSS me hapur-sans në krahasim me 'Sans Open' në Fonts Google.

Kjo eshte. Tani dini se si të shtoni me dorë shkronjat e personalizuara në WordPress. Përgëzoni veten tuaj, kjo është disa njohuri të nivelit të ardhshëm! Natyrisht, të njëjtat veprime janë të mundshme përmes shtojcave. Kjo është ajo për të cilën do të flasim tjetër.

B) Si të shtoni fontet e personalizuara në WordPress përmes Plugin

Sfera e WordPress nuk do të ishte ajo që do të ishte nëse nuk do të kishte disa zgjidhje shtesë për shtimin e shkronjave të personalizuara në platformë. Ne do të shkojmë sesi të përdorim Fonts Easy Google, që është një nga shtojcat më të njohura në këtë fushë.

1. Instaloni plugin

Hapi i parë është instalimi i shtojcës. Për ta bërë atë, drejtohuni tek Plugins> Instaloni të ri. Pastaj, kërkoni emrin e plugin-it. Në rezultatet e kërkimit, klikoni mbi Instaloje tani dhe aktivizoni shtojcën pasi të jetë në faqen tuaj.

2. Shtoni / Ndryshoni Shkronjat në Faqen tuaj

Kur shtojca është aktive, ju gjeni një artikull të ri të menusë të quajtur tipografi nën Pamja> Rregulloje.

Kur klikoni mbi të dhe zgjidhni Tipografia e paracaktuar, ju gjeni një listë të kontrolleve për të ndryshuar fontin e paragrafëve dhe titujve tuaj.

Përdorimi i tyre është me të vërtetë i thjeshtë. Thjesht klikoni në menunë drop-down ku thotë Redaktoni fontin për pjesën e faqes tuaj për të cilën dëshironi ta ndryshoni. Kjo ju lejon qasje në këtë menu:

Këtu, pjesa më e rëndësishme është ajo nën Familja e shkronjave. Këtu, ju mund të zgjidhni një lloj të ri fonti nga e gjithë biblioteka e Google Font (përdorni Script / Mesin për të kufizuar zgjedhjet e shkronjave tek ata me karaktere të veçanta).

Shkronjat janë të porositura nga shkronja standarde, serif, sans-serif, display, shkrim dore dhe monospace. Sidoqoftë, thjesht mund t'i kërkoni në emër.

Kur klikoni në një font, mund të shikoni paraprakisht ndryshimet në kohë reale në të djathtë.

3. Konfiguroni fontin

Pasi të keni zgjedhur një font, ka shumë mundësi për të rregulluar më tej tipografinë tuaj.

Para së gjithash, ju mund të ndryshoni peshën e shkronjave / stilin nën menunë me të njëjtin emër. Kjo kontrollon trashësinë e shkronjave.

Për më tepër, nën Dekorimi i tekstit, ju jeni në gjendje të shtoni nënvizim, përparim dhe mbivendosje. Transformimi i tekstit gjithashtu ju lejon ta vendosni atë në të gjitha kapakët, të gjitha të vogla ose të kapitalizoni çdo shkronjë të parë. Nën shfaqje në majë, ju gjithashtu mund të kontrolloni ngjyrën e fontit, ngjyrën e sfondit, madhësinë e shkronjave, lartësinë e linjës dhe ndarjen e shkronjave.

më në fund, Positioning ju lejon të ndryshoni cilësimet e tjera siç janë diferenca, mbushja, kufiri, rrezja kufitare dhe ekrani.

Me pak fjalë, ju duhet të jeni në gjendje të rregulloni plotësisht shkronjat në faqen tuaj sipas dëshirës tuaj. Lehtë, nuk është ashtu? Mos harroni të godisni Ruani dhe publikoni në krye kur jeni të kënaqur me ndryshimet tuaja.

Nuk po funksionon, çfarë të bëj?

Ndonjëherë nuk jeni në gjendje të ndryshoni disa prej shkronjave në faqen tuaj. Kjo zakonisht ndodh kur tema që po përdorni vjen me klasa jo standarde CSS dhe zgjedhës për t'i stiluar ato.

Për shembull, në temën Njëzet Gjashtëmbëdhjetë, titujt e postimeve në blog nuk përcaktohen vetëm si H1, por gjithashtu kanë një klasë CSS të quajtur .hyrje-title. Për këtë arsye, shtojca nuk është në gjendje t'i ndryshojë ato.

Për të zgjidhur këtë problem, duhet të krijoni një të ashtuquajtur kontrolli i fontit nën Cilësimet> Fonts Google.

Ju mund t'i shoqëroni zgjedhësit CSS me kontroll të ri dhe tejkalim të forcës kur është e nevojshme. Pasi ta keni bërë këtë, kontrolli i ri i shkronjave është i disponueshëm si një opsion shtesë në WordPress Customizer nën Tipografia e temave. Lëvore e lehtë.

Shkronjat e tjera me porosi Plugins WordPress

Ka edhe shtesa të tjera WordPress të disponueshme për të shtuar shkronja të personalizuara:

• Përdorni çdo font - Ju ndihmon të përdorni fontet e ngarkuar pa asnjë CSS. Ajo strehon shkronja në serverin tuaj dhe gjithashtu ofron mjete konvertimi për formatet e shkronjave.
• Fonts typekit për WordPress - Përdorni shkronja nga Adobe Typekit shërbim (për të cilin duhet të regjistroheni). Kjo ju lejon të futni kodet e ngulitura dhe CSS të personalizuara drejtpërdrejt në shtojcë.
• Fonts Google TK - Një zgjidhje alternative për të ngulitur fontet e Google që zhvendos shumë përvojën e Google Fonts në sfondin e WordPress. Provoni shkronjat me një pamje paraprake dhe tekst me porosi, dhe më pas ndryshojini brenda Përshtatësit të WordPress.

Pse të përdorni fontet e personalizuara në Uebfaqen tuaj në WordPress?

Tipografia është një shkencë në vetvete dhe ne nuk do të mund t'ju japim një kurs të plotë për përdorimin e shkronjave në hartimin e uebit këtu. Në fund të fundit, nuk ka të bëjë vetëm me fontin, por edhe përmasat e tij, pjerrësinë, trashësinë dhe shumë gjëra të tjera. Sidoqoftë, ne mund mbuloni pse përdorimi i shkronjave të personalizuara në faqen tuaj të WordPress është një ide e mirë.

1. Tipografia është pjesë e përshtypjes së parë

Para së gjithash, fonti që përdorni ndikon shumë në mënyrën se si perceptohet faqja juaj. A është faqja juaj argëtuese dhe e gjallë? A jeni profesionist i biznesit? Vizitorët vendosin këtë brenda një shikimi dhe tipografia juaj luan një rol të madh në perceptimin e tyre.

2. Shkronjat kanë shumë më tepër ndikim se sa mendoni

Mund të ndikojë në aftësinë tuaj për të mësuar, memorizuar tekste dhe madje të ndikojë në gjendjen shpirtërore.

Për shembull, në një hulumtim, u vu re se nëse doni të rritni kohën e kaluar për të lexuar ndonjë tekst, duhet të përdorni një font serif. Sidoqoftë, nëse doni të lexoni më shumë brenda një kohe të shkurtër, duhet të kaloni në një font sans-serif.

Një studim tjetër u tregoi njerëzve të njëjtat udhëzime stërvitje në lloje të ndryshme. Më pas ata u kërkuan pjesëmarrësve të vlerësojnë se sa kohë do t'u duhej atyre për të përfunduar udhëzimet e përmendura. Në mënyrë magjepsëse, ata me font më komplekse menduan se do u duheshin më shumë sesa grupi me font më të thjeshtë. Si pasojë, ata kishin më pak të ngjarë të ndiqnin rutinën e stërvitjes.

Ku të gjeni fontet e personalizuara

1. Përdorni shkronjat Google për të gjetur Tipografinë me porosi

Shërbimi i parë që do të shikojmë është Fonts Google. Siç sugjeron emri, është një shërbim nga Google që ofron 800+ fonte të ndryshme. Falas për t’u përdorur. Për të gjithë.

Ja si ta përdorni:

2. Gjeni fontin e duhur

Kur shkoni së pari në faqen e Fonts Google (thjesht shkruani atë në Kërkimin Google), kjo është ajo që do të shihni:

Ndërfaqja e përdoruesit është bërë për t'ju ndihmuar të gjeni fontin e duhur për qëllimin tuaj. Nëse tashmë keni një mendje në mendje, thjesht mund të shkruani emrin e tij në fushën e kërkimit në anën e djathtë.

Nëse jo, ju mund të filtroni shkronjat në shumë mënyra të ndryshme, për shembull, sipas kategorisë:

• shrift me dhëmbëza - Kuptimi i shkronjave me linja të buta në fund, si Times New Roman.
• Sans-Serif - Shkronja të thjeshta pa shigjeta, si Helvetica. Shkronjat e përdorura në këtë faqe interneti janë një shembull i kësaj.
• ekran - Fytyrat që mund të përdoren në madhësi më të mëdha si titujt.
• shkrim dore - Dëshiron që tipografia jote të duket sikur është shkruar me dorë? Atëherë kjo është vendosja juaj.
• Monospace - Tipografia ku të gjithë personazhet zënë të njëjtën hapësirë, si kjo.

Filtrat e tjerë përfshijnë:

• klasifikim - Renditni shkronjat pas trending, popullore, data e shtuar ose alfabeti.
• Gjuhë -Kufizoni zgjedhjen tuaj të shkronjave në gjuhët që nuk janë shkruar në alfabetin latin, si arabisht, tajlandisht ose vietnamezisht.
• Një numër stilesh -Zgjidhni sa stile të disponueshme ju nevojiten, që do të thotë nëse një font është i disponueshëm në trashësi të ndryshme, italik, i guximshëm dhe më shumë.
• Trashësia - Zgjidhni trashësinë e dëshiruar të fontit tuaj.
• tatëpjetë - Njësoj si trashësia, por për pjerrësinë. Ai shkon nga drejt në gati horizontale.
• gjerësi - Filtrat e shkronjave sipas gjerësisë së shkronjave dhe hapësirave të tyre.

Kur aplikoni ndonjë filtër, rezultatet e kërkimit tuaj përshtaten në kohë reale. Në të majtë, do të shihni shkronjat e disponueshme në fjalitë tuaja në kategorinë dhe shembullin.

Kur rri pezull mbi një font, ju mund të përdorni menutë drop-down në krye për t'i dhënë Google Fonts një paragraf shembull, të gjithë alfabetin ose numrat. Ju gjithashtu thjesht mund të klikoni në fushën e fjalive dhe të shkruani gjithçka që dëshironi.

Përveç kësaj, ka mundësi për të ndryshuar stilin dhe madhësinë e fontit. Kur bëni ndryshime, ju merrni gjithashtu mundësinë që t'i zbatoni ato në të gjitha rezultatet e kërkimit. Më në fund, shikoni në faqen e detajeve të fontit duke klikuar Shih ekzemplarin.

3. Shtoni shkronja në Koleksionin tuaj

Nëse ju pëlqen një font i veçantë, mund të përdorni shenjën e kuqe plus në këndin e sipërm të djathtë për ta shtuar atë në koleksionin tuaj. Duke vepruar kështu do të hapni një menu në fund, ku shihni të gjitha shkronjat tuaja të zgjedhura.

Vini re se mund të shtoni më shumë se një familje font. Kjo ka kuptim, për shembull, kur jeni duke zgjedhur një për kopjen e trupit tuaj dhe një tjetër për titujt.

4. Rregulloni Cilësimet e Shkronjave

Pasi të jeni të kënaqur me koleksionin tuaj, klikoni në menunë e poshtme. Duke vepruar kështu do të hapet ky ekran:

Siç mund ta shihni, mund të gjeni disa pjesë kodesh për të futur dhe përdorur fonte në faqen tuaj. Kjo do të bëhet e rëndësishme më vonë. Tani për tani, klikoni në skedën që thotë Customize. Duke bërë kështu ju çon në këtë menu:

Këtu, ju jeni në gjendje të zgjidhni stilet e shkronjave në fjalë. Kjo është e rëndësishme nëse dëshironi të përdorni shkronja në madhësi të ndryshme, gjë që ndodh shpesh.

Sidoqoftë, kini kujdes: sa më shumë stile të ketë faqja juaj, aq më shumë do të ngadalësohet (Google Fonts madje ju jep një tregues të shpejtësisë së ngarkimit për koleksionin tuaj aktual në të djathtën e lartë). Prandaj, mendoni për ato që ju nevojiten vërtet dhe zgjidhni vetëm atë. Nga rruga, ka më shumë mënyra se si të shpejtoni WordPress.

Në rast se keni nevojë për ndonjë gjuhë tjetër përveç alfabetit standard Latin, sigurohuni që ta zgjidhni atë edhe në fund.

Përveç kësaj, gjithçka që duhet të dini janë dy ikonat e shigjetave në krye.

Një nga e majta ju lejon të shikoni paraprakisht dhe të ndani koleksionin tuaj të shkronjave. Kur vendosni ta bëni një gjë të tillë, ajo hap një faqe të zgjeruar ku mund të futni një kampion model dhe ta shihni atë në të gjitha shkronjat menjëherë. Kjo faqe është gjithashtu e mirë për t'u ndarë me njerëzit.

Më e rëndësishme është butoni i shkarkimit pranë tij. Duke klikuar atë mund të shkarkoni skedarët e shkronjave për t'i përdorur ato në kompjuterin tuaj desktop (për shembull, në Photoshop). përdorim Skyfonts për t'i mbajtur ato deri më sot.

Më vonë, ne do t'ju tregojmë gjithashtu një mënyrë për t'i ngarkuar këto skedarë në serverin tuaj dhe fontet pritëse direkt në faqen tuaj. Mbajeni këtë në mendje për të ardhmen. Tani për tani, ne do t'ju tregojmë një bibliotekë të dytë, të ngjashme me font.

Burim shtesë për fontet e personalizuara

• 15+ font të sigurta që ju rekomandojmë

Me sa më sipër, duhet të jeni në gjendje të gjeni diçka për veten tuaj. Një këshillë e fundit - nëse nuk dini se si të kombinoni siç duhet fontet, përdorni Font Pair ku dizajnerët kanë bërë punimet e legut për ju.

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.

follow me