O customizador de temas está retardando meu site?

4

Eu construí um tema incrível, que é muito flexível, porque tem 500 configurações diferentes ( custom ) tipos no customizador de temas. Eu gero o css ao vivo como diz no códice :

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

Agora meu site está lento. Eu acho que é porque existem 500 chamadas de banco de dados para cada carregamento de página. Existe uma maneira de acelerar meu site e ainda ter 500 opções de personalização?

    
por cjbj 17.05.2016 / 10:56

1 resposta

3

Com que frequência os mods do tema são alterados? Muito na fase de design, talvez um par de vezes mais tarde. Sempre por administradores, nunca por usuários comuns, e muito menos por visitantes. Portanto, não faz sentido gerar o css completo em cada pageload ( informação de fundo adicional ).

Uma abordagem melhor é gerar o css apenas para o administrador e armazenar o resultado para outras pessoas. Isso reduzirá a quantidade de chamadas de banco de dados de 500 para 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' );

Isso é melhor, mas com que frequência todos os 500 mods serão realmente usados? E é realmente ideal ter os valores css padrão nesta função em vez de style.css ? Melhor mover os padrões lá e só gerar uma linha CSS se houver um valor. Isso dá:

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

Se você realmente tiver muitos mods, seria ainda melhor montá-los em uma estrutura de dados e percorrê-los em vez de ter 500 linhas na função (e vários milhares de linhas de código para adicionar as seções ao personalizador).

Além disso, escrever o css diretamente para a cabeça assim não é ótimo. Você deve usar add_inline_style . Mas isso é outra coisa.

    
por cjbj 17.05.2016 / 10:56