So fügen Sie dynamische Tabellen in WordPress ohne HTML hinzu

Als ich das letzte Mal versucht habe, meinem WordPress-Blog eine Tabelle hinzuzufügen, habe ich das Ganze schließlich verworfen und stattdessen eine Aufzählungsliste verwendet.

Klingt bekannt?

So viele atemberaubende WordPress-Themes bieten die Möglichkeit, großartig aussehende Tabellen zu erstellen. Und sicher, sie mögen anfangs gut aussehen, aber Sie können nicht viel mit ihnen anfangen.

Möchten Sie filterbare Daten? Nö.

Möchten Sie, dass der Tisch mobil reagiert? Nö.

Möchten Sie Daten aus einer CSV-Datei importieren? Keine Chance.

Hier die gute Nachricht:

Mit dem richtigen Plugin können Sie hochfunktionale dynamische Tabellen erstellen. Die Art von Dingen, mit denen Sie filterbare Daten anzeigen können.

Zusammen mit Grafiken und allerlei.

Klingt gut? Schauen wir uns an, wie es mit wpDataTables gemacht werden kann.

Notiz: Während sich dieses Tutorial auf interaktive Tabellen konzentriert, finden Sie vielleicht unser Tutorial zum Erstellen mobiler responsiver Tabellen mit wpDataTables nützlich. Klicken Sie hier, um es zu überprüfen. Dieses neue Tutorial berücksichtigt die aktualisierte Benutzeroberfläche und zusätzliche Funktionen, die kürzlich in wpDataTables veröffentlicht wurden.

Mit diesem Plugin können Sie ohne HTML-Kenntnisse schöne Tabellen erstellen

wpDataTables ist ein Premium-WordPress-Plugin, das das Erstellen und Veröffentlichen von Tabellen auf Ihrer Website zum Kinderspiel macht. Es ist leicht, intuitiv und erledigt die Arbeit in wenigen Minuten, sodass Sie weniger Code durcharbeiten müssen und mehr Zeit zum Bloggen haben.

Einer der wichtigsten Punkte bei diesem Plugin ist, dass Sie keine HTML-Vorkenntnisse benötigen , um es zum Laufen zu bringen. Alles wird auf einer einfach zu bedienenden Einstellungsseite erledigt. Zum Veröffentlichen muss lediglich ein Shortcode kopiert und eingefügt werden, und schon kann es losgehen.

Für Blogger und Unternehmen sind dies großartige Neuigkeiten, da Sie damit viele Daten auf prägnante und leicht verständliche Weise anzeigen können.

Sie könnten es sogar verwenden für:

• Ein Produktkatalog
• Vergleichstabellen für Produkte
• Preisliste
• Datenerhebung von Benutzern
• Sportergebnisse
• Verfolgen Sie Ihren Fortschritt für alles, was mit Zahlen zu tun hat (z. B. ein Blog-Einkommensbericht)

Die Möglichkeiten sind endlos.

Erstellen einer Tabelle von Anfang bis Ende: eine Schritt-für-Schritt-Anleitung

Die Verwendung des wpDataTables-Plugins zum Erstellen schöner, klarer und voll funktionsfähiger Tabellen auf Ihrer WordPress-Website ist einfach.

So fangen Sie an:

Schritt 1 – Halten Sie Ihre Datei bereit

Unten habe ich ein Beispiel für ein Excel-Dokument für eine Reihe zufälliger Ausgaben erstellt. Dazu gehören mehrere Spalten wie Datum, Zahlungsmethode und Kosten.

Stellen Sie sicher, dass Ihre Daten auf ähnliche Weise angezeigt werden, da das Plugin sonst Schwierigkeiten hat, die Spalten in Ihrer Tabelle zu definieren.

Schritt 2 – Erstellen Sie eine neue Tabelle

Navigieren Sie zu den wpDataTables auf der linken Seite Ihres WordPress-Dashboards.

Wenn Sie auf diesen Link klicken, gelangen Sie zum obigen Bildschirm. Hier erstellen und fügen Sie Ihre neue Tabelle hinzu:

Nachdem Sie auf die Schaltfläche „Neu hinzufügen“ geklickt haben, sehen Sie diesen Bildschirm. Hier beginnen Sie damit, die Parameter Ihres Tisches einzustellen, damit er so funktioniert und aussieht, wie Sie es möchten:

Schritt 3 – Definieren Sie Ihre Tabellenfunktionen

In den ersten drei Abschnitten der Tabelleneinrichtungsseite können Sie Folgendes tun:

• Erstellen Sie einen Titel
• Wählen Sie aus, ob Sie Ihren Tabellentitel auf der Seite anzeigen möchten
• Wählen Sie einen Eingabequellentyp für Ihre Tabelle aus

Dies sind Ihre grundlegendsten Tabelleneinstellungen.

Klicken Sie auf „Datei hochladen“ und suchen Sie nach Ihrem Dokument. Die Tabellen, die Sie erstellen können, können so kompliziert sein, wie Sie sie benötigen.

Wie Sie sehen können, habe ich meiner Tabelle einen relevanten Titel gegeben, den Excel-Dateityp aus dem Dropdown-Feld ausgewählt und meine Datei in WordPress hochgeladen.

Weiter unten auf der Seite finden Sie weitere Einstellungen zum Anpassen Ihrer Tabelle:

Diese sind:

• Responsiv – Ermöglicht eine unterschiedliche Anzeige Ihrer Tabelle auf Desktops, Tablets und Mobilgeräten
• Scrollbar – Sie können Ihre Tabelle horizontal scrollen
• Tabelle ausblenden, bis Seite vollständig geladen ist – Nützlich für langsam ladende Seiten
• Erweiterte Filterung – Zum Anzeigen eines Filters unter jeder Spalte
• Filter im Formular – Für einen Filter innerhalb des Formulars selbst
• Tabellenwerkzeuge – Für Optionen wie Kopieren, Speichern in Excel und Speichern als CSV, die in Ihr Formular eingebettet sind
• Sortierung aktivieren – Damit können Sie Ihre Tabellen sortieren
• Tabellenlayout begrenzen – Beschränken Sie die Breite der Tabelle auf 100 % des übergeordneten Containers
• Anzeigelänge – Legen Sie fest, wie viele Einträge auf einer Seite angezeigt werden

Indem Sie auf „Vorschau“ klicken, können Sie Ihre Tabelle anzeigen und alle Einstellungen ändern, die Sie für erforderlich halten, damit sie so aussieht, wie Sie es wünschen.

Nachdem Sie die Optionen ausgewählt haben, die am besten zu dem Tabellentyp passen, den Sie anzeigen möchten, ist es an der Zeit, auf die Schaltfläche „Speichern“ zu klicken.

Wenn Sie Ihre Spalten weiter anpassen möchten, können Sie nach dem Klicken auf „Speichern“ auf der Seite weiter nach unten scrollen, um weitere Optionen anzuzeigen. Die Standardeinstellungen werden automatisch generiert, jedoch können Sie damit jede Spaltenfarbe, Spalte und den Filtertyp (z. B. Datum, Uhrzeit und Text) ändern.

Unten habe ich einige Farben hinzugefügt und die Spaltentypen in Text, Zahl und Zeichenfolge geändert.

Schritt 4 – Shortcode speichern und kopieren

Sobald Sie Ihre Tabelle gespeichert haben, klicken Sie auf „Schließen“ und Sie werden zurück zur Homepage des Plugins geleitet. Sie sollten jetzt Ihre erstellte Tabelle, den Titel und Typ Ihrer Tabelle, den Shortcode zur Eingabe in Ihren Beitrag oder Ihre Seite und die Option zum Duplizieren sehen.

Ich möchte diese Tabelle auf einer Seite anzeigen, daher müsste ich den Shortcode kopieren und dann zu der Seite navigieren, die ich bearbeiten möchte.

Schritt 5 – Shortcode zu Beitrag oder Seite hinzufügen

Um Ihre Tabelle zu einer Seite hinzuzufügen, ist es wirklich so einfach wie das Einfügen Ihres Shortcodes in den Seiteneditor. Wählen Sie aus, wo auf der Seite Sie Ihre Tabelle anzeigen möchten, fügen Sie Ihren Code ein und fahren Sie mit der Erstellung Ihres Inhalts fort:

Schritt 6 – Veröffentlichen

Sobald Sie auf Ihrer Seite auf die Schaltfläche „Veröffentlichen“ geklickt haben, sollte Ihre Tabelle in etwa so aussehen. Wie Sie sehen können, ist es klar, konsistent, perfekt ausgerichtet und enthält alle meine Daten auf eine einfach zu navigierende Weise:

Die Optionen am oberen Rand der Tabelle ermöglichen es Benutzern, den Tabelleninhalt in einer Vielzahl von Formaten zu exportieren. Sie können die Ergebnisse auch einfach im Frontend Ihrer Website filtern.

Welche anderen Tabellen können Sie erstellen?

Sie sind jedoch nicht nur auf einfache CSV-basierte Tabellen beschränkt. WP-Datentabellen können eine Vielzahl von Daten in mehreren Formaten anzeigen.

Hier ist ein Beispiel für eine voll funktionsfähige, responsive und bearbeitbare Tabelle mit mehreren Spalten und Optionen.

Diese Tabelle ist MySQL-basiert mit Filtern, um den Inhalt abhängig von den Bedürfnissen des Benutzers zu sortieren:

Diese PHP-Array-basierte Tabelle ist serialisiert und enthält Bilder – dies fügt eine ganz andere Dynamik und Funktionalität hinzu, die viele E-Commerce-Shops besonders nützlich finden würden:

Sie sind auch nicht nur auf CSV-Dateien beschränkt. WP Data Tables ermöglicht auch die Verwendung von Excel-basierten Dateien, sodass Sie die vielen damit verbundenen spezifischen Funktionen nutzen können:

Andere erwähnenswerte wpDataTable-Funktionen

• wpDataChart Wizard – Ermöglicht es Ihnen, Ihre Daten in wenigen einfachen Schritten in ein Diagramm oder Diagramm umzuwandeln. Es unterstützt derzeit 3 ​​Render-Engines – Google Charts, Highcharts und Chart.js. Weitere Dokumentation finden Sie hier.
• Bedingte Formatierung – Ermöglicht es Ihnen, Zellen, Zeilen und Spalten basierend auf ihrem Inhalt hervorzuheben. Es ist besonders nützlich, wenn die Tabelle vollständig numerisch ist. Weitere Dokumentation finden Sie hier.
• Formelspalten – Ermöglicht es Ihnen, eine Spalte hinzuzufügen, die verwendet werden kann, um eine Zahl basierend auf den Zahlen zu berechnen, die in anderen Zellen angegeben sind. Weitere Dokumentation finden Sie hier.
• Datetime-Spalten – Wird für Zellen verwendet, die Datum und Uhrzeit enthalten. Sie werden automatisch in dem Format angezeigt, das Sie auf der Einstellungsseite festgelegt haben. Weitere Dokumentation finden Sie hier.
• Summen-/Gesamtzeile – Wird für numerische Spalten verwendet und ermöglicht es Ihnen, die Summe aller Werte zu berechnen. Weitere Dokumentation finden Sie hier.
• Report Builder – Ist ein Add-on für wpDataTables. Report Builder erstellt sofort Dokumente und Tabellenkalkulationen, die Ihre Vorlagen mit tatsächlichen Daten von Ihrer WordPress-Site füllen. Weitere Dokumentation finden Sie hier.
• Master-Detail-Tabellen – Ist ein Add-On für wpDataTables, mit dem Sie und Ihre Website-Besucher mit einem einfachen Klick Details für jede Zeile anzeigen können. Weitere Dokumentation finden Sie hier.

Abschließende Gedanken

Tabellen sind eine großartige Möglichkeit, Daten anzuzeigen. Und wenn Sie dynamische Funktionen wie Filter hinzufügen, machen Sie die Dinge für die Besucher Ihrer Website viel besser.

Ich habe Sie durch das Erstellen einer dynamischen Tabelle in WordPress geführt, indem Sie Daten aus Microsoft Excel hochladen (oder ein anderes Tabellenkalkulationstool verwenden). Aber es ist noch so viel mehr möglich.

Sie können sogar jede Ihrer Tabellen in Diagramme oder Grafiken umwandeln und vieles mehr.

Jetzt ist es an der Zeit, an Ihrem eigenen Tisch zu beginnen – viel Spaß!

Verwandte Lektüre: 5 leistungsstarke und mobile Responsive-Table-Plugins für WordPress.

Offenlegung: Dieser Beitrag ist gesponsert, aber unsere Meinung ist unsere eigene.