WordPress : Le personnalisateur de thème ralentit-il mon site ?

Publié par Jean-Michel le

J’ai créé un thème génial, qui est très flexible, car il contient 500 paramètres de différents types (personnalisés) dans le personnalisateur de thème. Je génère le live css 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 d’avoir encore 500 options de personnalisation ?

Solution n°1 trouvée

À quelle fréquence les mods de thème sont-ils modifiés ? Beaucoup dans la phase de conception, peut-être quelques fois plus tard. Toujours par des administrateurs, jamais par des utilisateurs ordinaires, encore moins des visiteurs. Donc, cela n’a pas de sens de générer le css complet à chaque chargement de page (informations de fond supplémentaires).

Lire également:  Wordpress : Problème de chargement d'images à partir du fichier CSS du thème enfant avec le chemin correspondant

Une meilleure approche consiste à générer le css uniquement pour l’administrateur et à stocker le résultat pour les autres. Cela réduira le nombre d’appels de 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-il vraiment idéal d’avoir les valeurs CSS par défaut dans cette fonction au lieu de style.css? Mieux vaut y déplacer les valeurs par défaut et ne générer une ligne css que s’il y a 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 encore mieux de les assembler dans une structure de données et de la 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 personnalisateur).

Lire également:  Comment créer une deuxième barre latérale dans le thème Underscores Wordpress ?

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

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *