Dodajanje pisav po meri v WordPress


Kako dodati pisave po meri v WordPress


Izbira prave pisave za vaše WordPress spletno mesto je osrednji del spletnega oblikovanja in trženja spletnih strani.

Kot barve, slike in drugi elementi, tipografija igra veliko vlogo v tem, kako obiskovalci dojemajo vašo spletno stran.

K sreči so pisave WordPress ena od mnogih stvari, ki jih lahko prosto prilagodite. Na spletnem mestu WordPress, ki ga želite, lahko uporabite skoraj katero koli brezplačno pisavo po meri.

Zajeli bomo vse, kar morate vedeti o pisavah WordPress:

  • A) Kako dodati pisave po meri v WordPress (ročno)
  • B) Kako dodati pisave po meri v WordPress (prek vtičnika)
  • Zakaj uporabljati pisave po meri na WordPressu
  • Kje najti pisave po meri
  • Zaključek

A) Kako ročno dodati pisave po meri v WordPress

Ko gre za ročno dodajanje pisav po meri v WordPress, imate tri glavne možnosti: HTML, JavaScript in CSS. Obstajajo prednosti in slabosti vsake metode in kateri je pravi za vas, je odvisno od vaše nastavitve. Brez skrbi, podrobno jih bomo pregledali.

1. Uporaba CSS in @import

Začnimo z najmanj priporočeno metodo. Če nameravate namestiti pisave po meri iz Googlovih pisav, ste morda opazili, da ima zavihek @import. Storitev vam daje del CSS kode.

zavihek uvoz v pisavah google

Lahko ga vzamete takšnega, kot je in ga vstavite v glavo (več o tem spodaj) ali pa ga kopirate brez >v oklepaju na začetku teme (ali še bolje, otroška tema) style.css mapa.

/ *
Ime teme: Dvajset sedemnajst otrok
URI teme: https://wordpress.org/themes/twentyseventeen/
Predloga: dvajsetnajst
Avtor: WordPress ekipa
URI avtorja: https://wordpress.org/
Različica: 1.0

* /

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


/ * dodatni CSS gre tu * /

S tem boste pisavo na vaše spletno mesto naložili s sloganom. Zdi se kot preprosta rešitev, kajne? Zakaj je potem najmanj priporočljivo?

Razlog so težave z uspešnostjo. Uporaba @import ni več priporočljiv način, saj brskalnikom preprečuje, da bi hkrati naložili več slogovnih listov. Posledica: počasnejši časi nalaganja strani. Če se le da, se drži stran.

2. Uporaba datoteke predloge WordPress

Drugi način za pridobitev pisav na vašem spletnem mestu je, da vzamete kodo knjižnic pisav in jih kopirate v svoje header.php datoteka predloge. Večina standardnih tem WordPress ga ima.

Pazite, da ga postavite nekje med in oklepaji. Tako se bo vaša pisava naložila vsakič, ko bo naložena stran.

vnesite kodo googlenih pisav v glavo wordpress

Če uporabljate nadrejeno temo, kopirajte matično temo header.php datoteke v imenik podrejene teme in tam vnesite spremembe.

Nekatere teme so opremljene z nastavitvami, ki vam omogočajo, da dodate kodo po meri v glavo in podnožje preko zaledja. To je tudi izvedljiva možnost.

3. Uporaba @ font-face

Do zdaj smo govorili le o tem, kako v WordPressu uporabiti pisave po meri, ki jih gostijo nekje drugje, in sicer strežnike Google in Adobe. Vendar pa je mogoče tudi gostovati pisave na svojem spletnem mestu in jih od tam ponujati brskalnikom obiskovalcev.

Če želite to narediti, najprej prenesite zadevno pisavo. Se spomnite gumba za prenos v Googlovih pisavah? Ta bo zdaj postal priročen. Tudi drugi ponudniki vam omogočajo nalaganje pisav.

Ko to storite, se prepričajte, da ga imate v obliki spletne pisave. To pomeni TTF, OTF ali WOFF. Več informacij boste našli tukaj. Če nimate prave oblike spletne pisave, lahko uporabite tudi ta storitev za pretvorbo vaše pisave v podprto.

Ko so datoteke s pisavami pripravljene, jih morate naložiti na spletno mesto WordPress prek FTP. Dobro mesto za njihovo shranjevanje je v podimeniku poimenovane otroške teme pisave (kreativno, vemo).

Po tem morate preko datoteke naložiti pisavo v svoj slog @ font-face. Takole je videti:

@ font-obraz {
družina pisav: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
teža pisave: običajna;
}

Ne pozabite zamenjati imena pisave in naslova za njeno lokacijo na svojem spletnem mestu. Po tem bo vaša nova pisava po meri uporabna.

Vendar tudi to ni najboljša rešitev, zlasti ne glede na uspešnost. Googlovi strežniki so verjetno hitrejši od vaših, zato je verjetno boljša rešitev nalaganje pisav po meri.

4. Iskalne pisave - "WordPress način"

Če resnično želite dodati WordPress pisave po meri na pravilen način, boste uporabili svoje function.php datoteko (znotraj imenika trenutno aktivne teme) in funkcijo  wp_enqueue_script ali wp_enqueue_style.

Z njihovo pomočjo lahko vzamemo odrezke kode, ki jih pošljejo spletna mesta. Vendar jih bomo namesto da bi jih kopirali v datoteko, dodali v glavo preko funkcije.

Kaj je razlika med wp_enqueue_script in wp_enqueue_style? Kot kažejo njihova imena, je eden za dodajanje skriptov, eden za slogovne liste. Katera je prava uporaba, je odvisno od tega, kako se vaše pisave po meri zagotavljajo iz njihovega vira.

Google Fontovi vam na primer dajejo pisave kot sloge. V tem primeru bi jih na svoje mesto WordPress dodali na naslednji način:

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

dodajanje ('wp_enqueue_scripts', 'add_google_fonts');

V nasprotju s tem pisave iz Adobe Edge Web Fonts prihajajo kot JavaScript. Zato bi koda, da bi jih dobili na svojem spletnem mestu, izgledala tako:

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

dodajanje ('wp_enqueue_scripts', 'add_adobe_fonts');

Ali ni bilo tako težko, kajne? Poleg tega dobite dodatne točke za to, da to storite na način WordPress.

5. Kličite pisave po meri v svojem listu sloga

Ko so pisave dodane na vaše spletno mesto, jih lahko uradno uporabite. Če želite to storiti, je vse, kar vam preostane, dodati deklaracijo za novo pisavo v svoj slog. Če želite na primer spremeniti pisavo oznak svojih naslovov, uporabite nekaj takega:

h1,
h2,
h3,
h4,
h5,
h6 {
družina pisav: 'Roboto';
}

Opomba: Bodite pozorni, kako storitev, ki jo uporabljate, določa izjavo CSS za vaše pisave. Na našem testnem mestu na videz ne bi mogli ustvariti spletnih krmilnikov Adobe Edge, ker v CSS-ju pokličejo Open Sans open-sans v nasprotju z 'Odpri brez' v Googlovih pisavah.

To je to. Zdaj veste, kako lahko dodate pisave po meri v WordPress ročno. Čestitajte, to je nekaj znanja naslednje stopnje! Očitno so enaka dejanja možna tudi prek vtičnikov. O tem bomo govorili v nadaljevanju.

B) Kako dodati pisave po meri v WordPress prek vtičnika

Sfera WordPress ne bi bila to, kar je, če ne bi bilo več rešitev vtičnikov za dodajanje pisav po meri na platformo. Preučili bomo, kako uporabljati Enostavne pisave Google, ki je eden najbolj priljubljenih vtičnikov na tem področju.

1. Namestite vtičnik

Prvi korak je namestitev vtičnika. Če želite to narediti, nadaljujte do Vtičniki> Namestite novo. Nato poiščite ime vtičnika. V rezultatih iskanja kliknite na Namestiti zdaj in aktivirajte vtičnik, ko je na vašem spletnem mestu.

2. Dodajte / spremenite pisave na svojem spletnem mestu

Ko je vtičnik aktiven, najdete novo točko menija z imenom Tipografija Spodaj Videz> Prilagodi.

Tipografski meni v orodju za prilagajanje besedil WordPress

Ko kliknete nanjo in izberete Privzeta tipografija, najdete seznam kontrol za spreminjanje pisave svojih odstavkov in naslovov.

enostavne nastavitve pisav google v orodju za prilagajanje besedila

Uporaba le-teh je res preprosta. Preprosto kliknite na spustni meni, kjer piše Uredi pisavo za del vašega spletnega mesta, za katerega ga želite spremeniti. To vam omogoča dostop do tega menija:

enostavne google pisave spremenijo pisavo

Tu je najpomembnejši del tisti pod Družina pisav. Tu lahko izberete novo vrsto pisave iz celotne knjižnice Google Font (uporabite Skript / podvrsta če želite omejiti izbiro pisave na tiste s posebnimi znaki).

Pisave so razvrščene po standardnih, serif, sans-serif, prikaznih, rokopisnih in enoprostornih pisavah. Vendar jih lahko preprosto poiščete tudi po imenu.

Ko kliknete pisavo, si lahko na desni strani ogledate spremembe v realnem času.

spremenjena pisava po meri v lahkih Googlovih pisavah

3. Konfigurirajte pisavo

Ko izberete pisavo, obstaja veliko možnosti za nadaljnjo prilagoditev tipografije.

Najprej lahko spremenite težo / slog pisave pod istoimenskim menijem. To nadzoruje debelino črk.

Poleg tega pod Okras besedila, lahko dodate podčrtano, prečrtano in podčrtano. Preoblikovanje besedila omogoča tudi, da ga nastavite na vse velike črke, vse male črke ali velike črke. Pod Videz na vrhu zavihka lahko nadzorujete tudi barvo pisave, barvo ozadja, velikost pisave, višino črte in razmik črk.

nastavitve videza v lahkih Googlovih pisavah

Končno, Pozicioniranje omogoča spreminjanje drugih nastavitev, kot so rob, oblazinjenje, obroba, polmer obroba in prikaz.

nastavitve pozicioniranja v enostavnih pisavah google

Skratka, morali bi biti sposobni v celoti prilagoditi pisave na svojem spletnem mestu. Lahko, kajne? Ne pozabi udariti Shrani in objavi na vrhu, ko ste zadovoljni s svojimi spremembami.

Ne deluje, kaj naj naredim?

Včasih ne morete spremeniti nekaterih pisav na svojem spletnem mestu. To se ponavadi zgodi, če tema, ki jo uporabljate, vsebuje nestandardne razrede CSS in izbirnike, s katerimi jih lahko oblikujete.

Na primer, v temi dvajset šestnajst naslovi objav na spletnem dnevniku niso samo definirani kot H1, ampak imajo tudi razred CSS, imenovan .vnos-naslov. Zaradi tega jih vtičnik ne more spremeniti.

Če želite odpraviti to težavo, morate ustvariti t.i. nadzor pisave Spodaj Nastavitve> Google Pisave.

dodajte nadzor pisave v enostavnih pisavah google

Izbirnike CSS lahko po potrebi povežete z novim nadzorom in prisilno preglasitvijo. Ko to storite, je nov nadzor pisave na voljo kot dodatna možnost v programu WordPress Customizer pod Tema Tipografija. Enostaven grah.

Druge pisave po meri WordPress Vtičniki

Na voljo so tudi drugi vtičniki WordPress za dodajanje pisav po meri:

  • Uporabite katero koli pisavo - Pomaga vam uporabljati naložene pisave brez vsakega CSS-ja. Na svojem strežniku je pisava in ponuja tudi orodja za pretvorbo oblik pisav.
  • Natipkajte pisave za WordPress - Uporabljajte pisave od Adobe's Typekit storitev (za katero se morate prijaviti). Omogoča vam, da vstavite kode in CSS po meri neposredno v vtičnik.
  • TK Google Pisave - Nadomestna rešitev za vdelavo Googlovih pisav, ki izkušnjo Googlovih pisav precej preseli v zaledje WordPressa. Preizkusite pisave s predogledom in besedilom po meri, nato pa ga spremenite v programu WordPress Customizer.

