Passando dados do PHP para o JavaScript no WordPress

Muitas vezes precisamos passar alguns dados do PHP para o JavaScript no WordPress. Um caso comum é na utilização de nonces para realização de requisições via AJAX, ou você pode ter um hexadecimal associado a um post ou termo de taxonomia que precisa utilizar no JavaScript, ou mesmo outros parâmetros que foram salvos no banco de dados e você quer enviar via PHP, sem necessidade de consumir a REST API por exemplo.

Antigamente utilizávamos a função wp_localize_script(), você deve encontrar muita coisa por aí utilizando ela, porém desde a versão 4.5, de 2016, o WordPress possui a função wp_add_inline_script(), dedicada a esse uso.

function forma_haste_enqueue_scripts()
    wp_enqueue_script( 'meu-script', get_template_directory_uri() . '/assets/js/meu-script.js', [ 'jQuery' ], null, true );

    $data = [
        'ajax_url'  => admin_url( 'admin-ajax.php' ),
        'nonce'     => wp_create_nonce( 'my_ajax_request_nonce' ),
        'color'    => '#FE13HA',
    ];
    wp_add_inline_script( 'meu-script', 'var dados_do_meu_script = ' . json_encode( $data ) . ';', 'before' );
}
add_action( 'wp_enqueue_scripts', 'forma_haste_enqueue_scripts', 1 );

Esse snippet realiza o carregamento do script meu-script em todas as páginas do site, e passa para ele os dados definidos no array $data. Estes dados estarão disponíveis no JavaScript a partir da variável dados_do_meu_script, que foi definida no segundo parâmetro da função wp_add_inline_script.

O primeiro parâmetro da função wp_add_inline_script é o script para o qual você quer passar os dados. No caso especificamos como meu-script, que é o script que foi previamente definido para ser carregado com a wp_enqueue_script.

O segundo parâmetro é onde definimos, no formato de string, o código JavaScript a ser passado/executado no script. Definimos nele a declaração de uma variável que irá armazenar os dados definidos no array $data, utilizando a função json_encode para converter em um JSON válido e termos um objeto utilizável no JS.

Por fim, o último parâmetro aceita after ou before. Isso especifica se o script inline que estamos definindo será carregado antes ou depois da inserção da tag <script> do meu-script.

Referências

Compartilhe