TablePress Custom Styling – So machen Sie Ihre Tabellen schlank und reaktionsschnell

TablePress ist das beliebteste und am weitesten verbreitete WordPress-Tabellen-Plugin (700 000+ aktive Installationen). Das Plugin macht einen tollen Job und der Schöpfer Tobias Bäthge bietet erstaunliche Unterstützung für ein kostenloses Plugin! Es ist perfekt für Datentabellen und könnte mit etwas Arbeit auch für Vergleichstabellen verwendet werden (leistungsstarkes Marketing-Tool). Aber die Sache ist, dass das Plugin-Standard-Styling altmodisch aussieht und für das Auge des modernen Benutzers nicht sehr ansprechend ist. Hier ist eine Vorschau unserer Testtabelle mit dem Standard-Styling und den Optionen: [toc] Was wahrscheinlich Ihre Aufmerksamkeit erregen wird, ist die schlechte Ausrichtung des Textes und der Elemente, die unnötigen Sortier- und Suchoptionen und einige andere kleinere Details, die wir loswerden möchten.

Zentrieren der Ausrichtung aller Elemente

Sie können sehen, wie der Text in der oberen linken Ecke der Zelle ausgerichtet ist. Selbst wenn wir es zentrieren, wäre es immer noch oben, was schlecht aussieht. Stattdessen legen wir fest, dass es in der Mitte der Zelle zentriert wird, unabhängig von der Höhe der Zeile. Wie hier, um dies zu tun, fügen Sie diese Zeile von CSS zu Ihrem benutzerdefinierten CSS hinzu (Sie können dieses kostenlose Pluginverwenden):

.tablepress thead th,
.tablepress tbody td {
	text-align: mitte;
}

td.column-1, td.column-2, td.column-3, td.column-4, td.column-5 {
vertikal ausrichten: Mitte !wichtig;
}

Entfernen Sie die unnötigen TablePress-Optionen

Wenn Sie eine neue Tabelle hinzufügen, sehen Sie einige Kontrollkästchen mit Optionen. Einige davon sind praktisch, aber für unseren Zweck möchten wir sie deaktivieren. Hier ist, was wir überprüft haben: Alternating Row Colors und Row Hover Highlighting sieht nur dann gut aus, wenn Ihre Produktbilder transparent sind! Wenn Sie transparente Hintergrundbilder verwenden, können Sie diese Optionen aktiviert lassen.

Ändern der Kopf- und Fußzeilenfarbe

Standardmäßig haben alle Tabellen eine blaue Kopfzeile ohne Änderungsoption. Dazu müssen Sie diese CSS-Zeile zu Ihrem benutzerdefinierten CSS hinzufügen:

.tablepress thead th,
.tablepress tfoot th {
	Hintergrundfarbe: #F2A53B;
}

Hinzufügen visueller Elemente

Visuals funktionieren besser als reiner Text und wenn es um Conversion-Raten geht, steigen die Zahlen deutlich an. TablePress funktioniert perfekt mit Shortcodes. Fügen Sie Ihren Lieblings-Button-Shortcode für Ihre CTAs hinzu. Laden Sie einige Symbole herunter, um Vor- und Nachteile, “Ja und Nein” usw. anzuzeigen. Sie können sogar Listen mit Vorteilen oder Spezifikationen hinzufügen, kreativ werden.

TablePress responsive machen

Standardmäßig schrumpfen TablePress-Geschichten bis zu einem gewissen Grad, aber auf kleineren Bildschirmen sehen die meisten Tabellen überladen aus. Im folgenden Beispiel können Sie sehen, wie sich die Spalten überlappen. Laden Sie das responsive Add-on für TablePress herunter- Klicken Sie hier Lesen Sie die Beschreibung auf der obigen Seite, da das Plugin 3 responsive Modi hat, auch müssen Sie den Shortcode Ihrer Tabelle ändern von:

[[Tabellen-ID=1 /]]

zu so etwas wie

[[Tabellen-ID=1 responsive=responsive_breakpoint=Gerät reduzieren /]]

Für “responsive” können Sie wählen: Flip, Scroll oder Collapse und für die “responsive_breakpoint” von welchem Gerätetyp die Tabelle responsive wird – Telefon, Tablet, Desktop oder alles. Laden Sie das Plugin hoch und aktivieren Sie es und lassen Sie uns unsere Tabelle noch einmal überprüfen. Ich wähle das folgende Setup:

[[Tabellen-ID=1 responsive=scroll responsive_breakpoint=Tablet/]]

Und hier ist der endgültige Look unserer aktualisierten und gestylten TablePress-Tabelle