Zakaj na svojem spletnem mestu WordPress uporabljati pisave po meri?

Tipografija je sama po sebi znanost in tukaj vam ne bomo mogli dati celotnega tečaja o uporabi pisav v spletnem oblikovanju. Navsezadnje ne gre samo za pisavo, temveč tudi za njeno velikost, nagib, debelino in številne druge stvari. Vendar pa mi lahko zaznajte, zakaj je uporaba pisav po meri na spletnem mestu WordPress dobra ideja.

1. Tipografija je del prvega vtisa

Najprej pisava, ki jo uporabljate, močno vpliva na to, kako dojemate vaše spletno mesto. Ali je vaše spletno mesto zabavno in igrivo? Ste poslovni strokovnjak? Obiskovalci to odločijo v enem pogledu in vaša tipografija igra veliko vlogo pri njihovi percepciji.

2. Pisave imajo veliko večji vpliv, kot si mislite

To lahko vpliva na vašo sposobnost učenja, pomnjenja besedil in celo vpliva na vaše razpoloženje.

Na primer, v enem raziskave, opazili smo, da če želite povečati čas branja besedila, morate uporabiti serifno pisavo. Če pa želite v kratkem času prebrati več, preklopite na pisavo sans-serif.

Druga študija je ljudem pokazala iste napotke za vadbo v različnih tipih. Nato so udeležence prosili, da ocenijo, koliko časa bo trajalo, da izpolnijo navedena navodila. Fascinantno so tisti, ki imajo bolj zapleteno pisavo, ugibali, da jim bo to trajalo dlje kot skupina s preprostejšo pisavo. Posledično so manj verjetno sledili vadbeni rutini.

Kje najti pisave po meri

1. S pomočjo pisave Google poiščite tipografijo po meri

Prva storitev, ki si jo bomo ogledali, je Google Pisave. Kot pove že ime, je Googlova storitev, ki ponuja 800+ različnih pisav. Prost za uporabo. Za vsakogar.

Tukaj je opisano, kako ga uporabiti:

2. Poiščite pravo pisavo

Ko prvič odprete stran Google Fonts (samo vtipkajte to v Google Search), boste videli to:

kako dodati pisave po meri v domačo stran pisav google fontov

Uporabniški vmesnik je narejen tako, da vam pomaga najti pravo pisavo za svoj namen. Če že imate v mislih pisavo, lahko preprosto vtipkate njeno ime v iskalno polje na desni strani.

Če ni, lahko filtre filtrirate na več različnih načinov, na primer po kategorijah:

  • Šerif - Pomeni pisave z vrtoglavo črto na koncu, kot Times New Roman.
  • Sans-Serif - Enostavne pisave brez tiksov, kot je Helvetica. Primer tega so pisave na tem spletnem mestu.
  • Zaslon - Tipkovnice, ki jih je mogoče uporabiti v večjih velikostih, kot so naslovi.
  • Rokopis - Ali želite, da je vaša tipografija videti tako, kot da je bila napisana ročno? Potem je to vaša nastavitev.
  • Monospace - Tipografija, pri kateri vsi znaki zasedajo isti prostor, Všečkaj to.

Drugi filtri vključujejo:

  • Razvrščanje - Razvrstite pisave po trendnih, priljubljenih, dodanih datumih ali abecedno.
  • Jeziki -Omejite svojo izbiro pisave na jezike, ki niso napisani v latinici, kot so arabščina, tajščina ali vietnamščina.
  • Številni slogi -Izberite, koliko razpoložljivih slogov potrebujete, kar pomeni, ali je pisava na voljo v različnih debelinah, poševnem tisku, krepkem tisku in več.
  • Debelina - Izberite želeno debelino pisave.
  • Nagib - Enako kot debelina, vendar za nagib. Sega od naravnega do skoraj vodoravnega.
  • Premer - Filtrirajte pisave po širini črk in razmiku.

