{"id":713,"date":"2024-09-09T09:33:31","date_gmt":"2024-09-09T08:33:31","guid":{"rendered":"http:\/\/ghanim-solution.de\/?p=713"},"modified":"2024-09-19T09:49:25","modified_gmt":"2024-09-19T08:49:25","slug":"wie-man-einen-blur-effekt-fur-das-wordpress-theme-twentytwentyfour-mit-javascript-css-und-php-umsetzt","status":"publish","type":"post","link":"https:\/\/ghanim-solution.de\/index.php\/2024\/09\/09\/wie-man-einen-blur-effekt-fur-das-wordpress-theme-twentytwentyfour-mit-javascript-css-und-php-umsetzt\/","title":{"rendered":"Ein Blur-Effekt f\u00fcr das mobile Men\u00fc des WordPress-Themes Twenty Twenty-Four mit JavaScript, CSS und PHP umsetzen"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Das TwentyTwentyFour-Theme von WordPress ist ein Block-Theme, das eine gro\u00dfartige Grundlage f\u00fcr Anpassungen bietet. In diesem Beitrag zeige ich, wie du einen Blur-Effekt f\u00fcr deine Webseite umsetzt, der aktiviert wird, wenn das mobile Men\u00fc ge\u00f6ffnet ist, und sich auf den Seiteninhalt und den Footer auswirkt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wir werden CSS, JavaScript und PHP verwenden, um dieses Verhalten zu implementieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.25), 2rem);\"><strong>Voraussetzungen<\/strong>:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bevor wir loslegen, stelle sicher, dass du Zugriff auf die folgenden Dateien hast:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>functions.php <\/strong>deines Child-Themes (oder Parent-Themes, wenn kein Child-Theme verwendet wird)<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eine eigene custom-style.css<\/strong><\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eine eigene blur-effect-menu.js<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: CSS f\u00fcr den Blur-Effekt hinzuf\u00fcgen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge zuerst die CSS-Regeln f\u00fcr den Blur-Effekt in deine <code>custom-style.css<\/code>-Datei ein. Der Blur-Effekt l\u00e4sst den Inhalt unscharf erscheinen, wenn das Men\u00fc ge\u00f6ffnet ist.<\/p>\n\n\n\n<pre><code class=\"language-css\">\n\/* CSS-Stil f\u00fcr den Blur-Effekt *\/\n.blur-effect {\n    filter: blur(1px);\n    transition: filter 0.3s ease;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dieser einfache CSS-Code wendet einen Unsch\u00e4rfeeffekt mit einer \u00dcbergangsanimation an. Du kannst die Intensit\u00e4t des Blur-Effekts anpassen, indem du den Wert <code>1px<\/code> erh\u00f6hst oder verringerst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: JavaScript f\u00fcr das \u00d6ffnen und Schlie\u00dfen des Men\u00fcs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Als N\u00e4chstes implementieren wir das JavaScript, das den Blur-Effekt auf den Seiteninhalt und den Footer anwendet, wenn das Men\u00fc ge\u00f6ffnet ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Erstelle die Datei <code><mark style=\"background-color:#d7d7d7\" class=\"has-inline-color\">blur-effect-menu.js<\/mark><\/code> in deinem <code>js<\/code>-Ordner und f\u00fcge den folgenden Code hinzu:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    const pageContent = document.querySelector('.wp-block-group');\n    const footerContent = document.querySelector('footer.wp-block-template-part');\n    const postContent = document.querySelector('.entry-content');\n\n\/\/ Funktion zum Anwenden oder Entfernen des Blur-Effekts\n\n    function updateBlurEffect(isMenuOpen) {\n        if (isMenuOpen) {\n            pageContent.classList.add('blur-effect');\n            footerContent.classList.add('blur-effect');\n            postContent.classList.add('blur-effect');\n        } else {\n            pageContent.classList.remove('blur-effect');\n            footerContent.classList.remove('blur-effect');\n            postContent.classList.remove('blur-effect');\n        }\n    }\n\n\/\/ Event-Listener f\u00fcr Men\u00fc \u00f6ffnen und schlie\u00dfen\n\n    function addMenuListeners() {\n        const openMenuButton = document.querySelector('nav.has-background:nth-child(2) > button:nth-child(1)');\n        const closeMenuButton = document.querySelector('#modal-2 > div:nth-child(1) > div:nth-child(1) > button:nth-child(1)');\n\n        if (openMenuButton) {\n            openMenuButton.addEventListener('click', function() {\n                updateBlurEffect(true);\n            });\n        }\n\n        if (closeMenuButton) {\n            closeMenuButton.addEventListener('click', function() {\n                updateBlurEffect(false);\n            });\n        }\n\n        document.addEventListener('click', function(event) {\n            if (!event.target.closest('nav.has-background:nth-child(2) > button:nth-child(1)') &&\n                !event.target.closest('#modal-2 > div:nth-child(1) > div:nth-child(1) > button:nth-child(1)') &&\n                !event.target.closest('.wp-block-navigation__responsive-container.is-menu-open') &&\n                pageContent.classList.contains('blur-effect')) {\n                updateBlurEffect(false);\n            }\n        });\n    }\n\n\/\/ MutationObserver, um DOM-\u00c4nderungen zu \u00fcberwachen und Listener hinzuzuf\u00fcgen\n\n    const observer = new MutationObserver(function(mutationsList) {\n        for (let mutation of mutationsList) {\n            if (mutation.type === 'childList') {\n                addMenuListeners();\n            }\n        }\n    });\n\n    observer.observe(document.body, { childList: true, subtree: true });\n\n    addMenuListeners();  \/\/ Event-Listener beim Laden der Seite hinzuf\u00fcgen\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 3: JavaScript und CSS in WordPress einbinden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Um sicherzustellen, dass unser JavaScript und CSS korrekt geladen werden, m\u00fcssen wir es in der functions.php deines Themes registrieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffne deine <code>functions.php <\/code>und f\u00fcge diesen Code hinzu:<\/p>\n\n\n\n<pre><code class=\"language-php\">\n&lt;?php\n\/\/ CSS f\u00fcr den Blur-Effekt registrieren\nfunction my_custom_styles() {\n    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '\/custom-style.css');\n}\nadd_action('wp_enqueue_scripts', 'my_custom_styles');\n?&gt;\n<\/code><\/pre>\n\n<pre><code class=\"language-php\">\n&lt;?php\n\/\/ JavaScript f\u00fcr den Blur-Effekt registrieren\nfunction enqueue_blur_effect_script() {\n    wp_enqueue_script('blur-effect-menu', get_stylesheet_directory_uri() . '\/js\/blur-effect-menu.js', array(), null, true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_blur_effect_script');\n?&gt;\n<\/code><\/pre>\n\n\n\n\n\n<p class=\"wp-block-paragraph\">Dieser Code sorgt daf\u00fcr, dass sowohl das CSS als auch das JavaScript korrekt auf deiner Webseite geladen werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rufe nun deine Webseite auf, \u00f6ffne das mobile Men\u00fc und schlie\u00dfe es wieder. Der Blur-Effekt sollte nun auf den Seiteninhalt und den Footer angewendet und entfernt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das TwentyTwentyFour-Theme von WordPress ist ein Block-Theme, das eine gro\u00dfartige Grundlage f\u00fcr Anpassungen bietet. In diesem Beitrag zeige ich, wie du einen Blur-Effekt f\u00fcr deine Webseite umsetzt, der aktiviert wird, wenn das mobile Men\u00fc ge\u00f6ffnet ist, und sich auf den Seiteninhalt und den Footer auswirkt. Wir werden CSS, JavaScript und PHP verwenden, um dieses Verhalten [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-713","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\/713","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=713"}],"version-history":[{"count":21,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":900,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/713\/revisions\/900"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/744"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}