tl;dr: Wer Inhalte in WordPress ausblenden will benötigt eine Erweiterung. Wer den Blockeditor (Gutenberg) verwendet kann das Plugin Block Visibility verwenden. Mit Elementor und Elementor Pro hingegen installiert ein Werkzeug, mit dem man jedes Element beliebig ausblenden kann. 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 zu zeigen 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.
Daher benötigt man eine passende Erweiterung die zum eingesetzten Editor passt.
Mit dieser No-Code-Lösung können Sie steuern, welche Blöcke auf Ihrer Website sichtbar sind und wer sie sehen kann. Planen Sie Inhalte so, dass sie zu einem bestimmten Zeitpunkt angezeigt oder ausgeblendet werden. Zeigen Sie exklusive Promotionen für Ihre Kunden oder Mitglieder an. Beschränken Sie Blöcke auf bestimmte Benutzerrollen, Bildschirmgrößen, Query-Strings, WooCommerce-Produkte, ACF-Felder, WP-Fusion-Tags und mehr. Die Block-Sichtbarkeit ist ausschließlich für den WordPress Editor (Gutenberg) entwickelt und wurde für die Arbeit mit jedem WordPress-Block konzipiert. Dazu gehören Blöcke, die von WordPress bereitgestellt werden, von Drittanbietern stammen und sogar auf Blöcken basierte Widgets.
Dynamic Visibility ermöglicht es Ihnen, Widgets, Spalten, Container, Abschnitte oder Seiten auszublenden. Sie ist besonders nützlich, wenn Sie etwas bauen, das Sie nicht jedem zeigen möchten. Es handelt sich um eine Elementor-Erweiterung, daher müssen Sie die Elementor Free-Version installieren (die auch mit Elementor Pro funktioniert), bevor Sie das Plugin aktivieren. Wählen Sie eine OR/AND-Bedingung aus. Begrenzen Sie die Sichtbarkeit für bestimmte benutzerdefinierte Felder oder Seiten. Legen Sie ein Datum (von-bis), einen Wochentag oder eine Stunde fest und entscheiden Sie, wann jedes Element sichtbar sein wird. Begrenzen Sie die Sichtbarkeit für bestimmte Benutzerrollen, Benutzermeta, IP, Referral oder Benutzer. Begrenzen Sie die Sichtbarkeit für WooCommerce-Produkte. Legen Sie einen Fallback-Text (z.B. "Demnächst verfügbar") für ausgeblendete Elemente fest, der anstelle des Elements angezeigt wird. Sie können wählen, ob Sie das Element über CSS ausblenden oder aus dem DOM entfernen möchten.
Die Erweiterung Block Visibility – Conditional Visibility Control for the Block Editor ist kostenlos und im WordPress-Pluginverzeichnis zu finden. Nach erfolgreicher installation steht im Sidebar rechts ein neuer Tab Visibility zur Verfügung. Und zwar für einzelne Blöcke genauso wie für Layoutstrukturen wie Spalten oder Zeilen.
Die Arbeitsweise ist die, dass man zuerst die gewünschten Controls aktiviert und danach die Optionen der aktivierten Controls einstellt.
Hide Block. Dieses Control hat genau eine einzige Option, nämlich Hide the block form everyone. Ist diese aktiviert taucht im Frontend der enstprechende Block nicht mehr auf.
Die Funktion überschreibt alle anderen Controls der Block Visibility, dh man kann damit alle anderen Optionen auch kurzsfristig ausser Kraft setzen und einen Block komplett verbergen.
Advanced Custom Fields. Die Integration dieser Inhalte erlaubt es einen Block anzuzeigen in Abhängigkeit eines Wertes, den man in ein Eigenes Feld gepackt hat.
Beispiel:
Show the block if
>> eigenes Feld <<
Has any value / Has no value / Value is equal to / Value is not equal to / Value contains / Value does not contain
This field is assiciated with
The current post/ The current user / An option page
Dazu noch der Schalter
Hide when rule apply
Also: Man wählt sein Feld, überprüft den Wert des Feldes und kann den Block anzeigen oder ausblenden, wenn die Überprüfung wahr ergibt.
Die eingestellten Bedingungen lassen sich kombinieren, es lassen sich mehrere Bedingungen für das selbe Control oder aber auch unterschiedliche Controls kombinieren.
Der Typ Browser and Device lässt Sichtbarkeitseinstellungen nach den gängingen Browsern zu:
Chrome, Firefox, Edge, Explorer, Opera, Safari, Samsung Internet
Im selben Control kann man aber auch die Sichtbarkeit nach Plattform einstellen:
Android, iOS, Linux, Macintosh, Windows
Ausserdem kann man nach Device Typ einstellen, und zwar:
Mobile, Robot, Desktop (=alle anderen)
Damit können also Inhalte abhängig vom jeweiligen Benutzer genau passend zu dessen technischer Umgebung angezeigt oder ausgeblendet werden.
Sollte man also wirklich einen Block verwenden, der auf einem bestimmten Browser Ärger verursacht kann man damit dessen anzeige verhindern – und den Ärger zumindest verbergen.
Der Controltyp Date und Time erlaubt das erwartbare, das in einfacher Form umgesetzt werden kann:
Im einfachsten Fall kann einfach ein Zeitraum eingestellt werden indem ein Start- und ein Endzeitpunkt festgelegt wird. Man definiert also 2 Timestamps innerhalb dessen der Block angezeigt oder über die Umkehrung am Ende des Controls versteckt werden soll.
Die zweite Möglichkeit erlaubt das Einstellen von Wochentagen, damit kann man also Einbledungen zum Wochenende etc. realisieren.
Ausserdem ist die Uhrzeit als Kriterium auch möglich, damit lassen sich Blöcke umsetzen die eine Einblendung in der Art wie „jetzt geöffnet“ oder „aktuell geschlossen“ umsetzen.
Der Controltyp Location dient dazu die Umgebung abzufragen, in welcher der auszublendende Block eingesetzt wurde:
Abgefragt werden können Page Type (Frontpage, Datenschutzseite etc) Post Type (Beitrag, Seite) , Taxonomie (Kategorien, Schlagworte), Post, Post ID (bestimmte Seite oder Beitrag), Post Attributes (Autor, Kommentare, …) und Archive (Typ bzw. bestimmtes Archive).
Eine Anwendung wäre hier zB. der Einsatz im Header: zeige einen Block nur auf der Homepage. Oder aber auch im Archiv: zeige hier die Kategorien (nicht) an.
Das Control Metadata kann Post- und Usermetadaten abfragen. Im Beispiel rechts wurde über ACF eine Benutzernummer angelegt. Die Block Visibility regelt nun, dass der Block nue angezeigt ist wenn auch eine Benutzernummer für den aktuell eingeloggten User hinterlegt ist.
Über die selbe Technik lassen sich auch eigene Felder anzeigen/verbergen die man für Seiten oder Beiträge erstellt hat.
In Verbindung mit ACF-Feldern kann man so Blöcke abhängig vom Inhalt dieser ACF-Felder anzeigen oder eben nicht.
Das Control User Role hat als erste und wichtigste Abfrage jene nach dem Login. Eingeloggte und Ausgeloggte User können unterschiedliche Blöcke sehen.
In einem weiteren Schritt kann ein Block je nach Rolle angezeigt werden: so können Informationen nur für Abonenten, Autoren etc. angezeigt werden.
Die Option Users erlaubt das ein/ausschliessen einzelner eingeloggter User.
Über die Definition eines User rule sets können die Anzeigebedingungen kombiniert werden.
Cookie. Erlaubt die Abfrage eines Cookies zur Anzeigensteuerung.
Query String. Damit wird die aufgerufene URL untersucht und als Kriterium für die Sichtbarkeit herangezogen.
Referral Source. Verwendet den HTTP-Referrer, damit kann also Sichtbarkeit ausgehende von der (Browser)Herkunft des Users gesteuert werden.
Screen Size. Bietet 3 ganz einfach zu verstehende Optionen die bei jedem Block angewendet werden können:
Hier hat der Programmierer des Plugins eine sehr gut durchdachte Möglichkeit geschaffen, sog. Sets zu definieren die dann auf verschieden Blöcke angewendet werden können.
Also: man stellt (genauso wie bei den einzelnen Blöcken zuvor beschrieben) seine Bedingungen für Sichtbarkeit zusammen. Dieses Preset hat einen Namen und damit kann man an unterschiedlichen Blöcken genau die selben Sichtbarkeiten zuordnen.
Mit Hilfe dieser Technik kann man redundante Einstellungen vermeiden. Mehr darüber auf der Website blockvisibilitywp.com.
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.
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.
Mit Version 3.19 (Februar 2024) hat Elementor (Anzeige) Bedingungen für alle Elemente eingeführt. Wie bei Elementor üblich muß dass Feature (noch im AlphaStadium) erst aktiviert werden:
Dashboard > Elementor > Einstellungen | Eigenschaften > Bedingungen anzeigen
Damit taucht dann diese neue Funktion im
Panel > … > Erweitert | Layout
auf (ganz unten, unter CSS Klassen). Der Klick auf das Icon öffnet ein Dialogfenster, dass ähnlich dem der Anzeigebedingungen von Themebuilder-Templastes ist.
Hier kann nun eine einzelne oder mehrere Bedingungen definiert werden die zutreffen müssen, damit ein Element angezeigt wird. Mögliche Einstellungen sind
Seite. Erlaubt die Selektion nach Übergeordneter Seite (Page Parent) und dem Verfasser (Autor).
Beitrag. Hier kann nach Taxonomie (Kategorie und Schlagwörtern), Nach Datum (Erstellungsdatum, Änderungsdatum) und auch wieder nach Verfasser selektiert werden.
User. Erlaubt eine Auswahl nach Loginstatus, Benutzerrrolle und auch nach Registrierungsdatum.
Daten & Time. Hier kann zwischen Besucherzeit und Serverzeit unterschieden werden. Eine Bedingung kann Wochentag sein, eine andere Aktuelle Zeit mit Selektionen ist, ist nicht, davor, danach. Das gleiche geht auch mit dem aktuellen Datum.
Archiv. Selektion nach Taxonomien.
From Url. Kann Bestandteile der eingegebenen URL überprüfen und zum Anzeigekriterium machen.
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.
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.
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.
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 eigenen 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).
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.
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!
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Mit den Plugins Block Visibility und Dynamic Visibility kann man sehr viele Anforderungen umsetzen, egal ob man mit Elementor oder dem Blockeditor arbeitet. Elementor selber setzt jetzt auf eine integrierte Lösung, die aber noch sehr früh in der Entwicklung ist und nicht die Komplexität des Plugins bietet.
Alle 3 Lösungen unterscheiden sich funktionell nur wenig, wobei jeder gute Ideen hat: Die Visibility Presets von Block Visibility sind extrem praktisch,. Dynamic Visibility lässt sogar PHP zu um eigene Anforderungen umzuseten.
Veröffentlicht am: 30. Oktober 2023
Letztes Update: 8. Februar 2024
