Jak přidat vlastní písma do redakčního sytému WordPress

Pokud máte blog, určitě váš již napadla myšlenka nepsat články klasickým standardním písmem, ale svým vlastním. Doba fontu Arial nebo Times New Roman je už dávno pryč. S příchodem Google Fonts se doba změnila. Dnes máte k dispozici stovky bezplatných fontů. Správně zvolený font je základ každého dobrého webu. Zdobí web, lépe se čte a je zajímavým doplňkem pro oko čtenáře. Typografie je mocný nástroj.

S výběrem fontu to ovšem nesmíte v žádném případě přehánět. Nikdy nevkládejte do svého blogu ty příšerné, ručně kreslené fonty nebo ty, které nepodporují diakritiku, tím své čtenáře totiž moc neoslníte.

WordPress v základu neumožňuje kontrolu nad fontem. Neexistuje žádné výchozí nastavení. Pokud použijete koupenou šablonu, tak některé v nastavení mají možnost vybrat nebo vložit vlastní font. Webové prohlížeče totiž obsahují sadu výchozích písmen. To znamená, že pokud písmo není specifikováno v CSS, použije se výchozí písmo.

Nyní se tedy dostáváme k hlavní myšlence tohoto článku. Kde fonty získat a jak vlastní fonty do WordPressu nainstalovat?

Kde fonty pro komerční použití získat?

Za nás je nejlepší web pro výběr fontů Google Fonts. Má velkou databázi fontů pro komerční využití a pomůže vám i s tím, jak font vložit do kódu webových stránek.

Jak vlastní písma do WordPressu nainstalovat?

Plugin:

Existují dva způsoby a to ručně nebo přes plugin. My volíme první způsob, ale možnost přes plugin je nejjednodušší. Z WordPress repozitáře máte na výběr desítky pluginů, které vám umožní nainstalovat si vlastní písma. Nevýhodou pluginů je to, že nemáte plnou kontrolu nad fonty. Na druhou stranu, pokud neplánujete nějaké velké změny, tak vám tohle bude stačit.

Ručně:

Ruční způsob instalace vlastních fontů do svého webu považujeme za nejlepší řešení. My stavíme weby obvykle na míru a proto nemůžeme instalovat do webu plugin na fonty. Pokud lze udělat něco bez pluginu, použijeme tu druhou možnost.

Na ruční vložení existuje hned několik možností. Písma můžete načíst pomocí CSS, function.php nebo Javasriptu.

1. Načtení písma pomocí CSS

Nejlepší způsob, jak přidat vlastní písma Google do webových stránek je použít standardní metodu. Jednoduše zkopírujete odkaz svého písma, který vám vygeneruje web Google Fonts a vložíte je do souboru motivu style.css.

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;0,900;1,500;1,700;1,900&display=swap');
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

Pokud chcete využít metodu optimalizovanou na výkon vašeho webu, můžete upravit soubor header.php motivu a vložit následující kód.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

2. Načtení písma pomocí function.php

Dalším způsobem, jak přidat vlastní písma Google Fonts do webových stránek je použít soubor function.php a vložit tento kód.

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

3. Načtení písma pomocí Javascriptu

Fonty Google lze také načíst pomocí knihovny Web Font Loader Library. Budete muset zkopírovat kód z Google Fonts a ten pak vložit do souboru header.php za značku <head>.

Nejdříve musíte načíst skript Web Font Loader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

Poté už stačí jen vložit script pro načtení písma.

<script>
	WebFont.load({
		google: {
			families: ['Roboto:300,400,700']
		}
	});
</script>

Posledním krokem je pak v CSS jednotlivé fonty přiřadit k nadpisům, textům, tlačítkům apod. To může vypadat třeba takto:

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

h1,
h2,
h3,
h4 {
   font-family: 'Open Sans', sans-erif;
}

button,
input {
   font-family: 'Space Mono', monospace;
}

Spustili jsme nové webové stránky, magazín zabijačky.cz

Během uplynulých měsíců jsme pracovali na vývoji nových webových stránek pro Zabijačky.cz, který je postaven na redakčním systému WordPress. Původní web fungoval pomocí online nástroje Webnode. Toto řešení klientovi již nevyhovovalo.

Web Zabijačky.cz je obsáhlý, kde se dozvíte spousty zajímavých informací o zabijačkách. Jsou zde různé recepty, videa, fotogalerie a inzerce. Velkým oříškem bylo přesunutí obsahu z Webnode na WordPress. Existuje nástroj, který dokáže veškerý obsah z webu stáhnout a přesunout na nový web. V tomto případě to bohužel nešlo a museli jsme ze šuplíku vytáhnout plugin, který jsme v minulosti u podobného projektu použili. Plugin jsme přepsali a nakonec se nám obsah přesunout povedlo :).

Tím, ale naše práce neskončila. Museli jsme všechny články roztřídit do kategorií / podkategorií, přejmenovat fotky, vložit komentáře, přidat knihu návštěv a inzerci.

Pro zajímavost, když jsme web klientovi spouštěli, přesun trval neuvěřitelných 5 hodin.

Nejlepší WordPress pluginy pro Google Analytics

Google Analytics je bezplatný nástroj pro měření výkonnosti vašeho webu. Můžete zjistit odkud návštěvníci přichází, z jaké jsou země nebo města. Zjistíte jaké podstránky na webu získaly nejvíce návštěv nebo pomocí nástroje naplánujete marketingovou kampaň. Je to jedinečný nástroj a jeho cenná data vám pomohou vybudovat obchodní strategii.

Pokud se chcete propojit s Google Analytics, musíte přidat fragmenty měřícího kódu na svůj web. Můžete to udělat dvěma způsoby. Buď přes nějaký WordPress plugin nebo vložíte kód manuálně přímo do hlavičky webu. Pokud nejste technicky zdatní, doporučujeme první možnost.

Nyní přichází na řadu to, co vás bude nejvíce zajímat. A jaký plugin pro Google Analytics je nejlepší?

1. MonsterInsights

MonsterInsights díky 2+ milionům aktivních instalací patří mezi nejlepší pluginy Google Analytics. Instalace je velmi jednoduchá a plugin nabízí nejpokročilejší funkce GA pouhým kliknutím.

Plugin má vestavěný panel Google Analytics a tak vůbec nemusíte opustit svůj WordPress web. Plugin také není nijak náročný a nezatěžuje tak výkon vašeho webu. Na pluginu se nám velmi líbí, že obsahuje několik doplňků, které zvyšují funkčnost celého webu. Zkrátka otevřete si svůj web a ihned vidíte všechna data.

Zajímavé funkce:

  • Integrace Google Analytics s okamžitým publikováním článků na Facebooku
  • Možnost sledování konverze formulářů
  • Sledování počtu stažení souborů na webu
  • Kompatibilita s různými nástroji a WP šablonami
  • Vestavěná oprávnění, takže můžete nastavit, kdo má přístup k panelu MonsterInsights
  • Nástavba EU Compliance (anonymizace IP adres, zakázání sledování identifikátorů UserID, práce s Google AMP Consent Box,…)

MonsterInsights je jeden z nejlepších nástrojů a i my ho velmi často pro naše projekty používáme. Nabízí pár funkcí zdarma, ale doporučujeme koupit si prémiovou verzi. Cena začíná na přijatelných 99.50$/rok.

2. ExactMetrics

ExactMetrics je druhý nejoblíbenější nástroj na trhu. Na trhu je již delší dobu pod názvem GADWP, ale v posledním roce přišlo několik změn. Nástroj nabízí totožné funkce jako první plugin. Dříve byl zcela zdarma a umožňoval snadnou integraci Google Analytics do WordPressu, ale bohužel i on přesedlal na vlnu cenových balíčků. Naštěstí existuje free verze, takže můžete plugin nejdříve vyzkoušet než si jej zakoupíte.

Momentálně má ExactMetrics přes 1 000 000+ aktivních instalací a je to velký konkurent MonsterInsights. Osobně bych řekl, že v některých funkcích je s ním práce mnohem rychlejší a intuitivnější než v prvním případě.

Cena ExactMetrics je od 99.50$/rok.

3. Analitify

Posledním pluginem o kterém se rozepíšeme je nástroj Analitify. Jeho ovládání je opravdu jednoduché a vhodné pro uživatele, kteří si potrpí na pouhé základy Google Analytics. Aktuálně má už přes 200 000 + aktivních instalací.

Nástroj uživateli totiž data zjednodušuje, takže přehledy, různé grafy a statistiky vypadají, jako kdyby je malovalo dítě. Tím nechceme říct, že je plugin neprofesionální, právě naopak. Ne vždy se totiž v případě prvních dvou pluginů majitelé stránek v přehledech vyznají.

Instalace pluginu je neskutečně jednoduchá, ověření probíhá jedním kliknutím a během pár vteřin se vám okamžitě načtou data v reálném čase. Plugin je navíc neskutečně přizpůsobitelný a jak píší na jejich oficiálním webu, zábavný. A to je důvod proč byste ho měli vyzkoušet, zvláště pokud máte e-shop.

Analitify nabízí demo, ale spíše bychom doporučili koupit si jeden z jejich balíčků. Cena pluginu začíná od 39$.

A co ostatní pluginy?

Aktuálně pro Google Analytics existuje celá řada pluginů. Ovšem nezáleží na kvantitě, ale kvalitě. Pokud vás nezaujal ani jeden z výše uvedených, doporučujeme vyzkoušet:

Pokud si u nás objednáte tvorbu webových stránek, tak vždy využijeme jeden ze tří prvních pluginů.