Cookie-Hinweis mit Auswahlmöglichkeiten in WordPress einbauen (ohne Plugin)

—

by

walid
in

✅ Ziel

Ein Cookie-Consent-Banner, bei dem:

  • Essenzielle Cookies immer aktiv sind
  • Statistik, Marketing und externe Medien auswählbar sind
  • Die Auswahl im Browser gespeichert wird
  • Externe Dienste nur bei Zustimmung geladen werden
  • HTML, CSS und JS in eigenen Dateien ausgelagert sind
  • Das Ganze über functions.php ins Theme eingebunden wird

1- Verzeichnisstruktur


/wp-content/themes/dein-theme/
└── cookie-consent/
    ├── cookie-banner.html
    ├── cookie-banner.css
    ├── 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änkt.
-->
<div id="cookie-consent-overlay"></div>

<!--
  BANNER
  Hauptcontainer für das Cookie-Consent-Banner mit allen Infos und Optionen.
-->
<div id="cookie-consent-banner">

  <!-- Überschrift: Datenschutz-Präferenzen -->
  <h2 style="margin-top: 0;">Datenschutz-Präferenzen</h2>

  <!-- Erklärung, dass Einwilligung nötig ist -->
  <p>Wir benötigen Ihre Einwilligung, bevor Sie unsere Website weiter nutzen können.</p>

  <!-- Erklärung zur Nutzung von Cookies mit Link zur Datenschutzerklärung -->
  <p>
    Wir verwenden Cookies und andere Technologien. Einige davon sind essenziell,
    während andere uns helfen, unsere Website und Ihre Erfahrung zu verbessern.
    Mehr dazu in unserer
    <a href="/datenschutz" target="_blank">Datenschutzerklärung</a>.
  </p>

  <!-- Hinweis zur Datenverarbeitung in den USA -->
  <p style="font-size: 0.9em; color: #555;">
    Einige Dienste verarbeiten Daten in den USA. Mit Ihrer Einwilligung stimmen Sie auch
    dieser Übermittlung gemäß Art. 49 Abs. 1 lit. a DSGVO zu.
  </p>

  <!-- Formular zur Auswahl der Cookie-Präferenzen -->
  <form id="cookie-preferences-form" style="margin-top: 1rem;">

    <!-- Essenzielle Cookies: immer aktiv, daher disabled -->
    <label>
      <input type="checkbox" checked disabled>
      <strong>Essenziell</strong> (immer aktiv)
    </label><br>

    <!-- Statistik-Cookies: wählbar -->
    <label>
      <input type="checkbox" name="statistics"> Statistik
    </label><br>

    <!-- Marketing-Cookies: wählbar -->
    <label>
      <input type="checkbox" name="marketing"> Marketing
    </label><br>

    <!-- Externe Medien: wählbar -->
    <label>
      <input type="checkbox" name="external"> Externe Medien (z. B. YouTube)
    </label><br><br>

    <!-- Buttons: Auswahl speichern und Alle akzeptieren -->
    <div style="margin-top: 1.5rem;">
      <button type="submit" class="btn-primary">Auswahl speichern</button>
      <button type="button" class="btn-accept-all" onclick="acceptAllCookies()">Alle akzeptieren</button>
    </div>
  </form>

  <!-- Trennlinie zur optischen Abgrenzung -->
  <hr style="margin: 2rem 0;">

  <!-- Rechtliche Links: Datenschutzerklärung und Impressum -->
  <div class="legal-links">
    <a href="/datenschutz" target="_blank">Datenschutzerklärung</a> |
    <a href="/impressum" target="_blank">Impressum</a>
  </div>
</div>

3- Inhalte der Datei: cookie-banner.css


#cookie-consent-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

#cookie-consent-banner {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2rem 2.5rem;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
  z-index: 9999;
  max-width: 700px;
  width: 90%;
  border-radius: 12px;
  text-align: left;
  font-family: sans-serif;
  max-height: 90vh;
  overflow-y: auto;
}

#cookie-consent-banner a {
  color: #0056b3;
  text-decoration: underline;
}

#cookie-consent-banner a:hover {
  color: #003366;
  text-decoration: underline;
}

.btn-primary, .btn-accept-all {
  padding: 0.5rem 1rem;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background-color: #0073aa;
  margin-right: 1rem;
}

.btn-accept-all {
  background-color: #00aa55;
}

.legal-links {
  font-size: 0.85em;
  text-align: center;
}

4- Inhalte der Datei: cookie-banner.js


function setConsent(cats) {
  localStorage.setItem('cookieConsentCategories', JSON.stringify(cats));
  document.getElementById('cookie-consent-banner').style.display = 'none';
  document.getElementById('cookie-consent-overlay').style.display = 'none';
  document.body.style.overflow = '';
  if (cats.statistics) loadAnalytics();
  if (cats.marketing) loadMarketing();
}

function acceptAllCookies() {
  setConsent({ essential: true, statistics: true, marketing: true, external: true });
}

function loadAnalytics() {
  // Beispiel: Google Analytics nachladen
  console.log("Analytics geladen");
      (function(w,d,s,l,i){
      w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
      var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
      j.async=true;
      j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX'); // Ersetze GTM-XXXXXXX mit deiner echten Google Analytics ID (z. B. GTM-ABC123DEF4), aber erst, wenn du wirklich bereit bist, das Tracking zu aktivieren.

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'cookieConsentAll' });
}

function loadMarketing() {
  console.log("Marketing geladen");
}

document.addEventListener('DOMContentLoaded', function () {
  const consent = JSON.parse(localStorage.getItem('cookieConsentCategories') || 'null');
  if (!consent) {
    document.getElementById('cookie-consent-banner').style.display = 'block';
    document.getElementById('cookie-consent-overlay').style.display = 'block';
    document.body.style.overflow = 'hidden';
  } else {
    if (consent.statistics) loadAnalytics();
    if (consent.marketing) loadMarketing();
  }
});

document.getElementById('cookie-preferences-form').addEventListener('submit', function (e) {
  e.preventDefault();
  const form = e.target;
  setConsent({
    essential: true,
    statistics: form.statistics.checked,
    marketing: form.marketing.checked,
    external: form.external.checked
  });
});

5- Integration in WordPress: functions.php

Füge in die functions.php deines Themes oder Child-Themes Folgendes ein:


// HTML-Banner einfügen
function mytheme_cookie_consent_output() {
    $html_path = get_stylesheet_directory() . '/cookie-consent/cookie-banner.html';
    if (file_exists($html_path)) {
        include $html_path;
    }
}
add_action('wp_footer', 'mytheme_cookie_consent_output');

// CSS & JS laden
function mytheme_cookie_consent_assets() {
    $base_uri = get_stylesheet_directory_uri() . '/cookie-consent';
    wp_enqueue_style('cookie-banner-style', $base_uri . '/cookie-banner.css');
    wp_enqueue_script('cookie-banner-script', $base_uri . '/cookie-banner.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'mytheme_cookie_consent_assets');

🧪 Testen

  1. Öffne deine Website im Inkognito-Modus.
  2. Du solltest das Banner sehen.
  3. Triff eine Auswahl oder akzeptiere alles.
  4. Wenn du neu lädst, sollte das Banner nicht mehr erscheinen, und in der Konsole sollten nur die freigegebenen Bereiche geladen werden.

📝 Hinweis

  • Du kannst später in loadStatistics() oder loadMarketing() echte Tools wie Matomo, Plausible, Google Analytics etc. einfügen.
  • Ebenso kannst du in loadExternalMedia() z. B. YouTube-Videos automatisch freigeben.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *