JavaScript

Passando variáveis do PHP para javascript através do head [WordPress]

Por

Utilizar dados fornecidos através de funções ou variáveis de PHP em algum código javascript já foi ou será uma necessidade em algum momento para quem trabalha com WordPress. existe uma função específica para trazer variáveis do backend para o front: wp_localize_script().

Vamos tomar como exemplo um código JavaScript que irá receber o ID do post. (E sim! Existem outros meios de identificar o ID do post utilizando o JavaScript, é apenas um exemplo 😊)

Começaremos pelo código PHP. Crie uma função na qual o arquivo JavaScript é registrado antes da função wp_localize_script(), caso contrário não irá funcionar.

PHP

function passar_variaveis() {
	global $post;
	wp_enqueue_script('variaveis-post-id', 'assets/src/js/global.js');
	wp_localize_script('variaveis-post-id', 'post_id', $post->ID);
 
}
add_action('wp_enqueue_scripts', 'passar_variaveis');

Também é possível passar várias variáveis ao mesmo tempo:

function passar_variaveis() {
	global $post;
         $todas_variaveis = array(
             'post_id'       => $post->ID,
              'variavel_1'   => 'var_1',
              'variavel_2'. => 'var_2'
         );
	wp_enqueue_script('variaveis-post-id', 'assets/src/js/global.js');
	wp_localize_script('variaveis-post-id', 'post_id', $post->ID);
 
}
add_action('wp_enqueue_scripts', 'passar_variaveis');

Javascript

Apenas uma variável:

var post_id = window.post_id;

Diversas variáveis:

var post_id = window.post_id;
var variavel_1 = window.variavel_1;
var variavel_2 = window.variavel_2;

Resultado – HTML

Analisando o HTML renderizado é possível ver a variável disponível dentro do <head> e pronto para ser usado pelo javascript:

<script id="variaveis-post-id">
    var post_id = 10;
</script>

Foto de Alex Andrews: https://www.pexels.com/pt-br/foto/tres-brinquedos-de-monofone-pretos-821754/