<\/p>\n\n\n\n
functions.php<\/code> ins Theme eingebunden wird<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n1- Verzeichnisstruktur<\/h2>\n\n\n\n\n\/wp-content\/themes\/dein-theme\/\n\u2514\u2500\u2500 cookie-consent\/\n \u251c\u2500\u2500 cookie-banner.html\n \u251c\u2500\u2500 cookie-banner.css\n \u251c\u2500\u2500 cookie-banner.js\n<\/code><\/pre>\n\n\n\n\n<\/p>\n\n\n\n
2- Inhalte der Datei: cookie-banner.html<\/code><\/h2>\n\n\n\n\n\n<!--\n OVERLAY\n Ein halbtransparenter Hintergrund, der den Rest der Seite abdunkelt,\n wenn das Cookie-Consent-Banner angezeigt wird.\n Fokus liegt auf dem Banner, Interaktion mit der Seite wird eingeschr\u00e4nkt.\n-->\n<div id="cookie-consent-overlay"><\/div>\n\n<!--\n BANNER\n Hauptcontainer f\u00fcr das Cookie-Consent-Banner mit allen Infos und Optionen.\n-->\n<div id="cookie-consent-banner">\n\n <!-- \u00dcberschrift: Datenschutz-Pr\u00e4ferenzen -->\n <h2 style="margin-top: 0;">Datenschutz-Pr\u00e4ferenzen<\/h2>\n\n <!-- Erkl\u00e4rung, dass Einwilligung n\u00f6tig ist -->\n <p>Wir ben\u00f6tigen Ihre Einwilligung, bevor Sie unsere Website weiter nutzen k\u00f6nnen.<\/p>\n\n <!-- Erkl\u00e4rung zur Nutzung von Cookies mit Link zur Datenschutzerkl\u00e4rung -->\n <p>\n Wir verwenden Cookies und andere Technologien. Einige davon sind essenziell,\n w\u00e4hrend andere uns helfen, unsere Website und Ihre Erfahrung zu verbessern.\n Mehr dazu in unserer\n <a href="\/datenschutz" target="_blank">Datenschutzerkl\u00e4rung<\/a>.\n <\/p>\n\n <!-- Hinweis zur Datenverarbeitung in den USA -->\n <p style="font-size: 0.9em; color: #555;">\n Einige Dienste verarbeiten Daten in den USA. Mit Ihrer Einwilligung stimmen Sie auch\n dieser \u00dcbermittlung gem\u00e4\u00df Art. 49 Abs. 1 lit. a DSGVO zu.\n <\/p>\n\n <!-- Formular zur Auswahl der Cookie-Pr\u00e4ferenzen -->\n <form id="cookie-preferences-form" style="margin-top: 1rem;">\n\n <!-- Essenzielle Cookies: immer aktiv, daher disabled -->\n <label>\n <input type="checkbox" checked disabled>\n <strong>Essenziell<\/strong> (immer aktiv)\n <\/label><br>\n\n <!-- Statistik-Cookies: w\u00e4hlbar -->\n <label>\n <input type="checkbox" name="statistics"> Statistik\n <\/label><br>\n\n <!-- Marketing-Cookies: w\u00e4hlbar -->\n <label>\n <input type="checkbox" name="marketing"> Marketing\n <\/label><br>\n\n <!-- Externe Medien: w\u00e4hlbar -->\n <label>\n <input type="checkbox" name="external"> Externe Medien (z.\u202fB. YouTube)\n <\/label><br><br>\n\n <!-- Buttons: Auswahl speichern und Alle akzeptieren -->\n <div style="margin-top: 1.5rem;">\n <button type="submit" class="btn-primary">Auswahl speichern<\/button>\n <button type="button" class="btn-accept-all" onclick="acceptAllCookies()">Alle akzeptieren<\/button>\n <\/div>\n <\/form>\n\n <!-- Trennlinie zur optischen Abgrenzung -->\n <hr style="margin: 2rem 0;">\n\n <!-- Rechtliche Links: Datenschutzerkl\u00e4rung und Impressum -->\n <div class="legal-links">\n <a href="\/datenschutz" target="_blank">Datenschutzerkl\u00e4rung<\/a> |\n <a href="\/impressum" target="_blank">Impressum<\/a>\n <\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n\n\n<\/p>\n\n\n\n
3- Inhalte der Datei: cookie-banner.css<\/code><\/h2>\n\n\n\n\n#cookie-consent-overlay {\n position: fixed;\n top: 0; left: 0; right: 0; bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 9998;\n display: none;\n}\n\n#cookie-consent-banner {\n display: none;\n position: fixed;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n background: #fff;\n padding: 2rem 2.5rem;\n box-shadow: 0 0 30px rgba(0,0,0,0.4);\n z-index: 9999;\n max-width: 700px;\n width: 90%;\n border-radius: 12px;\n text-align: left;\n font-family: sans-serif;\n max-height: 90vh;\n overflow-y: auto;\n}\n\n#cookie-consent-banner a {\n color: #0056b3;\n text-decoration: underline;\n}\n\n#cookie-consent-banner a:hover {\n color: #003366;\n text-decoration: underline;\n}\n\n.btn-primary, .btn-accept-all {\n padding: 0.5rem 1rem;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.btn-primary {\n background-color: #0073aa;\n margin-right: 1rem;\n}\n\n.btn-accept-all {\n background-color: #00aa55;\n}\n\n.legal-links {\n font-size: 0.85em;\n text-align: center;\n}\n\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
4- Inhalte der Datei: cookie-banner.js<\/code><\/h2>\n\n\n\n\nfunction setConsent(cats) {\n localStorage.setItem('cookieConsentCategories', JSON.stringify(cats));\n document.getElementById('cookie-consent-banner').style.display = 'none';\n document.getElementById('cookie-consent-overlay').style.display = 'none';\n document.body.style.overflow = '';\n if (cats.statistics) loadAnalytics();\n if (cats.marketing) loadMarketing();\n}\n\nfunction acceptAllCookies() {\n setConsent({ essential: true, statistics: true, marketing: true, external: true });\n}\n\nfunction loadAnalytics() {\n \/\/ Beispiel: Google Analytics nachladen\n console.log(\"Analytics geladen\");\n (function(w,d,s,l,i){\n w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});\n var f=d.getElementsByTagName(s)[0],\n j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';\n j.async=true;\n j.src='https:\/\/www.googletagmanager.com\/gtm.js?id='+i+dl;\n f.parentNode.insertBefore(j,f);\n })(window,document,'script','dataLayer','GTM-XXXXXXX'); \/\/ Ersetze GTM-XXXXXXX mit deiner echten Google Analytics ID (z.\u202fB. GTM-ABC123DEF4), aber erst, wenn du wirklich bereit bist, das Tracking zu aktivieren.\n\n window.dataLayer = window.dataLayer || [];\n window.dataLayer.push({ event: 'cookieConsentAll' });\n}\n\nfunction loadMarketing() {\n console.log(\"Marketing geladen\");\n}\n\ndocument.addEventListener('DOMContentLoaded', function () {\n const consent = JSON.parse(localStorage.getItem('cookieConsentCategories') || 'null');\n if (!consent) {\n document.getElementById('cookie-consent-banner').style.display = 'block';\n document.getElementById('cookie-consent-overlay').style.display = 'block';\n document.body.style.overflow = 'hidden';\n } else {\n if (consent.statistics) loadAnalytics();\n if (consent.marketing) loadMarketing();\n }\n});\n\ndocument.getElementById('cookie-preferences-form').addEventListener('submit', function (e) {\n e.preventDefault();\n const form = e.target;\n setConsent({\n essential: true,\n statistics: form.statistics.checked,\n marketing: form.marketing.checked,\n external: form.external.checked\n });\n});\n\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
5- Integration in WordPress: functions.php<\/code><\/h2>\n\n\n\nF\u00fcge in die functions.php<\/code> deines Themes oder Child-Themes Folgendes ein:
<\/p>\n\n\n\n\n\/\/ HTML-Banner einf\u00fcgen\nfunction mytheme_cookie_consent_output() {\n $html_path = get_stylesheet_directory() . '\/cookie-consent\/cookie-banner.html';\n if (file_exists($html_path)) {\n include $html_path;\n }\n}\nadd_action('wp_footer', 'mytheme_cookie_consent_output');\n\n\/\/ CSS & JS laden\nfunction mytheme_cookie_consent_assets() {\n $base_uri = get_stylesheet_directory_uri() . '\/cookie-consent';\n wp_enqueue_style('cookie-banner-style', $base_uri . '\/cookie-banner.css');\n wp_enqueue_script('cookie-banner-script', $base_uri . '\/cookie-banner.js', [], null, true);\n}\nadd_action('wp_enqueue_scripts', 'mytheme_cookie_consent_assets');\n\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\ud83e\uddea Testen<\/h2>\n\n\n\n\n- \u00d6ffne deine Website im Inkognito-Modus.<\/li>\n\n\n\n
- Du solltest das Banner sehen.<\/li>\n\n\n\n
- Triff eine Auswahl oder akzeptiere alles.<\/li>\n\n\n\n
- Wenn du neu l\u00e4dst, sollte das Banner nicht mehr erscheinen<\/strong>, und in der Konsole sollten nur die freigegebenen Bereiche geladen werden.<\/li>\n<\/ol>\n\n\n\n
<\/p>\n\n\n\n
\ud83d\udcdd Hinweis<\/h2>\n\n\n\n\n- Du kannst sp\u00e4ter in
loadStatistics()<\/code> oder loadMarketing()<\/code> echte Tools wie Matomo<\/strong>, Plausible<\/strong>, Google Analytics<\/strong> etc. einf\u00fcgen.<\/li>\n\n\n\n- Ebenso kannst du in
loadExternalMedia()<\/code> z.\u202fB. YouTube-Videos automatisch freigeben.<\/li>\n<\/ul>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
\u2705 Ziel Ein Cookie-Consent-Banner, bei dem: 1- Verzeichnisstruktur \/wp-content\/themes\/dein-theme\/ \u2514\u2500\u2500 cookie-consent\/ \u251c\u2500\u2500 cookie-banner.html \u251c\u2500\u2500 cookie-banner.css \u251c\u2500\u2500 cookie-banner.js 2- Inhalte der Datei: cookie-banner.html <!– OVERLAY Ein halbtransparenter Hintergrund, der den Rest der Seite abdunkelt, wenn das Cookie-Consent-Banner angezeigt wird. Fokus liegt auf dem Banner, Interaktion mit der Seite wird eingeschr\u00e4nkt. –> <div id="cookie-consent-overlay"><\/div> <!– BANNER Hauptcontainer […]<\/p>\n","protected":false},"author":1,"featured_media":1948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/comments?post=1933"}],"version-history":[{"count":13,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1933\/revisions"}],"predecessor-version":[{"id":1947,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1933\/revisions\/1947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/1948"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=1933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=1933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=1933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}