[ WordPress ]

Home » WordPress » Como carregar de forma correta js e css no WordPress
Inscreva-se em nosso canal no Youtube Daviwp


Como carregar de forma correta js e css no WordPress

11/03/2017 WordPress (0) comentário

Olá pessoal aqui quem fala é o Daviwp, trazendo pra vocês mais um post aqui no blog, fazia uma década que não passava aqui, mas estou voltando aos poucos.
Vamos ao que interessa, muito importante abordar essa questão, porque ainda vejo muita gente utilizando de forma errada, e ainda ouço dizer que esta correto e funciona, nem tudo que funciona esta correto, pode até parece uma bobagem, mas no final isso faz diferença, se você começar utilizar vai perceber. Vou te contar um pouquinho do que to falando, quando comecei utilizar WordPress, sempre segui o jeito que eu achava que era melhor, e me ferrei varias vezes com isso, até aprofundar e querer saber de fato, o que era melhor para meus projetos, utilizando padrões do próprio wp, instruções da equipe que desenvolve o wp, ai sim! Vi que eu fazia bem errado por isso tinha tantos problemas, então acho que nesse exato momento, você que ainda não utiliza desta forma esta tendo uma oportunidade bem simples, sem muitas delongas de aprender o método certo! Segura na minha mão e vamo nessa maluco!

Como funciona

Galera para quem não sabem o WordPress ele tem uma tag chamada wp_head todo projeto você utiliza essa tag no seu template header.php famoso cabeçalho certo? ai você me pergunta pra que, pois é ela é responsável por trazer informações do WP, como scripts, CSS, não só do WP mais também de plugins etc. Bem agora que sabemos dessa tag vamos para baixo ver mais de perto isso, e na pratica.

Como fazer o carregamento do CSS do jeito certo

Antes de copiar e colar esse código no seu functions.php repare nele onde tem function daviwp_scripts() você pode alterar isso pelo que você quiser por exemplo function seunome_scripts(), da mesma forma que você troca o texto dessa linha você é obrigado trocar também o dessa linha add_action( ‘wp_enqueue_scripts’, ‘seunome_scripts’ ); já esse wp_enqueue_scripts não pode ser alterado certo? vamo lá, veja que temos ai nesse codigo isso wp_enqueue_style( ‘foundation’, get_template_directory_uri() . ‘/assets/css/foundation.min.css’ ); essa linha esta carregando esse arquivo css já em nosso tema, no lugar desse /assets/css/foundation.min.css você coloca o seu CSS, ai vai o diretório do seu arquivo, se for utilizar mais só duplicar esse arquivo sempre trocando o diretório para o arquivo que deseja. Não posso deixar de falar também desse aqui wp_enqueue_style( ‘style’, get_stylesheet_uri() ); esse já é padrão puxa automaticamente seu arquivo style.css não precisa alterar nada. Ah!!! já ia me esquecendo, para cada linha dessa wp_enqueue_style( ‘foundation’, get_template_directory_uri() . ‘/assets/css/foundation.min.css’ ); onde tem escrito ‘foundation’ você deve da um nome para seu arquivo CSS, nunca pode ser o mesmo certo? pronto, agora pode copiar e colar esse código no seu arquivo functions.php

function daviwp_scripts() {
  // Carregando CSS header
  wp_enqueue_style( 'foundation', get_template_directory_uri() . '/assets/css/foundation.min.css' );
  wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'daviwp_scripts' );

Como fazer o carregamento do JS e CSS juntos do jeito certo

Bem galera da mesma forma que expliquei acima funciona os JS, repare o código abaixo. Lembrando que não pode copiar o de cima como expliquei, depois colar o de baixo, você deve utilizar apenas um. Mas ai vem a duvida como assim? veja como fica os dois juntos JS e CSS. Repare cada linha, veja que temos CSS e JS sendo carregados correto? fiz até comentários ai // Carregando CSS header // Carregando Scripts header //Carregando no footer essa linha wp_enqueue_script(‘foundation-js’, get_template_directory_uri().’/assets/js/foundation.min.js’, array(‘jquery’), ”, true ); carrega o script no footer.php se vai ter outros scripts duplica essa linha, alterando diretório, e o seu nome, como disse acima sobre o CSS, então é isso turma, só copiar esse código e começar sempre carregar desta forma, mais uma vez altere os diretórios e nomes de cada linha.

function daviwp_scripts() {
  // Carregando CSS header
  wp_enqueue_style( 'foundation', get_template_directory_uri() . '/assets/css/foundation.min.css' );
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  // Carregando Scripts header
  wp_enqueue_script('modernizr', get_template_directory_uri().'/assets/js/vendor/modernizr.js', array('jquery') );
  //Carregando no footer
  wp_enqueue_script('foundation-js', get_template_directory_uri().'/assets/js/foundation.min.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'daviwp_scripts' );

Chamando os scripts no seu tema.

Para chamar o CSS e os JS no seu tema, como disse lá no inicio. No seu arquivo header.php abra ele dentro da tag head.
adicione o código abaixo, e seja feliz. Fazendo desta forma você otimiza seu tema, a forma correta de carregamento só vai te favorecer, também no google, pois não será bloqueado por demora de renderização, porque esta fazendo o carregamento de cada arquivo da forma correta e que deve ser feita, isso tudo foi pensado para melhor desempenho para seus projetos. Espero mais uma vez que tenha ajudado vocês que ainda não sabem sobre esse recurso. Deixo aqui meu forte abraço e até a próxima !

<?php wp_head(); ?>

FUI!!!!

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

Facebook

Publicidade