Formátování příspěvků ve WordPressu 2/5

Pokračujeme druhým dílem seriálu Jak vytvořit příspěvek ve WordPressu. Dnes se zaměříme jen na box pro samotný obsah. Ne začneme, lehce si připomene z čeho se box skládá. Pokud jste první díl četli pozorně, pak můžete text směle přeskočit. Box má hlavní okno, nad kterým je řádek ikon pro úpravu textu, další řádek je možné zobrazit kliknutím na ikonu dvou obdélníčku s tečkami na konci řady. Editační okno je možné zvětšit kliknutím na ikonu dvou šipek v pravém rohu. Nad ikonami je tlačítko pro Mediální soubory a pravém rohu záložky pro přepínání mezi Editorem a HTML. Zopakováno, pojďme na základní úpravy textu.

Ikony jsou dost podobné ikonám, které znáte z Wordu nebo Writeru. Jako první je volba stylu, pak tučnost, inverznost, odrážkový seznam, číslovaný seznam, citaci (ikona velkých uvozovek), zarovnání doleva, na střed, doprava, vytvoření odkazu (ikona řetízku), zrušení odkazu, rozdělení perexu od zbytku textu a zmíněná ikona pro zobrazení druhého řádku.

Ikony pro formátování textu

Kliknutím si zobrazíme další možnosti. Zde zleva najdeme přeškrtnutý text, vodorovná čára, barva písma, kopírování textu, mazání textu, speciální znaky (ikona omegy), odsazení zleva, odsazení zprava, ikony zpět a vpřed a nakonec nápověda pro klávesové zkratky.

Volíme styl

Pokud jste pečlivě četli minulé dva odstavce, pak jste zjistili, že chybí jaksi volba velikosti písma. Je to z jednoho prostého důvodu. Šablona byla navržena grafikem. Aby nějak vypadala, grafik zvolil několik velikostí písma. Nadpisy mají svou velikost, text má svou. Pokud by každý editor volil svou výšku písma, pak by web vypadal hrůzostrašně. Každý článek obsahuje základní text formátovaný do odstavců, delší články obsahují i nadpisy a podnadpisy.

Odstavec vytvoříme odentrováním na konci odstavce. Nadpis pak běžným napsáním textu a kliknutím a rozbalením první ikony, kde běžně svítí text odstavec. V nabídce je odstavec, nadpis 1, nadpis 2, … nadpis 6 a zachovat formátování. Nadpis 1 se většinou nepoužívá, protože se jedná o nejvýše postavený název, a měl byt to být přímo nadpis článku. Ostatní nadpisy v textu jsou spíše podnadpisy. Volte tedy nadpis 2 a dál. Podnadpisy by měly mít nějakou hierarchii. Nevolte tedy text podle velikosti.

Titulky, odstavce, …

Pro zrychlení práce si všimněte, že na pravém okraji rozbalené nabídky jsou klávesové zkratky. Řada uživatelů se mě ptá, jak je to s velikostí. V editoru se nezobrazují správné poměry písem, písmo je černé. Pokud se chcete podívat na to, jak daný článek vypadá, musíte si zobrazit náhled. Editační okno se dá ošetřit, aby byly ukázány všechny velikosti, barvy jako v reálu, ale autoři to neřeší, není to vyžadováno.

Tučnost, inversnost, podtržení, přeškrtnutí.

Nejčastější úpravou jak zvýraznit text, je jej ztučnit, nebo zinversnit. Možností jak to provést je spousta. Kliknout na ikonu s písmenem B nebo I a pak psát text, nebo nejdřív napsat text, pak označit a kliknout na ikonu. Pokud potřebujete text přeškrtnout, postupujete stejným postupem, jen kliknete na první ikonu na druhém řádku. Další možností je použít klávesové zkratky. Jsou stejné jako ve Wordu nebo Writeru – ctrl+b nebo ctrl+i. Ikona podrženého písma sice chybí, ale funguje klávesová zkratka ctrl+u. Klávesová zkratka pro přeškrtnutí se moc nepoužívá, ale existuje shift+alt+d.

Odrážky

Následující dvě ikony jsou uživateli hodně opomíjeny. Potřebují-li text dát do odrážek, použijí jednoduše pomlčku a enter. Text se pak návštěvníkovi zobrazuje rozhozený. Když to vidí autor, snaží se situaci zachránit zvýrazněním textu a pak je text ještě více nepřehledný, nebo se snaží text vložit do tabulky. Proto pokud potřebujete odrážkový nebo číslovaný seznam, použijte ikonku, a z kopírovaného textu odmažte pomlčky. Použití je triviální. Umístíme kurzor na řádek, kde má seznam začít, klikneme na ikonu a začneme psát text, pokud chceme další odrážku, stačí zmáčknout enter.

Odrážkový seznam, číslovaný seznam

Zmínil jsem tabulky. Všimněte si, že žádná ikona neumožňuje vložit tabulku. Je to z toho důvodu, že tabulky se špatně formátují na mobilní zařízení. Bohužel většina šablon s nimi moc nepočítá a i když je šablona „responzivní“ vloženou tabulkou je out. Proto pokud je to jen trochu možné, tabulkám se vyhněte. Dost tabulek je tak jednoduchých, že drobnou úpravou se dá právě použít odrážkový seznam. Pokud je tabulka složitá a nedá se nějak přetvořit do seznamu, požádejte tvůrce stránek (nebo mi napište) o doplnění pluginu pro rozšíření ikon editoru.

Zarovnání textu

Přeskočili jsme ikonu uvozovek – citaci. Jedná se o málo používanou ikonu. Zvláštní vysvětlování asi není třeba. Pojďme se raději podívat na následující trojici ikon. Zarovnání doleva, na střed, doprava. První otázka editora je – jak můžu zarovnat text do bloku… „Nijak“, prosím nedělejte to. Z typografického hlediska pro weby platí, že text zarovnaný do bloku se na monitoru, telefonu hůře čte. Je to zřejmé – na velké ploše je text zarovnaný do bloku jako monolit, oči se pak snaží něčeho zachytit, ale nemají čeho. Pokud text pořádně nastavíte, jen občas do rozdělíte na odstavce, je na problém zaděláno. Nechte text normálně plynout.

V editoru je text automaticky zarovnán doleva. Pokud nebude nic nastavovat ve většině případů se i v šabloně uživatelům zobrazí zarovnání doleva. Jsou však i speciální případy, kdy to tak není, autor šablony pro efekt potřebuje zarovnání jinak, tak se to zobrazí takto. Pokud ale v editaci zarovnáte na střed, nebo doprava, mělo by se to v šabloně projevit. Stačí umístit kurzor do odstavce, který má být zarovnán a kliknout na ikonu.

Tvoříme odkaz

Webové stránky jsou tvořeny odkazy, ať již interními nebo externími. Interní jsou takové, kdy odkazujete v rámci svého webu, externí jsou pak všechny mimo. Vytvořit odkaz není nic složitého. Stačí označit text, který má být odkaz a kliknout na ikonu řetízku. Označit můžete i obrázek, či jiný objekt.

Vytvoření odkazu

Po kliknutí se zobrazí malé pole pro zadání odkazu. Nejjednodušší je zadat externí odkaz, ten stačí napsat nebo vkopírovat do řádku a stisknout enter – odkaz vytvořen. Trošku, ale jen málo, je složitější vytvořit interní odkaz. Jsou dvě možnosti. Bu si pamatujete název nebo obsah článku, na který chcete odkazovat, nebo si jej vyhledáte v seznamu. U první varianty stačí začít psát klíčové slovo z nadpisu nebo obsahu a našeptávač vám bude články předhazovat. U druhé varianty musíte kliknout na ozubené kolo. Tím se zobrazí popup okno máte přehledně všechny články. Stačí si jen vybrat a potvrdit. U interních odkazů nikdy prosím nedělejte to, že si okopírujete url adresu článku a tu pak vložíte stejně jako externí odkaz. V případě, že budete s webem cokoli dělat, přesouvat, měnit odkazy stránek apod., dojde ke ztrátě propojení.

Kliknutím na ikonu přetrženého řetízku odkaz zrušíte.

Pokračování textu – more

Tato ikona se používá pokud šablona umí pracovat s rozdělením textu. Typicky např. na homepage máte z každého článku vytvořen úryvek. Délka úryvku se může, ale nemusí, tvořit pomocí této ikony. Kliknutím na ni se do textu přidá značka, té si dále nemusíte nijak všímat, a jen pokračovat v psaní článku. Pokud tlačítko funguje, měl by vás na to autor šablony upozornit.

Barva textu

Opětně jsme jednu ikonu přeskočili. Její použití je naprosto jasné, navíc se stejně jako citace moc nevyužívá. Pojďme se raději podívat na ikonu podtrženého A – třetí ikona zleva na druhém řádku. Tady rovnou říkám – nepoužívat. Opětně jako u předcházejících bodů – autor šablony, grafik, nějakým způsobem navrhl šablonu. Dotyčný navrhl, že na nadpisy se bude používat kafebrondodzelena a na obyčejný text např. brčálová zeleň, tak by to tak mělo být. Jakákoli změna barvy mimo navržené, posouvá web do páté cenové. Sebepěknější grafiku změnou barvy zkrátka rozhodíte. Zažil jsem web, kdy uživatel článek barvou zvýrazňoval, krom toho používal pro písmo mimo tučnosti, inverznosti i kapitálky a to pak jedna informace přeřvávala druhou a uživateli šla hlava kolem. Tohle určitě nechcete.

Kopírování z wordu, writeru

Te se podíváme na kopírování textu z jiných zdrojů. Dost často budete na web vkládat text z wordu, writeru, či jiného textového editoru. To jsou programy, kde se dá také formátovat text, Pokud takový text kopírujete, kopírujete jej i s tím formátování. Proto je vhodné takový text kopírovat pomocí ikony složky s písmenem T. Kliknutím na ikonku aktivujete režim vkládání (opětovným kliknutím jej zrušíte), od této chvíle můžete bez obav text vkopírovat a žádný balast se neobjeví. Kopírováním bez použití ikonky se vystavujete tomu, že do článku se dostane kód, který zformátuje písmo, nastaví barvu, velikost, font, atd. Krom toho se do stránek může dostat i nebezpečný kód.

Ostatní

Následující ikony již nejsou tak důležité. Používají se málo. První je guma, ta z označeného textu odstraní formátování. Ikona Omegy dovoluje do textu přidávat znaky, které na klávesnici běžně nenajdete. Následuje odsazení zleva a zprava pomocí níž také můžete zvýraznit text. Ikony vzad a vpřed jsou všem jasné, stejně tak ikona otazníčku, kdy se zobrazí nápověda ke klávesovým zkratkám.

Závěr

Na závěr si dovolím shrnutí toho, co byste při editaci neměli použít, čeho se vyvarovat.

• nekopírujte text z wordu, writeru napřímo, vždy s ikonou
• nepoužívejte barvy písma.
• text nezarovnávejte do bloku
• pokuste se vyhnout tabulkám
• odrážky nedělejte pomocí pomlček, použijte ikonu odrážky
• nadpisy, zvýraznění tučně, inverzně používejte rozumně, aby nedošlo přebíjení jedné informace druhou

Další díly

• Formátování příspěvků ve WordPressu 1/5
• Formátování příspěvků ve WordPressu 2/5
• Formátování příspěvků ve WordPressu 3/5
• Formátování příspěvků ve WordPressu 4/5
• Formátování příspěvků ve WordPressu 5/5