Inhalte in WordPress ausblenden

Inhalte in WordPress ausblenden

tl;dr: Wer Inhalte in WordPress ausblenden will hat es mit dem Block-Editor nicht gerade einfach: eine einfache Funktion ist nicht eingebaut. Mit Elementor und Elementor Pro hingegen installiert man ich auch ein Werkzeug, mit dem sich jedes Element beliebig ausblenden lässt. Wer noch mehr benötigt sollte sich die kostenlose Erweiterung Dynamic Visibility anschauen, die volle Funktionalität bekommt man dann mit der Kauf-Version von Dynamic Content for Elementor.

Kaum zu glauben aber wahr: etwas nicht anzuzeigen kann eine Herausforderung sein. So schnell sich der Blockeditor von WordPress auch entwickelt, eine einfache Lösung um einen Block nicht anzuzeigen gibt es noch nicht. Natürlich gibt es eine Reihe von Ansätzen, diese Funktionalität zu erreichen (wie zB bei haurand.com beschrieben), doch das ist weder intuitiv noch rasch durchzuführen. 

Wer mit Elementor arbeitet hat es hier bedeutend einfacher. 

Elemente ausblenden

…Erweitert > Responsive in Elementor

Egal ob bei einem einzelnen Widget oder einem Abschnitt (veraltet!) oder Container. Unter 

… Erweitert > Responsive 

kann für jedes Element die Darstellung für jeden Ansichtsmodus (Desktop | Tablet | Mobil, wenn zusätzliche Breakpoints definiert wurden auch dafür) ausgeblendet werden. 

Der HTML-Aufbau in Elementor macht es möglich, dass man wirklich alles mit diesen Einstellungen ausblenden kann. Manchmal muß oder will man sich so helfen, wenn man zB. unterschiedliche Versionen eines Elementes für die Desktop- und die Mobil-ansicht gestalten will. 

Elementor Repsonive Einstellungen
unter … Erweitert > Responsive lassen sich alle Elemente (Widgets und Layout) auf den verschiedenen Gerätetypen ausblenden.

Hat man nun ein Element ausgeblendet so wird es ausgegraut, der Bereich wird dezent schraffiert dargestellt. Das kann auch störend sein: will man unsichtbare Elemente auch im Editor-Modus unsichtbar schalten so findet man unter

Einstellungen (links oben) > Benutzer-Einstellungen | Responsive Vorschau

die Option Verborgene Elemente: zeigen/verstecken

Somit werden diese auch im Editor unsichtbar.

Elementor responsive ausgeblendet
Ausgeblendete Elemente werden in der Vorschau grau schraffiert dargestellt.

Dynamic Visibility

Für viele Anwendungen sind die Möglichkeiten von Elementor ausreichend, was aber, wenn man mehr Flexibilität benötigt? Wenn man zB. bestimmte Dinge zu einem bestimmten Datum, einer Uhrzeit oder nur einer bestimmten Benutzergruppe zeigen will?

Die Antwort heisst Dynamic Visibilty. Dieses kostenfreie Plugin ist eine abgespeckte Version eines Bestandteils von Dynamic Content for Elementor, einer Funktionssammlung mit über 140 verschiedenen Features. 

Bei aktiviertem Plugin oder aktiviertem Feature in der Pro-Version taucht nun ein 4., zusätzlicher Tab im Panel auf – damit kann man nun die Sichtbarkeit von Widgets und Layout-Strukturen (Container, Abschnitte) beieinflussen. 

Die Voreinstellung ist sinnvoller Weise deaktiviert, dh. nur wenn ich die Funktionalität benötige wird Code erzeugt. Der Schalter hierfür heisst einfach Visibility.

Dynamic Visibility on
Bei aktiviertem Plugin oder Feature (Pro) wird ein 4. Tab im Panel eingeblendet.

Grundeinstellung für Visibility

Die erste Option bei aktivierter Visibility heisst Always hide this element. Das ist also ein genereller Aus/Einschalter für eben jedes Element, das ich mit dem Elementor platziere.

Die Option Keep HTML bedeutet, dass zwar das Element nicht angeziegt wird, der HTML-Code hingegen innerhalb der ausgelieferten Seite verbleibt und vom Browser oder dem Bot auch gelesen werden kann. Die Ausblendung des Elements erfolgt hier einfach durch CSS.

Um die nächste Option Display Mode zu verstehen muß man sich die Arbeitsweise dieser Erweiterung vorstellen: verschiedene Auslöser (Triggers) sorgen dafür, dass der Display Mode (zeigen oder verstecken) angewandt wird. Diese Triggers können kombiniert werden, wobei die Logical connective dieser Kombination oder (OR) oder und (AND) sein kann. 

Es gibt 13 Trigger, wobei 2 davon (MyFastApp und Custom Condition) der Pro-Version vorbehalten sind. 

Übersetzt als Beispiel: Wenn man will, dass ein bestimmter Inhalt nur eingeloggten Abonennten angezeigt wird setzt man den Display mode auf show und den Trigger bei User & Role auf Subscriber

Visibility Bascis
Nur bei aktivierter Visibility lassen sich die anderen Optionen setzen.

Um zu erkennen wo man eine Visibility-Einstellung vorgenommen hat wird im Navigator der betroffene Bereich des Dokumentes mittels gestricheltem Rahmen gekennzeichnet. Das Beispiel zeigt: die Einstellung wurde im Container durchgeführt, betroffen sind der Container und die darin platzierten Widgets Überschrift und Bild.

Dynamic Visibility im Navigato
Im Navigator wird mittels einer roten, gestrichelten Linie angezeigt welche Widgets von der Einstellung betroffen sind bzw. bei welchem (rotes, durchgestrichenes Augen-Icon) die Einstellung vorgenommen wurde.

Trigger Post & Page

Mit Post & Page als Trigger wird man vermutlich in Templates arbeiten. Über Post ID lassen sich eine bestimmte IDs auswählen um etwas auszublenden (oder anzuzeigen).

Die Post-Type Einstellungen erlaubt die Anzeige in bestimmen Beitragstypen (zB. nur in Beiträgen oder eignen Post-Typen).

Die Page/Post Auswahl erlaubt eine Selektion aus bestehenden Inhalten der Website.

Taxonomy lässt eine Auswahl nach zB: Kategorien oder Schlagworten zu.

Post Field erlaubt die Auswahl nach Überprüfung eines Feldwertes, also zB ob ein ACF-Feld befüllt ist oder einen bestimmten Wert hat. Damit lässt sich zum Beispiel steuern, dass ein Link nur dann angezeigt wird wenn das entsprechende URL-Feld auch gesetzt wurde.

Mit Multiple Metas kann man die Existenz mehrere Feldwerte überprüfen. 

Format überprüft, ob das Element dem ausgewählten WordPress-Format zugeordnet ist. (Mehr über WordPress Formate hier).

Die Navigation-Tree-Triggers erlauben die Überprüfung, wo das Element aktuell in einem Post als Eltern- oder Childpage angewandt wird (mit jeder Menge Variationen).

Post & Page Trigger
Optionen des Post & Page Triggers

Trigger User & Role

Die User & Role Trigger erlauben genaues Ansprechen des Besuchers über seine ID, IP, Rolle oder auch den Referrer.

Roles –  hier wähl man aus, welche Benutzerrolle (vom Administrator bis hin zum Visitor, also den nicht eingeloggten User) Auslöser für das Anzeigeverhalten sein soll. Es können mehrere Benutzerrollen gewählt werden. 

Selected Users erlaubt die spezifische Auswahl einzelner User als Trigger. Es können ID, Username oder E-Mail zur Selektion verwendet werden. 

Wer sich mit den Berechtigungen seiner User beschäftigt hat kann auch diese mittels User can als Trigger verwenden. 

User Field wiederum erlaubt die Überprüfung einzelner (auch eigener) Felder auf Existenz oder Wert. Funktioniert logischer Weise nur mit eingeloggten Usern. 

Remote IP erlaubt die Angabe einer oder mehreren IP-Nummern, für welche ein Inhalt angezeigt wird. Das kann in Intranet-Umgebungen oder bei Webseiten die von einer Agentur mit statische IP verwaltet werden hilfreich sein. 

Der Referrer kann verwendet werden, um User die von einer bestimmten Seite kommen (zB von facebook oder linkedIn) mit besonderem Inhalt zu versorgen.

Max per User erlaubt zu limitieren, wie oft ein Visibility-Setting für einen User funktionieren soll.

Trigger Archive

Der Archive Trigger erlaubt die Anzeige von Inhalten abhängig von der Einordnung Archiv-Typen (Kategorien, Schlagwörter, Autoren, Datumsarchive etc) bzw. den Taxonomy-Terms. 

