Academia WordPress
Nesta Black Friday, compre com inteligência. Aprenda novas habilidades a partir de R$ 19,99 cada
Explora las posibilidades. Desarrolla nuevas habilidades desde sólo $11,99.

Incluindo corretamente CSS e JavaScript no WordPress

Antes de prosseguirmos para o guia quero que você saiba que nunca deve adicionar CSS e JS externos diretamente a arquivos de modelos do WordPress como ‘header.php’, ‘footer.php’, etc. Em alguns casos pode ser OK adicionar algum código interno usando as tags ‘<style>’ e ‘<script>’, mas também não recomendado.

Somente para deixar claro para você – CSS interno é o que está entre a tag ‘<style>’ diretamente em HTML e JS interno é o que está entre as tags <script>.

O WordPress tem 4 ganchos (hooks) de ação que podem ser úteis para CSS e JavaScript internos:

  • wp_head – utilizando este hook você pode adicionar CSS/JS interno ou qualquer coisa que você queira antes de fechar a tag </head>
  • admin_head – Insere CSS/JS ou qualquer coisa que você queira antes de fechar a tag </head> dentro do painel do administrador (dashboard).
  • wp_footer – você pode adicionar algo antes da tag de fechamento </body>, geralmente códigos como Google Analytics.
  • admin_footer – o mesmo mas apenas para o painel de administração do WordPress;

Um exemplo rápido:

add_action( 'admin_head', 'custom_internal_css' );
 
function custom_internal_css(){
        ?>
	<style>
		#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
			background: #ffffff;
		}
	</style>
        <?php
}

O resultado desse código deixará o background do seu painel do WordPress com a cor branca.

Quando usada a tag ?> é para sinalizar o encerramento de um código php e o ínicio de um código HTML, JS ou CSS. Para retomar o código em php basta você inserir a tag <?php.

Adicione um JS personalizado ao dashboard usando o ‘admin_footer’.

Vale mencionar em primeiro lugar que não é necessário usar ‘admin_head’ (ou ‘wp_head’) apenas para CSS e ‘admin_footer’ (ou ‘wp_footer’ apenas para JavaScript).

Este código é muito similar ao exemplo anterior, a única mudança é que usamos JavaScript em vez de CSS:

add_action( 'admin_footer', 'custom_internal_javascript' );
 
function custom_internal_javascript(){
         ?>
        <script>
		jQuery( function( $ ) {
			alert( \\'hello\\' );
		} );
	</script>
         <?php
}

Os atributos ‘type=”text/css”‘ para a tag ‘<style>’ e ‘type=”text/javascript”‘ para a tag ‘<script>’ são obsoletos, então não precisa inseri-los.

CSS/JS externo é quando existe um arquivo ‘.js’ ou ‘.css’ e não está necessariamente no seu domínio.

Quando você tem que incluir alguns  arquivos CSS ou JavaScript externos – alguma biblioteca js ou jquery e você não quer fazer download e inserir manualmente – deve-se usar os hooks:

  • ‘wp_enqueue_scripts’.
  • ‘admin_enqueue_scripts’ – para painel de controle de administração do WordPress

Você não pode simplesmente imprimir etiquetas ‘<script>’ ou ‘<link>’ dentro destes ganchos, você tem que usar funções especiais, aqui está a lista que eu uso com bastante frequência:

Há mais funções. Mas usar estas funções normalmente é mais do que suficiente! Vou mostrar-lhe como lidar com elas nos exemplos abaixo. Mas como os arquivos são adicionados aos templates HTML de um tema? Isso será feito automaticamente através das funções ‘wp_head()’ e ‘wp_footer()’, que devem estar nos seus arquivos de template antes de fechar as tags ‘</head>’ e ‘</body>’ de acordo. Veja:

add_action( 'wp_enqueue_scripts', 'main_theme_css' );
 
function main_theme_css() {
 
	wp_enqueue_script( 'example-css', get_stylesheet_uri() );
 
}

Na verdade, há 3 maneiras de conseguir a url de ‘style.css’ de um tema:

Ok, mas qual é o primeiro parâmetro que eu defini como ‘example-css’? Neste mesmo exemplo ele é bastante inútil, mas você precisa dele quando você usa as funções ‘wp_register_script()’ ou ‘wp_register_style()’ e quando você configura dependências de arquivos, sobre dependências – no próximo exemplo.

O segundo parâmetro também pode conter a URL completa de um arquivo em outro domínio, como por exemplo Google Fonts.

Abra o diretório ‘wp-includes/js’. Você vê, muitos arquivos estão lá. Você pode encontrar jQuery lá e alguns plugins JS familiares também. O que isso tudo significa? Significa que a maioria dos scripts já estão registrados e se você vai usá-los, você pode fazer isso desta forma:

add_action( 'wp_enqueue_scripts', 'include_jquery' );
 
function include_jquery() {
 
	wp_enqueue_script( 'jquery' ); // you just have to know a script handle
 
}

Você pode encontrar a lista completa de scripts pré-registados no WordPress oficial documentação ou em ‘wp-includes/script-loader.php’.

Também é possível fazer o pré-registo de seus próprios scripts e estilos, por exemplo, em alguns temas ou plugins você pode encontrar esta implementação:

add_action( 'wp_enqueue_scripts', 'register_and_enqueue' );
 
function register_and_enqueue() {
 
	wp_register_script( 'example-script', $url );
	wp_enqueue_script( 'example-script' );
 
}

A função ‘wp_register_script()’ tem os mesmos parâmetros como ‘wp_enqueue_script()’.

A ordem de inclusão dos seus scripts é muito importante, fique atento! Por exemplo, se você está usando a biblioteca jQuery, você tem que incluir seus arquivos ‘.js’ depois dela. Isso serve também para arquivos .CSS. Se você estiver usando unicamente o hook ‘wp_enqueue_scripts’ e todos os scripts estiverem listados lá, você pode pular o parâmetro de dependência. Mas se você criar um plugin personalizado e esse plugin requerer a biblioteca jQuery, ele é obrigatório.

add_action( 'wp_enqueue_scripts', 'custom_js_with_dependency' );
 
function custom_js_with_dependency() {
 
	wp_enqueue_script( 'example-script-2', plugin_dir_url( __FILE__ ) . 'assets/script.js',	array( 'jquery', 'example-script' ) );
 
}

Não importa qual é a prioridade do hook e em que arquivo de um plugin ou tema você vai usar este código – em todos os casos ‘example-script-2’ será adicionado ao documento HTML somente após ‘jquery’ e ‘example-script-1’. Este é o 4º parâmetro de ‘wp_register_script()’, ‘wp_register_style()’, ‘wp_enqueue_script()’, ‘wp_enqueue_style()’.

Para evitar que os arquivos sejam completamente armazenados em cache é melhor atualizar o cache apenas se os arquivos tiverem sido alterados. Como fazer isso? Aqui está como:

add_action( 'wp_enqueue_scripts', 'main_theme_css_cache_refresh' );
 
function main_theme_css_cache_refresh() {
 
	wp_enqueue_style( 
		'css',
		get_stylesheet_uri(),
		array(),
		filemtime( dirname( __FILE__ ) . '/style.css' )
	);
 
}

A função PHP ‘filemtime()’ é bastante interessante, porque você tem que passar o caminho absoluto do servidor para ele, o que pode ser feito facilmente com ‘dirname()’, o que adiciona mais uma camada de complexidade aqui, porque o caminho retornado por ‘dirname()’ é relativo ao arquivo onde ele é usado. Neste exemplo o arquivo ‘style.css’ deve estar no mesmo diretório.

Vamos dar uma olhada em outro exemplo para plugins personalizados:

add_action( 'wp_enqueue_scripts', 'plugin_javascript_cache_refresh' );
 
function misha_plugin_javascript_cache_refresh() {
 
	wp_enqueue_script( 
		'misha-plugin-js',
		plugin_dir_url( __FILE__ ) . 'assets/script.js', // no slashes
		array( 'jquery' ),
		filemtime( dirname( __FILE__ ) . '/assets/script.js )
	);
 
}

Temos duas abordagens para evitar que os ficheiros CSS e JavaScript incluídos sejam armazenados em cache para sempre:

  • tempo() – retorna o tempo actual em segundos desde 1970. Portanto, a cada segundo tem um valor diferente.
  • filemtime() – retorna o tempo em segundos quando este arquivo foi modificado pela última vez.

Podemos definir este parâmetro como nulo para remover a string de consulta, pois por padrão ele exibe a versão atual da instalação do WordPress!

Se você já digitalizou seu site com o Google PageSpeed, você sabe, que ele sempre recomenda mover todos os seus arquivos JavaScript e até mesmo CSS para o rodapé do site, antes do fechamento </body> tag. Pela minha experiência, posso dizer que não é um grande negócio para o desempenho do site. Mas às vezes mover jQuery e seu arquivo .js pesado personalizado para o rodapé do site pode ser uma boa idéia.

add_action( 'wp_enqueue_scripts', 'jquery_in_footer' );
 
function jquery_in_footer() {
 
	wp_deregister_script( 'jquery' );
	wp_register_script( 
		'jquery', 
		includes_url( '/js/jquery/jquery.js' ), 
		false, // no dependencies
		NULL, // no version to show
		true // in footer? yes
	);
	wp_enqueue_script( 'jquery' );
 
}

O parâmetro na linha 11 permite controlar onde você vai mostrar o script – no cabeçalho do site – ‘falso’ (padrão) ou no rodapé – ‘verdadeiro’. As funções ‘wp_register_style()’ e ‘wp_enqueue_style()’ não têm este parâmetro.

Nesta parte do tutorial eu gostaria de falar principalmente sobre a função ‘wp_localize_script()’ mas você pode usar para este propósito a novíssima ‘wp_add_inline_script()’ que apareceu no WP 4.5.

A ideia chave é que às vezes você tem que passar alguns valores gerados dinamicamente no seu código JavaScript sem criar chamadas AJAX adicionais ou usar JS interno. Você também pode adivinhar pelo nome da função “localize script” que ela foi criada para traduzir strings em JavaScript. Sem mais palavras, vamos dar uma olhada nos exemplos:

add_action('wp_enqueue_scripts', 'pass_php_args_to_js');
 
function pass_php_args_to_js(){
 
	wp_register_script( 'example-js', $script_url );
	wp_localize_script( 
		'example-js',
		'params', // it is the name of JavaScript variable (object)
		array(
			'parameter_1' => site_url(), // for example
			'translated_string' => __( 'Settings saved' ), 
		)
	);
	wp_enqueue_script( 'example-js' );
 
}

So, function ‘wp_localize_script()’ has 3 parameters:

  • ‘example-js’ – the first parameter is the handle of the script which is going to use out parameters,
  • ‘params’ – it is the JavaScript variable (object) which will contain our data
  • And the third parameter is the array with the data.

As the result, the function will print something like this before your external javascript ‘example-js’:

<script type='text/javascript'>
/* <![CDATA[ */
var params = {"parameter_1":"<https://academiawordpress.com.br>", 'translated_string' => 'Settings saved'};
/* ]]> */
</script>

Você pode usar qualquer um destes parâmetros desta forma:

console.log( params.parameter_1 );

A situação com scripts de admin é diferente, porque o hook de ação ‘admin_enqueue_scripts’ aceita o parâmetro ‘$hook_suffix’ que é um identificador de uma página de admin:

add_action( 'admin_enqueue_scripts', 'admin_js_for_certain_pages' );
 
function admin_js_for_certain_pages( $hook_suffix ) {
 
	// Dashboard, Posts, Pages pages
	if( $hook_suffix == 'index.php' || $hook_suffix == 'edit.php' ) {
		wp_enqueue_script( 'admin-js', $url, false, null, true );
	}
 
}

Se você quiser verificar o que é um ‘$hook_suffix’ de uma certa página de administração, você pode simplesmente ‘echo $hook_suffix’ diretamente do gancho quando você estiver nessa página.

Encerramos por aqui o nosso tutorial, qualquer dúvida ou comentário é só postar aqui no artigo! Até logo.

Daniel Leal

Daniel Leal

Eu escrevo para facilitar o aprendizado de outros daquilo que eu tivesse dificuldade em aprender. WordPress, WooCommerce e desenvolvimento de novas tecnologias são meus focos principais, mas marketing de conteúdo, negócios digitais e (mais recentemente) fintechs também ocupam uma parcela das minhas ideias e projetos.

Adicionar Comentário

Nesta Black Friday, compre com inteligência. Aprenda novas habilidades a partir de R$ 19,99 cada

Academia WordPress

Portal de treinamento gratuito e notícias atualizadas desse extraordinário gerenciador de conteúdo e seus módulos que poderão mudar a sua vida digital.

contato@academiawordpress.com.br

Melhores Plugins 2020!

Incluindo corretamente CSS e JavaScript no WordPress

Share via
Send this to a friend