Verwendung von Datentabellen in WordPress – Kreative Möglichkeiten zum Erstellen datengefüllter HTML-Tabellen

Verwendung von Datentabellen in WordPress – Kreative Möglichkeiten zum Erstellen datengefüllter HTML-Tabellen

Verwendung von Datentabellen in WordPress – Kreative Möglichkeiten zum Erstellen datengefüllter HTML-Tabellen
СОДЕРЖАНИЕ
02 июня 2020

Tabellen waren noch nie etwas, in dem WordPress besonders gut ist. Wenn Sie Datentabellen in WordPress präsentieren möchten, werden Sie höchstwahrscheinlich die gesamte Präsentation von Hand erstellen – mit rohem HTML und CSS, damit alles gut aussieht.


Und nein, ich habe den neuen Blockeditor nicht vergessen. Dies erleichtert zwar das Erstellen und Anzeigen von Tabellen insgesamt, ist jedoch insbesondere für große Datenmengen keine perfekte Lösung.

Da Tabellen in unseren Beiträgen hier bei CodeinWP häufig verwendet werden, möchte ich Ihnen heute einige unserer Top-Strategien vorstellen.

In diesem Handbuch werde ich einige kreative Ideen vorstellen, wie Sie HTML-Tabellen / Datentabellen in WordPress verwenden können, sie makellos aussehen lassen also und sicherstellen, dass sie für Mobilgeräte optimiert und gleichzeitig SEO-freundlich sind.
Verwendung von Datentabellen in WordPress

Unser dreigliedriger Ansatz für Datentabellen in WordPress

Um unseren Ansatz schnell zusammenzufassen, haben wir in WordPress auf drei verschiedene Arten mit Datentabellen gearbeitet:

(ein) Verwenden Sie einfache reaktionsschnelle und gut aussehende Tabellen, um grundlegende Daten darzustellen und Teile unserer Beiträge leichter verdaulich zu machen.

(b) Mit etwas, das wir nennen könnten "Mid-Tier-Tische" um einige zusätzliche Funktionen wie das Sortieren von Benutzern und das Hervorheben von Zeilen beim Bewegen der Maus zu ermöglichen.

Live-Beispiel:

Hosting CompanyRating / 5Survey PopularityMarket Popularity (Alexa)
Los Papa3.50,41223
Bluehost3.30,261780
HostGator3.70,301872
WPEngine4.40,374065
SiteGround4.61,005708
DreamHost4.10,2210030
A2 Hosting3.80,1612709
Wolkenwege4.50,3918544
Kinsta4.80,2523350
Schwungrad4.60,1834689

Aus unserer Hosting-Umfrage

(c) Verwenden von Tabellen mit automatischer Aktualisierung, die ein viel fortgeschritteneres Innenleben ermöglichen, das für den Benutzer im Frontend nicht ganz sichtbar ist. Beispielsweise basiert die Tabelle hier auf einem Google Sheet und wird automatisch aktualisiert (dh, wenn wir das Blatt aktualisieren, wird auch die Tabelle aktualisiert)..

Beispiel:Visualizer Host Table Demo

So können Sie unseren Ansatz emulieren und einige coole Datentabellen in WordPress erstellen:

Strategie 1: Verwenden Sie Visualizer, um Ihre Tabellen zum Leben zu erwecken

Beginnen wir groß mit dem wahrscheinlich fortschrittlichsten Ansatz der Gruppe! Dann werden wir die Dinge einfacher machen, wenn wir weiter unten in diesem Beitrag vorgehen.

Visualizer ist eines unserer eigenen Plugins und das wichtigste Tool, um diese erste Strategie für den Umgang mit Datentabellen in WordPress zu ermöglichen.

  • ��️ Was ist Visualizer? Mit diesem Plugin können Sie Diagramme, Grafiken und Tabellen erstellen und diese dann über Shortcodes oder Blöcke in Ihre Blog-Posts aufnehmen. Es ist einfach zu bedienen, wenn Sie nur die grundlegenden Funktionen benötigen, aber auch sehr leistungsstark, wenn Sie etwas mehr unter der Haube basteln möchten.

Eines der coolen Dinge an Visualizer ist, dass Sie Ihre Daten – sowohl für Tabellen als auch für Diagramme – aus mehreren Quellen laden können. Wenn Sie beispielsweise eine neue Tabelle erstellen, können Sie Folgendes importieren:

  • eine CSV-Datei,
  • eine URL (einschließlich Google Sheets),
  • ein anderes Diagramm,
  • WordPress (durch Erstellen von Filtern / Workflows, die dann die WordPress-Datenbank durchsuchen und die gewünschten Daten aufrufen),
  • die Datenbank direkt (unter Verwendung von SQL-Rohabfragen),
  • Außerdem können Sie Daten auch manuell eingeben.


Visualizer: Tabellen- und Diagramm-Manager für WordPress

Autor (en): Themeisle


90% Bewertungen


Über 40.000 Installationen


WP 3.5 + Erforderlich

Mehr Info

visualizer.zip

Aktuelle Version: 3.4.3

Letzte Aktualisierung: 4. Mai 2020


90% Bewertungen


Über 40.000 Installationen


WP 3.5 + Erforderlich

WordPress.org Plugin Seite


Visualizer: Tabellen- und Diagramm-Manager für WordPress

Okay, wo kommt hier das Leben Ihrer Tische ins Spiel??

Das Schwierige an Tabellen ist im Allgemeinen, dass das Erstellen von Tabellen im Grunde genauso lange dauert wie das spätere Aktualisieren. Wir alle möchten Tabellen lieber zu einer einmaligen Aufgabe machen und alles automatisch auf dem neuesten Stand halten.

Mit Visualizer können Sie Daten für Ihre Tabelle von einer URL abrufen und den Import so einstellen, dass er jede Stunde / 12 Stunden / Tag / drei Tage wiederholt wird.

Was dies effektiv bedeutet, ist, dass Sie eine erhalten Tabelle, die sich automatisch aktualisiert basierend auf den Änderungen der Quelle. Lesen Sie: Es ist nicht erforderlich, darauf zurückzugreifen und es von Hand zu aktualisieren.

Hier sind vier kreative Möglichkeiten, die Sie nutzen können:

Halten Sie Ihre Fallstudien oder Analysebeiträge (automatisch) auf dem neuesten Stand.

Wir waren stark im WordPress-Hosting-Markt. Wir haben eine Reihe von Beiträgen zu diesem Thema, von denen die meisten laufend aktualisiert werden müssen.

Eine der Versionen unseres Haupt-Hosting-Vergleichs enthält eine Live-Tabelle, in der die Ladezeiten der vorgestellten Hosts aufgeführt sind. Es sieht so aus (Live-Tisch):

.visualizer-41792oddTableRow {Hintergrundfarbe: #eaeaea! wichtig;}

(Sie werden es möglicherweise nicht in Aktion sehen, wenn Sie jetzt zu diesem Beitrag gehen. Wir ändern diesen ziemlich häufig und testen viele Dinge.)

Diese gesamte Tabelle wird automatisch von Google Sheets abgerufen. Sogar die Logos und Links werden in Google Sheets gespeichert (als Roh-HTML). Wenn wir beispielsweise die Ladezeiten aktualisieren, werden sie auch in der Tabelle aktualisiert. Ganz zu schweigen davon, dass der Benutzer die Tabelle sortieren kann.

Das einzurichten ist überhaupt nicht schwierig:

1. Bereiten Sie Ihre Google SheetStandard-Inhalte vor. Hier ein Beispiel:

Blatt Beispiel

Dann, "veröffentlichen Sie es im Web" gemäß diese Anleitung.
2. Erstellen Sie eine Tabelle in VisualizerFirst und installieren Sie die Visualizer Plugin, duh!

Gehe zu Medien → Visualizer-Bibliothek und klicken Sie auf Neue hinzufügen. Wählen Sie Tabelle.

Wählen Sie im Setup-Fenster die Option Daten von URL importieren, gehen in Import planen Geben Sie dann die URL des Imports und den Zeitplan ein. Wie so:

Import planen

Speichern Sie die Tabelle.
3. Fügen Sie die Tabelle einem Beitrag / einer Seite hinzu. Schließen Sie die Tabelle über einen Shortcode oder den Blockeditor ein. Das war’s, Sie haben Ihre Datentabellen in WordPress!

Auch bei diesem Setup können Sie Daten für Tabellen automatisch abrufen und diese Tabellen dann automatisch aktualisieren lassen.

Halten Sie mehrere Tabellen über mehrere Posts hinweg auf dem neuesten Stand (automatisch)

Dies hängt mit dem vorherigen Szenario zusammen, aber der Winkel ist etwas anders.

Grundsätzlich hindert Sie nichts daran, dasselbe Google Sheet als Datenquelle für mehrere Tabellen zu verwenden.

Dies bedeutet, dass Sie ähnliche Tabellen über mehrere Posts / Seiten hinweg einfügen können und sich keine Sorgen machen müssen, dass sie im Laufe der Zeit nicht mehr synchron sind (z. B. aktualisieren Sie eine, vergessen jedoch, die andere zu aktualisieren usw.)..

Wenn Sie Ihre Tabelle in Visualizer einrichten, können Sie in die erweiterten Einstellungen gehen und verschiedene Dinge wie Paginierung, Anzahl der Zeilen, Deaktivieren / Aktivieren der Benutzersortierung, Aktivieren der Suche usw. anpassen. Dies bedeutet, dass Ihre Tabellen immer noch unterschiedlich aussehen können, obwohl sie dieselbe Datenquelle verwenden.

Halten Sie Ihre Traffic- / Benutzer- / Verkaufsnummern (automatisch) auf dem neuesten Stand.

Es gibt einen Trend unter Web-Unternehmen, verschiedene Zahlen / Indikatoren wie Verkehr, Umsatz, Anzahl der bedienten Benutzer usw. auf ihren Websites zu teilen.

Allerdings möchte nicht jeder externe Dienste einbetten und kann sie daher in keiner Weise moderieren.

Selbst wenn Sie sehr transparent sind, möchten Sie im Idealfall nicht aufwachen und feststellen, dass eine Einbettung aus Ihrem Warenkorb oder Verkehrstool einen enormen Rückgang aufweist – während Ihre Überschrift möglicherweise noch sagt "Schau, wie gut es uns geht!"

Wenn Sie eine weitere Ebene hinzufügen und die Daten zuerst in ein Google Sheet importieren, können Sie alle Änderungen moderieren, bevor sie in eine Verkehrs- / Verkaufstabelle abgerufen und auf der Website live geschaltet werden.

Das Setup ist das gleiche wie in den vorherigen Szenarien. Erstellen Sie einfach ein neues Google Sheet, importieren oder geben Sie Ihre Zahlen ein und verbinden Sie es mit einer Visualizer-Tabelle oder einem Visualizer-Diagramm.

Fragen Sie Ihre Datenbank ab (automatisch)

Visualizer hat noch eine coole Funktion im Ärmel. Es kann Tabellendaten direkt aus Ihrer WordPress-Datenbank über eine SQL-Rohabfrage importieren.

Ziemlich fortgeschrittenes Zeug, ja, bietet Ihnen aber auch viele Möglichkeiten, wenn Sie experimentierfreudig sind.

Einige schnelle Ideen:

Erstens können Sie ganz einfach Ihre am meisten kommentierten Beiträge präsentieren. Sie können eine solche Liste nicht nur in Transparenzberichten, sondern auch auf Ihrer Archivseite verwenden. Beispiel:

kommentiert

Um eine solche Tabelle zu erstellen, rufen Sie einfach Visualizer auf, erstellen Sie eine neue Tabelle und wählen Sie Aus Datenbank importieren.

Im Abfragefenster können Sie Folgendes eingeben:

SELECT post_title AS Post, COUNT (DISTINCT c.comment_ID) AS Kommentare FROM wp_posts p LEFT JOIN wp_comments c ON p.id = c.comment_post_ID GROUP BY p.ID ORDER BY Comments DESC LIMIT 10

Daraufhin wird eine Tabelle Ihrer 10 am häufigsten kommentierten Beiträge angezeigt.

Sie können die Abfrage komplizieren, um auch die URL abzurufen, damit Sie diese Post-Titel live schalten können. Dies ist nur ein Beispiel. Hier sind einige andere Dinge, die Sie tun können:

  • Listen Sie alle Ihre Beiträge aus einer bestimmten Kategorie oder von einem Autor geschrieben
  • Schauen Sie sich Tabellen an, in denen andere Plugins ihre Daten speichern, und rufen Sie relevante Daten von ihnen ab
  • Zeigen Sie Ihre Bestseller-Produkte von WooCommerce zusammen mit der Anzahl der Verkäufe, Links, Preise und was auch immer Sie wünschen an
  • Machen Sie dasselbe mit Easy Digital Downloads. hier sind einige vorgefertigte Abfragen

Das ist alles, wenn es darum geht Visualizer und wie wir es verwenden. Es gibt aber auch andere Lösungen, wenn Sie diese Art der fortschrittlichen Automatisierung nicht benötigen:

Verwenden Sie TablePress für zuverlässiges Sortieren und Bearbeiten von Tabellen

Wir sind auch große Fans von TablePress und habe es in einer Reihe unserer Beiträge verwendet.

Zum Beispiel gibt es hier einen großen Tisch, an dem die 100 besten Spieler des WordPress-Themes-Marktes aufgelistet sind. Vorschau:

Beispiel für ein Themenverzeichnis

Was uns an TablePress gefällt, ist, dass wir die Zeilen einfach neu ausrichten, Zeilen ausblenden, Zeilen duplizieren und dem Benutzer einige Steuerelemente zum Sortieren der Tabelle geben können.

Für diese bestimmte Tabelle haben wir beispielsweise einige weitere Spalten im Backend, die wir nicht anzeigen (die roten). TablePress zwingt uns nicht, sie zu löschen – wir können sie einfach aus der Anzeige ausblenden.

Tischpresse versteckt

Verwenden Sie Shortcodes Ultimate, um Ihre HTML-Tabellen zu pimpen

Persönlich, Shortcodes Ultimate (SU) ist eines meiner Lieblings-Plugins aller Zeiten.

Unter den vielen Shortcodes gibt es auch einen, mit dem Sie Ihre Standard-HTML-Tabellen viel schöner aussehen lassen können.

Hier ist eine Tabelle in unserem Beitrag, in der die wichtigsten VPN-Dienste verglichen werden:

su Tisch

Es wurde über unformatiertes HTML erstellt und dann wurde nur ein SU-Shortcode hinzugefügt. Dieses:

[su_table] [/ su_table]

Alle angezeigten Zeilenstile und Rahmen sind SUs.

Mit anderen Worten, wenn Ihr Thema kein besonders schönes CSS für die Behandlung von Tabellen enthält, verwenden Sie SU.

�� Hinweis; Alle drei in diesem Beitrag behandelten Lösungen – Visualizer, TablePress und SU – können Tabellen ausgeben, die für Mobilgeräte bereit und reaktionsschnell sind.

Fazit

Ich ermutige Sie, mit diesen drei Plugins zu experimentieren. Wir lieben Visualizer, da es unsere eigene Kreation ist, aber wir müssen zugeben, dass die anderen beiden auch für bestimmte Aufgaben ziemlich ordentlich sind!


Visualizer: Tabellen- und Diagramm-Manager für WordPress

Autor (en): Themeisle


90% Bewertungen


Über 40.000 Installationen


WP 3.5 + Erforderlich

Mehr Info

visualizer.zip

Aktuelle Version: 3.4.3

Letzte Aktualisierung: 4. Mai 2020


90% Bewertungen


Über 40.000 Installationen


WP 3.5 + Erforderlich

WordPress.org Plugin Seite


Visualizer: Tabellen- und Diagramm-Manager für WordPress


TablePress

Autor (en): Tobias Bäthge


100% Bewertungen


800.000 + Installationen


WP 5.3 + Erforderlich

Mehr Info

tablepress.1.11.zip

Aktuelle Version: 1.11

Letzte Aktualisierung: 1. April 2020


100% Bewertungen


800.000 + Installationen


WP 5.3 + Erforderlich

WordPress.org Plugin Seite


TablePress


WordPress Shortcodes Plugin – Shortcodes Ultimate

Autor (en): Vladimir Anokhin


98% Bewertungen


800.000 + Installationen


WP 4.6 + Erforderlich

Mehr Info

shortcodes-ultimate.5.9.0.zip

Aktuelle Version: 5.9.0

Letzte Aktualisierung: 24. Mai 2020


98% Bewertungen


800.000 + Installationen


WP 4.6 + Erforderlich

WordPress.org Plugin Seite


WordPress Shortcodes Plugin – Shortcodes Ultimate

Verwenden Sie Datentabellen in WordPress??

Was halten Sie von Tabellen und ihrem Platz in der modernen Benutzeroberfläche von WordPress??

Der Gutenberg-Blockeditor hat das Erstellen von Tabellen wesentlich benutzerfreundlicher gemacht, sodass Gelegenheitsbenutzer jetzt wahrscheinlich eher bereit sind, mit ihnen zu experimentieren. Schließlich sind Tabellen eines der klassischen Dinge, mit denen jeder, der jemals MS Word verwendet hat, ziemlich vertraut ist. Warum kannst du das nicht? "füge sie einfach hinzu" zu WordPress, richtig?

Verwenden Sie häufig Datentabellen in WordPress? Wenn ja, wie erstellen Sie sie??

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

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