Stvorite zadivljujuće responzivne tablice u WordPress-u pomoću wpDataTables

Stvaranje tablica u WordPressu je jednostavno. Postoje tradicionalni načini za dodavanje tablica u WordPress s kodom, ali daleko je najpovoljniji način stvaranja tablice (ili grafikona) pomoću wpDataTables WordPress dodatka. Izuzetno je jednostavno uvoziti svoj stol iz različitih vanjskih izvora, oblikovati ga po vašoj želji i dodati ga na svoju web stranicu.


Osnovne HTML tablice

Možete dodati tablice u WordPress koristeći standardne Oznake HTML tablice. Prilično su naprijed i koriste sljedeću osnovnu strukturu (sjetite se da ste ih unijeli na karticu “tekst” prilikom stvaranja posta):

Prvi Drugi treći
utičnica Jackson 25
Jane Jenson 30

Što će rezultirati u tablici koja izgleda slično ovoj (imajte na umu – bilo koji stil za ćelije zaglavlja ovisit će o vašoj temi):

PrviDrugitreći
utičnicaJackson25
JenJenson30

Upotreba HTML-a za izradu tablica funkcionirat će i dobro je ako na web mjesto želite dodati samo jednu ili dvije tablice. Ali ako ćete često izrađivati ​​tablice, vjerojatno ćete naići na nekoliko problema.

  • Morat ćete naučiti HTML kodiranje za napredne opcije
  • Dodavanje HTML-a iziskuje puno vremena i dugoročno će ometati vašu produktivnost ako stvorite puno tablica
  • Ova je metoda strogo ograničena u izgledu i dizajnu (osim ako niste napredni programer)

Ako koristite WordPress, sa sigurnošću možemo pretpostaviti da 1) koristite najnoviju verziju WordPress-a i 2) da vaša tema odgovara. Kada koristite oznaku HTML tablice za umetanje tablica na svoje mjesto na WordPressu, potrošit ćete puno vremena prilagođavajući izgled.

Vaša web lokacija možda reagira, ali tablice ne odgovaraju.

To bi prirodno razbilo responzivnu osobinu vaše web lokacije. Umetanje podataka na vašu web stranicu također može biti problem. Softver za obradu proračunskih tablica, poput Google Spreadsheets ili Microsoft Excel, sadrži mnogo alata za uvoz za prikupljanje podataka iz baze podataka. Ali kad upišete svaki znak – to nije baš produktivno.

Ranije smo identificirali tri glavna problema umetanja tablica s HTML-om u WordPress. Ne brinite – postoji mnogo bolji način za izradu tablica. Dopustite da vam predstavim dodatak koji će riješiti sve gore navedene probleme i donijeti mnoštvo korisnih značajki.

Stvorite bolje tablice s wpDataTables

wpDataTables Dodatak za tablice

Za izradu tablica s WordPressom toplo preporučujemo wpDataTables. Ovaj potpuno prilagodljivi dodatak olakšava stvaranje, prilagođavanje i upravljanje tablicama i tablicama u programu WordPress – nije potrebno kodiranje. Samo instalirajte i započnite stvarati tablice i grafikone! Prema pouzdanom mišljenju, više od 14.300 ljudi (i ranije su ga nazivali jednim od naših WordPress dodataka), to je jedan od najboljih načina za dodavanje tablica na web mjesto koje pokreće WordPress..

Više o wpDataTables Pogledajte prikaz uživo

Možete saznati više o wpDataTables na Themeforest klikom na gornje gumbe ili nastavite čitati da biste saznali zašto mislimo da je tako fenomenalno.

Više izvora

wpDataTables izvori podataka

Ovisno o mjestu gdje želite pohraniti svoje podatke, wpDataTables vam omogućuje uvoz iz različitih izvora. Za uvoz podataka odaberite Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array ili MySQL upit. Tu su i mogućnosti ručne izrade nove tablice, povezivanje na izvor podataka uživo (koji do dinamičkog ažuriranja tablice kada je učitate na stranicu) ili generiranje prilagođenog upita pomoću GUI (grafičkog korisničkog sučelja) alata.

MySQL upit je moj osobni favorit jer mi omogućuje gledanje i modificirati podaci iz odgovarajuće baze podataka. Ako imate tim programera koji rade na projektu stola, suradnja bi bila vrlo jednostavna (više o tome kasnije)!

Poboljšana prilagodba i prilagodljivi izgled

Dizajn stola nikada nije bio lakši. S nekoliko potvrdnih okvira i nekoliko izbora boja možete dizajnirati dodatak koji će nadopuniti temu vaše web lokacije. Pogledajte fenomenalne dizajnerske značajke koje dodatak može ponuditi:

wpDataTables Prilagođeni stil

Postoje i ugrađene opcije za jezik sučelja, oblikovanje vremena / datuma, poravnanja, prilagođeni JS / CSS i još mnogo toga. Oh i jesam li spomenuo da je dodatak previše mobilan? Možete postaviti koliko prostora će zauzeti stol, bez obzira na veličinu zaslona!

Filtri za učinkovito pretraživanje

Mogućnosti sortiranja i filtriranja wpDataTables

Prilikom stvaranja nove tablice (ili uređivanja neke izlazne) imate mogućnost omogućiti filtre. Pomoću filtara možete smanjiti skup rezultata samo sa željenim stavkama. Ovo je nevjerojatno korisno za ispitivanje velike baze podataka. Na primjer, ako imate bazu podataka knjižnica, filtrirajte rezultate na temelju predmet pomoglo bi vam da brže pronađete svoju knjigu.

Međutim, budući da svaki put kada uređujete filtre, povećava se broj izračuna za bazu podataka – čime se povećava pritisak na poslužitelju. Stoga imate slatku mogućnost potpunog isključivanja filtera.

Uređivanje MySQL baze podataka iz Frontenda

wpDataTables Allow Editing uređivanje

wpDataTables također vam omogućuje izravno uređivanje baza podataka s pročelja – tj. s web stranice WordPress uživo. Jednostavno omogućite opciju na kartici “Uređivanje” prilikom konfiguriranja tablice. Možete čak postaviti koji su korisnici u mogućnosti uređivati ​​vrijednosti u bazi podataka – ostavljajući ih otvorenima za sve korisnike koji mogu predati ili temeljiti pristup svojoj ulozi korisnika.

Vizualizirajte podatke pomoću grafikona

Vizualizacija je daleko učinkovitija privlačnost pažnje od uobičajenog teksta. Uostalom, vidjeti je vjerovati. To povećava našu brzinu unosa podataka, u usporedbi s tradicionalnim čitanjem. Na primjer, kada pregledavate grafički prikaz godišnjeg izvještaja o dohotku, gotovo uvijek ćete brže protumačiti podatke u usporedbi s čitanjem podataka u svih dvanaest mjeseci.

wpDataTables Stilovi grafikona

wpDataTables pomaže vam da stvorite dinamičke grafikone (putem Google Charts, HighCharts ili Chart.js) za vizualizaciju podataka tablice. Ovo je posebno korisno za tablice s mnoštvom brojčanih podataka, na primjer, blogeri koji dijele mjesečna izvješća o dohotku.

Doživotne nadogradnje

Većina programera dodataka dat će vam godinu dana ažuriranja i podrške. Međutim, ovaj programer je uključio doživotna ažuriranja i šest mjeseci podrške za jednokratnu naknadu (napomena – za trajnu podršku morat ćete obnoviti licencu).

Detaljna dokumentacija

Programer ne ostavlja kamen na kamenu kada je u pitanju objašnjenje kako koristiti wpDataTables. Postoji opsežna internetska dokumentacija, kao i video tutorijali koji će vam pomoći da shvatite cijelu sposobnost dodatka!

To nam govori dvije stvari:

  1. Programer brine o svojim kupcima – tako da se vraćaju kupiti proizvod
  2. Kupac koji dobro poznaje = manje štucanja = niže ulaznice za podršku = zadovoljni kupci

Također, uz manje ulaznica za podršku, programer može posvetiti više vremena poboljšanju dodatka i uvođenju novijih značajki!

