Variáveis em JavaScript com o WordPress

No último artigo (WordPress e libraries JS) falamos de como é possível incluir arquivos de JavaScript via código com o WordPress. Hoje veremos que além de gerenciar scripts também é possível criar variáveis em JavaScript utilizando a função wp_localize_script do WordPress.

Criando variáveis em JavaScript

Para criar uma variável diretamente no JavaScript é bem simples, basta usar a palavra reservada var antes do nome da sua variável e fazer uma atribuição de valor. Veja o exemplo:

var valor1 = "uma string";
var valor2 = []; //array
var valor3 = {}; //objeto
var valor4 = function() {}; //função

Existem muitos casos onde é necessário criar uma variável em JavaScript através de código PHP. Veja os casos mais comuns para usar essa funcionalidade:

• Criar strings de tradução de um tema ou plugin internacionalizado.
• Criar objetos de configuração para algum plugin em jQuery, por exemplo um plugin de slider.
• Criar objeto com rotas para requisições em AJAX.

Como utilizar a função wp_localize_script

Assim como na função wp_enqueue_script com a wp_localize_script precisamos utilizar o hook wp_enqueue_scripts. Veja abaixo os parâmetros aceitos pela função wp_localize_script:

• $handle – Nome de identificação do seu script no qual a variável será anexada. Nesse caso o código de JavaScript para criação da variável será inserido no HTML antes do script informado como handle.
• $name –  O nome da variável que conterá os dados. É aconselhável que você sempre utilize algum prefixo de identificação do seu plugin ou tema para evitar conflitos. Utilize o padrão camelCase para definir o nome da variável.
• $data – O valor da variável. Esse parâmetro aceita todos os valores validos da função nativa do PHP json_encode.

Veja o exemplo de como podemos utilizar a função wp_localize_script:

<?php
add_action( 'wp_enqueue_scripts', 'meus_scripts' );

function meus_scripts() {
    wp_localize_script(
      'meu-primeiro-script',
      'themeConfigVars',
      array(
          'urlAjax'          => admin_url( 'admin-ajax.php' ),
          'timePausedSlider' => 2000
      )
    );
}

Faça bom proveito desse recurso do WordPress sempre que você precisar criar variáveis em JavaScript diretamente do seu código server-side.