Com afegir taules dinàmiques a WordPress sense cap HTML

 Com afegir taules dinàmiques a WordPress sense cap HTML

Patrick Harvey

L'última vegada que vaig provar d'afegir una taula al meu bloc de WordPress, vaig acabar eliminant-ho tot i fent servir una llista amb vinyetes.

Em sembla familiar?

Hi ha molts temes de WordPress impressionants amb la possibilitat de crear taules d'aspecte fantàstic. I, per descomptat, poden semblar bé al principi, però no hi pots fer gran cosa.

Vols dades filtrables? No.

Voleu que la taula respongui per a mòbils? No.

Vols importar dades d'un CSV? No és una oportunitat.

Aquí teniu les bones notícies:

Amb el connector adequat, podeu crear taules dinàmiques molt funcionals. El tipus de coses que us permeten mostrar dades filtrables.

Amb gràfics i tot tipus.

Son bé? Fem una ullada a com es pot fer amb wpDataTables.

Nota: Tot i que aquest tutorial se centra en taules interactives, és possible que us sigui útil el nostre tutorial sobre la creació de taules responsives mòbils amb wpDataTables. Feu clic aquí per comprovar-ho. Aquest nou tutorial té en compte la interfície d'usuari actualitzada i les funcions addicionals llançades recentment a wpDataTables.

Aquest connector us permet crear taules boniques sense cap coneixement d'HTML

wpDataTables és un complement de WordPress premium que fa que el procés de creació i publicació de taules al vostre lloc web molt fàcil. És lleuger, intuïtiu i fa la feina en qüestió de minuts, deixant-vos menys codi per navegar i més temps.al bloc.

Obteniu wpDataTables

Un dels punts clau d'aquest connector és que no necessiteu cap coneixement previ d'HTML per posar-lo en funcionament. Tot es fa dins d'una pàgina de configuració fàcil d'utilitzar. Per publicar només cal copiar i enganxar un codi curt i ja està a punt.

Per als blocaires i les empreses, aquesta és una gran notícia perquè us permet mostrar moltes dades d'una manera concisa i fàcil de fer. manera de resumir.

