TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

TablePress-Plugin-Tutorial für WordPress-Benutzer

146

In unserem vorherigen Artikel haben wir gesehen, wie Sie mit verschiedenen Methoden Tabellen in der WordPress-Site hinzufügen. Der Gutenberg-Blockeditor verfügt über einen integrierten Tabellenblock, der die Verwendung des Zusatz-Plugins überflüssig macht. TablePress ist jedoch eines der Plugins, mit denen Benutzer auf einfache Weise attraktive Tabellen auf der WordPress-Site hinzufügen können. In diesem Artikel lassen Sie uns die Funktionen und die Verwendung des TablePress-Plugins erkunden.

WordPress lernen: Sehen Sie sich über 400 kostenlose WordPress-Tutorials an.

Warum TablePress-Plugin?

Navigieren Sie im WordPress-Admin-Dashboard zur Option "Plugins > Neu hinzufügen" und suchen Sie nach dem Schlüsselwort "Tabelle". Sie finden Tausende von Plugins zum Erstellen verschiedener Arten von Tabellen und die Suche nach "tablepress" zeigt das TablePress-Plugin auf der ersten Seite.

TablePress-Plugin-Tutorial für WordPress-Benutzer

WordPress TablePress-Plugin

  • Es ist ein komplett kostenloses Plugin von Autor Tobias Bäthge. Obwohl Erweiterungen als separate Premium-Plugins angeboten werden, gibt es keine aufdringlichen Banner oder Links, die Sie zu einem Upgrade über das Dashboard auffordern.
  • 800.000 aktive Installationen mit 5-Sterne-Bewertung von fast 4K-Benutzern können kein falsches Urteil sein.
  • Ordentliche Dokumentation und sehr gute Unterstützung im Forum.
  • Erstellen Sie einheitlich aussehende Tabellen über die Site und passen Sie das Aussehen einer bestimmten Tabelle mit benutzerdefiniertem CSS an.

Funktionen des TablePress-Plugins

Das Plugin hat die folgenden Funktionen, die ausreichen, um Tabellen für die meisten allgemeinen Zwecke zu erstellen:

  • Tabellen können als Shortcode erstellt und auf beliebigen Seiten Ihrer Site eingebettet werden .
  • Importieren Sie Tabellen aus Microsoft Excel in den Formaten XLS, XLSX und CSV. Auch der Import per manuellem Copy-Paste und aus dem JSON/HTML-Format ist möglich.
  • Tabellen können in den Formaten CSV, JSON und HTML exportiert werden.
  • Direktes Einfügen von Tabellen-Shortcode im visuellen Editor.
  • Einzelne Tabellen können mit benutzerdefiniertem CSS angepasst werden .
  • Komplexe Datentabellen mit Suchfeld, Paginierung und Filterung können einfach erstellt werden.

Wie verwende ich das TablePress-Plugin?

Installieren und aktivieren Sie das Plugin, um ein Admin-Menü anzuzeigen, das wie unten gezeigt erstellt wurde:

TablePress-Plugin-Tutorial für WordPress-Benutzer

TablePress-Plugin-Menüoptionen

Die Position des TablePress-Menüs kann im Abschnitt „Plugin-Optionen” geändert werden.

Das Plugin hat die folgenden Abschnitte:

  • Alle Tabellen – zeigt die Liste aller erstellten Tabellen.
  • Neu hinzufügen – ermöglicht das Erstellen einer neuen Tabelle.
  • Import – bietet verschiedene Optionen zum Importieren einzelner und mehrerer Tabellen.
  • Exportieren – bietet verschiedene Optionen zum Exportieren einzelner und mehrerer Tabellen.
  • Plugin-Option – in diesem Abschnitt können einzelne Tabellen mit CSS angepasst werden.
  • About – zeigt die Details zum Plugin und andere Details an.

TablePress-Plugin-Tutorial für WordPress-Benutzer

WordPress TablePress-Plugin-Optionen

Tabelle in TablePress erstellen

Navigieren Sie zur Registerkarte "Neu hinzufügen", wo Sie grundlegende Details wie Tabellenname, Kurzbeschreibung eingeben und die Anzahl der Spalten und Zeilen auswählen können, um eine Tabelle zu erstellen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Neue Tabelle in TablePress hinzufügen

Der nächste Bildschirm zeigt Ihnen viele Optionen in mehreren Abschnitten. Sie können sich leicht mit diesen Optionen vertraut machen, indem Sie eine oder zwei Beispieltabellen erstellen.

SEO-Angebot: Optimieren Sie Ihre Website mit der 14-tägigen kostenlosen Testversion von Semrush Pro.

Abschnitt mit Tabelleninformationen

Hier können Sie die grundlegenden Details, die Sie auf dem Erstellungsbildschirm eingegeben haben, zusammen mit dem Shortcode für Ihre Tabelle anzeigen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Abschnitt mit Tabelleninformationen

Tabelleninhalt

Hier müssen Sie den tatsächlichen Inhalt Ihrer Tabelle in Zeilen und Spalten eingeben; die erste Zeile wird standardmäßig als Tabellenüberschrift betrachtet, die Sie im Abschnitt „Tabellenoptionen” ändern können.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Abschnitt Tabelleninhalt

Tabellenmanipulation

Dieser Abschnitt bietet die folgenden Funktionen:

  • Fügen Sie Ihrer Tabelle Zeilen und Spalten hinzu.
  • Zeilen und Spalten ausblenden, anzeigen, löschen, duplizieren und einfügen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Abschnitt zur Tabellenmanipulation

  • Klicken Sie auf die Schaltfläche „Link einfügen” und wählen Sie die Tabellenzelle aus, um das standardmäßige WordPress-Popup zum Einfügen von Links zu öffnen. Sie können Links auch direkt mithilfe von HTML-Anker-Tags hinzufügen.
  • Klicken Sie ähnlich wie bei Links auf „Bild einfügen” und klicken Sie auf die Zelle, um Bilder aus der WordPress-Medienbibliothek einzufügen. Sie können Bilder auch direkt mit dem HTML-img-Tag hinzufügen.
  • Mit dem erweiterten Editor können Sie formatierte Inhalte mit einem einfachen Editor hinzufügen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Erweiterter TablePress-Editor

  • Verwenden Sie die Optionen rowspan und colspan, um Zellen in einer Zeile und Spalten zu kombinieren.

Rowspan- und Colspan-Attribute können nicht für erweiterte Datentabellen verwendet werden, die die JavaScript-Bibliothek zum Sortieren verwenden.

Tabellenoptionen

Hier können Sie die Kopf- und Fußzeile, verschiedene Farben für alternative Zeilen und die Hervorhebung der Zeile beim Hover definieren. Sie können den Tabellennamen und die Beschreibung auch über oder unter der Tabelle anzeigen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

TablePress-Tabellenoptionen

Fügen Sie zusätzliche CSS-Klassen hinzu, um das Erscheinungsbild der Tabelle anzupassen. Sie müssen diese CSS-Klassen auf Themenebene verwenden und Stile definieren.

Funktionen der DataTables-JavaScript-Bibliothek

Wenn Sie im Abschnitt „Tabellenoptionen” die erste Zeile der Tabelle als Kopfzeile aktiviert haben, kann die Tabelle durch Aktivieren der Funktionen in diesem Abschnitt in eine Datentabelle umgewandelt werden.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Erstellen von Datentabellen mit TablePress

  • Sortieren nach einer der Spalten, indem Sie einfach auf die Spalte klicken.
  • Suchen / Filtern – ermöglicht das Anzeigen eines Suchfelds in der oberen rechten Ecke der Tabelle und Benutzer können die Ergebnisse durch Eingabe eines Schlüsselworts filtern. Dies ist eine sehr nützliche Funktion, insbesondere wenn Sie viele Zeilen haben und der Inhalt aufgrund der Paginierung nicht sichtbar ist.
  • Paginierung – Aktivieren Sie die Paginierung, um nur bestimmte Zeilen mit den Links „zurück/nächste” Paginierung in der unteren rechten Ecke der Tabelle anzuzeigen. Sie können dem Benutzer auch erlauben, eine bestimmte Anzahl von Zeilen zu filtern und anzuzeigen.
  • Aktivieren Sie den horizontalen Bildlauf, wenn die Tabelle viele Spalten enthält, und fügen Sie benutzerdefinierte Befehle hinzu, wenn Sie wissen, wie Sie erweiterte Datentabellen verwenden.

Nachdem Sie die Optionen abgeschlossen haben, zeigen Sie die Tabelle in der Vorschau an und speichern Sie die Änderungen. Sie können die Tabelle auch vom selben Bildschirm aus löschen, kopieren und exportieren.

Einfügen einer Tabelle in einen Beitrag oder eine Seite