Ko uporabite katere koli filtre, se rezultati iskanja prilagodijo v realnem času. Na levi strani boste videli razpoložljive pisave v svoji kategoriji in primere stavkov.

Ko premaknete kazalec miške nad pisavo, lahko spustni meni na vrhu prikažete, da Google Fontovi prikažejo primer odstavek, celotno abecedo ali številke. Lahko tudi preprosto kliknete na stavčno polje in napišete, kar želite.

urejanje vzorčnega besedila v Googlovih pisavah

Poleg tega obstajajo možnosti za spremembo sloga in velikosti pisave. Ko spremenite, dobite tudi možnost, da jih uporabite za vse svoje rezultate iskanja. Na koncu si oglejte stran s podrobnostmi o pisavi s klikom Glej primerek.

stran s podrobnostmi o pisavah v Googlovih pisavah

3. Dodajte pisave v svojo zbirko

Če vam je določena pisava všeč, jo lahko v zgornjem desnem kotu uporabite rdeči znak plus in jo dodate v svojo zbirko. S tem boste odprli meni na dnu, kjer boste videli vse izbrane pisave.

pisave, izbrane v Googlovih pisavah

Upoštevajte, da lahko dodate več družin pisav. To je smiselno, na primer, ko izberete enega za kopijo telesa, drugega pa za naslove.

4. Prilagodite nastavitve pisave

Ko ste zadovoljni s svojo zbirko, kliknite spodnji meni. S tem se odpre ta zaslon:

nastavitve pisave v Googlovih pisavah

Kot lahko vidite, lahko na svojem spletnem mestu najdete nekaj kosov kode za vdelavo in uporabo pisav. To bo postalo pomembno kasneje. Zaenkrat kliknite na zavihek, ki piše Prilagoditi. S tem boste prišli do tega menija:

prilagodite pisave v Googlovih pisavah

Tu lahko izberete sloge zadevnih pisav. To je pomembno, če želite uporabiti pisave različnih velikosti, kar je pogosto.

Vendar bodite previdni: več stilov, ki jih mora vaše spletno mesto nalagati, bolj se bo upočasnilo (Google Fontovi vam v zgornjem desnem kotu celo prikazujejo hitrost nalaganja trenutne zbirke). Torej, razmislite, kaj resnično potrebujete, in izberite le to. Mimogrede, obstaja več načinov, kako lahko pospešite WordPress.

Če potrebujete kateri koli drug jezik razen standardne latinice, ga izberite tudi na dnu.

v jezikih pisave izberite jezike pisav

Poleg tega morate vedeti dve ikoni puščic na vrhu.

gumb za prenos in skupno rabo v Googlovih pisavah

Na levi strani si lahko ogledate in delite svojo zbirko pisav. Ko se odločite za to, odpre razširjeno stran, kamor lahko vstavite vzorčno besedilo in ga hkrati vidite v vseh pisavah. To stran je dobro tudi deliti z ljudmi.

Pomembnejši je gumb za prenos poleg njega. S klikom nanj lahko prenesete datoteke s pisavami in jih uporabite na namiznem računalniku (na primer v Photoshopu). Uporaba Skyfonts da jih sproti dopolnjujejo.

Kasneje vam bomo pokazali tudi način prenosa teh datotek na vaš strežnik in krstne strežnike neposredno na vaše spletno mesto. Upoštevajte to za prihodnost. Za zdaj vam bomo pokazali drugo, podobno knjižnico pisav.

Dodatni vir za pisave po meri

  • 15+ spletnih varnih pisav, ki jih priporočamo

Z zgoraj navedenim bi morali najti nekaj zase. Še zadnji nasvet - če ne znate pravilno kombinirati pisav, uporabite Paro pisave kjer so oblikovalci naredili noge za vas.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me