Mitgliederbereich mit Elementor und dynamic.ooo

Die Anforderungen an das Projekt sind folgende: 

• Benutzer sollen sich registrieren können
• Nach Freischaltung durch einen Administrator soll der User in der Lage sein, Zugriff auf bestimmte Bereiche der Webseite zu erhalten die sonst unsichtbar sind. 

Um das umzusetzen wird WordPress mit folgenden Erweiterungen ausgestattet:

1. Elementor Pro – kostenpflichtig (wir benötigen die Formularfunktion die im Pro-Paket enthalten ist)
2. User Role Editor – frei (um eine eigene Benutzerrolle Mitglied zu definieren)
3. Advanced Custom Fields – frei (damit werden die Benutzerfelder erweitert)
4. Dynamic Content for Elementor – kostenpflichtig (zur Anwendung kommen Formularfunktionen und die Sichtbarkeits-Erweiterung).

Als ersten Schritt wird eine neue Benutzerrolle für Mitglieder definiert. Damit kann man – unabhängig von den WordPress-Grundeinstellungen – bestimmte User mit besonderen Rechten oder Informationen ausstatten. Dazu wird das kostenlose Plugin User Role Editor verwendet. Unter 

klickt man auf die Funktion Rolle hinzufügen. 

Mit der Erweiterung ACF (Advanced Custom Fields) wird ein Feld für eine Mitgliedsnummer angelegt. Dazu wechselt man nach 

Als nächstes benötigt man ein Registrierungsformular, das ein wenig mehr kann als das im WordPress eingebaute. Ausserdem muss natürlich die Registrierung auf der Webseite erlaubt sein, dass ist in

einzustellen.

Man soll ja die Mitgliedsnummer gleich bei der Registrierung angeben können. Daher erstellt man eine neue Seite die zB. Registrierung heissen kann. Auf dieser Seite wird das Widget Formular eingesetzt und die folgenden Felder angelegt:

• Name
• E-Mail
• Migliedsnummer
• Passwort
• Passwort bestätigen
• HTML

Das Feld Name wird als Pflichtfeld markiert. Die ID lautet name.  Dieser Name wird zum Benutzernamen in WordPress. Feldtyp: Text.

Das Feld E-Mail wird ebenfalls als Pflichtfeld markiert. Die ID lautet email. Mit dieser Adresse kann der User später ein neues Passwort anfordern. Feldtyp: E-Mail.

Der Feldinhalt mit der ID mitgliedsnummer wird in dem zuvor angelegtem ACF-Feld gespeichert. Feldtyp: Text.

Mit Hilfe der beiden Felder wird die Passworteingabe überprüft und sicher gestellt, daß das Passwort komplex genug für die Webseite ist.  Das erste Feld erhält die ID password1, das zweite die ID password2. Feldtyp: Passwort.

Man legt also eine Condition an und legt fest, dass der Wert des ersten Passwortfeldes jenem des zweiten entsprechen soll. 

password1 == password 2

Ausserdem kann an eine Fehlermeldung angeben die im Falle eine unkorrekten Eingabe angezeigt werden soll, schliesslich lässt sich auch definieren, ob bis zum Erfüllen der Bedingung der Abschicken-Button versteckt oder disabled werden soll.

Nun kann man eine zweite Bedingung anlegen. Der Ausdruck hierfür kann zB. so aussehen:

password1 matches „/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/“

übersetzt bedeutet das, dass der Wert des Feldes password1 dem Regulärem Ausdruck (Regex) innerhalb der Anführungszeichen „ entsprechen soll. Dieser Ausdruck hier ist ein Beispiel für die Passwortkomplexität, die WordPress empfiehlt. Also: das Passwort muss mindestens 8 Zeichen lang sein, Gross- und Kleinbuchstaben, Zahl und Sonderzeichen enthalten. 

Die Fehlermeldung kann lauten Passwort nicht komplex genug und die Option für den Absendebutton wie zuvor Disabled.

Als nächster Schritt wird nun festgelegt, was mit den Formulardaten geschehen soll sobald dieses erfolgreich abgeschickt wurde.  Wie bei jedem Formular (mehr über Formulare hier) kann man die Option Collect Submission einstellen, womit die Daten innerhalb von Elementor abgelegt werden. Weiters kann man natürlich ein E-Mail verschicken, was durchaus Sinn ergibt, schliesslich muss jemand mit Berechtigung über eine Neuregistrierung Informiert werden um die Mitgliedsnummer zu überprüfen und ggf. die Benutzerrolle von Abonnent auf Mitglied zu ändern. 

Für das Benutzerfeedback ist es auch zu empfehlen, eine Weiterleitung einzurichten, damit der Benutzer auf eine eigene Seite kommt wo Informationen stehen wie lange die Freischaltung vmtl. dauern wird und welche Möglichkeiten ihn danach erwarten.

Entscheidend ist jedoch die mit der Erweiterung neuen Möglichkeit Save installierten Optionen zu nutzen.

Die hier benutze Funktionalität der dynamischen Anzeigen ist auch als kostenfreies Plugin unter dem Namen Dynamic Visibilty for Elementor erhältlich, ist aber auch bereits in dem zuvor installierten Plugin Dynamic Content for Elementor enthalten und muss nicht zusätzlich aktiviert werden.

Die Arbeitsweise ist recht einfach: zusätzlich zu den 3 bekannten Tabs taucht ein neuer mit dem Namen Visibility auf. Hier kann man die Funktionalität aktivieren.

Die erste Option Always hide this element erlaubt das bedingungslose ausblenden des Elementes.  Darunter ist mit Keep HTML die Möglichkeit gegeben, den Source-Code in die Seite zu laden, die Darstellung jedoch zu verhindern (also per CSS auszublenden).

Der Display Mode ist die wichtigste Grundeinstellung, hier legt man fest, ob der Inhalt im Falle dass eine danach eingestellte Bedingung zutrifft gezeigt (show, links)  oder verborgen (hide, rechts)  werden soll.

Da man mehrere Bedingungen definieren kann muss auch die Entscheidung getroffen werden ob diese UND oder ODER angewandt werden sollen. Die Option wird unter Logical connective ausgewählt (Voreinstellung ist oder).

Im nächsten Feld sind nun 13 verschiedene Triggers vorhanden. Für jeden dieser Trigger existiert ein Tab mit den Einstellungen dazu. Es ist nicht notwendig, nicht verwendete Trigger zu löschen, kann aber helfen um die Übersichtlichkeit zu bewahren. 

Unter den 13 Tabs für die verschiedenen Trigger ist noch ein Tab Fallback vorhanden. Hier kann man zB. eine Information unterbringen, dass dieser Inhalt nur für registrierte, angemeldete Benutzer zu sehen ist. 

Über die Einstellungen mit Dynamic Visibility können also Bereiche auf Seiten und Beiträge in der Sichtbarkeit eingeschränkt werden. Das funktioniert mit klassischen Abschnitten genauso wie mit den neuen Containern. Es kann aber auch für einzelne Widgets angewandt werden (zb. für Anmeldeformulare oder Downloads) etc.