Kako izgraditi osjetljivu tablicu s wpDataTables

Sada kada znate zašto mislimo da je wpDataTables odličan dodatak, pokazajmo vam kako to koristiti! Postoje točno tri koraka za stvaranje nove tablice pomoću dodatka wpDataTables.

1. Instalirajte wpDataTables

Znam da bi ovo trebalo biti očito, ali prvo morate instalirati wpDataTables. Budući da je ovo premium dodatak, mora se kupiti i preuzeti s CodeCanyon-a (samo idite na kupnje i preuzmite samo “Instalable WordPress datoteku”).

Instalirajte dodatak wpDataTables

Zatim samo slijedite upute na zaslonu da biste dovršili instalaciju i aktiviranje.

2. Napravite tablicu podataka

Uz aktivni dodatak trebali biste imati potpuno novu stavku izbornika “wpDataTables”. Kliknite na njega, a zatim kliknite plavi gumb Dodaj novi kako biste započeli s stvaranjem nove tablice.

wpDataTables Stvaranje ili uvoz tablice

Vaša prva opcija će biti kako želite kreirati svoj stol. Trebalo bi biti predstavljeno pet opcija. Odabrali smo mogućnost uvoza iz CVS-a jer smo imali jednostavnu proračunsku tablicu koju smo željeli koristiti. Nakon što kliknete Dalje, od vas će se zatražiti da odaberete i prenesete datoteku.

wpDataTables Upravljanje tablicom

Nakon što prenesete svoj izvor podataka, moći ćete unijeti naziv prilagođene tablice, kao i koristiti opcije za uređivanje, dodavanje ili brisanje stupaca i redaka. Zatim kliknite zeleni gumb da biste dovršili izradu tablice.

wpDataTables Postavke tablice

Sada ste u kući! S ove stranice možete prilagoditi dodatne postavke tablica (izborno). Upotrijebite opcije “Zaslon” kako biste omogućili odgovor na kolaps na manjim uređajima, dodali vodoravnu traku za pomicanje, ograničenje širine tablice itd. Idite na karticu “Uređivanje” da biste omogućili uređivanje naprijed ili omogućite alate za tablice (ispis, kopiranje ili izvoz brze poveznice). Najbolje od svega što možete pregledati uživo tijekom uređivanja. Sjeti se samo da klikneš na Uštedjeti (ili primijenite) kvačicu ako napravite bilo kakve promjene.

Nakon što završite, kopirajte kratki kôd tablice s vrha zaslona jer će vam biti potreban za treći i posljednji korak.

3. Umetnite svoju tablicu u post ili stranicu

wpDataTables Kôd

Da biste koristili tablicu, sve što morate učiniti je zalijepiti kratki kôd u sadržaj na postu ili stranici (kao na gornjoj slici). Ovaj kratki kôd prikazat će se na prednjem dijelu vaše web stranice ovisno o načinu oblikovanja tablice:

wpDataTables tablica prednjeg dijela

Kod nas možete vidjeti da smo omogućili alate za tablice (za ispis, izvoz itd.), Filtriranje i prijave na početku. Ali to je to – vaš stol je spreman za rad!

Želite sagraditi grafikon?

Također možete izrađivati ​​grafikone pomoću wpDataTables. Nakon kreiranja tablice za početak kliknite na “Create Chart”.

wpDataTables Stvaranje grafikona

Odavde dajte svom grafikonu naziv, odaberite stil (postoje tona za odabir) i nastavite do sljedećeg zaslona na kojem ćete odabrati tablicu podataka koju želite koristiti za izradu grafikona.

wpDataTables Dodjela podataka

Nakon odabira tablice koja će se koristiti kao izvor podataka dodijelite stupcima tablice dijelovima grafikona. Ovisno o grafikonu koji odaberete, može biti potreban minimalni broj vrijednosti. U našem primjeru odabrali smo grafikon, koji zahtijeva najmanje dva stupca za grafikon (da bi bili trake). Nakon što razvrstate svoje stupce prijeđite na sljedeći korak.

wpDataTables Prilagodite grafikon

Sada za zabavni dio. Upotrijebite opcije za stiliziranje i dodavanje značajki u svoj grafikon. Postoje mnoštvo opcija za odzivnu širinu, visinu, pozadinu, obrube, fontove, naljepnice, boje, prikaz / skrivanje naslova, savjete pri kretanju i više.

Nakon dovršetka uređivanja kliknite sljedeći i kopirajte kratki kôd grafikona. Samo ga zalijepite u sadržaj posta ili stranice, spremite i idite na prednji kraj vaše web stranice da biste vidjeli svoj grafikon!

Dodajte još značajki tablice za WordPress

Želite više? Postoji niz proširenja i dodaci za wpDataTables da biste dodali još opcija tablice i grafikona za svoju WordPress web lokaciju.

wpDataTables Napredni filtri

Snažni filtri: Postavite kaskadne (složene od lijeve do desne) filtre, facijalno filtriranje (primijenite više filtera na uske rezultate), onemogućite prikaz tablice dok korisnik ne odabere filtre, dodajte značajke pretraživanja uživo i još mnogo toga. Jednostavno omogućite i konfigurirajte opciju prilikom postavljanja tablice.

Izvještaj graditelj: Napravite vlastita prilagođena Word ili Excel izvješća na temelju podataka tablica. To je posebno korisno kada dopuštate uređivanje naprednih podataka od strane korisnika (tako da prikupljate podatke možete ponovo pokrenuti i ispisati izvješća) ili ako trebate redovito regenerirati izvješća (poput mjesečnih faktura ili vremenskih kartica).

wpDataTables Izvrsni obrasci

Oblični oblici: Dodajte podršku popularnom graditelju obrasca Formidable Forms Pro. Upotrijebite Foridable Forms da biste stvorili obrazac za prikupljanje podataka (poput ankete), a zatim automatski generirajte tablicu na temelju prijava korisnika, a svako se polje pretvara u stupac.

Gravitacijski oblici: Integrirajte prijave Gravity Forms s wpDataTables kako biste automatski stvorili WordPress tablice na temelju podataka korisnika. Proširenje dodaje novi izvor podataka prilikom stvaranja tablice, tako da se lako povezuje na vaš određeni Gravity Form i vizualizira podatke.

Isprobajte wpDataTables za sebe

wpDataTables Live Sandbox

Većina programera nudi vam živi demo kako bi stekli dojam o tome što dodatak može raditi. Ali oni vam prikazuju samo izlaz, tj. Prikaz “sučelja” – koji se temelji na unaprijed određenim ulazima. Tu većina demo demonstracija aktivnih dodataka nedostaje – ne omogućuju vam postavke postavki i alata dodatka – tj. Podupirač.

wpDataTables vam, međutim, nudi punu kutiju s pijeskom na njihovom demo mjestu probati-prije-ti-kupi. To rade svi trgovci automobila – zloglasna testna vožnja. Kroz pješčanik možete testirati značajke dodatka prema sadržaju vašeg srca i vidjeti izlaz u stvarnom vremenu.

Pogledajte demonstraciju wpDataTables

Želite preuzeti kopiju za testiranje na vlastitoj instalaciji? wpDataTables nudi lite verziju koju možete preuzeti iz WordPress.org spremišta. Nema sve sjajne, vrhunske značajke koje smo gore opisali, ali je sjajan način da se vidi može li dodatak pravo rješenje za vaše potrebe.

Nabavite wpDataTables Lite

A ako vam se sviđa, možete otići naprijed i kupiti ga s potpunim mirom. Zašto? Jer ste već testirali i koristili proizvod.

Zaključak

wpDataTables jedan je od onih neophodnih dodataka za WordPress stranice koje se bave ogromnim količinama podataka. Bez obzira stvarate li školski projekt ili godišnji izvještaj tvrtke, tablice i njihova vizualizacija igraju vitalnu ulogu u predstavljanju podataka.

Nabavite wpDataTables za WordPress

Jeste li isprobali wpDataTables? Ili imate pitanja o tome što ovaj dodatak može učiniti? Ostavite komentar u nastavku – voljeli bismo da vam se javimo!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me