Vytvorte ohromujúce responzívne tabuľky vo WordPress pomocou wpDataTables

Vytváranie tabuliek vo WordPress je jednoduché. Existujú tradičné spôsoby pridávania tabuliek do programu WordPress pomocou kódu, ale najvýhodnejším spôsobom zostavenia tabuľky (alebo grafu) je použitie doplnku wpDataTables WordPress. Je mimoriadne ľahké importovať tabuľku z rôznych externých zdrojov, upraviť ju podľa svojich predstáv a pridať ju na svoju webovú stránku.


Základné tabuľky HTML

Do WordPress môžete pridať tabuľky pomocou štandardu Značky tabuľky HTML. Sú celkom rovno vpred a používajú nasledujúcu základnú štruktúru (pri vytváraní príspevku nezabudnite ich zadať na karte „text“):

najprv druhý tretina
zdvihák Jackson 25
Jane Jenson 30

Výsledkom bude tabuľka, ktorá vyzerá podobne ako táto (poznámka – akýkoľvek štýl pre bunky hlavičky bude závisieť od vašej témy):

najprvdruhýtretina
zdvihákJackson25
lenJenson30

Použitie HTML na vytvorenie tabuliek bude fungovať a je v poriadku, ak chcete na svoju stránku pridať iba jednu alebo dve tabuľky. Ak však chcete vytvárať tabuľky často, existuje niekoľko problémov, s ktorými pravdepodobne narazíte.

  • Pre pokročilé možnosti sa musíte naučiť kódovanie HTML
  • Pridanie HTML je časovo náročné a ak bude vytvárať veľa tabuliek, bude to z dlhodobého hľadiska brzdiť produktivitu
  • Táto metóda je výrazne obmedzená v rozložení a dizajne (pokiaľ nie ste pokročilý vývojár)

Ak používate WordPress, môžeme bezpečne predpokladať, že 1) používate najnovšiu verziu programu WordPress a 2) vaša téma reaguje. Keď pomocou značky tabuľky HTML vložíte tabuľky na svoje stránky WordPress, strávite veľa času úpravou rozloženia.

Vaše stránky môžu reagovať, ale vaše tabuľky nie.

Tým by sa prirodzene narušilo responzívne vlastníctvo vašich stránok. Problém môže byť aj vloženie údajov na vaše stránky. Softvér na spracovanie tabuliek, ako sú tabuľky Google alebo Microsoft Excel, obsahuje množstvo nástrojov na import údajov z databázy. Ale keď píšete každú postavu – nie je to veľmi produktívne.

Skôr sme identifikovali tri hlavné problémy vkladania tabuliek pomocou HTML do WordPress. Nerobte si starosti – existuje oveľa lepší spôsob, ako vytvárať tabuľky. Dovoľte mi preto predstaviť doplnok, ktorý odstráni všetky vyššie uvedené problémy a prinesie množstvo užitočných funkcií.

Vytvorte lepšie tabuľky s wpDataTables

Doplnok responzívnych tabuliek wpDataTables

Na vytvorenie tabuliek pomocou WordPress dôrazne odporúčame wpDataTables. Tento plne responzívny prémiový doplnok uľahčuje vytváranie, prispôsobenie a správu tabuliek a grafov vo WordPress – nevyžaduje sa žiadne kódovanie. Stačí nainštalovať a začať vytvárať tabuľky a grafy! Dôveryhodné pre viac ako 14 300 ľudí (a predtým ho označili za jeden z našich doplnkov WordPress za mesiac), je to podľa nášho skromného názoru jednoducho jeden z najlepších spôsobov, ako pridať tabuľky na svoje webové stránky podporujúce WordPress..

Viac informácií o wpDataTables Zobraziť živé ukážky

Viac informácií o wpDataTables na Themeforest sa môžete dozvedieť kliknutím na tlačidlá vyššie alebo pokračovaním v čítaní zistíte, prečo si myslíme, že je to úžasné.

Viac zdrojov údajov

Zdroje údajov wpDataTables

V závislosti od toho, kde uprednostňujete ukladanie údajov, vám program wpDataTables umožňuje importovať z mnohých rôznych zdrojov. Na import údajov vyberte z Excelu, CSV, Google Doc, XML, JSON, Serialized PHP Array alebo dotazu MySQL. Existujú tiež možnosti na vytvorenie novej tabuľky ručne, odkaz na zdroj živých údajov (ktorý dynamicky aktualizuje vašu tabuľku, keď ju načítate na stránku) alebo vygenerovanie vlastného dotazu pomocou nástroja GUI (grafické užívateľské rozhranie).