Fins i tot el podeu utilitzar per a:

  • Un catàleg de productes
  • Gràfics de comparació de productes
  • Llistes de preus
  • Recollida de dades dels usuaris
  • Resultats esportius
  • Seguiment del vostre progrés per a qualsevol cosa que inclogui números (per exemple, un informe d'ingressos de bloc)

El les possibilitats són infinites.

Crear una taula de principi a fi: una guia pas a pas

Utilitzar el connector wpDataTables per crear taules boniques, clares i totalment funcionals al vostre lloc web de WordPress és senzill .

A continuació us indiquem com començar:

Pas 1: tingueu el fitxer a punt

A continuació, he creat un exemple de document d'Excel per a una sèrie de despeses aleatòries. Això inclou diverses columnes, com ara la data, el mètode de pagament i el cost.

Assegureu-vos que les vostres dades es mostren de manera similar, en cas contrari, el connector tindrà dificultats per definir les columnes de la taula.

Pas 2: creeu una taula nova

Navegueu a les wpDataTables a la part esquerra del vostre WordPressTauler.

Si feu clic a aquest enllaç, us portarà a la pantalla de dalt. Aquí és on creareu i afegireu la vostra taula nova:

Després de fer clic al botó "Afegeix nou", veureu aquesta pantalla. Aquí començareu a configurar els paràmetres de la vostra taula, de manera que funcioni i es vegi com voleu:

Pas 3: defineix les característiques de la taula

A les tres primeres seccions de la pàgina de configuració de la taula, podeu fer les coses següents:

  • Crear un títol
  • Seleccioneu si voleu mostrar el títol de la taula a la pàgina
  • Seleccioneu un tipus de font d'entrada per a la vostra taula

Aquests són els paràmetres més bàsics de la taula.

Vegeu també: 3 grans raons per les quals hauríeu de fer un bloc amb WordPress autoallotjat

Feu clic a "Carga fitxer" i cerqueu el vostre document. Les taules que podeu crear poden ser tan complicades com necessiteu.

Com podeu veure, he donat a la meva taula un títol rellevant, he seleccionat el tipus de fitxer Excel al menú desplegable. i he penjat el meu fitxer a WordPress.

Més avall de la pàgina, trobareu més configuracions per personalitzar la vostra taula:

Aquests són:

  • Responsive : permet que la taula es mostri de manera diferent a ordinadors, tauletes i mòbils
  • Desplaçable : permet desplaçar la taula horitzontalment
  • Oculta la taula fins que la pàgina estigui completament carregada – Útil per carregar pàgines lentament
  • Filtret avançat – Per mostrar un filtre a sota de cada columna
  • Filtra en el formulari –Per a un filtre dins del mateix formulari
  • Eines de taula : per a opcions com copiar, desar a Excel i desar a CSV incrustat al formulari
  • Activar l'ordenació – Això us permet ordenar les taules
  • Limita el disseny de la taula – Limiteu l'amplada de la taula al 100% del contenidor principal
  • Llargada de visualització – Definiu quantes entrades es mostren a una pàgina

Fent clic a "Vista prèvia", podeu veure la vostra taula i canviar qualsevol configuració que considereu necessària perquè es vegi com necessiteu.

Un cop hàgiu seleccionat les opcions que millor s'adapten al tipus de taula que voleu mostrar, és el moment de fer clic al botó "desa".

Vegeu també: 40 tipus atractius de publicacions de bloc i amp; Contingut que pots crear

Si voleu personalitzar més les columnes, un cop hàgiu Si heu fet clic a "desa", podreu desplaçar-vos més avall per la pàgina per obtenir més opcions. La configuració predeterminada es genera automàticament, però amb això podeu canviar el color de cada columna, la columna i el tipus de filtre (com ara la data, l'hora i el text).

A continuació, he afegit alguns colors i he editat la columna. tipus de text, nombre i cadena.

Pas 4: deseu i copieu el codi curt

Un cop hàgiu desat la taula, feu clic a "Tancar" i us dirigirà de nou al pàgina d'inici del connector. Ara hauríeu de veure la vostra taula que heu creat, el títol i el tipus de la vostra taula, el codi curt per introduir-lo a la vostra publicació o pàgina i l'opció de duplicar-la.

Vull mostrar aquesta taula en una pàgina. , per tantHauria de copiar el codi curt i després anar a la pàgina que vull editar.

Pas 5: afegiu el codi curt a la publicació o a la pàgina

Per afegir la vostra taula a una pàgina , és tan senzill com enganxar el codi curt a l'editor de pàgines. Seleccioneu on de la pàgina voleu mostrar la vostra taula, enganxeu el codi i continueu elaborant el vostre contingut:

Pas 6: publicació

Un cop hagis arribat a la publicació botó de la vostra pàgina, la vostra taula hauria de semblar així. Com podeu veure, és clar, coherent, perfectament alineat i conté totes les meves dades d'una manera fàcil de navegar:

Les opcions de la part superior de la taula permetran als usuaris exportar el contingut de la taula. en diversos formats. També podeu filtrar els resultats fàcilment a la part frontal del vostre lloc.

Obteniu wpDataTables

Quines altres taules podeu crear?

No obstant això, no us limiteu només a taules simples basades en CSV. Les taules de dades WP poden mostrar una àmplia gamma de dades en diversos formats.

A continuació es mostra un exemple d'una taula totalment funcional, sensible i editable amb diverses columnes i opcions.

Aquesta taula és Basat en MySQL amb filtres per ordenar el contingut en funció de les necessitats de l'usuari:

Aquesta taula basada en matrius PHP està serialitzada i inclou imatges; això afegeix una dinàmica i una funcionalitat completament diferents que moltes botigues de comerç electrònic trobarien especialment útils. :

No us limiteu només als fitxers CSVtampoc. WP Data Tables també permet l'ús de fitxers basats en Excel, la qual cosa us permet fer ús de les moltes característiques específiques que inclou:

Altres funcions de wpDataTable que val la pena esmentar

  • wpDataChart wizard : us permet transformar les vostres dades en un gràfic o gràfic en uns quants passos senzills. Actualment admet 3 motors de renderització: Google Charts, Highcharts i Chart.js. Trobeu més documentació aquí.
  • Format condicional : us permet ressaltar cel·les, files i columnes en funció del seu contingut. És útil sobretot si la taula és completament numèrica. Trobeu més documentació aquí.
  • Columnes de fórmules : us permet afegir una columna que es pot utilitzar per calcular una xifra a partir dels nombres establerts a altres cel·les. Trobeu més documentació aquí.
  • Columnes de data i hora : s'utilitza per a cel·les que contenen tant dates com hores. Apareixeran automàticament en el format que hàgiu establert a la pàgina de configuració. Trobeu més documentació aquí.
  • Fila Suma/Totals : s'utilitza per a columnes numèriques, us permet calcular la suma de tots els valors. Trobeu més documentació aquí.
  • Report Builder : és un complement per a wpDataTables. El generador d'informes crea a l'instant documents i fulls de càlcul que omplen les vostres plantilles amb dades reals del vostre lloc de WordPress. Trobeu més documentació aquí.
  • Taules de detalls mestres : és un complement per a wpDataTables que permettu i els visitants del teu lloc per veure els detalls de cada fila amb un simple clic. Trobeu més documentació aquí.
Obteniu wpDataTables

Pensaments finals

Les taules són una manera fantàstica de mostrar dades. I quan afegiu funcions dinàmiques com ara el filtratge, milloreu molt les coses per als visitants del vostre lloc web.

Us he explicat com crear una taula dinàmica a WordPress penjant dades des de Microsoft Excel (o utilitzant qualsevol altra eina de full de càlcul). Però hi ha moltes més coses possibles.

Fins i tot pots convertir qualsevol de les teves taules en gràfics o gràfics, i molt més.

Ara és hora de començar amb la teva pròpia taula: gaudeix-ne !

Lectura relacionada: 5 connectors de taula potents i responsius per a mòbils per a WordPress.

Divulgació: Això la publicació està patrocinada però les nostres opinions són les nostres.

Patrick Harvey

Patrick Harvey és un escriptor experimentat i màrqueting digital amb més de 10 anys d'experiència en el sector. Té un ampli coneixement de diversos temes com ara blogs, xarxes socials, comerç electrònic i WordPress. La seva passió per escriure i ajudar la gent a tenir èxit en línia l'ha portat a crear publicacions perspicaces i atractives que aportin valor al seu públic. Com a usuari competent de WordPress, Patrick està familiaritzat amb els detalls de la creació de llocs web d'èxit, i fa servir aquest coneixement per ajudar tant les empreses com les persones a establir la seva presència en línia. Amb un gran ull pels detalls i un compromís inquebrantable amb l'excel·lència, Patrick es dedica a oferir als seus lectors les últimes tendències i consells en la indústria del màrqueting digital. Quan no està fent blocs, es pot trobar a Patrick explorant llocs nous, llegint llibres o jugant a bàsquet.