Ein Blur-Effekt für das mobile Menü des WordPress-Themes Twenty Twenty-Four mit JavaScript, CSS und PHP umsetzen

Das TwentyTwentyFour-Theme von WordPress ist ein Block-Theme, das eine großartige Grundlage für Anpassungen bietet. In diesem Beitrag zeige ich, wie du einen Blur-Effekt für deine Webseite umsetzt, der aktiviert wird, wenn das mobile Menü geöffnet ist, und sich auf den Seiteninhalt und den Footer auswirkt.

Wir werden CSS, JavaScript und PHP verwenden, um dieses Verhalten zu implementieren.

Voraussetzungen:

Bevor wir loslegen, stelle sicher, dass du Zugriff auf die folgenden Dateien hast:

• functions.php deines Child-Themes (oder Parent-Themes, wenn kein Child-Theme verwendet wird)

• Eine eigene custom-style.css

• Eine eigene blur-effect-menu.js

Schritt 1: CSS für den Blur-Effekt hinzufügen

Füge zuerst die CSS-Regeln für den Blur-Effekt in deine custom-style.css-Datei ein. Der Blur-Effekt lässt den Inhalt unscharf erscheinen, wenn das Menü geöffnet ist.

/* CSS-Stil für den Blur-Effekt */
.blur-effect {
    filter: blur(1px);
    transition: filter 0.3s ease;
}

Dieser einfache CSS-Code wendet einen Unschärfeeffekt mit einer Übergangsanimation an. Du kannst die Intensität des Blur-Effekts anpassen, indem du den Wert 1px erhöhst oder verringerst.

Schritt 2: JavaScript für das Öffnen und Schließen des Menüs

Als Nächstes implementieren wir das JavaScript, das den Blur-Effekt auf den Seiteninhalt und den Footer anwendet, wenn das Menü geöffnet ist.

Erstelle die Datei blur-effect-menu.js in deinem js-Ordner und füge den folgenden Code hinzu:

document.addEventListener('DOMContentLoaded', function() {
    const pageContent = document.querySelector('.wp-block-group');
    const footerContent = document.querySelector('footer.wp-block-template-part');
    const postContent = document.querySelector('.entry-content');

// Funktion zum Anwenden oder Entfernen des Blur-Effekts

    function updateBlurEffect(isMenuOpen) {
        if (isMenuOpen) {
            pageContent.classList.add('blur-effect');
            footerContent.classList.add('blur-effect');
            postContent.classList.add('blur-effect');
        } else {
            pageContent.classList.remove('blur-effect');
            footerContent.classList.remove('blur-effect');
            postContent.classList.remove('blur-effect');
        }
    }

// Event-Listener für Menü öffnen und schließen

    function addMenuListeners() {
        const openMenuButton = document.querySelector('nav.has-background:nth-child(2) > button:nth-child(1)');
        const closeMenuButton = document.querySelector('#modal-2 > div:nth-child(1) > div:nth-child(1) > button:nth-child(1)');

        if (openMenuButton) {
            openMenuButton.addEventListener('click', function() {
                updateBlurEffect(true);
            });
        }

        if (closeMenuButton) {
            closeMenuButton.addEventListener('click', function() {
                updateBlurEffect(false);
            });
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('nav.has-background:nth-child(2) > button:nth-child(1)') &&
                !event.target.closest('#modal-2 > div:nth-child(1) > div:nth-child(1) > button:nth-child(1)') &&
                !event.target.closest('.wp-block-navigation__responsive-container.is-menu-open') &&
                pageContent.classList.contains('blur-effect')) {
                updateBlurEffect(false);
            }
        });
    }

// MutationObserver, um DOM-Änderungen zu überwachen und Listener hinzuzufügen

    const observer = new MutationObserver(function(mutationsList) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                addMenuListeners();
            }
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    addMenuListeners();  // Event-Listener beim Laden der Seite hinzufügen
});

Schritt 3: JavaScript und CSS in WordPress einbinden

Um sicherzustellen, dass unser JavaScript und CSS korrekt geladen werden, müssen wir es in der functions.php deines Themes registrieren.

Öffne deine functions.php und füge diesen Code hinzu:

<?php
// CSS für den Blur-Effekt registrieren
function my_custom_styles() {
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
?>

<?php
// JavaScript für den Blur-Effekt registrieren
function enqueue_blur_effect_script() {
    wp_enqueue_script('blur-effect-menu', get_stylesheet_directory_uri() . '/js/blur-effect-menu.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_blur_effect_script');
?>

Dieser Code sorgt dafür, dass sowohl das CSS als auch das JavaScript korrekt auf deiner Webseite geladen werden.

Rufe nun deine Webseite auf, öffne das mobile Menü und schließe es wieder. Der Blur-Effekt sollte nun auf den Seiteninhalt und den Footer angewendet und entfernt werden.