Poslední dobou se velice často setkávám s weby běžící na WordPressu, které mají problém s českými znaky – špatně se zobrazující ščřž. Nedávno jsem tady umístil návod, jak na opravu. Byl to však všeobecný návod, WordPressu se moc netýkající. Pojďme to tedy napravit.

K uvedenému problému nejčastěji dochází koupením nebo stažením free šablony. Autor pravděpodobně vůbec netuší, že existuje jakými malý státeček uprostřed Evropy, který nad znaky používá háčky a čárky. Proto tento problém vůbec neřeší. Použije většinou základní nastavení Google fontu a o víc se nestará. Jemu se to zobrazuje bez chyb.

Teorie

Google fonty je možné najít zde: http://www.google.com/fonts

V přehršli fontů si vybere každý. Použití je velmi jednoduché a návodné. Kliknutím na ikonu čtverečku si zobrazíte přehled jednotlivých písmen, které font podporuje. Pokud font české znaky podporuje, je vyhráno. Stačí kliknout na šipku hned vedle. Dostanete se k návodu, jak font aplikovat na svých stránkách.

V kroku prvním vybíráme typ písma. Většinou je již zaškrtnut. Důležitý je krok 2, kdy je potřeba zaškrtnout volbu Latin Extended (latin-ext). Třetí krok ukazuje již kus kódu, který je potřeba vložit do stránek, ať již pomocí standardního linku, nebo pomocí @importu. Praktické použití si ukážeme za chvíli. Poslední čtvrtý bod je již aplikace v CSS.

Praxe

Tolik teorie a nyní se podíváme na samotný WordPress a to, co jste si nainstalovali. WordPress ukládá šablony do adresáře themes, který naleznete v v adresáři wp-content. Jako první potřebujete zjistit, jaký font autor šablony použil. Jak na to? Existují dvě cesty:

• proberete se soubory šablony a najdete zmínku o použitém fontu – pracné zdlouhavé

Nyní stačí otevřít svou stránku, kliknout pravým tlačítkem přímo nad problémovým fontem a z kontextové nabídky vybrat Prozkoumat prvek.

V prohlížeči se otevře okno rozdělené na dvě části. V levé je vidět kód stránky, v pravé pak použité styly.

Nás bude zajímat pravá strana se styly, kde hledáme zmínku o stylu. Kaskádové styly se dědí, tj. je zde zachována hierarchie. Nahoře je zobrazen styl týkající se právě tohoto prvku. Nejníže jsou pak styly týkající se například celého dokumentu. Nás v textu zajímá položka font-family. Nejčastěji ji najdete úplně dole v prvku body. Font-family je rodina písem, které se mají aplikovat na webu. Firefox, oproti jiným prohlížečům, ukazuje přímo písmo, které je použito, ostatní jsou zašedlá.

Nalezené písmo se nyní pokusíme vyhledat v Google Fonts. Pokud máte štěstí, font podporuje české znaky, pokud ne, je potřeba si vybrat jiný obdobný font.

Pokud máme vybráno, ať již upravený font podle popisu výše, nebo zcela nový font, je potřeba jej aplikovat. Ve složce šablony nás zajímá soubor s příponou css. Většinou bývá umístěn v základu šablony a je označen style.css. O který přesně soubor css se jedná však naleznete zase ve Firebugu – v pravé části je u jednotlivých stylů napravo modře napsán název dokumentu a řádek, kde je styl popsán. Když na něj najedete myší, ukáže se celá adresa, která k tomu souboru vede.

Soubor rozklikneme. Definice importu stylu bývá na začátku dokumentu. Pomocí crtl+f prohledejte dokument na výskyt značky @import. V případě nálezu, řádek upravíme podle pokynů v bodě 3 Google Fonts.

Pokud @import nenajdeme, otevřeme si soubor header.php v základním adresáři šablony. Toto je soubor s hlavičkou webu a nalezneme řádek začínající

Malá zrada bývá o rozsáhlých šablon, které si font řeší jinak. V tom případě aplikujte bod 3 z google fonts např. do souboru header a soubor uložte.

Doufám, že Vám článek pomohl..

(1447)

Jak nastavit český google font pro wordpress