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

8

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

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

Deve ser header-xxx.php ou outro arquivo? Talvez exista uma maneira de implementar essa ideia de maneira mais escalável e elegante?

Eu ficaria muito grato por qualquer ajuda.

    
por CROSP 25.08.2016 / 19:27

3 respostas

8

Tudo depende da escala de suas personalizações e de como você organizará suas coisas. Mas existem duas maneiras principais de fazer isso. functions.php e arquivos de modelo

Do jeito que eu gosto de fazer isso, é registrar todos os meus scripts / estilos em functions.php, então eu sei com o que vou trabalhar mas vou enfileirar apenas o que Eu preciso quando preciso.

Você poderia enfileirar todas as suas coisas condicionalmente dentro do seu arquivo functions.php ( if( is_page( 'blah') { //... enqueue stuff } ) ou você poderia fazer uso de arquivos de modelo para estilizar categorias / tags / postagens / páginas específicas etc.

Em seguida, nesse arquivo de modelo, você chama seus arquivos de script / estilo enfileirar . Isso também faz com que você entenda o que é carregado no lugar.

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

A mesma lógica se aplica ao script com as funções registrar / enfileirar 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 o número de arquivos carregados baixo para que você não afete negativamente o carregamento da página dessa maneira.

Existe 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 um pequeno número) 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, uma nova solicitação de arquivo em cada nova página carregada. Então tenha isso em mente.

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

Se precisar de mais orientações sobre como usar essas funções, basta nos informar.

EDITAR

As principais razões para registrar scripts são as seguintes

  • Facilita a chamada de um script / estilo quando precisamos
  • Torna possível usar um script / estilo registrado como uma dependência para um arquivo que precisamos carregar.
  • Evite escrever o mesmo código mais do que precisamos, efetivamente simplificando nosso código
  • Mais coisas que eu talvez não esteja pensando agora

NOTA

Um script / estilo que foi registrado não precisa ser enfileirado se estiver listado como $deps do arquivo que você está enfileirando no momento.

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

Eu registrei

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

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

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 em wp_enqueue_style é uma matriz das alças de estilos já registrados. O WP irá convenientemente carregar todos os 4 arquivos na ordem correta para respeitar a dependência.

Você poderia diminuir 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, só preciso enfileirar specific-style.css com buttons.css como uma dependência e o WP vinculará o carregamento respeitar a ordem.

    
por bynicolas 25.08.2016 / 20:28
3

" refator ", " otimizar ", " escaloná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ê:

Os navegadores armazenam em cache arquivos CSS. Assim, quando a primeira página for carregada, o navegador não solicitará o mesmo arquivo CSS da próxima página. Sim, o carregamento da primeira página será um pouco, de forma imperceptível, mais lento. Mas o resto das páginas se beneficiará disso.

Menos solicitações é uma das maneiras mais importantes de otimizar a velocidade do website. (veja Steve Souders ou este artigo ).

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

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

    
por zendka 25.08.2016 / 21:11
2

Você certamente pode fazer uma condicional para verificar em qual página alguém está e enfileirar uma folha de estilo específica para cada página, mas talvez seja melhor segmentar a página com CSS.

No seu arquivo header.php, certifique-se de que a função body_class esteja na tag body, assim:

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

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

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

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

Então, na página com o ID 12, ele 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 "about" aplicado. Basta olhar para as classes na tag body na página que você deseja estilizar.

No entanto, se você ainda quiser enfileirar uma folha de estilo específica para uma página específica, poderá fazer isso:

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' );
    
por Nate Allen 25.08.2016 / 20:03