Events Made Easy ist ein sehr (wirklich sehr sehr) leistungsfähiges WordPress-Plugin um Events, Veranstaltungen, Seminare usw. zu verwalten. Vollständig kostenlos, mit einem Entwickler der sich rührig um seine Anwender kümmert, voll und ganz empfehlenswert!
Die Leistungsfähigkeit versteckt sich dabei gekonnt, viele Möglichkeiten erschließen sich erst durch den Einsatz von Shortcodes und Hacks.
Eine Übersicht zu Events Made Easy gibt einen Einblick. Hier folgen nun ein paar Tipps für den Einsatz von Events Made Easy:
Buchungen in Deutschland rechtssicher gestalten
Das Buchungsformular ist im WordPress-Menü unter ‚Events Made Easy / Einstellungen / Buchung / Buchungsformular Format‘ definiert.
Geben sie dort vor dem #_SUBMIT zum Beispiel folgendes ein:
<p>#_GDPR Ich stimme der Speicherung der genannten Daten gemäß der <a href="/datenschutzerklaerung/">Datenschutzerklärung</a> zu</p><br />Dies erzeugt eine Checkbox, die (wie üblich) angeklickt werden muss, um das Formular absenden zu können. Das Beispiel verweist dabei mit einem Link auf die Seite ‚/datenschutzerklaerung‘
Pflichtfeld beim Buchungsformular
Das Pflichtfeld lässt sich einfacher ändern, da dies der CSS-Klasse eme-required-field zugewiesen ist. Einfach den Code wieder in den Einstellungen von Events made Easy, der style.css oder im WordPress-Dashboard einfügen.
Der Hinweis ‚Pflichtfeld‘ erscheint so z.B. kleiner:
.eme-required-field {
font-size: 80%;
}Seiteninhalte auf Mitglieder beschränken
Seit Version 2.1.64 vom 29.02.2020 bietet Events Made Easy die Möglichkeit, die Darstellung von Seiten nur für bestimmte Mitgliedsgruppen zu beschränken. So werden nun Memebership-Plugins wie z.B. s2member überflüssig.
Auf jeder WordPress-Seite findet sich im Admin-Bereich nun unten eine Info-Box ‚EME Membership‘: Dort kann man den Seitenzugriff auf bestimmte Mitgliedsgruppen sowie eine Mindestmitgliedschaftsdauer beschränken.
Absende-Button stylen
Der Absende-Button hat den Charme von Windows 3.11. So ändern sie ihn einfach:
Mit einem Button-Generator wie z.B. den Buttonoptimizer können sie entsprechenden CSS-Code erstellen.
Diesen CSS-Code dann in die style.css des Themes, oder noch einfacher, direkt in Events Made Easy einfügen. Dazu im WordPress-Dashboard unter ‚Veranstaltungen‘ ‚Einstellungen‘ den Reiter ‚Sonstiges‘, dort das Feld ‚Zusätzliches HTML für Kopf‘ editieren.
Wichtig: Der Button hat keine eigene CSS-Klasse oder ID, muss also über seinen Namen angesprochen werden
input[name=eme_submit_button]Bei Verwendung von z.B. dem Buttonoptimizer die vergebene Klasse .button dazu in allen Defintionen durch input[name=eme_submit_button] ersetzen.
Eine komplette Definition für einen orangen Button sieht z.B. so aus:
<style type="text/css">
input[name=eme_submit_button] {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 0px solid #a14727;
border-radius: 4px;
background: #ff9900;
background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ff9900));
background: -moz-linear-gradient(top, #ff9900, #ff9900);
background: linear-gradient(to bottom, #ff9900, #ff9900);
font: normal normal bold 14px arial;
color: #ffffff;
text-decoration: none;
}
input[name=eme_submit_button]:hover,
input[name=eme_submit_button]:focus {
border: 0px solid #ff723e;
background: #ffb800;
background: -webkit-gradient(linear, left top, left bottom, from(#ffb800), to(#ffb800));
background: -moz-linear-gradient(top, #ffb800, #ffb800);
background: linear-gradient(to bottom, #ffb800, #ffb800);
color: #ffffff;
text-decoration: none;
}
input[name=eme_submit_button]:active {
background: #995c00;
background: -webkit-gradient(linear, left top, left bottom, from(#995c00), to(#ff9900));
background: -moz-linear-gradient(top, #995c00, #ff9900);
background: linear-gradient(to bottom, #995c00, #ff9900);
}
</style>Hierbei habe ich die Definition noch um die style-Angabe ergänzt. Wird das CSS in der style.css des Themes definiert, so ist diese wegzulassen.
Veranstaltungs-Details in der Liste aus- und einklappbar gestalten
Folgender CSS-Code sorgt für ausklappbare Veranstaltungsdetails, dieser kann z.B. in der eigenen ’style.css‘ eingefügt werden: Ein Beispiel wie dies aussieht ist unter https://bettinaschober.de/termine/ zu sehen.
details {
@include states($default);
cursor: pointer;
transition: background 0.3s;
min-height: 48px;
max-height: 60px;
transform-origin: top center;
transform: rotate(0.1deg);
transition: all 0.3s;
::-webkit-details-marker {
display: none;
}
// Primary Style
&.primary {
@include states($primary);
}
// Success Style
&.success {
@include states($sucess);
}
// Square Style
&.square {
}
&[open] {
transition: all 0.6s;
min-height: 100px;
max-height: 200px;
}
}
summary {
outline: none;
&:selection {
background: transparent;
}
&:after {
margin-top: 2px;
content: "➕";
float: left;
[open] & {
padding: 0 0 12px 0;
content: "➖";
}
}
}