Com utilitzar taules de dades a WordPress: formes creatives de crear taules HTML plenes de dades

Com utilitzar taules de dades a WordPress: formes creatives de crear taules HTML plenes de dades

Com utilitzar taules de dades a WordPress: formes creatives de crear taules HTML plenes de dades
СОДЕРЖАНИЕ
02 июня 2020

Les taules mai no han estat especialment útils per a WordPress. Bàsicament, si voleu mostrar taules de dades a WordPress, molt probablement acabareu elaborant tota la presentació a mà, fent servir HTML i CSS en brut per aconseguir que tot ho vegi bé..


I no, no m’he oblidat del nou editor de blocs. Tot i que, certament, facilita la creació i la visualització de taules, encara no és una solució perfecta, especialment per a grans conjunts de dades.

De totes maneres, ja que les taules que hem estat utilitzant molt a les nostres publicacions aquí a CodeinWP, vull compartir algunes de les nostres principals estratègies amb vosaltres avui.

En aquesta guia, presentaré algunes idees creatives sobre com podeu utilitzar taules HTML / taules de dades a WordPress, fer-les semblants impecables and i també assegurar-me que siguin optimitzades per a mòbils i que siguin compatibles amb SEO..
Com utilitzar les taules de dades a WordPress

El nostre enfocament de tres taules de dades a WordPress

Per resumir ràpidament el nostre enfocament, hem estat treballant amb taules de dades a WordPress de tres maneres diferents:

(a) Utilitzar taules senzilles i sensibles per presentar dades bàsiques i fer que les parts de les nostres publicacions siguin més fàcils de digerir.

(b) Utilitzant una cosa que podríem cridar "taules de nivell mitjà" per permetre algunes funcions addicionals, com ara l’ordenació dels usuaris i el ressaltat de la fila del ratolí.

Exemple en directe:

Empresa que allotja Valoració / Popularitat de l’estudi 5 Popularitat del mercat (Alexa)
GoDaddy3.50,41223
Bluehost3.30,261780
HostGator3.70,301872
WPEngine4.40,374065
SiteGround4.61.005708
DreamHost4.10,2210030
A2 Hosting3.80,1612709
Núvols4.50,3918544
Kinsta4.80,2523350
Volant4.60,1834689

De la nostra enquesta d’allotjament

(c) Utilitzeu taules autofrescants que permeten funcionaments interns molt més avançats que no són prou visibles per a l’usuari del frontend. Per exemple, la taula aquí es crea basada en un full de Google i s’actualitza automàticament (és a dir, cada cop que actualitzem el full, la taula també s’actualitza).

Exemple:demostració de la taula d'amfitrió visualitzador

A continuació us mostrem com podeu emular el nostre plantejament i crear-vos algunes taules interessants de dades a WordPress:

Estratègia # 1: utilitzeu Visualizer per donar vida a les vostres taules

Comencem en gran mesura amb l’enfocament més avançat del grup. Aleshores, farem que les coses siguin més senzilles a mesura que anem més avall en aquesta publicació.

Visualitzador és un dels nostres propis plugins i l’eina principal per fer possible aquesta primera estratègia de maneig de taules de dades a WordPress.

  • ��️ Què és Visualizer? És un complement que us permet crear gràfics, gràfics i taules i, a continuació, incloure-les a les vostres publicacions de blocs mitjançant codis breus o blocs. És senzill d’utilitzar si només necessiteu el conjunt bàsic de funcions, però també molt potent si voleu fer una mica més.

Una de les coses més interessants sobre Visualizer és que podeu carregar les vostres dades, tant per a taules com per a gràfics, des de diverses fonts. Per exemple, quan creeu una taula nova, podeu importar de:

  • un fitxer CSV,
  • un URL (inclosos els fulls de càlcul de Google),
  • un altre gràfic,
  • WordPress (creant filtres / fluxos de treball, que després naveguen per la base de dades de WordPress i aportin les dades que desitgeu),
  • la base de dades directament (mitjançant consultes SQL brutes),
  • a més, també podeu introduir dades de forma manual.


Visualitzador: administrador de taules i gràfics per a WordPress

Autor (a): Tema


90% de valoració


40.000 + instal·lacions


WP 3.5 + Requereix

Més informació

visualitzador.zip

Versió actual: 3.4.3

Darrera actualització: 4 de maig de 2020


90% de valoració


40.000 + instal·lacions


WP 3.5 + Requereix

Pàgina de complements WordPress.org


Visualitzador: administrador de taules i gràfics per a WordPress

D’acord, doncs, on és que aquí hi ha joc de les vostres taules?

El difícil de les taules, en general, és que crear-les manualment requereix bàsicament el mateix temps que les actualitzem. Més aviat hauríem de fer de les taules una tasca única i que tinguem tot el dia actualitzat de forma automàtica.

Amb Visualizer, podeu triar obtenir dades de la vostra taula des d’una URL i, a continuació, configurar la importació perquè es repeteixi cada hora / 12 hores / dia / tres dies.

El que això significa efectivament és que obté un taula que es refresca automàticament en funció dels canvis de la font. Llegiu: no cal tornar-hi i actualitzar-lo a mà.

A continuació, es detallen quatre maneres creatives d’utilitzar-ho:

Informeu els vostres estudis de cas o publicacions d’anàlisi (automàticament)

Ens hem ocupat del mercat d’allotjament de WordPress. Hi ha diverses publicacions sobre el tema, i la majoria necessiten actualitzacions en curs.

Una de les versions de la nostra principal comparació d’allotjament inclou una taula en viu que ressalta els temps de càrrega dels amfitrions presentats. Sembla així (taula en directe):

.visualizer-41792oddTableRow {background-color: #eaeaea! important;}

(Potser no ho veieu en acció si aneu a aquesta publicació; canviem aquesta amb prou freqüència, posant a prova moltes coses.)

Tota la taula es recupera automàticament a partir de fulls de càlcul de Google. Fins i tot els logotips i enllaços s’emmagatzemen a fulls de càlcul de Google (en format HTML en brut). Sempre que actualitzem els temps de càrrega, per exemple, també s’actualitzen a la taula. Per no dir, l’usuari pot ordenar la taula.

Configurar això no és gens difícil:

1. Prepareu les vostres coses de Google SheetStandard. Aquí teniu un exemple:

exemple de full

Aleshores, "publicar-lo al web" segons aquesta guia.
2. Creeu una taula a VisualizerFirst i instal·leu la versió Visualitzador complement, duh!

Anar a Media → Biblioteca del visualitzador i feu clic a Afegir nou. Recollir Taula.

A la finestra de configuració, seleccioneu Importa dades de l’URL, entrar Programació d’importació i després introduïu l’URL de la importació i la programació. Així:

programació d'importació

Desa la taula.
3. Afegiu la taula a una publicació / pàgina Incloeu-la mitjançant un codi curt o mitjançant l’editor de blocs. Això sí, teniu les vostres taules de dades a WordPress!

Una vegada més, amb aquesta configuració, podeu obtenir dades de les taules automàticament i, a més, tenir actualitzades automàticament aquestes taules.

Mantingueu actualitzades diverses taules en diverses publicacions (automàticament)

Això està relacionat amb l’escenari anterior, però l’angle és una mica diferent.

Bàsicament, res no us impedeix utilitzar el mateix full de Google que la font de dades de diverses taules.

El que això significa és que podeu incloure taules similars a diverses publicacions / pàgines i no us haureu de preocupar de que no seran desviades de la sincronització amb el pas del temps (per exemple, en actualitzareu una, però oblidareu d’actualitzar l’altra, etc.).

Quan configureu la vostra taula a Visualizer, podeu anar a configuracions avançades i ajustar diverses coses com la paginació, el nombre de files, desactivar / activar la classificació d’usuaris, activar la cerca, etc. Això vol dir que les taules encara poden semblar diferents tot i que utilitzen el mateix origen de dades.

Mantingueu al dia els vostres números de trànsit / usuaris / vendes (automàticament)

Hi ha hagut una tendència entre les empreses del web a compartir diversos números / indicadors com ara trànsit, vendes, nombre d’usuaris servits, etc. als seus llocs web.

Tanmateix, no tothom vol incorporar serveis externs i, per tant, no poder-los moderar de cap manera.

L’ideal és que, encara que siguis molt transparent, encara no voldries despertar-te i esbrinar que una incrustació del carro de la compra o de la teva eina de trànsit mostra una baixada enorme, mentre que el teu títol encara podria dir "mireu que bé ens ho passem!"

Si primer afegiu una altra capa i importeu les dades a un full de Google, podreu moderar tots els canvis abans d’incloure’s a una taula de trànsit i vendes i entrar en directe al lloc..

La configuració és la mateixa que en els escenaris anteriors. Només cal que creeu un full de Google nou, importeu o introduïu els vostres números i, després, connecteu-lo a un quadre o gràfic del visualitzador.

Consulteu la vostra base de dades (automàticament)

Visualizer té una característica més divertida de la funda; pot importar les dades de la taula des de la base de dades de WordPress mitjançant una consulta SQL bruta.

Coses força avançades, sí, però també us ofereix moltes possibilitats si esteu disposats a experimentar.

Algunes idees ràpides:

Primer, podeu mostrar fàcilment les publicacions més comentades. Podeu utilitzar aquesta llista no només als informes de transparència, sinó també a la pàgina d’arxius. Exemple:

comentat

Per crear una taula així, simplement entra a Visualizer, crea una nova taula i selecciona Importació de base de dades.

A la finestra de consulta, podeu posar una cosa així:

SELECCIONA post_title AS Publicar, COUNT (DISTINCT c.comment_ID) COM COMENTARIS DE wp_posts p ESQUER UNA ESQUEMA wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10

Es mostrarà una taula de les 10 publicacions més comentades.

Podeu complicar la consulta per obtenir també l’URL, de manera que pugueu fer que els títols de la publicació siguin en directe. Aquest és només un exemple. A continuació, es detallen algunes de les coses que podeu fer:

  • enumera totes les publicacions d’una determinada categoria o escrites per un autor
  • mireu les taules que altres plugins utilitzen per emmagatzemar les dades, i obteniu dades rellevants
  • mostra els vostres productes més venuts de WooCommerce, juntament amb el nombre de vendes, enllaços, preus, el que vulgueu
  • feu el mateix amb Descàrregues digitals fàcils; aquí n’hi ha consultes a punt

Es tracta d’això quan es tracta Visualitzador i com ho fem servir. Però també hi ha altres solucions si no necessiteu aquest tipus d’automatització avançada:

Utilitzeu TablePress per ordenar i editar taules de forma fiable

També som grans fans Taula de premsa i l’hem utilitzat en diverses publicacions.

Per exemple, hi ha una taula gran aquí: els primers 100 jugadors del mercat de temes de WordPress. Vista prèvia:

exemple de directori temàtic

El que ens agrada de TablePress és que podem alinear les files fàcilment, ocultar files, duplicar les files i també oferir a l’usuari alguns controls per ordenar la taula.

Per exemple, per a aquesta taula específica, tenim algunes columnes més al fons que no mostrem (les vermelles). TablePress no ens obliga a suprimir-los, sinó que només els podem amagar.

taula de taula oculta

Utilitzeu Shortcodes Ultimate per fer una pestanya a les taules HTML

Personalment, Dreceres últimes (SU) és un dels meus plugins preferits de sempre.

Entre els seus múltiples dreceres, també n’hi ha un que podeu fer perquè les vostres taules HTML estàndard siguin molt més boniques.

Aquí hi ha una taula en la nostra publicació que compara els serveis VPN principals:

la seva taula

Es va crear mitjançant HTML en brut i, a continuació, s’hi va afegir un codi curt SU. Aquest:

[su_table] [/ su_table]

Tots els estils i les sanefes de fila que veieu són de SU.

En altres paraules, si el vostre tema no té CSS especialment agradable per a la gestió de taules, utilitzeu SU.

�� Nota; Les tres solucions de què es parla en aquest post: Visualizer, TablePress i SU, poden generar taules preparades per a mòbils i de resposta.

Conclusió

Us animo a experimentar amb aquests tres complements. Ens encanta Visualizer, ja que és la nostra pròpia creació, però hem de reconèixer que les altres dues són prou bones com per a tasques específiques.!


Visualitzador: administrador de taules i gràfics per a WordPress

Autor (a): Tema


90% de valoració


40.000 + instal·lacions


WP 3.5 + Requereix

Més informació

visualitzador.zip

Versió actual: 3.4.3

Darrera actualització: 4 de maig de 2020


90% de valoració


40.000 + instal·lacions


WP 3.5 + Requereix

Pàgina de complements WordPress.org


Visualitzador: administrador de taules i gràfics per a WordPress


Taula de premsa

Autor (a): Tobias Bäthge


Valoració 100%


800.000 + instal·lacions


WP 5.3 + Requereix

Més informació

taula de pressió.1.11.zip

Versió actual: 1.11

Darrera actualització: 1 d’abril de 2020


Valoració 100%


800.000 + instal·lacions


WP 5.3 + Requereix

Pàgina de complements WordPress.org


Taula de premsa


Plugin de shortcodes de WordPress: shortcodes ultimate

Autor (a): Vladimir Anokhin


98% Valoracions


800.000 + instal·lacions


WP 4.6 + Requereix

Més informació

shortcodes-ultimate.5.9.0.zip

Versió actual: 5.9.0

Darrera actualització: 24 de maig de 2020


98% Valoracions


800.000 + instal·lacions


WP 4.6 + Requereix

Pàgina de complements WordPress.org


Plugin de shortcodes de WordPress: shortcodes ultimate

Feu servir taules de dades a WordPress?

Què en penseu de les taules i el seu lloc a la interfície d’interès moderna de WordPress?

L’editor de blocs de Gutenberg ha fet que les taules siguin molt més fàcils d’utilitzar, de manera que els usuaris casuals ara estaran més disposats a experimentar amb ells. Al cap i a la fi, les taules són una de les coses clàssiques que tots els que han utilitzat MS Word ja coneixen prou. Per què no seríeu capaços? "només cal afegir-los" a WordPress, no?

Fas servir moltes taules de dades a WordPress? Si és així, com els creeu??

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector