it-swarm.com.de

Verlangsamt der Theme-Customizer meine Website?

Ich habe ein tolles Theme erstellt, das sehr flexibel ist, da es 500 Einstellungen für verschiedene ( custom ) Typen im Theme-Customizer hat. Ich erstelle die Live-CSS wie es im Codex steht :

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color:<?php echo get_theme_mod('header_color', '#000000'); ?>; }
             h2 { color:<?php echo get_theme_mod('tagline_color', '#000000'); ?>; }
             ... 498 more ...
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

Jetzt ist meine Seite langsam. Ich denke, es liegt daran, dass es 500 Datenbankaufrufe für jedes Laden einer Seite gibt. Gibt es eine Möglichkeit, meine Website zu beschleunigen und dennoch 500 Anpassungsoptionen zu haben?

4
cjbj

Wie oft werden die Theme Mods gewechselt? Viel in der Designphase, vielleicht ein paar Mal später. Immer von Admins, nie von normalen Usern, geschweige denn von Besuchern. Es macht also keinen Sinn, das vollständige CSS bei jedem Seitenaufruf zu generieren ( zusätzliche Hintergrundinformationen ).

Ein besserer Ansatz ist, die CSS nur für den Administrator zu generieren und das Ergebnis für andere zu speichern. Dadurch wird die Anzahl der Datenbankaufrufe von 500 auf 1 reduziert.

function mytheme_customize_css()
{
    if (current_user_can( 'edit_theme_options' ) ) {
         $assemble_css = "
         <style type='text/css'>
             h1 { color:" . get_theme_mod( 'header_color', '#000000' ); . "; }
             h2 { color:" . get_theme_mod( 'tagline_color', '#ffffff' ); . "; }
             ... 498 more ...
         </style>";
         set_theme_mod( 'all_mods', $assemble_css );
    }
    echo get_theme_mod ( 'all_mods', '' );
}
add_action( 'wp_head', 'mytheme_customize_css' );

Das ist besser, aber wie oft werden tatsächlich alle 500 Mods verwendet? Und ist es wirklich ideal, die Standard-CSS-Werte in dieser Funktion anstelle von style.css zu haben? Verschieben Sie die Standardeinstellungen dorthin und generieren Sie eine CSS-Zeile nur, wenn ein Wert vorhanden ist. Das gibt:

function mytheme_customize_css()
{
    if (current_user_can( 'edit_theme_options' ) ) {
         $assemble_css = "
         <style type='text/css'>";
         if ( get_theme_mod('header_color') ) $assemble_css .= "
             h1 { color:" . get_theme_mod( 'header_color' ); . "; }";
         if ( get_theme_mod('tagline_color') ) $assemble_css .= "
             h2 { color:" . get_theme_mod( 'tagline_color' ); . "; }";
         ... 498 more ...
         $assemble_css .= "</style>";
         set_theme_mod( 'all_mods', $assemble_css );
    }
    echo get_theme_mod ( 'all_mods', '' );
}
add_action( 'wp_head', 'mytheme_customize_css' );

Wenn Sie tatsächlich über so viele Mods verfügen, ist es sogar noch besser, sie in einer Datenstruktur zusammenzustellen und zu durchlaufen, als 500 Zeilen in der Funktion (und mehrere tausend Codezeilen, um die Abschnitte zum Customizer hinzuzufügen).

Außerdem ist es nicht so toll, das CSS direkt auf den Kopf zu schreiben. Sie sollten add_inline_style verwenden. Aber das ist eine andere Sache.

3
cjbj