MySQL dotaz je môj osobný favorit, pretože mi umožňuje prezerať ho a upravovať údaje z riadnej databázy. Ak máte tím vývojárov, ktorí pracujú na stolovom projekte, spolupráca by bola veľmi jednoduchá (viac o tom neskôr)!

Vylepšené prispôsobenie a pohotové rozloženie

Navrhovanie vášho stola nebolo nikdy jednoduchšie. Pomocou niekoľkých začiarkavacích políčok a niekoľkých farebných výberov môžete doplnok navrhnúť tak, aby dopĺňal tému vašich stránok. Prezrite si úžasné dizajnové funkcie, ktoré ponúka doplnok:

Vlastný styling wpDataTables

K dispozícii sú tiež vstavané možnosti pre jazyk rozhrania, formátovanie času a dátumu, zarovnania, vlastné JS / CSS a ďalšie. Och a spomenul som, že doplnok reaguje aj na mobilné zariadenia? Môžete nastaviť, koľko miesta bude tabuľka spotrebovať, bez ohľadu na veľkosť obrazovky!

Filtre pre efektívne vyhľadávanie

Možnosti triedenia a filtra wpDataTables

Pri vytváraní novej tabuľky (alebo pri úprave existujúcej tabuľky) máte možnosť povoliť filtre. Pomocou filtrov môžete znížiť výslednú množinu iba s požadovanými položkami. To je neuveriteľne užitočné pri vyhľadávaní rozsiahlej databázy. Napríklad, ak máte databázu knižníc, potom filtrujte výsledky na základe predmet vám pomôže nájsť knihu oveľa rýchlejšie.

Odkedy však upravujete filtre, zvyšuje sa tým počet výpočtov, ktoré má databáza vykonať, čím sa zvyšuje tlak na server. Preto máte vynikajúcu možnosť úplne deaktivovať filtre.

Upravte databázu MySQL z rozhrania Frontend

wpDataTables Povoliť úpravy front-end

Program wpDataTables vám tiež umožňuje priamo upravovať databázy z klientskeho rozhrania – t. j. zo živého webu WordPress. Pri konfigurácii tabuľky jednoducho povoľte možnosť na karte „Úpravy“. Môžete dokonca nastaviť, ktorí používatelia môžu upravovať hodnoty v databáze – nechať ju otvorenú pre všetkých používateľov, aby mohli odoslať alebo založiť prístup na svojej užívateľskej úlohe.

Vizualizujte údaje pomocou grafov

Vizualizácia je omnoho efektívnejším upútavaním pozornosti ako obyčajný text. Koniec koncov, videnie verí. to zvyšuje našu rýchlosť prijímania údajov, v porovnaní s tradičným čítaním. Napríklad, keď si prezeráte koláčový graf výročnej správy o príjmoch, údaje budete interpretovať takmer vždy rýchlejšie v porovnaní s čítaním údajov za všetkých dvanásť mesiacov..

Štýly grafov wpDataTables

wpDataTables vám pomáha vytvárať dynamické grafy (prostredníctvom grafov Google, HighCharts alebo Chart.js) na vizualizáciu údajov vašej tabuľky. Je to užitočné najmä pre tabuľky s množstvom číselných údajov, napríklad pre blogerov, ktorí zdieľajú svoje mesačné správy o príjmoch.

Celoživotné aktualizácie

Väčšina vývojárov doplnkov vám poskytne jeden rok aktualizácií a podpory. Tento vývojár však zahrnoval doživotné aktualizácie a šesťmesačnú podporu pre jednorazový poplatok (poznámka – pre pokračujúcu podporu budete musieť obnoviť svoju licenciu).

Podrobná dokumentácia

Vývojár neponecháva žiadny kameň, pokiaľ ide o vysvetlenie, ako používať wpDataTables. K dispozícii je rozsiahla online dokumentácia plus videonávody, ktoré vám pomôžu pochopiť celú schopnosť doplnku!

Toto nám hovorí 2 veci:

  1. Vývojár sa stará o svojich zákazníkov – aby sa vrátili, aby si produkt kúpili
  2. Znalý zákazník = menej šikany = nižšie lístky na podporu = spokojní zákazníci

