Das faustball.de Plugin für WordPress

Tabellen von Faustball.de

Hinweis: Das Plugin ist seit heute abend über wordpress.com verfügbar, sodaß man es leichter installieren und updaten kann. Dazu musste ich das Plugin umbenennen, da ich nicht Besitzer der Domain faustball.de bin. Ich werde hier weiter meine Anleitung zum Plugin pflegen, Installation und Update sind jetzt aber nur noch über die Plugins->Installieren Seite von WordPress möglich. Am besten nach ‚faustball‘ suchen.

Dieses kleine WordPress Plugin ermöglicht das einfache Einbinden von dynamisch aktualisierten Tabellen von www.faustball.de in jede Seite, Beitrag und auch Widget.
Aktuell wird nur das Einbinden von Wettbewerbstabellen untersützt. Wenn Dirk Haase die Möglichkeiten zum Abruf von Infos erweitert, wird auch dieses Plugin in seinen Funktionen entsprechend erweitert.
Eine Erklärung von Dirk (auch zur CSS Auszeichungen) findet sich hier https://faustball.de/#/main/tabellen_einbinden_v1

Im Gegensatz zur direkten Javascript-Einbindung, führt dieses Plugin noch eine Bereinigung des übergebenen Codes mittels HTMLPurifier durch, sodaß kein Schadcode in die eigene Webseite eingeschleust werden kann. Also selbst wenn ein Hacker faustball.de soweit manipulieren kann, dass Schadcode über die Tabellen-Einbinden Funktion ausgeliefert wird, kann dieser nicht mehr in die eigene Webseite eingebaut werden!

Es bietet eine Möglichkeit die Tabellenzeile mit dem eigenen Team hervorzuheben, als auch die Spalte mit den Bällen auszublenden. Wie dies genau geht, wird weiter unten erklärt. Seit V1.1.0 gibt es Einstellungen, um die Kopfzeile mit eigenen Spaltenüberschriften zu gestalten.

Die Verwendung ist ganz einfach: Der Shortcode **[faustball contest=<contest>]** ist alles was man braucht!

Das Attribut „contest“ ist unbedingt erforderlich und beschreibt den Wettbewerb, dessen Tabelle dargestellt werden soll. Um die Nummer zu ermitteln den gewünschten Wettbewerb bei faustball.de aufrufen und die Nummer aus der URL kopieren. Das ist die gleiche Zahl wie die ID in Dirks Anleitung.
Beispiel: Im Feld 2018 in der Bundesliga Süd der Männer ist die Tabelle hier zu finden: https://faustball.de/#/contest/257/competition.
Damit ist contest=257 in den Shortcode einzutragen: [faustball contest=257]

Weitere optionale Attribute

ownteam=‘<ownteam>‘

Wird dieses Attribut gesetzt, so wird bei einer genauen Übereinstimmung des übergebenen Namens mit einem Mannschaftsnamen in der Tabelle die entsprechende Tabellenzeile mit der CSS-Klasse „fb-ownteam“ versehen.
Mittels entsprechender CSS-Auszeichnung kann diese Zeile hervorgehoben werden (siehe CSS-Beispiel).

balls=‘<balls>‘ [0/1]

Über dieses Attribut kann die Spalte „Bälle“ ausgeblendet werden. Dazu wird die Spalte mit der CSS-Klasse „display-none“ versehen. Eine Definition der CSS-Klasse „display-none“ mit „display: none;“ im Stylesheet ist natürlich zusätzlich notwendig.
Der Vorteil ist, dass es mit dieser zusätzlichen, optionalen CSS-Auszeichung im Tabellencode möglich ist, eine Tabelle einmal ohne Bälle (z.B. in einem seitlichen Widget) darzustellen, auf einer Teamseite jedoch die gleiche Tabelle mit den Bällen.
Wird das Attribut nicht verwendet, so werden die Bälle dargestellt.

CSS Beispiel

Hier eine CSS Definiton, die schon viele Möglichkeiten der Gestaltung ausnutzt. Für eine Einführung in CSS-Design empfehle ich die oben genannte Seite unter faustball.de als auch entsprechende CSS-Lernwebseiten, wie w3schools.com.

.display-none {
	display: none;
}

/* General class for table */
.fb_table{
	table-layout: auto; 
	background: #F2F2F2;
	margin-bottom: 5px;
	border-spacing: 0px;
	max-width: 100%;
	line-height: 1.4em;
	white-space: nowrap;
}

/* Class for table tags  and  */
.fb_table tr,
.fb_table td{
	padding: 0.15em 0.1em;
	border-left: hidden;
	border-right: hidden;
	vertical-align: text-top;
}

.fb_table thead{
	color: white;
	background-color: #808080;
}

/* Class for alternating colors in rows */
.fb_table tr:nth-child(even){
	background-color: #d2d2d2;
}


/* Class for table header */
.fb_table th {
	border-right: none;
	border-left: none;
	padding: 0.4em;
}

.fb_body_team,
.fb_header_team {
	text-align: left;
}

.fb_body_rank,
.fb_header_rank {
	text-align: right;
}

.fb_header_matches,
.fb_header_balls,
.fb_header_sets,
.fb_header_points {
	text-align: center;
}

.fb_body_matches,
.fb_body_balls,
.fb_body_sets,
.fb_body_points {
	text-align: center;
}

.fb_table tfoot {
	background: white;
	color: grey;
	font-size: 75%;
	margin-bottom: 25.5px;
}

/* Class for highlighting ownteam */
.fb_ownteam {
	background: #81a0bf;
	color: white;
}

.fb_ownteam:nth-child(even){
	background: #5f85ad !important;
	color: white;
}

.fb_ownteam:nth-child(odd){
	background: #81a0bf !important;
	color: white;
}

Die Definition nutzt die automatische Anwendung auf gerade/ungerade Zeilen um die alternierende Zeilenfarbe zu erzeugen. Das Ganze (odd/even) wurde auch für die ownteam-Zeile angewendet, um hier ebenfalls unterschiedliche Farben ja nach Zeile zu haben. Das „!important“ ist notwendig, damit die CSS Auszeichnung auch angewendet wird, auch wenn sie in der CSS-Hierarchie niedriger ist.
Die Tabelle würde dann so aussehen:

Dieses Plugin bietet keine Möglichkeit eigenes CSS in WordPress einzubinden. Entweder bietet das benutzte Thema schon so eine Möglichkeit im Bereich „Design“, oder nutzt bitte eines der genügend vorhandenen guten Custom CSS Plugins für WordPress.