Lesefortschritt:

CSS-Cache des Divi-Themes im WordPress-Backend bequem leeren

18. Oktober 2023 | Divi-Theme, functions.php

Dieser Beitrag beinhaltet 835 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.

Das Divi-Theme kann Ihr CSS-Stylesheet in einen Cachespeicher schreiben. Das hat Vorteile: Das Stylesheet wird nicht bei jedem Seitenaufruf aus der Datenbank eingelesen, sondern liegt der WordPress-Website als Datei vor. Das beschleunigt den Seitenaufbau. Jedoch hat dies auch Nachteile, welche Sie mit dem heutigen Code-Hack ausmerzen können.

Wenn Sie nämlich Änderungen am Stylesheet vornehmen, kann es sein, dass diese auf der Live-Seite nicht sofort sichtbar sind. Der Grund: Im Cache liegt noch die alte Version des CSS-Stylesheets und die neuen Anpassungen aus der Datenbank werden nicht ausgelesen.

Die Abhilfe ist einfach: Der CSS-Cache muss gelöscht werden, so dass beim nächsten Seitenaufruf die Änderungen aus der Datebank ausgelesen werden. Das ist sehr einfach möglich, indem Sie dem WordPress-Backend die entsprechende Funktion beibringen. Dies geschicht mit folgendem Code, den Sie der Datei functions.php (im Backend unter Design/Theme-Editor) hinzufügen:

/**
 * Add Custom Admin Bar Menu Link
 *
 * @param $admin_bar
 *
 * @return void
 */
if (!function_exists('clear_statcss_maybe_admin_bar_link')):
    function clear_statcss_maybe_admin_bar_link($admin_bar)
    {
        $admin_bar->add_menu([
            'id' => 'clear_statcss',
            'title' => '<span class="ab-icon"></span><span class="ab-label">Divi-Cache leeren</span>',
            'href' => '',
            'meta' => [
                'title' => '',
            ],
        ]);
        $admin_bar->add_menu([
            'id' => 'clear_static_css',
            'parent' => 'clear_statcss',
            'title' => sprintf('<span data-wpnonce="%1$s">%2$s</span>', wp_create_nonce('clear_static_css'), esc_html('Statische CSS-Dateien löschen')),
            'href' => 'javascript:void(0)',
        ]);
        $admin_bar->add_menu([
            'id' => 'clear_statcss_clear_local_storage',
            'parent' => 'clear_statcss',
            'title' => esc_html('Lokalen Speicher löschen'),
            'href' => 'javascript:void(0)',
        ]);
    }

    add_action('admin_bar_menu', 'clear_statcss_maybe_admin_bar_link', 999);
endif;
/**
 * Add Javascript In Admin Footer
 *
 * @return void
 */
if (!function_exists('clear_statcss_maybe_admin_scripts')):
    function clear_statcss_maybe_admin_scripts()
    {
        ?>
        <script>
            jQuery(document).ready(function () {
                var adminAaxURL = '<?php echo admin_url('admin-ajax.php'); ?>';
                var isAdmin = '<?php echo is_admin(); ?>';
                // Clear Static CSS
                jQuery("#wp-admin-bar-clear_static_css").click(function (e) {
                    e.preventDefault();
                    jQuery.ajax({
                        type: 'post',
                        dataType: 'json',
                        url: adminAaxURL,
                        data: {
                            'action': 'clear_static_css',
                            '_wpnonce': jQuery(this).find('span').data('wpnonce')
                        },
                        success: function (response) {
                            if (response.success) {
                                let successData = response.data;
                                if (isAdmin) {
                                    let messageHTML = '<div class="notice notice-success clear-statcss-message"><p>' + successData + '</p></div>';
                                    if (jQuery('body .wrap h1').length > 0) {
                                        jQuery('body .wrap h1').after(messageHTML);
                                    } else {
                                        jQuery('body #wpbody-content').prepend(messageHTML);
                                    }
                                    setTimeout(function () {
                                        jQuery(".clear-statcss-message").remove();
                                    }, 3500);
                                } else {
                                    alert(successData);
                                }
                            }
                        },
                    });
                });
                // Clear Local Storage
                jQuery("#wp-admin-bar-clear_statcss_clear_local_storage").click(function (e) {
                    e.preventDefault();
                    let msgText = 'Der lokale Speicher wurde gelöscht!';
                    window.localStorage.clear();
                    if (isAdmin) {
                        let messageHTML = '<div class="notice notice-success clear-statcss-message"><p>' + msgText + '</p></div>';
                        if (jQuery('body .wrap h1').length > 0) {
                            jQuery('body .wrap h1').after(messageHTML);
                        } else {
                            jQuery('body #wpbody-content').prepend(messageHTML);
                        }
                        setTimeout(function () {
                            jQuery(".clear-statcss-message").remove();
                        }, 3500);
                    } else {
                        alert(msgText);
                    }
                });
            });
        </script>
        <?php
    }

    add_action('admin_footer', 'clear_statcss_maybe_admin_scripts');
    add_action('wp_footer', 'clear_statcss_maybe_admin_scripts');
endif;
/**
 * Process Ajax Request
 *
 * @return void
 */
if (!function_exists('clear_statcss_maybe_ajax_request')):
    function clear_statcss_maybe_ajax_request()
    {
        if ((isset($_POST['action']) && 'clear_static_css' === sanitize_text_field($_POST['action'])) && (isset($_POST['_wpnonce']) && wp_verify_nonce($_POST['_wpnonce'], 'clear_static_css'))) {
            ET_Core_PageResource::remove_static_resources('all', 'all');
            wp_send_json_success(esc_html('Die statischen CSS-Dateien wurden gelöscht!'), 200);
        }
    }

    add_action('wp_ajax_clear_static_css', 'clear_statcss_maybe_ajax_request');
endif;

Nun sehen Sie im Backend Ihrer Divi-Website im Kopfbereich (sprich: im schwarzen Balken) einen neuen Link mit den entsprechenden Funktionen.

So einfach geht das.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This