Pri menších podporných lístkoch môže vývojár venovať viac času vylepšeniu doplnku a zavedeniu novších funkcií!

Ako zostaviť responzívnu tabuľku pomocou wpDataTables

Teraz, keď viete, prečo si myslíme, že wpDataTables je skvelý doplnok, ukážeme vám, ako ho používať! Existujú presne tri kroky na vytvorenie novej tabuľky pomocou doplnku wpDataTables.

1. Nainštalujte wpDataTables

Viem, že by to malo byť zrejmé, ale najskôr musíte nainštalovať wpDataTables. Pretože sa jedná o prémiový doplnok, musíte ho kúpiť a prevziať z CodeCanyon (stačí prejsť na svoje nákupy a prevziať iba inštalovateľný súbor WordPress)..

Nainštalujte doplnok wpDataTables

Potom postupujte podľa pokynov na obrazovke a dokončite inštaláciu a aktiváciu.

2. Vytvorte tabuľku údajov

Ak je doplnok aktívny, mali by ste mať úplne novú položku ponuky „wpDataTables“. Kliknite na ňu a potom na veľké modré tlačidlo Pridať nový a začnite vytvárať novú tabuľku.

wpDataTables Vytvorenie alebo importovanie tabuľky

Prvou možnosťou bude spôsob vytvorenia tabuľky. Malo by sa predložiť päť možností. Vybrali sme možnosť importu z CVS, pretože sme mali jednoduchú tabuľku, ktorú sme chceli použiť. Po kliknutí na tlačidlo Ďalej sa zobrazí výzva na výber a odovzdanie súboru.

Správa tabuľky wpDataTables

Po nahraní zdroja údajov budete môcť zadať vlastný názov tabuľky a použiť možnosti na úpravu, pridanie alebo odstránenie stĺpcov a riadkov. Potom kliknutím na zelené tlačidlo dokončite vytváranie tabuľky.

Nastavenia tabuľky wpDataTables

Teraz ste v domácom úseku! Na tejto stránke môžete vyladiť ďalšie nastavenia pre svoje tabuľky (voliteľné). Použite možnosti „Zobraziť“, aby ste povolili zbalenie na menších zariadeniach, pridali vodorovný posuvný panel, obmedzili šírku tabuľky atď. Prejdite na kartu „Úpravy“, aby ste povolili úpravy front-end alebo aby ste povolili nástroje tabuliek (tlač, kopírovanie alebo export) rýchle odkazy). Najlepšie zo všetkého je, že si svoje ukážky môžete prezrieť naživo pri vylepšení. Len nezabudnite kliknúť na ikonu Uložiť (alebo použite) začiarknutie, ak vykonáte nejaké zmeny.

Po dokončení skopírujte krátky tabuľkový kód z hornej časti obrazovky, pretože ho budete potrebovať pre tretí a posledný krok.

3. Vložte tabuľku na príspevok alebo stránku

Krátky kód wpDataTables

Ak chcete tabuľku použiť, stačí vložiť krátky kód do obsahu na príspevku alebo stránke (napríklad na obrázku vyššie). Tento skrátený kód sa vykreslí na prednej časti vášho webu v závislosti od toho, ako ste upravili svoj stôl:

Tabuľka front-end wpDataTables

U nás môžete vidieť, že sme povolili nástroje tabuľky (tlačiť, exportovať atď.), Filtrovať a zadávať front-end. Ale to je všetko – váš stôl je pripravený ísť!

Chcete zostaviť graf?

Grafy môžete vytvárať aj pomocou wpDataTables. Po vytvorení tabuľky začnite kliknutím na „Vytvoriť graf“.

Vytvorenie grafu wpDataTables

Odtiaľ pomenujte svoj graf, vyberte štýl (z čoho vyberať ton) a pokračujte na ďalšiu obrazovku, kde vyberiete tabuľku údajov, ktorú chcete použiť na vytvorenie grafu..

wpDataTables Priradenie údajov

Po výbere tabuľky, ktorá sa má použiť ako zdroj údajov, priraďte stĺpce tabuľky k častiam grafu. V závislosti od zvolenej tabuľky môže byť požadovaný minimálny počet požadovaných hodnôt. V našom príklade sme vybrali stĺpcový graf, ktorý vyžadoval pre graf najmenej dva stĺpce (to sú stĺpce). Po zoradení stĺpcov prejdite na ďalší krok.

Prispôsobenie grafu wpDataTables

