Adicionando elementos noscript a scripts do WordPress usando o filtro script_loader_tag

Uma boa prática em desenvolvimento de sites e webapps é oferecer alternativas para funcionalidades que dependam de Javascript. Conhecido como progressive enhancement ou aperfeiçoamento progressivo.

[for english version, check this link]

Idealmente, você começa da experiência mais básica, sem Javascript, e progressivamente aperfeiçoa a experiência com nova funcionalidades. Ou ao menos, adicionar avisos e conteúdos que possam ser visto por usuários e robôs de busca sem Javascript.

Uma das formas é colocar elementos noscript com descrição ou alternativa da funcionalidade, ou o aviso para o usuário. Infelizmente, o WordPress -- o sistema de gerenciamento de conteúdo que usamos em clientes e projetos de clientes 2Aces -- não oferece uma função específica para adicionar este elementos noscript.

A boa notícia é que é possível resolver isto usando o ótimo sistema de filtros do WordPress. Neste caso usando o filtro script_loader_tag, como você pode ver abaixo.

/**
 * @summary        filtra uma tag de script na fila e adiciona um elemento noscript após ela
 * 
 * @description    filtra uma tag de script na fila (identificada pela variável $handle) e adiciona
 *                 um elemento noscript após ela. Se também houver um script inline após o script
 *                 identificado por $handle, adiciona o elemento noscript após ele.
 * 
 * @access    público
 * @param     string    $tag       A string da tag enviada pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @param     string    $handle    O nome (handle) do como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @param     string    $src       A origem (src) do script como enviado pelo filtro `script_loader_tag` em WP_Scripts::do_item
 * @return    string    $tag       A variável $tag filtrada e com o elemento `noscript`
 */
function add_noscript_filter($tag, $handle, $src){
    // como este filtro roda para cada script na fila
    // precisamos verificar se o $handle é igual o script
    // que queremos filtrar e adicionar o noscript a ele
    if ( 'script-handle' === $handle ){
        $noscript = ''; $tag = $tag . $noscript; } return $tag; } // adiciona a função add_noscript_filter aos filtros em script_loader_tag // deve ysar 3 no último parmetro para garantirque $tag, $handle, $src // estejam disponíveis à funço add_noscript_filter add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

Aproveite! A função acima também está disponível no Github.