Jede Tabelle in TablePress hat eine eindeutige ID, die im Abschnitt "Tabelleninformationen" angezeigt wird. Sie können dies als Shortcode im Gutenberg-Editor verwenden oder den Tabellencode im Classic-Editor mit dem TablePress-Symbol einfügen.

Alle Tabellen anzeigen

Alle mit TablePress erstellten Tabellen können im Menü „TablePress > Alle Tabellen” eingesehen werden. Sie können Aktionen wie Kopieren, Exportieren und Löschen sowohl für einzelne Tabellen als auch für Massen durchführen.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Optionen unter der Registerkarte Alle Tabellen

Tabellen importieren

Obwohl das Erstellen einer Tabelle auf dem Bildschirm einfach ist, ist dies bei großen Tabellen eine mühsame Aufgabe. In solchen Szenarien können Sie Tabellen mit Excel-Tabellen im XLS-, XLSX- oder CSV-Format erstellen und auf Ihrer WordPress-Site unter der Registerkarte "Importieren" des TablePress-Plugins importieren. Navigieren Sie zur Registerkarte „Importieren”, um die folgenden Optionen anzuzeigen:

TablePress-Plugin-Tutorial für WordPress-Benutzer

Tabellenoptionen in TablePress importieren

  • Der Import der Quelle kann aus einer Datei auf Ihrem lokalen Computer, aus einer URL, aus einer Datei auf einem Server oder einer manuellen Eingabe erfolgen.
  • Laden Sie die Datei basierend auf der Quelle entweder von Ihrem lokalen Computer hoch oder geben Sie die erforderlichen Details an.
  • Wählen Sie das Dateiformat, wenn Sie XLSX verwenden, dann wählen Sie die Option „XLSX – ” aus der Dropdown-Liste. Obwohl XLSX noch eine Beta-Option ist, funktioniert es wie von uns getestet perfekt.
  • Wählen Sie aus, ob Sie eine neue Tabelle erstellen oder eine vorhandene Tabelle ändern oder anhängen möchten. Wenn Sie die Optionen zum Ersetzen und Anhängen auswählen, wird eine Dropdown-Liste aller vorhandenen Tabellen angezeigt, aus der Sie eine Tabelle auswählen können.
  • Klicken Sie auf die Schaltfläche „Importieren”, um den Tabellenimport zu starten.

Das Plugin ermöglicht den Import mehrerer Tabellen als Zip-Datei. Wenn Sie beispielsweise fünf XLSX-Tabellenkalkulationstabellen haben, legen Sie alle Dateien in einem einzigen Ordner ab und komprimieren Sie ihn in einem ZIP-Format. Laden Sie einfach die ZIP-Datei hoch, um fünf Tabellen zu erstellen.

Tabellen exportieren

Ähnlich wie beim Import können alle vorhandenen Tabellen im CSV-, JSON- oder HTML-Format auf Ihren lokalen Computer exportiert werden. Außerdem ermöglicht das Plugin die Auswahl mehrerer Tabellen und den Export als Zip-Datei.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Exportieren von Tabellen in TablePress

Die Formate CSV und HTML exportieren nur den Tabelleninhalt und das JSON-Format enthält auch die Tabellenoptionen.

Anpassen von Tabellen in TablePress

Was wir bisher gesehen haben, sind die Standardoptionen und auf der Registerkarte "Plugin-Optionen" können Sie benutzerdefiniertes CSS eingeben, um entweder alle Tabellen einheitlich zu steuern oder die Anzeige einzelner Tabellen zu steuern.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Hinzufügen von benutzerdefiniertem CSS in TablePress

Unten sind die Selektoren, um Ihren Stil zu definieren:

  • .tablepress – alle TablePress-Tabellen sollten diese Klasse haben.
  • .tablepress-id – wird verwendet, um eine bestimmte Tabelle zu formatieren.
  • .column-id – wird verwendet, um die Spalte einer Tabelle zu formatieren.
  • .row-id – wird verwendet, um die Zeile einer Tabelle zu formatieren.

Unten ist eine Beispieltabelle, die mit TablePress erstellt wurde. Nehmen wir an, die ID ist 3 und einige der Anpassungsstile werden basierend auf diesem Beispiel angegeben:

Unten muss CSS-Code im Textbereich unter „Plugin-Optionen > Benutzerdefiniertes CSS” hinzugefügt werden und die Option „Diese „Benutzerdefinierten CSS”-Befehle laden, um das Tabellen-Styling zu beeinflussen” aktiviert sein.

Ändern Sie die Breite der zweiten Spalte auf 200px:

.tablepress-id-3 .column-2 { width: 200px; }

Ändern Sie die Hintergrundfarbe von Zeile 2 in Rot:

.tablepress-id-3 .row-2 td { Background-color: red; }

Ändern Sie die Farbe der alternativen Zeilen:

.tablepress-id-3 .odd td { background-color: red; } .tablepress-id-3 .even td { background-color: blue; }

Ändern Sie die Farbe der Zeile beim Hover:

.tablepress-id-3 .row-hover tr:hover td { background-color lightgrey; }

Allgemeine Probleme

Bei der Verwendung von TablePress sind uns einige grundlegende Probleme aufgefallen:

  • Reaktionsfähigkeit von Tabellen auf mobilen Geräten, die durch die Installation der Plugin-Erweiterung behoben werden kann.
  • Einfügen von Tabellen in Fußzeile oder Seitenleiste der Site – dies kann durch die Verwendung von Template-Tags mit „$query” als String oder Array erreicht werden. Im Folgenden finden Sie beispielsweise ein Beispiel zum Abrufen der Tabellendaten für die Tabellen-ID=1:
<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Wenn Sie auf Ihrer Website auf ein anderes spezifisches Problem stoßen, sehen Sie im Forum nach, ob es behoben ist, und lesen Sie die Dokumentation, bevor Sie die Support-Anfrage stellen. Wir haben festgestellt, dass die meisten Probleme an einem dieser Orte behoben wurden.

Hinweis: Das Einfügen von HTML-Tags in Tabellenzellen wird nicht unterstützt, Sie können jedoch Image-Tags, Link-Tags, den erweiterten Editor und die Erweiterung zum Hinzufügen von Links verwenden.

TablePress-Erweiterungen

Obwohl die Grundbedürfnisse mit der kostenlosen Version des Plugins befriedigt werden können, können Sie zusätzliche Erweiterungen von der TablePress Extensions Page herunterladen, um die Funktionen der Tabellen zu verbessern. Auch hier bietet der Autor als Beitrag zur Community alle Erweiterungen kostenlos an und nennt einige als Premium mit Spendenaufforderung. Von allen Erweiterungen haben wir festgestellt, dass " Responsive Tables " diejenige ist, die Sie möglicherweise benötigen, um die Tabelle auf Mobilgeräten sichtbar zu machen. Jede Erweiterung kann heruntergeladen und installiert werden, indem Sie die ZIP-Datei über Ihr WordPress-Admin-Dashboard unter "Plugins> Neu hinzufügen> Plugin hochladen" hochladen. Sie können auch FTP verwenden, um den extrahierten Plugin-Ordner unter „/wp-content/plugins/” hochzuladen.

Unten sehen Sie eine Beispieltabelle, die im Flip-Stil mit der responsiven Tabellenerweiterung erstellt wurde.

TablePress-Plugin-Tutorial für WordPress-Benutzer

Reaktionsschneller Klapptisch

TablePress-SEO

Der wichtigste Aspekt beim Erstellen von Tabellen mit dem TablePress-Plugin ist die SEO – Tabellen sind besonders bei Google suchmaschinenfreundlicher. Unten sehen Sie ein Beispiel für ein Google-Suchergebnis, das den Tabelleninhalt mit der Gesamtanzahl der Elemente ansprechender zeigt:

TablePress-Plugin-Tutorial für WordPress-Benutzer

TablePress-Tabelle in den Google-Suchergebnissen

Google zeigt das Ergebnis mit Tabelle an, wenn Ihre Seite genügend Traffic für die Keywords innerhalb des Tabelleninhalts erhält. Obwohl die Meta-Beschreibung der Seite nicht angezeigt wird, haben wir festgestellt, dass die Tabellenansicht mehr Benutzer anzieht als der einfache Text.

Zusammenfassung

TablePress ist das kostenlose WordPress-Plugin zum Erstellen von Tabellen für Ihre Website. Sie können die Tabellen überall auf der Site mit Shortcode einfügen. Es ist möglich, die Tabellen mit Add-Ons responsive zu machen.

Vorteile

  • Kostenlose und regelmäßige Updates
  • Einfache Benutzeroberfläche
  • Erweiterte Datentabellen
  • Responsiv auf Handys

Nachteile

  • Der Tabellen-Upload ist ressourcenintensiv
  • Keine Leistungsoptimierung um CSS / JS nur auf Seiten mit Tabellen zu laden
  • Keine Vorlagen

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen