Většina lidí si vystačí se základním editorem, který ve wordpressu najde. Stačí jim jedna stránka, kde si mohou zarovnat text a trošku si jej upravit. Mně samotnému tento editor, také stačí. Někdy však potřebuji rozdělit článek na několik sloupců. Třeba když chci napsat výhody a nevýhody. Zbytečně bych článek natahoval a bylo by v něm moc bílého místa, což nepůsobí moc dobře. Dnešní článek tedy bude o tom, jak elegantně vyřešit rozdělení příspěvku na tolika sloupců kolik jen potřebujete. Tohle vše si ukážeme bez použití pluginů. Čím méně pluginů tím lépe ;).

Bez pluginů

Čím méně pluginů ve wordpressu použijete, tím bude bezpečnější a svižnější. To si zapamatujte, to je jedno ze základních pravidel. Jak tedy docílíme našeho požadavku, bez jakéhokoliv pluginu? Odpovědí je CSS (kaskádovité styly). Jednoduše nadefinujeme sloupce, do kterých budeme později psát. Ti, kteří nevědí co CSS je, se nemusí bát, od toho je tu tento článek. Z něho si příslušný kód jenom zkopírujete a vložíte k sobě do příspěvku. Pozn. Kód vkládejte v režimu HTML

Dva sloupce

Pro rozdělení příspěvku na dva sloupce použijte kód, který je napsán níže.

<div style="width:40%;padding:0 10pt 0 0;float:left;">
Sloupec 1 text
Sloupec 1 text
Sloupec 1 text
</div>

<div style="width:40%;padding:0 10pt 0 0;float:right;">
Sloupec 2 text
Sloupec 2 text
Sloupec 2 text
</div>

Výsledek pak bude vypadat takto

Tři sloupce

Když potřebujete rozdělit článek na tři sloupce, pomůže vám tento kód.

<div style="width:30%;padding:0 10pt 0 0;float:left;">
Sloupec 1 text
Sloupec 1 text
Sloupec 1 text
</div>

<div style=“width:30%;padding:0 10pt 0 0;float:left;“>
Sloupec 2 text
Sloupec 2 text
Sloupec 2 text
</div>

<div style=“width:30%;padding:0 10pt 0 0;float:right;“>
Sloupec 3 text
Sloupec 3 text
Sloupec 3 text
</div>

Výsledek pak bude vypadat takto

Čtyři sloupce

Můžete chtít článek rozdělit i na 4 sloupce. To provedete tímto kódem.

<div style="width:25%;padding:0 10pt 0 0;float:left;">
Sloupec 1 text
Sloupec 1 text
Sloupec 1 text
</div>

<div style=“width:25%;padding:0 10pt 0 0;float:left;“>
Sloupec 2 text
Sloupec 2 text
Sloupec 2 text
</div>

<div style=“width:25%;padding:0 10pt 0 0;float:left;“>
Sloupec 3 text
Sloupec 3 text
Sloupec 3 text
</div>

<div style=“width:25%;padding:0 10pt 0 0;float:right;“>
Sloupec 4 text
Sloupec 4 text
Sloupec 4 text
</div>

V článku bude pak výsledek vypadat takto

Rozdělení na více sloupců

Můžete také chtít článek klidně rozdělit na 5 a více sloupců. Je to velice nepravděpodobné, jelikož pak budou sloupce velice tenké a budou postrádat smysl (přehlednost). Pokud ovšem chcete vytvořit ještě více sloupců uděláte to následovně.

1) Vydělte 100 počtem sloupců
Např. 5 sloupců => 100/5 = 20

Tuto hodnotu vepište do tohoto kódu na místo šířka

<div style="width:šířka%;padding:0 10pt 0 0;float:left;">
Sloupec 1 text
Sloupec 1 text
Sloupec 1 text
</div>

2)Tento kód vložte do příspěvku o 1 méně než bude výsledný počet sloupců. Pátý sloupec musí totiž být zarovnaný na pravou stranu. Proto pro poslední sloupec využijte tento kód.

<div style="width:šířka%;padding:0 10pt 0 0;float:right;">
Sloupec 1 text
Sloupec 1 text
Sloupec 1 text
</div>

V našem příkladě by jste tedy vložili 4 sloupce s horním kódem a pak 1 s tím dolním. Ve všech by bylo místo textu šířka číslo 20. Takto si můžete příspěvek rozložit na tolik sloupců kolik potřebujete a to v libovolné části článku. Pokud se vám článek pomohl, nebojte se jej sdílet dál.