wp_add_inline_script sem dependência

11

Eu tenho um snippet de javascript que quero injetar no rodapé da página. É um código de rastreamento, digamos, semelhante ao Google Analytics. Não tem dependências, é um trecho independente.

Eu posso fazer algo assim

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Parece um pouco estúpido (dummy.js é um arquivo em branco), mas funciona. Existe uma maneira de pular a dependência?

javascript wp-enqueue-script jimlongo
fonte

Respostas:

13

wp_add_inline_style() - sem dependência

O wp_add_inline_style()pode ser usado sem uma dependência de arquivo fonte.

Aqui está um exemplo do @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

onde colocaríamos isso na wp_enqueue_scriptsação.

wp_add_inline_script() - sem dependência

De acordo com o ticket # 43565 , semelhante será suportado wp_add_inline_script()na versão (obrigado a @MarcioDuarte, @ dev101 e @DaveRomsey pela verificação nos comentários):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

que exibirá o seguinte no cabeçalho , ou seja, entre as <head>...</head>tags:

<script type='text/javascript'>
console.log( "header" );
</script>

Para exibi-lo no rodapé :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

O padrão do $positionargumento de entrada em wp_add_inline_script()é 'after'. O 'before'valor o imprime acima 'after'.

Birgire
fonte
O wp_add_inline_script()sem dependência ainda está sendo considerado para 4.9.9, não significa necessariamente que será adicionado. Portanto, é aconselhável aguardar a confirmação antes de usar esse recurso.
Marcio Duarte
11
Estamos prontos para partir a partir do WP 5.0 .
Dave Romsey
Alguém excluiu meu comentário daqui (confirmei a resposta da birgire de que realmente funciona no WP 5.0+) e, um mês depois, eu realmente precisei desse código novamente, pesquisei, encontrei essa resposta, dei uma olhada rápida, sem encontrar meu comentário e movi-o para outros resultados. Depois de uma hora, voltei aqui, percebendo que essa era a resposta que estava procurando! Para o moderador: NÃO exclua meus comentários úteis, eles me servem, bem como referências e lembretes futuros, não apenas para os outros. Obrigado.
dev101 20/02/19
Infelizmente, tenho que ficar com a versão 4.9.x.
Lucas Vendramini
5

Atualização: o WordPress adicionou suporte para adicionar scripts e estilos embutidos sem dependência na v5.0. Veja a resposta da @ birgire para implementações.

Ao usar wp_add_inline_script(), WP_Scripts::print_inline_script()será usado para gerar scripts embutidos. Por design, print_inline_script()requer uma dependência válida $handle,.

Como não há dependência neste caso, wp_add_inline_script()não é a ferramenta certa para o trabalho. Em vez de criar um arquivo de dependência falso (e uma solicitação HTTP adicional indesejável), use wp_headou wp_footerpara gerar o script embutido:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Geralmente, o JavaScript deve ser adicionado a um .jsarquivo e enfileirado usando wp_enqueue_script()no wp_enqueue_scriptsgancho. Os dados podem ser disponibilizados para o script usando wp_localize_script(). Às vezes, ainda pode ser necessário adicionar um script embutido.

Dave Romsey
fonte
0

Uma maneira de fazer isso é criar uma função que ecoa seu script dentro de uma <script>tag e conectá-la à wp_print_footer_scriptsação. Você deve evitar qualquer coisa que não controle estritamente, mas, de outra forma, esse é um método fácil e seguro.

Por exemplo:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Morgan Estes
fonte