Como carregar scripts / estilos específicos para uma página

Eu sei que, de acordo com o processo de inicialização padrão do Wordpress, primeiro functions.phpé chamado, depois disso todas as coisas do tema. Mas atualmente vou refatorar meu tema completamente para otimizá-lo. Minha idéia é ter um arquivo css base para propriedades comuns, normalizar, cores. Ou, para manter um único arquivo css, mas neste caso eu preciso codificar o caso de alternância functions.phppara determinar a página. E outra específica para cada página, porque isso não faz sentido carregar um arquivo enorme de estilo css com todos os estilos definidos.

Então, minha pergunta é qual é o melhor lugar para conectar-se ao carregamento de script / estilo específico?

Deveria ser header-xxx.phpou outro arquivo? Talvez haja uma maneira de implementar essa idéia de maneira mais escalável e elegante?

Eu seria grato por alguma ajuda.

Tudo depende da escala de suas personalizações e de como você organizará suas coisas. Mas existem 2 maneiras principais de fazê-lo. functions.php e arquivos de modelo

O jeito que eu gosto de fazer isso é registrar todos os meus scripts / estilos em functions.php, para que eu saiba com o que vou trabalhar, mas enfileirarei apenas o que preciso quando precisar.

Você pode enfileirar todas as suas coisas condicionalmente no arquivo functions.php ( if( is_page( 'blah') { //... enqueue stuff }) ou usar arquivos de modelo para estilizar categorias / tags / posts / páginas específicas, etc.

Em seguida, nesse arquivo de modelo, você chama seus arquivos de script / estilo de enfileiramento . Isso também torna neet maneira de entender o que é carregado onde.

Mas, definitivamente, se você deseja dividir sua folha de estilo em arquivos menores, precisará usar

• wp_register_style
• wp_enqueue_style

A mesma lógica se aplicaria ao script com funções de registro / enfileiramento correspondentes

Além disso, leve em consideração o número de solicitações em sua estratégia; se você dividir suas coisas em vários arquivos, tente manter baixo o número de arquivos carregados para não afetar negativamente o carregamento da página dessa maneira.

Há outra coisa que você pode fazer para acelerar o carregamento da página. Se você disser ao navegador para armazenar em cache suas folhas de estilo, talvez 1 (ou algumas poucas) tenha mais chances de ser carregado a partir do cache, se você tiver vários arquivos em todo o site e eles sempre precisarem ser buscados no servidor porque é uma nova solicitação de arquivo em cada nova página carregada. Portanto, tenha isso em mente.

Independentemente disso, o armazenamento em cache de 1 ou muitos ativos é uma boa abordagem e aumentará a capacidade de resposta percebida do site em termos de velocidade do site.

Se você precisar de mais orientações sobre como usar essas funções, informe-nos.

EDITAR

Os principais motivos para registrar scripts são os seguintes

• Torna mais fácil chamar um script / estilo quando precisamos dele
• Torna possível usar um script / estilo registrado como uma dependência para um arquivo que precisamos carregar.
• Impedir a nós mesmos de escrever o mesmo código mais do que precisamos, simplificando efetivamente nosso código
• Mais coisas em que talvez eu não esteja pensando agora

NOTA

Um script / estilo que foi registrado não precisa ser enfileirado se estiver listado como um $depsdos arquivos que você está enfileirando atualmente.

Um exemplo (não necessariamente como você deve fazer isso, mas para entender o propósito)

Eu me registrei

• common-style.css
• navigation.css
• buttons.css

Agora, esses estilos estão registrados, então, se eu for para uma página específica e quiser aplicar um estilo diferente lá. Enfileiro nessa página (por declaração condicional em functions.php ou no meu modelo de página) specific-style.cssassim.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Observe que a matriz in wp_enqueue_styleé uma matriz de identificadores de estilos já registrados. O WP carregará convenientemente todos os 4 arquivos na ordem correta para respeitar a dependência.

Você pode cascatear a dependência simplesmente registrando cada script / estilo com a dependência correta

ou seja, buttons.css depende de navigation.css que depende de common-style.css

Se eu me registrar com essa lógica em mente, só preciso enfileirar specific-style.css com buttons.css como uma dependência e o WP encadeará o carregamento em cadeia para respeitar o pedido.

" refatorar ", " otimizar ", " escalável ", " elegante ". Grandes preocupações! Você está no caminho certo. No entanto, dividir um arquivo CSS em vários não é a resposta para essas preocupações. Aqui está o porquê:

Navegadores armazenam em cache arquivos CSS. Assim que a primeira página carregar, o navegador não solicitará o mesmo arquivo CSS para a próxima página. Sim, o carregamento da primeira página será um pouco, notavelmente mais lento. Mas o restante das páginas se beneficiará disso.

Menos pedidos é uma das maneiras mais importantes de otimizar a velocidade do site. (veja Steve Souders ou este artigo ).

Uma otimização adicional é reduzir o seu CSS. (consulte a postagem no Google PageSpeed .) Obrigado @bynicolas pela sugestão.

Claro que você pode dizer, mas e a elegância ? Aqui estão as boas notícias: Sass e MENOS . Eles permitem que você escreva menos código, divida-o em vários arquivos compilados em um arquivo CSS e muito mais.

Você certamente poderia fazer um condicional para verificar em que página está alguém e enfileirar uma folha de estilo específica para cada página, mas é melhor direcionar a página com CSS.

No seu arquivo header.php, verifique se a body_classfunção está na tag body, assim:

<body <?php body_class(); ?>>

Isso inserirá classes na tag body que você pode usar para direcionar recursos específicos da página.

Por exemplo, se eu quiser que o H1 em uma página específica fique vermelho, eu poderia fazer:

body.page-id-12 h1 {
    color: #ff0000;
}

Portanto, na página com o ID 12, aplicaria esse estilo.

Para segmentar um modelo de página específico, você pode:

body.page-template-template-about h1 {
    color: #ff0000;
}

Isso segmentaria páginas com o modelo "sobre" aplicado. Basta olhar para as classes na tag body na página que você deseja estilizar.

No entanto, se você ainda deseja enfileirar uma folha de estilo específica para uma página específica, faça o seguinte:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );