WordPress: CSS-Klasse zu Tablepress hinzufügen (mit Javascript oder PHP)

Momentan setzen wir bei Macnotes „noch“ auf WordPress.¹ Da ich zuletzt auch ein Projekt für eine Kundin betreute, bei dem ich ein Joomla auf ein WordPress migrieren musste, sind bei der Arbeit viele Erkenntnisse angefallen, die ich nun nach und nach mit Euch teilen möchte. Eines davon ist, wie man Tablepress eine oder mehrere CSS-Klassen hinzufügen kann.

Wichtig ist zu erwähnen. Es gibt in der Regel mehrere Möglichkeiten, das Ziel zu erreichen. Zum Beispiel könntet Ihr einfach die vorhandenen CSS-Klassen nutzen und denen zusätzliche Einheiten und Werte zuordnen.

Doch vielleicht arbeitet Ihr mit einem CSS-Framework, das regelmäßig aktualisiert wird, und möchtet einfach von dessen Stilvorlagen profitieren.

Tablepress eine CSS-Klasse hinzufügen

Wir verwenden momentan das CSS-Framework Bulma. Dort gibt es unter anderem die Klasse „table“ für Tabellen. Tablepress aber nutzt seine eigene Klasse „tablepress“. Die Recherche nach Lösungen, wie man eine weitere Klasse hinzufügen kann, lieferte nur unzureichende Ergebnisse. Deshalb war es an der Zeit, selbst aktiv zu werden. Wir präsentieren Euch in der Folge gleich zwei mögliche Lösungen.

Der einfache Weg: Javascript

Ich habe in den letzten Monaten Javascript zu schätzen gelernt.² Über die Konsole im Browser kann man nämlich direkt mit der Webseite interagieren und kann auf einfachste Weise schnell Änderungen vornehmen.

So auch in diesem Fall. Ihr sucht also einfach nach dem Element, das Ihr verändern wollt. Da Tablepress die Klasse „tablepress“ seinen Tabellen hinzufügt, habt Ihr es einfach, denn über document.getElementsByClassName('tablepress') könnt Ihr die Tabelle im Text finden. Auf diese Weise erreicht Ihr eine HTML-Kollektion, denn es sind ja in der Regel noch Inhalte in der Tabelle. Mit [0] wählt Ihr, vergleichbar wie bei einem Array, das erste Resultat aus. Das könnte man auch in einer Variable speichern, muss man aber nicht, sondern kann es direkt „manipulieren“.

Javascript erlaubt Euch dazu mit classList auf die vorhandenen Klassen zuzugreifen und über add() könnt Ihr direkt eine oder mehrere Klassen hinzufügen. Das sieht dann wie folgt aus:

document.getElementsByClassName('tablepress')[0].classList.add('table');

Ressourcen schonen

Wir sind aber noch nicht am Ende. Denn ich lagere solchen Javascript-Code meist in den Footer aus, damit er das Laden der Seite nicht blockiert. Doch Ihr könnt auch noch abfragen, ob der Text überhaupt eine solche Tabelle enthält. Dafür stellt WordPress ja die Funktion (vgl. WordPress-Codex) has_shortcode() zur Verfügung. Ihr ladet also den obigen Code nur dann, wenn der Nutzer überhaupt eine Tabelle sieht. Damit wird er auf anderen Seiten ohne Tabelle gar nicht erst geladen. Und weil Tabellen auch nicht auf Archiv-Seiten oder der Startseite und in Suchergebnissen gezeigt werden, eignet sich noch eine weitere Funktion (Conditional Tag) namens is_singular() (vgl. WordPress-Codex). is_singular() berücksichtigt im Vergleich zu is_single() auch Seiten und eben nicht nur Beiträge. Da wir auf Seiten auch Tabellen von Tablepress einsetzen, ist das in dem Fall sinnvoll.

Die komplette Integration sieht dann am Ende wie folgt aus:

<?php if (is_singular()) {
if(has_shortcode( $post->post_content, 'table')) { ?>
<script>
	document.getElementsByClassName('tablepress')[0].classList.add('table');
</script>
<?php }
} ?>

Warum ist dies der „einfachere“ Weg? Nun, weil ich das binnen weniger Minuten in der Konsole des Browsers ausprobieren kann und so direkt zum Ziel komme.

Veränderungen am Quellcode kann man so sehr einfach vornehmen und austüfteln.

Einschränkungen (und Lösung): Mehr als eine Tabelle

In dem hier gegebenen Beispiel gehen wir davon aus, dass man nur eine Tabelle nutzt. Wer sich ein wenig mit Javascript auskennt, kann aber auch die Vorkommnisse mehrerer Tabellen berücksichtigen und dann mit einer Schleife die Klasse in allen hinzufügen. Das Ergebnis der „Suche“ ist eine „HTMLCollection“, also kein Array. Doch weil diese Element sich ähneln, hält Javascript eine Funktion Array.from() bereit, um so eine Sammlung in ein Array zu verwandeln. Auf diese kann man dann eine forEach-Schleife anwenden. Der Vollständigkeit halber präsentieren wir auch diesen Code:

<?php if (is_singular()) {
if(has_shortcode( $post->post_content, 'table')) { ?>
<script>
var tables = document.getElementsByClassName('tablepress');
Array.from(tables).forEach(addClass);
function addClass(table) {
	table.classList.add('dodoBingo');
}
</script>
<?php }
} ?>

Der nicht viel schwierigere Weg: PHP

„Schwieriger“ ist in diesem Zusammenhang vermutlich das falsche Attribut. Denn es war eher „aufwändiger“ an die Lösung mittels PHP zu gelangen.

Der Dampfhammer wäre gewesen, den $content zu manipulieren. Aber es gibt andere Mittel und Wege, die auch ein wenig den Entdeckergeist wecken können. WordPress bietet sogenannter „Hooks“ und „Filter“ (vgl. WordPress-Codex). Plugin-Entwickler, gerade von komplexeren Plugins, machen von diesen ebenfalls Gebrauch, um unterschiedliche Situationen zu kreieren. Sie selbst nutzen dann diese Hooks und Filter, um die Ausführung des Plugins zu manipulieren, je nachdem, was der Nutzer eingegeben hat. Blöderweise sind diese Hooks und Filter der Plugins aber kaum wirklich durch die Entwickler dokumentiert.

Entdeckungsreise im Quellcode

Bei Tablepress sieht der Entwickler einige Anwendungen vor und beschreibt diese aber nicht. Er gibt ein paar Beispiele und erklärt ansonsten, dass der „Quellcode viele davon enthielte“.

Also öffnen wir ein Terminal und schauen uns an, ob denn nicht eventuell sogar ein Filter dabei ist, der die Ausgabe nach unseren Wünschen verändern kann. Dazu eignet sich z. B. der Befehl grep. Wir navigieren also ins Plugin-Verzeichnis.³ Da wir nicht wissen, in welcher Datei die Filter enthalten sind, und das Plugin aber Unterverzeichnisse hat probieren wir es mit grep -r 'apply_filters' .. Der Parameter „r“ steht für „rekursiv“ und arbeitet auch alle Unterverzeichnisse ab. Der „Punkt“ am Ende sagt der Funktion, dass sie in dem aktuellen Verzeichnis starten soll.

Tatsächlich spuckt die Suche einige Ergebnisse aus. Voran steht immer auch der Dateiname und das etwaige Verzeichnis. Tablepress verfügt also über einen Filter (im Bild markiert), den wir gebrauchen können. Scheinbar gibt es einen Filter namens tablepress_table_css_classes.

Ich habe dann die Datei „class-render.php“ geöffnet und nach der betroffenen Zeile gesucht. In deren Umfeld habe ich geschaut, wie der Entwickler den Filter selbst einsetzt. Man stellt dann schnell fest, dass er ein „Array“ mit Klassennamen konstruiert und dieses übergibt. Das ist ganz wichtig. Denn damit der Filter unsere Eingabe versteht, müssen wir sie auch als Array übergeben. Gesagt, getan.

Der Quellcode kommt in die functions.php und wir können uns die Abfrage sparen, ob der Text auch den Shortcode enthält. Tatsächlich würde, wenn wir so weit sind, die Tabelle schon gerendert sein, und wir können dann nichts mehr (außer eben mit Javascript) verändern. Wir greifen mit einem add_filter() (vgl. WordPress-Codex) zu einem früheren Zeitpunkt der Ausführung ein und fügen die Klasse wie folgt hinzu.

add_filter( 'tablepress_table_css_classes', function($css){
  $css[] = "table";
  return $css;
});

Der Einfachheit halber haben wir eine anonyme Funktion genutzt, die als Rückgabewert ein Array hat.

Apply und Add gehören zusammen

Die Entdeckungsreise haben wir nach apply_filters() unternommen. Denn damit wird im Plugin etwas verändert. Doch so eine Funktion hat eben das Gegenstück add_filter(). Damit übergebt Ihr quasi dem Filter etwas, das er berücksichtigen soll. Tatsächlich nutzt Tablepress selbst den tablepress_table_css_classes Filter nirgendwo selbst aktiv, aber es hat sich eben an dieser Stelle „erweiterbar“ gemacht.

Klassen zu Tablepress hinzufügen

Auf die oben beschriebenen Weisen könnt Ihr nun Klassen zu Tablepress hinzufügen, wahlweise mit ein bisschen Javascript, oder eben direkt mit PHP. Mit Javascript leistet der Browser die Arbeit, mit PHP der Server.

Solltet Ihr komplexere Änderungen vornehmen wollen, empfiehlt es sich, dies in jedem Fall mit PHP zu machen. Aber für „Kleinigkeiten“ ist Javascript auf die Schnelle immer geeignet. Vor allem könnt Ihr es auch als Übergangslösung einsetzen, bis Ihr die andere fertigstellen könnt. Ein „Hotfix“ sozusagen.

1. Langfristig wollen wir ein eigenes System von Apps im Web und auf Smartphones und Desktops sowohl für Nutzer als auch Autoren etablieren. ↩︎
2. Lustig aber wahr, denn 1998 registrierte ich meine erste Domain und schon Mitte der 90er baute ich eigene Webseiten auf Geocities. Trotzdem brauchte es 25 Jahre, ehe ich die Einfachheit erkannte, schnell Ergebnisse zu erzielen. ↩︎
3. Ich habe vergessen zu erwähnen, dass ich eine lokale WordPress-Installation nutze, um die Webseite zu entwickeln. ↩︎

Ähnliche Nachrichten