Teraz pre zábavu. Použite možnosti na úpravu a pridanie funkcií do svojho grafu. Existuje veľa možností pre responzívnu šírku, výšku, pozadie, orámovanie, písma, štítky, farby, zobraziť / skryť názov, popisy na vznášanie a ďalšie.

Po dokončení úprav kliknite na tlačidlo Ďalej a skopírujte skrátený kód grafu. Stačí ho vložiť do svojho príspevku alebo obsahu stránky, uložte ho a choďte na front-end svojho webu, aby ste videli graf!

Pridajte ďalšie funkcie tabuľky WordPress

Chcieť viac? Existuje niekoľko rozšírenia a doplnky pre wpDataTables pridať ešte viac možností tabuľky a grafu pre váš web WordPress.

Rozšírené filtre wpDataTables

Výkonné filtre: Nastavte kaskádové filtre (kombinované zľava doprava), filtrovanie fazet (použitie viacerých filtrov na zúženie výsledkov), vypnite zobrazenie tabuľky, kým používateľ nevyberie filtre, nepridá funkcie aktívneho vyhľadávania a ďalšie. Pri nastavovaní tabuľky jednoducho povoľte a nakonfigurujte túto možnosť.

Tvorca prehľadov: Vytvorte si vlastné vlastné zostavy programu Word alebo Excel na základe dátových tabuliek. Toto je užitočné najmä v prípade, že používatelia umožňujú front-end úpravy (aby ste mohli zhromažďovať údaje, ktoré môžete znova spustiť a vytlačiť), alebo ak potrebujete pravidelne generovať prehľady (napríklad mesačné faktúry alebo časové karty)..

Formáty formulárov wpDataTables

Úžasné formuláre: Pridajte podporu populárneho tvorcu formulárov Formidable Forms Pro. Použite Formidable Forms na vytvorenie formulára na zber údajov (napríklad prieskum), potom automaticky vygenerujte tabuľku na základe údajov od používateľov, pričom každé pole sa skonvertuje do stĺpca..

Gravitačné formuláre: Integrujte žiadosti o gravitačné formuláre s wpDataTables na automatické vytváranie tabuliek WordPress na základe užívateľských údajov. Rozšírenie pridáva nový zdroj údajov pri vytváraní tabuľky, takže je ľahké prepojiť ho s konkrétnym formulárom gravitácie a vizualizovať údaje.

Vyskúšajte sami tabuľky wpDataTables

wpDataTables Live Sandbox

Väčšina vývojárov vám dá ukážku naživo, aby vám poskytla predstavu o tom, čo môže doplnok urobiť. Zobrazujú však iba výstup, t. J. Pohľad „frontend“ – ktorý je založený na vopred určených vstupoch. Tam zaostáva väčšina živých ukážok doplnku – nedávajú vám prístup k nastaveniam a nástrojom doplnku – t..

Program wpDataTables vám však ponúka úplné karantény na ich ukážke, kde môžete Try-pred-you-buy. Všetci predajcovia automobilov to robia – neslávne známa skúšobná jazda. Prostredníctvom karantény môžete otestovať funkcie doplnku podľa obsahu svojho srdca a zobraziť výstup v reálnom čase.

Zobraziť ukážku wpDataTables

Chcete si stiahnuť kópiu a otestovať svoju vlastnú inštaláciu? wpDataTables ponúka lite verziu, ktorú môžete získať z úložiska WordPress.org. Nemá všetky úžasné, prémiové funkcie, ktoré sme už spomínali, ale je to skvelý spôsob, ako zistiť, či je doplnok tým správnym riešením pre vaše potreby..

Získajte wpDataTables Lite

A ak sa vám páči, môžete pokračovať a kúpiť s úplným pokojom mysle. Prečo? Pretože ste už produkt vyskúšali a použili.

záver

wpDataTables je jedným z tých nevyhnutných doplnkov pre stránky WordPress, ktoré sa zaoberajú obrovským množstvom údajov. Či už vytvárate školský projekt alebo výročnú správu spoločnosti, tabuľky a ich vizualizácia zohrávajú dôležitú úlohu pri prezentácii údajov.

Získajte tabuľky wpDataTables pre WordPress

Už ste vyskúšali wpDataTables? Alebo máte nejaké otázky týkajúce sa toho, čo tento doplnok môže urobiť? Zanechajte komentár nižšie – radi by sme vás počuli!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map