{"id":733,"date":"2021-01-29T16:00:01","date_gmt":"2021-01-29T15:00:01","guid":{"rendered":"https:\/\/devowl.io\/?post_type=knowledge-base&#038;p=733"},"modified":"2025-05-02T17:44:53","modified_gmt":"2025-05-02T15:44:53","slug":"real-cookie-banner-create-individual-content-blocker","status":"publish","type":"knowledge-base","link":"https:\/\/devowl.io\/de\/wissensdatenbank\/real-cookie-banner-individuellen-content-blocker-erstellen\/","title":{"rendered":"Wie erstelle ich einen individuellen Content Blocker?"},"content":{"rendered":"<section class=\"l-section wpb_row height_medium\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p class=\"translation-block\">Du verwendest ein WordPress Plugin oder einen Service, f\u00fcr den es keine Content Blocker Vorlage in Real Cookie Banner gibt? Du kannst jederzeit <a href=\"\/de\/wissensdatenbank\/real-cookie-banner-neue-cookie-vorlage-anfordern\/\" target=\"_blank\" rel=\"noopener\">eine neue Cookie und eine neue Content Blocker Vorlage kostenlos anfragen<\/a>, und wir werden versuchen, sie zeitnah f\u00fcr dich zu implementieren. Alternativ kannst du auch jederzeit einen eigenen Content Blocker selbst erstellen. Dieser Artikel zeigt dir Schritt f\u00fcr Schritt, wie du alle notwendigen Informationen findest.<\/p>\n<\/div><\/div><div class=\"w-iconbox us_custom_8551abba iconpos_left style_outlined color_primary align_left no_title\"><div class=\"w-iconbox-icon\" style=\"font-size:18px;\"><i class=\"fas fa-info\"><\/i><\/div><div class=\"w-iconbox-meta\"><div class=\"w-iconbox-text\"><p>Wir m\u00fcssen darauf hinweisen, dass die folgenden Aussagen keine Rechtsberatung darstellen. Wir k\u00f6nnen dir daher nur Einsch\u00e4tzungen aus unserer intensiven Erfahrung mit den EU-Rechtsvorschriften in der Praxis und eine technische Einsch\u00e4tzung der Situation geben.<\/p>\n<\/div><\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Wo kann ich einen Content Blocker erstellen?<\/h2>\n<p class=\"translation-block\">Gehe in dein WordPress Backend und dort in der linken Seitenleiste durch einen Klick auf <em>Cookies<\/em> in die Real Cookie Banner Einstellungen. Auf dieser Seite findest du mehrere Tabs. Einer davon hei\u00dft <em>Content Blocker erstellen<\/em> und ist f\u00fcr uns relevant. In dem Tab gibt es in der oberen rechten Ecke einen \"<em>Content Blocker hinzuf\u00fcgen<\/em>\"-Button, \u00fcber den wir einen Content Blocker erstellen k\u00f6nnen. Neben der Auswahl aus Content Blocker Vorlagen finden wir in dieser Ansicht oben einen \"<em>Individuell erstellen<\/em>\"-Button, mit dem wir einen Content Blocker erstellen k\u00f6nnen.<\/p>\n<p class=\"translation-block\">Bitte beachte, dass jeder Content Blocker einen oder mehrere Services ben\u00f6tigt. Sobald diese Services akzeptiert werden, wird der Inhalt geladen (anstelle des Content Blockers). Daher solltest du alle ben\u00f6tigten Services (mit dessen Cookies) erstellen, bevor du deinen individuellen Content Blocker erstellst. Wie das geht, kannst du im Artikel <a href=\"\/de\/wissensdatenbank\/real-cookie-banner-individuelles-cookie-erstellen\/\" target=\"_blank\" rel=\"noopener\"><em>Wie erstelle ich einen individuellen Cookie (Service)?<\/em><\/a> nachlesen.<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h2>Was muss bei einem Content Blocker angegeben werden?<\/h2>\n<p>Um den Content Blocker zu erstellen, siehst du eine Reihe von Feldern. Unter jedem Feld findest du eine Beschreibung, was genau in das Feld eingegeben werden muss. Bitte lies dir die Beschreibung aufmerksam durch, um zu verstehen, was du in welches Feld eingeben musst. Im Folgenden werden wir auf jedes Feld mit Beispielen n\u00e4her eingehen.<\/p>\n<p>Es gibt die folgende Felder zu auszuf\u00fcllen:<\/p>\n<h3>Name<\/h3>\n<p>Der Name des Content Blockers wird in der \u00dcberschrift eines sichtbaren Content Blockers angezeigt. Er sollte klar beschreiben, welcher Service nicht geladen werden kann, damit dein Besucher leicht entscheiden kann, ob er dem Cookie (Service) zustimmt, um den jeweiligen Inhalt zu sehen.<\/p>\n<p><strong>Beispiel:<\/strong> YouTube<\/p>\n<\/div><\/div><div class=\"w-image us_custom_70facfb4 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/knowledge-base\/name-of-content-blocker-in-title-of-content-blocker.png\" aria-label=\"Name des Content Blockers im Titel des Content Blockers\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"501\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/knowledge-base\/name-of-content-blocker-in-title-of-content-blocker-890x501.png\" class=\"attachment-large size-large\" alt=\"Name des Content Blockers im Titel des Content Blockers\" loading=\"lazy\" srcset=\"\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" data-srcset=\"\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3>Beschreibung<\/h3>\n<p>Die Beschreibung ist ein Freitextfeld, in dem du deinen Besuchern mehr Informationen dar\u00fcber geben kannst, was nicht geladen werden konnte und aus welchem Grund. Insbesondere bei z.B. Kontaktformularen kann dies hilfreich sein, um dem Nutzer den Vorteil zu zeigen den Service zuzulassen oder ihm eine E-Mail-Adresse als alternative M\u00f6glichkeit zur Kontaktaufnahme zu geben.<\/p>\n<p><strong>Beispiel:<\/strong> Das Video von YouTube wurde blockiert, weil du das Laden nicht erlaubt hast.<\/p>\n<\/div><\/div><div class=\"w-image us_custom_70facfb4 align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/knowledge-base\/beschreibung-wird-im-content-blocker-angezeigt.png\" aria-label=\"Beschreibung wird im Content Blocker angezeigt\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"501\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/knowledge-base\/description-displayed-in-content-blocker-890x501.png\" class=\"attachment-large size-large\" alt=\"Beschreibung wird im Content Blocker angezeigt\" loading=\"lazy\" srcset=\"\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" data-srcset=\"\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3>URLs \/ Zu blockierende Elemente<\/h3>\n<p>The most important thing with a content blocker is to correctly specify which elements should be blocked. One rule per line must be specified according to the syntax explained below the input field. To help you understand how it works, we&#8217;ll apply these rules to some examples later.<\/p>\n<p>Im Folgenden findest du eine kurze Erkl\u00e4rung zu jedem der Syntaxelemente:<\/p>\n<ul>\n<li><code>*<\/code>: Mit einem Sternchen kannst du einen Platzhalter (ein beliebiges Zeichen) innerhalb einer Zeichenkette ausdr\u00fccken. Du kannst den Platzhalter sowohl innerhalb einer Zeichenkette als auch vor und nach der Zeichenkette verwenden. F\u00fcr eine URL ist es z. B. empfehlenswert nur den Hostnamen und einen Teil des Pfades fest zu definieren, aber sowohl Protokoll als auch Variablen (am Ende des Pfades) als Wildcard beliebig zu definieren. Regeln mit oder ohne Wildcard werden auf alle Elemente innerhalb des HTML angewendet, die dein WordPress generiert.<\/li>\n<li><code>div[id=&quot;my-embed-example&quot;]<\/code>: Du kannst HTML-Elemente anhand ihrer ID blockieren. <strong>Du kannst die Regel auf jedes HTML-Element und Attribut anwenden.<\/strong><\/li>\n<li><code>p[class*=&quot;my-embed-example&quot;]<\/code>: Genau wie in der vorherigen Regel kannst du ein HTML-Element anhand seiner Klasseneigenschaft blockieren. Ein HTML-Element kann jedoch mehrere Klassen haben. Mit einem Sternchen nach <code>class<\/code> kannst du eine Bedingung ausdr\u00fccken, sodass diese Klasse enthalten sein muss, aber auch andere Klassen f\u00fcr das Element angegeben werden k\u00f6nnen.<\/li>\n<li class=\"translation-block\"><code>div[data-href^=\"https:\/\/example.com\"]<\/code>: Der <code>^=<\/code> Selektor repr\u00e4sentiert jedes Element, dessen Attributwert mit einem bestimmten Wert beginnt.<\/li>\n<li class=\"translation-block\"><code>div[data-href$=\".pdf\"]<\/code>: Der <code>$=<\/code> Selektor repr\u00e4sentiert jedes Element, dessen Attributwert mit einem bestimmten Wert endet.<\/li>\n<li class=\"translation-block\"><code>div[data-gyp-href]<\/code>: Diese Syntax repr\u00e4sentiert jedes Element mit einem bestimmten Attribut, unabh\u00e4ngig vom Wert.<\/li>\n<li class=\"translation-block\"><code>div[href\/\/=\"^https:\\\/\\\/\"]<\/code>: Der <code>\/\/=<\/code> Selektor repr\u00e4sentiert jedes Element, dessen Attributwert mit dem angegeben regul\u00e4ren Ausdruck matched (verf\u00fcgbar seit v4.4.2).<\/li>\n<li><code>div[class*=&quot;my-embed-example&quot;][data-gyp-href]<\/code>: Mit dieser Syntax kannst du alle Elemente mit zwei Attributbedingungen finden. Du kannst Attributselektoren unbegrenzt verketten (seit Version 2.13.0)<\/li>\n<li><code>div[data-href:myFunction(),anotherFunction(arg1=1&amp;arg2=2)]<\/code>: Mit dieser Syntax kann eine zus\u00e4tzliche Funktion f\u00fcr den Abgleich aufgerufen werden (seit Version &gt; 3.4.3). Siehe Abschnitt \"Selektor-Syntaxfunktionen\" f\u00fcr weitere Informationen.<\/li>\n<li class=\"translation-block\"><code>my-custom-web-component[id=\"my-embed-example\"]<\/code>: Du kannst nicht nur native HTML-Elemente blockieren, sondern auch <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components\" target=\"_blank\" rel=\"noopener\">Web-Komponenten<\/a>.<\/li>\n<li><code>!*<\/code>: Mit einem voranstehenden Ausrufezeichen vor jeder Regel negierst du diese. D. h., wenn eine vorherige Regel eine Ressource blockiert hat, macht eine Negierung die wieder r\u00fcckg\u00e4ngig (verf\u00fcgbar seit v4.1.3).<\/li>\n<\/ul>\n<p>Die Regeln sind abstrakt, daher m\u00f6chten wir dir ein paar Beispiele geben, was in welchem Fall blockiert wird.<\/p>\n<h4>Blockieren von z.B. einem Iframe anhand einer URL<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https:\/\/www.youtube.com\/embed\/XtLWonUXAmO&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;\/iframe&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>*youtube.com\/embed\/*<\/code><\/p>\n<h4>Blockieren von z. B. einem Skript basierend auf einer URL<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;script async src=&quot;https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-123456789-1&quot;&gt;\n&lt;\/script&gt;\n\n&lt;script&gt; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag(&#039;js&#039;, new Date()); gtag(&#039;config&#039;, &#039;UA-123456789-1&#039;); &lt;\/script&gt;<\/code><\/pre>\n<p>Regeln f\u00fcr das Blockieren:<\/p>\n<p><code>*googletagmanager.com\/gtag\/js?id=*<br \/>\n*window.dataLayer*<\/code><\/p>\n<p>Nicht nur das externe Skript (<code>googletagmanager.com\/gtag\/js?id=<\/code>) wird auf der Grundlage der URL blockiert, <strong>sondern auch das Inline-Skript<\/strong> (<code>window.dataLayer<\/code>) auf der Grundlage des angegebenen Schl\u00fcsselworts.<\/p>\n<h4>Blockieren eines HTML-Elements anhand seiner ID<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;div id=&quot;addtoany_list&quot; class=&quot;green&quot;&gt;\n   [...]\n&lt;\/div&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>div[id=&quot;addtoany_list&quot;]<\/code><\/p>\n<h4>Blockieren eines HTML-Elements anhand seines Klassennamens<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;div class=&quot;addtoany addtoany_share_save_container addtoany_widget&quot;&gt;\n   [...]\n&lt;\/div&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>div[class*=&quot;addtoany_share_save_container&quot;]<\/code><\/p>\n<h4>Blockieren eines HTML-Elements durch ein benutzerdefiniertes Attribut<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;div data-youtube-embed=&quot;https:\/\/www.youtube.com\/embed\/XtLWonUXAmO&quot;&gt;\n   [...]\n&lt;\/div&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>div[data-youtube-embed*=&quot;youtube.com\/embed&quot;]<\/code><\/p>\n<h4>Blockieren eines HTML-Elements durch zwei benutzerdefinierte Attribute (seit Version 2.13.0)<\/h4>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;div data-youtube-embed=&quot;https:\/\/www.youtube.com\/embed\/XtLWonUXAmO&quot; block-this=&quot;1&quot;&gt;\n   [...]\n&lt;\/div&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>div[data-youtube-embed*=&quot;youtube.com\/embed&quot;][block-this=&quot;1&quot;]<\/code><\/p>\n<h4>Skript von einem Plugin blockieren<\/h4>\n<p>In manchen F\u00e4llen m\u00f6chtest du ein Plugin komplett blockieren, weil es externe Daten l\u00e4dt (z.B. Contact Form 7 mit Google reCAPTCHA).<\/p>\n<p>HTML-Code in deiner Website:<\/p>\n<pre><code class=\"language-markup\">&lt;script src=&quot;https:\/\/your-domain.com\/wp-content\/plugins\/contact-form-7\/js\/script.js&quot; \/&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>*wp-content\/plugins\/contact-form-7\/*<\/code><\/p>\n<h4>Blockieren eines Links (explizit)<\/h4>\n<p class=\"translation-block\">Du kannst jedes Element mit einem Content Blocker blockieren. Standardm\u00e4\u00dfig werden Links (<code><code>&lt;a&gt;<\/code><\/code>-Elemente) jedoch <strong>nur<\/strong> blockiert, wenn du das Element explizit wie folgt blockierst. Regeln wie das Blockieren nach URL (erstes Beispiel) werden ansonsten nicht auf Links angewendet, um zu verhindern, dass der Content Blocker zu viel blockiert.<\/p>\n<pre><code class=\"language-markup\">&lt;a href=&quot;https:\/\/www.youtube.com\/watch?v=INJ_sS81ua8&quot;&gt;Watch with awesome video&lt;\/a&gt;<\/code><\/pre>\n<p>Regel zum Blockieren: <code>a[href*=&quot;youtube.com&quot;]<\/code><\/p>\n<h4>Selektor-Syntaxfunktionen<\/h4>\n<p>Since Real Cookie Banner &gt; v3.4.3 it supports functions which can be applied on top of selector syntax attributes. This allows more flexibility to solve complex selector rules. The following <a href=\"https:\/\/docs.devowl.io\/real-cookie-banner\/php\/namespaces\/devowl-headlesscontentblocker-plugins-selectorsyntaxfunction.html\" target=\"_blank\" rel=\"noopener\">list of functions is currently implemented<\/a>:<\/p>\n<h5>matchesUrl()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>div[data-href:matchesUrl()]<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Stell dir vor, du hast einen Content Blocker mit den folgenden Regeln erstellt:<\/p>\n<pre>*youtube.com*\r\n*youtu.be*\r\ndiv[data-href*=\"youtube.com\"]\r\ndiv[data-href*=\"youtu.be\"]<\/pre>\n<p class=\"translation-block\">Anstatt zwei Regeln f\u00fcr das <code>div<\/code> zu schreiben, k\u00f6nnen wir dies mit <code>div[data-href:matchesUrl()]<\/code> l\u00f6sen. Sie \u00fcbernimmt automatisch alle Nicht-Selektor-Syntaxregeln des Content Blockers und pr\u00fcft diese mit <code>data-href<\/code>:<\/p>\n<pre>*youtube.com*\r\n*youtu.be*\r\ndiv[data-href:matchesUrl()]<\/pre>\n<h5>keepAttributes() and confirm()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>a[data-href*=&quot;youtube.com&quot;][class*=&quot;my-lightbox&quot;:keepAttributes(value=class),confirm()]<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Parameter (keepAttributes)\n<ul>\n<li class=\"translation-block\"><code>value<\/code> (string): Eine durch Kommas getrennte Liste von Attributen, die nicht in <code>consent-original-...<\/code> umgewandelt werden sollten.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>In diesem Beispiel kannst du zwei neue Selektor-Syntaxfunktionen sehen. Stell dir vor, du verwendest ein Lightbox-Plugin, das alle Links mit einem YouTube-Video in einer Lightbox \u00f6ffnet. Nat\u00fcrlich soll hier der Klick auf den Link blockiert werden, sonst bettet sich das YouTube-Video ohne Einwilligung auf der Seite ein.<\/p>\n<p class=\"translation-block\">Zun\u00e4chst kann <code>keepAttributes<\/code> verwendet werden, um den Klassennamen <strong>nicht<\/strong> zu blockieren, d.h. <code>class=\"my-lightbox\"<\/code> wird <strong>nicht<\/strong> in <code>consent-original-class_=\"my-lightbox\"<\/code> umgewandelt. Das erm\u00f6glicht beispielsweise der Lightbox-Implementierung, die Lightbox f\u00fcr die jeweiligen YouTube-Videos zu initialisieren. <code>confirm()<\/code> geht einen Schritt weiter und blockiert das Klicken auf den Link, bis eine Einwilligung vorliegt. Wenn es keine Einwilligung gibt, wird der Content Blocker in einem Dialog angezeigt, wenn man klickt. Wenn Einwilligung erteilt wird, wird der Klick dann automatisch an das Lightbox-Plugin weitergeleitet und es \u00f6ffnet das YouTube-Video.<\/p>\n<h5>delegateClick()<\/h5>\n<ul>\n<li>Beispiel:\n<ul>\n<li><code>a[data-href=&quot;youtube.com&quot;:delegateClick(selector=.overlay&amp;hide=true)]<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Parameters:\n<ul>\n<li class=\"translation-block\"><code>selector=\"self\"<\/code> (string): Kann \"self\" sein oder ein g\u00fcltiger CSS-Selektor, der am freigegebenen Element ausgef\u00fchrt wird und f\u00fcr die Klick-Delegation verwendet wird.<\/li>\n<li class=\"translation-block\"><code>hide=false<\/code> (boolean): Wenn true, wird das angeklickte Element versteckt.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"translation-block\">Real Cookie Banner versucht bereits automatisch, den Klick an die richtige Stelle f\u00fcr freigegebene Elemente weiterzuleiten. Technisch gesehen ist dies jedoch nicht immer m\u00f6glich, weshalb es die Funktion mit <code>delegateClick()<\/code> gibt, um einen bestimmten Selektor nach dem Freigeben eines Inhalts anzuklicken.<\/p>\n<h5>forceVisual()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>input[class*=&quot;my-hidden-input-field&quot;][type=&quot;hidden&quot;:forceVisual()]<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"translation-block\">Wenn man es f\u00fcr ein Attribut aufruft, wird das HTML Node markiert, um einen visuellen Content Blocker zu erzwingen. Das ist die gleiche Einstellung, die wir von \u201eVisuellen Content Blocker f\u00fcr versteckte Elemente erzwingen\u201c f\u00fcr einen gesamten Content Blocker kennen. Das kann n\u00fctzlich f\u00fcr versteckte Elemente wie <code>input[type=\"hidden\"]<\/code> sein, die normalerweise keinen visuellen Content Blocker erhalten.<\/p>\n<h5>visualParent()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>input[name=&quot;_wpcf7_recaptcha_response&quot;:visualParent(value=form)]<\/code><\/li>\n<\/ul>\n<\/li>\n<li><code>value<\/code> (string|number|true)\n<ul>\n<li class=\"translation-block\"><code>\".my-selector\"<\/code>: Damit kannst du den visuellen Content Blocker f\u00fcr einen \u00fcbergeordneten CSS-Selektor erstellen.<\/li>\n<li class=\"translation-block\"><code>\"children:.my-selector\"<\/code>: Damit kannst du den visuellen Content Blocker f\u00fcr einen CSS-Selektor innerhalb des blockierten Elements erstellen.<\/li>\n<li class=\"translation-block\"><code>number<\/code>: Damit kannst du den visuellen Content Blocker f\u00fcr x Elemente nach oben erstellen.<\/li>\n<li class=\"translation-block\"><code>true<\/code>: Verwendet das \u00fcbergeordnete Element, um den visuellen Content Blocker zu rendern (\u00e4hnlich wie \"1\").<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"translation-block\">Real Cookie Banner erstellt immer den visuellen Content Blocker vor dem Element, das blockiert wurde. Wenn du jedoch den visuellen Content Blocker auf einer anderen Ebene des DOM-Elements relativ zum blockierten Inhalt darstellen m\u00f6chtest, kannst du dies tun, indem du ein visuelles Elternelement definierst. Ein einfacher Anwendungsfall w\u00e4re z.B. ein gesamtes Formular (<code>form<\/code>) zu blockieren, wenn darin ein Eingabefeld f\u00fcr Google reCAPTCHA gefunden wurde.<\/p>\n<h5>transformAttribute()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>div[class=&quot;my-class&quot;:transformAttribute(name=data-id,target=my-data-id)]<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Parameters\n<ul>\n<li class=\"translation-block\"><code>[name=current attribute]<\/code> (string): Name des Attributs, das ge\u00e4ndert werden soll<\/li>\n<li class=\"translation-block\"><code>[regexpMatch]<\/code> (String): Suche den Wert des Attributs mit einem regul\u00e4ren Ausdruck ab<\/li>\n<li class=\"translation-block\"><code>[regexpReplace]<\/code> (String): Wenn angegeben, verwende diesen neuen Wert (verwende z.B. <code>$1<\/code>, um die erste Regexp-Gruppe von <code>regexpMatch<\/code> zu ersetzen). Wenn kein <code>regexpMatch<\/code> angegeben wird, wird standardm\u00e4\u00dfig der gesamte Wert verwendet<\/li>\n<li class=\"translation-block\"><code>[target]<\/code> (string): Setze den Wert f\u00fcr dieses neue Attribut (funktioniert nicht zusammen mit <code>rename<\/code>)<\/li>\n<li class=\"translation-block\"><code>[rename=\"new-attribute-name\"]<\/code> (string): Benenne das Attribut um, anstatt ein neues hinzuzuf\u00fcgen<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>style()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>div[class=&quot;my-div&quot;:style(this=display:block&amp;rule[]=&gt;.my-selector{display:table;width:100%;})]<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Parameters\n<ul>\n<li class=\"translation-block\"><code>[this]<\/code> (string): Auf das blockierte Element angewendete CSS-Regeln<\/li>\n<li class=\"translation-block\"><code>[applyUnblocked=false]<\/code> (boolean): Wenn wahr, werden die Styles auch nach dem Entsperren des Elements weiterhin angewendet<\/li>\n<li class=\"translation-block\"><code>[rules]<\/code> (string[]): Ein Array von CSS-Selektoren und Regeln, die sich auf das blockierte Element beziehen<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Das obige Beispiel f\u00fchrt zu folgendem CSS, welches den Style des blockierten Elements modifiziert:<\/p>\n<pre>&lt;style&gt;\r\n.my-div{display:block;}\r\n.my-div&gt;.selector{display:table;width:100%;}\r\n&lt;\/style&gt;<\/pre>\n<h5>jQueryHijackEach()<\/h5>\n<ul>\n<li>Beispiel\n<ul>\n<li><code>div[class=&quot;my-class&quot;:keepAttributes(value=class),jQueryHijackEach()]<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"translation-block\">Wenn du <code>jQuery.each()<\/code> auf einen bestimmten Selektor (in diesem Fall <code>.my-class<\/code>) anwendest, wird durch die Verwendung von <code>jQueryHijackEach()<\/code> die Ausf\u00fchrung des Callbacks \"verz\u00f6gert\", bis die Einwilligung eingeholt ist.<\/p>\n<\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h3>Verbundene Cookies<\/h3>\n<p class=\"translation-block\">Inhalte werden nur so lange blockiert, bis dein Besucher seine Einwilligung gibt. Du musst definieren, welche <a href=\"https:\/\/devowl.io\/de\/cookies\/definition-cookies\/\" target=\"_blank\" rel=\"noopener\">Cookies<\/a> f\u00fcr den Content Blocker akzeptiert werden m\u00fcssen, damit der Inhalt geladen werden kann. Der Inhalt wird nur geladen, wenn <span style=\"text-decoration: underline\">alle<\/span> definierten Cookies (Services) akzeptiert werden.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/section>","protected":false},"template":"","topic":[28],"class_list":["post-733","knowledge-base","type-knowledge-base","status-publish","hentry","topic-getting-started-rcb"],"acf":[],"_links":{"self":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base"}],"about":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/types\/knowledge-base"}],"version-history":[{"count":36,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/733\/revisions"}],"predecessor-version":[{"id":241832,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/733\/revisions\/241832"}],"wp:attachment":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"topic","embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/topic?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}