web-dev-qa-db-fra.com

Le programme de personnalisation de thème ralentit-il mon site?

J'ai créé un thème génial, très flexible, car il contient 500 paramètres de types différents ( custom ) dans le personnalisateur de thème. Je génère le css en direct comme il est dit dans le codex :

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');

Maintenant, mon site est lent. Je pense que c'est parce qu'il y a 500 appels de base de données pour chaque chargement de page. Existe-t-il un moyen d’accélérer mon site et de toujours disposer de 500 options de personnalisation?

theme-developmentthemestheme-customizerperformance
4
cjbj

À quelle fréquence les mods de thème sont-ils changés? Beaucoup en phase de conception, peut-être quelques fois plus tard. Toujours par les administrateurs, jamais par les utilisateurs ordinaires, sans parler des visiteurs. Il n’a donc aucun sens de générer le fichier css complet à chaque chargement de page ( informations de fond supplémentaires ).

Une meilleure approche consiste à générer le fichier CSS uniquement pour l'administrateur et à stocker le résultat pour les autres. Cela réduira le nombre d'appels à la base de données de 500 à 1.

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' );

C’est mieux, mais à quelle fréquence les 500 mods seront-ils réellement utilisés? Et est-ce vraiment idéal d’avoir les valeurs CSS par défaut dans cette fonction au lieu de style.css? Il vaut mieux y déplacer les valeurs par défaut et ne générer une ligne CSS que s’il existe une valeur. Cela donne:

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' );

Si vous avez réellement autant de mods, il serait préférable de les assembler dans une structure de données et de les parcourir en boucle plutôt que d'avoir 500 lignes dans la fonction (et plusieurs milliers de lignes de code pour ajouter les sections au personnaliseur).

En outre, écrire le css directement dans la tête comme ceci n’est pas génial. Vous devriez utiliser add_inline_style . Mais c'est une autre chose.

3
cjbj