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

Wie erstelle ich responsive Tabellen in WordPress?

157

Der neue Gutenberg-Editor verfügt über einen schönen Tabellenblock zum Einfügen von Tabellen auf Ihrer WordPress-Site. Die Tabelle wird auf Ihrer Website schön aussehen. Sie haben auch die Möglichkeit, Zeilen mit alternativen Farben (Streifen) zu versehen und die Einstellungen zu ändern, um die Spalten in den Anpassungsmodus zu verkleinern. Das größte Problem ist jedoch, dass die Tabellen auf mobilen Geräten nicht reagieren. Die Breite des Mobilgeräts kann je nach Tabelleninhalt maximal drei oder vier Spalten umfassen. Wenn Sie mehr Spalten haben, schneidet der Browser die Anzeige auf die Containerbreite ab. Dies führt dazu, dass Benutzer keine Möglichkeit haben, den versteckten Inhalt Ihrer Tabellen anzuzeigen. Daher ist der Gutenberg- Tabellenblock nutzlos, wenn Sie responsive Tabellen auf Ihrer Website haben möchten.

Es gibt viele kostenlose und kostenpflichtige Plugins zum Erstellen von responsiven Tabellen auf der WordPress-Site. Unser Lieblings-Plugin ist TablePress und wir erklären, wie man mit dem TablePress-Plugin responsive Tabellen in WordPress erstellt.

Warum TablePress?

  • TablesPress ist eines der beliebtesten Plugins zum Erstellen von Tabellen in WordPress.
  • Der Entwickler bietet eine benutzerfreundliche Oberfläche und pflegt die Tabelle kontinuierlich.
  • Sie können eine gute Dokumentation zur Verwendung des Plugins finden.
  • Vor allem ist das Plugin kostenlos. Sie können die Erweiterungen sogar kostenlos herunterladen, obwohl der Entwickler um eine Spende bittet. Dies steht in starkem Kontrast zu vielen gierigen Entwicklern, die die kostenlosen Funktionen zu einer kostenpflichtigen Version machen, wenn das Plugin populär wird.

TablePress und Add-ons installieren

Sie können das TablePress-Plugin wie jedes andere Plugin über Ihr WordPress-Admin-Dashboard installieren und aktivieren. Die standardmäßigen TablePress-Tabellen reagieren jedoch nicht ähnlich wie Gutenberg-Tabellen. Sie müssen eine Erweiterung installieren, um die responsiven Tabellen zu erstellen.

  • Gehen Sie zur responsiven Erweiterungsseite von TablePress.
  • Laden Sie die ZIP-Datei der Responsive Tables-Erweiterung herunter
  • Wie bereits erwähnt, fordert der Entwickler 9 US-Dollar als Spende für diese Erweiterung an. Wir empfehlen dringend, 9 US-Dollar zu spenden, wenn Sie das Plugin als primäre Ressource auf Ihrer Website verwenden möchten.
  • Gehen Sie zurück zu Ihrem WordPress-Administrationsbereich und navigieren Sie zum Abschnitt "Plugins > Neu hinzufügen".
  • Klicken Sie auf die Schaltfläche „Plugin hochladen”. Klicken Sie auf die Schaltfläche „Datei auswählen” und wählen Sie die zuvor heruntergeladene Datei „tablepress-responsive-tables.zip” aus.
  • Klicken Sie abschließend auf die Schaltfläche „Jetzt installieren”, um mit der Installation der Erweiterung auf Ihrer Site zu beginnen.
  • Aktivieren Sie die Erweiterung nach erfolgreicher Installation.

Wie erstelle ich responsive Tabellen in WordPress?

Denken Sie daran, zuerst das TablesPress-Plugin zu installieren und zu aktivieren, bevor Sie versuchen, die responsive Tabellenerweiterung zu installieren.

Erstellen einer Tabelle

TablePress bietet verschiedene Möglichkeiten zum Erstellen einer Tabelle; Sie können die Plugin-Funktion in unserem früheren Artikel zum Erstellen einer Tabelle mit TablePress nachlesen. Nachfolgend finden Sie eine Zusammenfassung der Schritte zum Erstellen einer Tabelle in TablePress:

  • Gehen Sie zum Menü „Extras > TablePress > Neu hinzufügen” und beginnen Sie mit der Erstellung einer Tabelle und passen Sie die Optionen an.
  • Wechseln Sie alternativ zur Registerkarte „Importieren” und importieren Sie eine Tabelle aus einer externen Datenquelle. Sie können beispielsweise einfach Ihre Excel-Tabellendaten hochladen, um eine Tabelle zu erstellen.

Wie erstelle ich responsive Tabellen in WordPress?

Nachdem Sie Ihre Tabelle erstellt haben, speichern Sie Ihre Änderungen und notieren Sie sich den Tabellen-ID- Shortcode.

Tabellen-Shortcode einfügen

Die klassische Editor-Oberfläche hatte ein TablePress-Symbol, das Ihnen bei der Auswahl der Tabelle im Post-Editor hilft. Sie haben jedoch keinen TablePress-Block im Gutenberg-Editor. Daher müssen Sie den Tabellen-Shortcode mithilfe des Shortcode-Blocks manuell in Ihren Beitrag oder Ihre Seite einbetten.

TablePress-Tabellen haben den Tabellen-ID-Shortcode im Format Tabellen-ID=xxx / in eckigen Klammern. Fügen Sie einen Shortcode-Block hinzu und fügen Sie Ihren Tabellen-ID-Shortcode ein, wie Sie es zuvor notiert haben.

Tabellen responsive machen

TablePress bietet drei verschiedene Möglichkeiten, um responsive Tabellen zu erstellen.

  • Scrollen
  • Flip
  • Zusammenbruch

Da wir das TablePress-Plugin verwenden, besprechen wir jede Option mit einer Beispieltabelle.

Responsive Scroll-Tabelle

Dies ist die beste Option, um Ihre Tabelle reaktionsfähig zu machen, wenn die Tabelle viele Spalten hat. Es fügt einfach eine horizontale Bildlaufleiste hinzu, damit Benutzer wischen und den Inhalt außerhalb des Bildschirms anzeigen können. Hier ist ein Beispiel dafür, wie eine responsive Scroll-Tabelle aussehen wird.

Responsive Collapse-Tabelle

Die zweite Option ist eine responsive Minimierungstabelle. Wie der Name schon sagt, wird den Zeilen ein +-Symbol hinzugefügt, damit Benutzer tippen/klicken können, um weitere Details anzuzeigen. Die Plugin-Erweiterung verschiebt den ausgeblendeten Tabelleninhalt unter das Symbol zum Anzeigen / Ausblenden. Dies ist sehr nützlich, um einige wichtige Spalten anzuzeigen und verbleibende Daten unter der Schaltfläche + auszublenden.

Reaktionsschneller Klapptisch

Die letzte Option ist Flip, ähnlich der Transponierung in Microsoft Excel. Dadurch wird die Zeile in Spalten und Spalten in Zeilen umgewandelt. Sie können Flip Table verwenden, wenn es zu Ihrem Tabelleninhalt passt. Unten ist ein Beispiel für eine responsive Flip-Tabelle, die mit dem TablePress-Plugin erstellt wurde.

Name Thema 1 Thema 2 Thema 3 Thema 4 Thema 5 Thema 6 Thema 7 Thema 8 Thema 9 Thema 10 Thema 11 Thema 12 Thema 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Paul 89 65 45 12 32 56 78 89 vierzehn 56 98 56 45
David 98 84 65 89 12 45 98 65 32 12 45 43 75
Ralf 65 56 23 45 78 54 65 21 35 64 90 78 34
Krauss fünfzehn 56 48 98 65 45 78 23 56 45 87 56 98
Peter 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Verwandte: Responsive Flipbook WordPress-Plugin-Überprüfung.

Aktivieren von Flip Responsive Tabellen auf bestimmten Geräten

Normalerweise können Sie responsive Tabellen verwenden, die auf mobile Benutzer ausgerichtet sind. In diesem Fall reicht es aus, den Tabellen-Shortcode so zu ändern, dass er den Responsive-Modus enthält. Um die Tabellen zu testen, müssen Sie die Tabellen auf einem Mobilgerät anzeigen oder die Option zum Umschalten zwischen Geräten im Abschnitt mit den Entwicklertools in Ihren Chrome-/Firefox-/Edge-Browsern verwenden. Wenn Sie Safari auf einem Mac verwenden, aktivieren Sie das Entwicklungsmenü, um in einen Reaktionsmodus zu wechseln.

Wenn Sie jedoch über größere Tabellen mit vielen Spalten verfügen, müssen Sie möglicherweise auch auf einem Desktop oder Tablet über eine responsive Tabelle verfügen. Die Plugin-Erweiterung macht diese Aufgabe einfach, indem sie eine Sollbruchstelle für eine responsive Tabelle hinzufügt. Scroll- und Minimierungsmodi funktionieren auf allen Geräten, ohne dass ein Haltepunkt hinzugefügt wird. Ändern Sie für den Flip-Modus den Shortcode wie unten, damit die Tabelle auf verschiedenen Geräten reagiert. (Achten Sie darauf, die Shortcodes in eckige Klammern [ ] einzuschließen).

  • Tabellen-ID = 123 responisve = Flip responsive_breakpoint = Desktop /
  • Tabellen-ID=123 responisve=Flip responsive_breakpoint=Tablet /
  • Tabellen-ID = 123 responisve = Flip responsive_breakpoint = mobile /
  • Tabellen-ID=123 responisve= Flip responsive_breakpoint=all /

Hier sind die genauen Maße für die Haltepunkte:

  • Desktop – Geräte mit einer Breite kleiner als 1200px
  • Tablet – Geräte mit einer Breite kleiner als 980px
  • Telefon – Geräte mit einer Breite kleiner als 768px
  • Alle – Erhöhen Sie die Reaktionsfähigkeit auf allen Geräten, unabhängig von der Größe des Geräts.

Vorsicht bei Pagespeed

Wie Sie sehen, ist es einfach, auf allen Geräten verschiedene Arten von responsiven Tabellen einzufügen. Das Problem, das wir bei der Erweiterung festgestellt haben, ist, dass sie eine zusätzliche CSS-Datei für den Flip-Modus hinzufügt. Die meisten Caching-Plugins schließen dieses Stylesheet aus, ohne es mit anderen CSS-Dateien zu kombinieren, wodurch eine Warnung auf Google PageSpeed ​​Insights erstellt wird. Darüber hinaus lädt das Plugin auch die Stile und Skripte auf allen Seiten Ihrer Website, unabhängig davon, ob die Seite eine Tabelle enthält oder nicht. Wenn Sie nur wenige Tabellen haben, empfehlen wir nicht, das TablePress-Plugin zu verwenden, um Ihre Seitengeschwindigkeit zu verbessern.

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