Das faustball.de Plugin für WordPress

Tabellen von Faustball.de

Hin­weis: Das Plugin ist seit heu­te abend über wordpress.com ver­füg­bar,  sodaß man es leich­ter instal­lie­ren und updaten kann. Dazu muss­te ich das Plugin umbe­nen­nen, da ich nicht Besit­zer der Domain faustball.de bin. Ich wer­de hier wei­ter mei­ne Anlei­tung zum Plugin pfle­gen, Instal­la­ti­on und Update sind jetzt aber nur noch über die Plugins->Installieren Sei­te von Word­Press mög­lich. Am bes­ten nach ‚faust­ball‘ suchen.

Die­ses klei­ne Word­Press Plugin ermög­licht das ein­fa­che Ein­bin­den von dyna­misch aktua­li­sier­ten Tabel­len von www.faustball.de in jede Sei­te, Bei­trag und auch Wid­get.
Aktu­ell wird nur das Ein­bin­den von Wett­be­werbs­ta­bel­len unter­sützt. Wenn Dirk Haa­se die Mög­lich­kei­ten zum Abruf von Infos erwei­tert, wird auch die­ses Plugin in sei­nen Funk­tio­nen ent­spre­chend erwei­tert.
Eine Erklä­rung von Dirk (auch zur CSS Aus­zei­chun­gen) fin­det sich hier https://faustball.de/#/main/tabellen_einbinden_v1

Im Gegen­satz zur direk­ten Java­script-Ein­bin­dung, führt die­ses Plugin noch eine Berei­ni­gung des über­ge­be­nen Codes mit­tels HTML­Pu­ri­fier durch, sodaß kein Schad­code in die eige­ne Web­sei­te ein­ge­schleust wer­den kann. Also selbst wenn ein Hacker faustball.de soweit mani­pu­lie­ren kann, dass Schad­code über die Tabel­len-Ein­bin­den Funk­ti­on aus­ge­lie­fert wird, kann die­ser nicht mehr in die eige­ne Web­sei­te ein­ge­baut wer­den!

Es bie­tet eine Mög­lich­keit die Tabel­len­zei­le mit dem eige­nen Team her­vor­zu­he­ben, als auch die Spal­te mit den Bäl­len aus­zu­blen­den. Wie dies genau geht, wird wei­ter unten erklärt. Seit V1.1.0 gibt es Ein­stel­lun­gen, um die Kopf­zei­le mit eige­nen Spal­ten­über­schrif­ten zu gestal­ten.

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

Das Attri­but „con­test“ ist unbe­dingt erfor­der­lich und beschreibt den Wett­be­werb, des­sen Tabel­le dar­ge­stellt wer­den soll. Um die Num­mer zu ermit­teln den gewünsch­ten Wett­be­werb bei faustball.de auf­ru­fen und die Num­mer aus der URL kopie­ren. Das ist die glei­che Zahl wie die ID in Dirks Anlei­tung.
Bei­spiel: Im Feld 2018 in der Bun­des­li­ga Süd der Män­ner ist die Tabel­le hier zu fin­den: https://faustball.de/#/contest/257/competition.
Damit ist contest=257 in den Short­code ein­zu­tra­gen: [faust­ball contest=257]

Weitere optionale Attribute

ownteam=‘<ownteam>‘

Wird die­ses Attri­but gesetzt, so wird bei einer genau­en Über­ein­stim­mung des über­ge­be­nen Namens mit einem Mann­schafts­na­men in der Tabel­le die ent­spre­chen­de Tabel­len­zei­le mit der CSS-Klas­se „fb-own­team“ ver­se­hen.
Mit­tels ent­spre­chen­der CSS-Aus­zeich­nung kann die­se Zei­le her­vor­ge­ho­ben wer­den (sie­he CSS-Bei­spiel).

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

Über die­ses Attri­but kann die Spal­te „Bäl­le“ aus­ge­blen­det wer­den. Dazu wird die Spal­te mit der CSS-Klas­se „dis­play-none“ ver­se­hen. Eine Defi­ni­ti­on der CSS-Klas­se „dis­play-none“ mit „dis­play: none;“ im Style­sheet ist natür­lich zusätz­lich not­wen­dig.
Der Vor­teil ist, dass es mit die­ser zusätz­li­chen, optio­na­len CSS-Aus­zei­chung im Tabel­len­code mög­lich ist, eine Tabel­le ein­mal ohne Bäl­le (z.B. in einem seit­li­chen Wid­get) dar­zu­stel­len, auf einer Team­sei­te jedoch die glei­che Tabel­le mit den Bäl­len.
Wird das Attri­but nicht ver­wen­det, so wer­den die Bäl­le dar­ge­stellt.

CSS Beispiel

Hier eine CSS Defi­ni­ton, die schon vie­le Mög­lich­kei­ten der Gestal­tung aus­nutzt. Für eine Ein­füh­rung in CSS-Design emp­feh­le ich die oben genann­te Sei­te unter faustball.de als auch ent­spre­chen­de CSS-Lern­web­sei­ten, 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 Defi­ni­ti­on nutzt die auto­ma­ti­sche Anwen­dung auf gerade/ungerade Zei­len um die alter­nie­ren­de Zei­len­far­be zu erzeu­gen. Das Gan­ze (odd/even) wur­de auch für die own­team-Zei­le ange­wen­det, um hier eben­falls unter­schied­li­che Far­ben ja nach Zei­le zu haben. Das „!important“ ist not­wen­dig, damit die CSS Aus­zeich­nung auch ange­wen­det wird, auch wenn sie in der CSS-Hier­ar­chie nied­ri­ger ist.
Die Tabel­le wür­de dann so aus­se­hen:

Die­ses Plugin bie­tet kei­ne Mög­lich­keit eige­nes CSS in Word­Press ein­zu­bin­den. Ent­we­der bie­tet das benutz­te The­ma schon so eine Mög­lich­keit im Bereich „Design“, oder nutzt bit­te eines der genü­gend vor­han­de­nen guten Custom CSS Plugins für Word­Press.

Download

Seit Ver­si­on 1.2.2 ist das Plugin bei wordpress.com ver­füg­bar.

Installation

  • Plugins -> Instal­lie­ren -> nach ‚faust­ball‘ suchen
  • das Plugin ‚Tabel­len für faustball.de‘ instal­lie­ren
  • Plugin akti­vie­ren

Update

  • Über Word­Press wie gewohnt aktua­li­sie­ren

History

V1.2.2

  • Ver­öf­fent­li­chung bei wordpress.com
  • Klei­ne Ände­run­gen in readme.txt

V1.2.0

  • Namens­än­de­rung um bei wordpress.com akzep­tiert zu wer­den
  • Kon­fi­gu­rier­ba­res Time­out für Abfra­ge von faustball.de ein­ge­fügt
  • ver­bes­ser­te Feh­ler­mel­dun­gen

V1.1.0

  • HTML Cleanup über HTML­Pu­ri­fier
  • Ein­stel­lun­gen zu eige­nen Spal­ten­über­schrif­ten

V1.0.0

  • Ers­te Ver­si­on

Kon­takt und Fra­gen über plugins@docollipics.de