WordPress obsahuje skvělý vizuální editor, ve kterém ovšem nejdou dostatečně jednoduše vytvářet tabulky. Přitom tabulky jsou důležitý nástroj umožňující prezentovat a třídit data v dobře pochopitelném formátu. A i když jdou tabulky napsat pomocí HTML a CSS, není to zdaleka ten správný způsob.
V tomto článku si ukážeme jak ve WordPress jednoduše vytvářet responzivní tabulky.
Jak ve WordPress vytvořit tabulku pomocí pluginu
Nejprve si nainstalujte a aktivujte plugin TablePress. Plugin se nachází v oficiálním repozitáři pluginů a lze jej nainstalovat přímo z WordPress administrace. Plugin automaticky obsahuje češtinu.
Jakmile plugin aktivujete, objeví se v levém WordPress menu nová položka TablePress. Běžte do ní a klikněte na Nová tabulka.
Napište zde Název tabulky a nastavte kolik bude mít tabulka řádků a sloupců. Toto není nikterak zásadní, všechno můžete pak při plnění tabulky upravovat. Nakonec klikněte na tlačítko Přidat tabulku.
Budete přesměrování do úpravy samostatné tabulky. Tato stránka je rozdělena na několik částí:
- Informace o tabulce
- Obsah tabulky
- Úpravy buněk
- Možnosti tabulky
- Vlastnosti knihovny DataTables JavaScript
Jednotlivé bloky popíšu jen okrajově, protože je nastavení kompletně v češtině.
Informace o tabulce
Zde jde změnit jméno tabulky a napsat její popis. Zároveň zde najdete shortcode pro vložení tabulky do obsahu a informaci o poslední úpravě.
Obsah tabulky
Zde zadáváte obsah samotné tabulky. Vždy jen kliknete do daného políčka a napíšete obsah. Pokud chcete zobrazit Rozšířený editor přímo pro políčko klikněte do něj a přitom držte klávesu shift.
Úpravy buněk
Box úpravy buněk je taková nástrojová lišta pro obsah tabulky. Lze zde například přidávat, mazat nebo slučovat buňky.
Možnosti tabulky
Samotné nastavení pro tabulku. Můžete zde například specifikovat, zda má mít tabulka hlavičku nebo jestli se má u tabulky zobrazit i její název.
Vlastnosti knihovny DataTables JavaScript
Knihovna DataTables JavaScript zajišťuje, že s tabulkou mohou pracovat i uživatelé přímo na stránce. Umožňuje různé druhy třídění, filtrace, vyhledávání nebo stránkování, což se hodí především u větších tabulek.
Jakmile máte tabulku hotovou, kliknete dole na tlačítko Uložit změny.
Jak vložit tabulku do obsahu
Když máte tabulku připravenou, tak nyní zbývá ji jen vložit do obsahu na stránce. Běžte tedy do stránky, kam chcete tabulku vložit a ve vizuální editoru umístěte kurzor na místo, kde bude tabulka.
V nástrojové liště vizuálního editoru pak klikněte na tlačítko TablePress.
A ze seznamu vyberte tu tabulku, kterou chcete vložit. Nakonec jen klikněte na tlačítko Vložit tabulku.
Do příspěvku se vloží shortcode a máte hotovo.
Případně lze celý postup zkrátit na to, že si shortcode zkopírujete přímo při editaci tabulky a pak jej do obsahu jen vložíte. Nicméně výsledek bude stejný.
Import a export
Do TablePress lze importovat tabulky z formátů CSV, HTML, JSON, XLS a XLSX. Díky tomu nemusíte tabulky překopírovávat do systému, ale lze to udělat během pár sekund.
Zároveň lze již hotové tabulky v TablePress exportovat do formátů CSV, HTML a JSON.
Tento plugin jsem shodou okolností minulý týden zkoušel, ale bohužel nefunguje české třídění. To znamená znaky s diakritikou a písmeno “ch”. Jde to nějak obejít?
Ano, máte pravdu. Protože se jedná o plugin primárně určený pro angličtinu, tak neumí brát takto složené písmeno. Bohužel žádná lehká oprava asi není.
Zdravím, jedna zajímavost k třídění (české třídění). V návrhu tabulky zcela korektně funguje české třídění – bez problémů. Pokud však tabulku zobrazím na webových stránkách, třídění probíhá podle anglické abecedy. Asi to je v používané šabloně (používaný JavaScript ???). Ale netuším, jak to opravit či změnit.
Sice uvádějí responzivní, nicméně pokud vložím do buňky obrázek, tabulka se mi na mobilu nepřizpůsobí a jde mimo displej mobilu, alespon tedy u mě. Vyzkoušeno na tabulce která má jen 2 sloupce. Vlevo text a vpravo obrázky.
Zdravím, šikovný plugin. Ještě jsem v textu nenašel jak na zarovnávání textu/obrázků v jednotlivých buňkách. Stačí doplnit jednotlivé html tagy, nebo se mýlím? Děkuji
Ahoj, tak jsem taky vyzkoušel tenhle plugin. Bohužel se mi nedaří zarovnat tabulku na střed. A to jsem zkoušel vkládat různé CSS styly do nastavení a prostě nic. Asi se to s něčím bije a nechce se to zarovnat. 🙁 Škoda jinak šikovný pomocník.
Zdravím, plugin jsem si stáhnul a nainstaloval, ale čeština tam není. Ne, že by to extra vadilo, ale zajímalo by mne, v čem je problém, jestli je třeba ji někde nahrát manuálně? Díky.
Máte WordPress v češtině?
Dobrý den, umí tenhle plugin (případně jiný) pravidelně aktualizovat tabulku ve WP podle obsahu CSV souboru na disku? Mám seznam lidí exportovaný z win aplikace na ftp a bylo by fajn, kdyby se mi automaticky tabulka aktualizovala, stačilo by 1x denně.
Zdravím, nevíte nějaký css kód na změnu velikosti písma v tabulce? Nebo jak jinak písmo v tabulce upravit, aby bylo menší/větší?
Dobrý den,
nevíte někdo, jak zarovnat v jedné tabulce jeden sloupec doleva a druhý doprava?
Děkuji
Ahoj,
jak například určím velikost tabulky?
Ahoj,
Tablepress si to dělá automaticky podle šířky obsahu. Pokud to chceš určit sám, musíš přes CSS.
Dobrý den,
existuje, prosím, jiný plugin na tvorbu tabulek na starší verze WP? Konkrétně 4.6.6.? Do aktualizace se nechci pouštět, protože neumím zálohovat WP. V případě že bude aktualizace dokončena, co se může stát? Má aktualizace WP vliv na CRM systém?
Zdravím,
určitě doporučuji aktualizovat. Pokud se bojíte, udělejte si předtím kompletní zálohu webu. Nevím jak myslíte vztah na CRM systém.
Jsem úplný laik. Jaká je pravděpodobnost, že se tou aktualizací z výše uvedené verze na novou něco stane? No možná se platu, ale v našem případě by měl být WP nějakým způsobem napojen na Blue jet…
Toto se bohužel nedá říct nějak obecně, vždy záleží jak je samotný web postaven.
Pokud je udělán správně, tak by tam k žádné chybě dojít nemělo. Nicméně zaručit to nemůžu.
Zdravím, chci se prosím zeptat, používám hodně tabulky, ale teď jsem si všiml, že když dám vyhledat určité slovo co je v tabulce, tak se prostě nenajde. Políčko v nastavení, aby je prohledával zaškrtnuté mám, používám stále WP-Table Reloaded, protože přechod na Table Press se mě nepovedl, tabulky se sice převedly, ale v úplně jiném pořadí a ne všechny. Díky
Dobrý den,
to je řekl bych problém vyhledávače v rámci pluginu. Bohužel mě nenapadá, jak vymyslet lepší řešení, než aktualizaci.
Mám problém s šířkou tabulky, mám asi 6 sloupců a v šabloně WordPressu Twenty Fifteen se mi nevejde na šířku hlavní části webu. Neumím zúžit menu (s úpravou šablon nemám zkušenosti). Pokusil jsem se vložit tabulku do karet pluginu TAB, který umožňuje posouvání obsahu v kartách pomocí posuvníku, ale tam se bohužel zobrazuje na oušku karty jen vložené id tabulky, nikoli její obsah. Můžete mi, prosím, poradit? Děkuji.
Pošlete mi do emailu tomas@wpress.help odkaz na stránky, zkusím se na to podívat.
Problém se mi v zásadě zdařilo zvládnout omezením počtu sloupců na měnší počet a projevilo se to i v TABech neboli „v ouškách”, kde se přes stejný kód tabulka objevila. Leč stejně by mě zajímal postup, jak upravit textovou střední část webu, co nejširší – jak upravit šablonu – zdá se mi, že menu je zbytečně široké. Děkuji. Miloš
Nejspíše bude potřeba upravit CSS styly šablony.
Ahoj,
stalo se někomu také u pluginu? Najednou mi nejde kopírovat, ani vkládat odkazy do tabulky viz níže. Staré tabulky s odkazy však fungují.
Upozornění: Nastala chyba.
Interní data tabulky „Kopie Brusle CCM Ribcor 68K -Heuréka“ (ID 79) jsou porušena. Byla zaznamenána následující chyba: Syntax error.
Zdravím,
vypadá to na problém kompatibility viz tento článek: https://tablepress.org/faq/corrupted-tables/
Dobrý den,
používám tento plugin třeba pro tlf. seznam. Ale mám problém s vyhledáváním v tomto tlf. seznamu. V IE11, edge i chrome vše OK. Ale ve Firefox (69.0.3) mi ne všechno korektně najde. Zadávám písmena hledaného jména, mám např. 3 písmena a jméno tam již vidím, ale jakmile zadám 4 písmeno, tak jméno zmizne. (diakritikou to asi nebude – je tam “á” až na 6-té pozici.) PC je po nové standartní instalaci, prohlížeče v defaultním nastavení. Nevíte co udělat, aby mi to šlo správně i ve FireFoxu? Třeba co ve FireFoxu nastavit? Děkuji.
Dobrý den, super plugin. Nicméně ve wordpressu se tváří responsivně, ale poté na telefonu, se tabulka nezobrazí celá a je vpravo schovaná = nepřizpůsobí se šířce obsahu. Poradí někdo prosím?