Wer eine Anwendung dafür hat bitte das Beispiel in den Kommentaren posten!

Archive Trigger
Der Archive Trigger wohl eine Option für besondere Anwendungen.

Trigger Dynamic Tags

Die Dynamischen Attribute sind – besonders bei der Arbeit mit Templates – hilfreich. Mit Hilfe des Dynamic Tags – Triggers lassen sie sich auch zur Anzeigenkontrolle von Inhalten verwenden. Das funktioniert in 2 Schritten: zuerst wird der Tag ausgewählt (das kann vom einfachen Fall eines Datums eines Beitrags bis hin zur Verwendung eines Tokens gehen. Im Zweiten Schritt wird dann der Wert überprüft, möglich ist:

  • nicht gesetzt oder leer
  • existiert oder beliebiger Wert
  • kleiner als
  • größer als
  • enthält
  • enthält nicht
  • in Array (wenn man zb: eine ACF-Gallerie verwendet)
  • gleich
  • ungleich
Visibility Dynamic Tags
Über Dynamic Tags lassen sich extrem viele Werte als Trigger verwenden

Trigger Device & Browser

Im Unterschied zu den oben beschriebenen Responsive-Einstellungen im Elementor verwendet diese Responsive Option nicht die Pixel im Viewport zur Erkennung des aktuellen Gerätes sondern die WordPress eigene Geräte-Erkennung. Diese setzt auf das Auslesen des Strings  $_SERVER[‚HTTP_USER_AGENT‘].

Browser erlaubt die Definition eines oder mehrerer Browser als Trigger für die Anzeige. Bestimmte Versionen können hier nicht ausgewählt werden. 

Visibility Browsererkennung
Der Device & Browser Trigger steuert die Anzeige nach Größe und Browser

Trigger Date & Time

Datums- und zeitabhängige Anzeigen sind vermutliche die häufigsten Anwendungen für Dynamic Visibility. Das Tool benutzt die in den WordPress-Einstellungen festgelegte Uhrzeit bzw. Zeitzone. 

Zuerst muss die Option Use Dynamic Dates  gesetzt werden, soferne man die Werte nach denen angezeigt werden soll dynamisch auswählen will (Token, Systemzeiten etc.).

Die Anzeigeoptionen sind immer paarweise, wobei nicht immer beide Werte gesetzt werden müssen. Date FROM und Date TO legen fest ab welchen und/oder bis zu welchem Datum ein Inhalt angezeigt werden soll. 

Period FROM und Period TO machen das selbe, nur dass zur Eingabe kein Datumsauswahl-PopUp erscheint (anderes Eingabeformat).

Days of the Week lässt eine Anzeige nach Wochentagen zu.

Time FROM und Time TO erlaubt die Anzeigesteuerung nach Uhrzeit.

Mit diesen Optionen lassen sich Weihnachtswünsche, Urlaubsanzeigen, Tagesabhängige Speisekarten etc. so steuern, dass der User die relevanten Informationen bekommt wenn es notwendig ist – und sonst eben nicht.

Visibility Date & Time
Die Date & Time Trigger erlauben datums- und tagesabhängige Anzeigen.

Trigger Geotargeting

Damit die Anzeigesteuerung über Geotargeting funktioniert muss zuvor das kostenfreie Plugin Geolocation IP Detection installiert werden. Danach stehen Auswahlfelder bereit.

Country erlaubt die Auswahl eines oder mehrerer Länder zur Anzeige von Inhalten.

City erlaubt eine Stadtauswahl.

Wie immer beim Geotargeting gilt zu berücksichtigen, dass hier die IP-Nummer des Users herangezogen wird und nicht der physische Standort, wie es zB. bei einem Mobil-Device über eine Standortabfrage möglich wäre. 

Visibility Geotargeting
Mittlels zusätzlichem Plugin lassen sich Anzeigen ortsabhängig steuern.

Trigger Context

Wer Sichtbarkeit über Server-Variablen GET, POST, COOKIE und SERVER umsetzen will benötigt den Context Trigger Parameter. Hier wird zuerst der Variablen-Name definiert und danach die Request-Methode, danach kann Status (Wert) des Parameters überprüft werden. Damit kann man wertabhängige Anzeigen umsetzen, je nachdem ob eine Parameter den Wert 1, 100 oder 1000 hat. Spannend.

Site fragt nach den WP-eigenen Conditional Tags

Die beiden Limiter Max per Day und Max Total erlauben die entsprechende Limitierung, ein Anwendungsbeispiel hierfür wäre die Anzeige eines Rabattcodes nur für die ersten 100 Besucher.

Language schliesslich ist nur bei entsprechendem Mulitilingual-Plugin verfügbar (Polylang, WPML, TranslatePress, Weglot) und erlaubt die Anzeige nach Sprache die im Sprachenplugin definiert wurde.

Visibility Context
Über den Context Trigger lässt sich die Sichtbarkeit über Parameter wie zB. Sprachen steuern.

Trigger WooCommerce

WooCommerce Shops haben eigene Optionen, die als Trigger abgefragt werden können. 

Cart is empty / not empty erlaubt die Anzeige abhängig davon, ob der User Produkte im Warenkorb hat. 

Product Type is erlaubt die Abfrage nach dem ProduktTyp (einfaches, gruppiert, externens, variables Produkt)

Product in the cart und Product Category in the cart checkt den Warenkorb und erlaubt abhängige Anzeigen zu den gewählten Produkten.

Visibility WooCommerce
Für WooCommerce Installationen stehen eigene Trigger bereit.

Trigger My FastAPP

Die Software My FastAPP benutzt WordPress als Backend um eine Mobile-App für iOS und Android zu erzeugen. Dieser Trigger erlaubt die Auswahl, ob ein Element auf der Site, in der App oder bei beidem gezeigt werden soll. Pro Funktion.

Trigger Random

Ein einfacher Schieberegler erlaubt die Eingabe von 0-100 und ermöglicht so einen Prozentsatz anzugeben. Und genau so oft wird der Inhalt angezeigt. Wer also unterschiedliche Inhalte mixen will oder bei jedem Aufruf eine andere Seite erzeugen will findet hier ein Werkzeug.

Visibilty Random
Einfache Bedienung - große Auswirkung. Wie oft soll ein Inhalt angezeigt werden?

Trigger Custom Condition

Und wer jetzt immer noch nicht genug hat kann sich seine Anzeigebedingungen auch selber basteln. Der Trigger Custom Condition erlaubt die Eingabe von PHP-Code, wobei auf alle WordPress-Variablen zugegriffen werden kann. Ein Beispiel für eine Anwendung habe ich hier Beschrieben: die Anzeige nach eingestellter Browsersprache. Pro Feature

Trigger Custom Condition
Wer mehr braucht: alle PHP-Funktionen können mit dem Pro-Feature Custom Condition eingebaut werden.

Trigger Events

Wer in den Einstellungen zur Visibility (siehe oben) die Option Keep HTML aktiviert hat kann den Event-Trigger nutzen. Durch setzen eines Events (click, mousover, doubleclick, touchstart oder touchmove und der Engabe der ID des Elements (Trigger on this Element) , der das Event auslösen soll, kann hier die Sichtbarkeit beeinflusst werden. 

Dabei lässt sich einstellen ob eine Animation erfolgen soll (Show Animation) und ob andere Elemente (Hide other elements) ausgewählt per ID gleichzeitig ausgeblendet werden sollen.

ein Toggle Schalter macht die Ein/Ausblendung umkehrbar.

Ausserdem lässt sich auch On Page Load aktivieren. 

visibility event
Der Event-Trigger hilft Inalte on Click, Load etc. anzuzeigen.

Fallback

Wer vermeiden will, dass eine unerwünschte Leere im Falle von ausgeblendeten Inhalten entsteht kann sich mit dem Fallback-Feature eine Absicherung einbauen. Dieser lässt HMTL und also auch Shortcodes zu, man kann also auch hier wiederum Templates zur Gestaltung verwenden.

Visibility_fallback
Ein Fallback sichert die Sache gegen unerwartete Löcher ab.

Fazit

Die Sichtbarkeit von Inhalten zu kontrollieren kann sehr hilfreich sein, wenn man mit möglichst wenigen Templates auskommen will. Ausserdem kann man mit den vielen Features dem User nur jene Dinge zeigen, die gerade in der aktuellen Situation von Bedeutung sind. Das kann beim Shoppen ebenso wichtig sein wie zu einer bestimmten Tageszeit oder für einen aktuellen Status, eine Loginaufforderung etc. 

Wie so oft: mit Elementor und Know-How wird die Website rasch besser.

Veröffentlicht am: 30. Oktober 2023

Letztes Update: 23. November 2023