Caro leitor,

A querida e talentosa Kathy é responsável pela aparência de todos os nossos sites aqui no EICC. Se parece bom, ela o fez, se não, eu obviamente perdi tempo nele e ela vai eventualmente corrigi-lo. Ocasionalmente, ela precisa das minhas habilidades específicas. Comparado a seus traços artísticos, meu código é uma marreta, mas em se tratando de WordPress, às vezes uma marreta é o que é necessário.

Com folhas de estilo, a ordem importa

Eu nunca vou entender por que os autores de temas e plugins não entendem uma simples ideia. Folhas de estilo de usuário devem ser lidas por último. Elas devem ser capazes de substituir qualquer coisa, porque o designer final, não o tema ou plugin, sabe o que é melhor. Mesmo assim, existem alguns que simplesmente insistem que a folha de estilo do usuário não deva ser a última coisa enfileirada para carregar. Eu estou cansado de consertar isso em cada site que temos, procurando nas functions.php do último site que construímos para descobrir como fiz isso. Então, eu estou escrevendo a minha solução.

Hacking WP_Styles

O que eu descobri é que o WordPress tem um objeto maravilhoso chamado WP_Styles. Quando os autores de temas e plugins enfileiram estilos, eles são adicionados a este objeto (por diversão, um dia solte um print_r ($ wp_styles) em seu functions.php. Há muita coisa lá).

Uma das propriedades que eu notei quando estava estudando o WP_Styles foi array queue. Ela era uma lista de ids de tag das folhas de estilo a serem enfileiradas. Examinando o fonte da página pronta, era óbvio que ela estava na mesma ordem que as folhas de estilo produzidas. Então eu decidi testar e ver se a ordem do array controlou a ordem de saída. Com certeza ela o fez. A partir de agora, esse pequeno pedaço de código vive no functions.php de cada tema filho que cria.

O código

Para usar isso, basta identificar as IDs das folhas de estilo que deseja mover, e adicioná-las ao array $keys.

<link rel='stylesheet' id='bootstrap-basic-style-css'  href='/style.css' type='text/css'/>
<link rel='stylesheet' id='it-exchange-child-theme-css-css'  href='/style.css' type='text/css' />

As folhas de estilo acima são as duas que eu listei na função abaixo. Observe que cada uma é anexada com um -css adicional. Certifique-se de não colocar isso no código abaixo.

function cal_adjuststylesheets() {
        global $wp_styles;
 
        $keys=[];
        $keys[] = 'bootstrap-basic-style';
        $keys[] = 'it-exchange-child-theme-css';
 
        foreach($keys as $currentKey) {
            $keyToSplice = array_search($currentKey,$wp_styles->queue);
 
            if ($keyToSplice!==false && !is_null($keyToSplice)) {
                $elementToMove = array_splice($wp_styles->queue,$keyToSplice,1);
                $wp_styles->queue[] = $elementToMove[0];
            }
 
        }
 
        return;
}
 
add_action( 'wp_print_styles', 'cal_adjuststylesheets',99);

A última linha chama esse código logo antes de as folhas de estilo serem impressas. Certifique-se de colocar isso lá, ou o WordPress irá ignorá-lo. A ordem é importante, já que a folha de estilo que você especificar vai flutuar até a parte inferior da lista, mas na ordem que você especificou.

Finalizando

Largue esse pequeno trecho em seu functions.php e você nunca terá que se preocupar com sua folha de estilo sendo listada antes daquela que você deseja substituir.

Até a próxima,

= C =

***

Cal Evans faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://blog.calevans.com/2015/03/04/reordering-style-sheets-in-wordpress/