Registrar e enfileirar arquivos javascript condicionais (específicos do navegador)?


8

A comunidade WP.SE sempre aconselhou o uso wp_register_scripte wp_enqueue_scripta adição de scripts em um tema / modelo (e da mesma forma wp_register_stylee wp_enqueue_stylepara folhas de estilo).


É assim que eu registro e coloco meus scripts em fila ...

Primeiro, adiciono algo assim em functions.php

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){

    //Register scripts
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
    wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));    
    wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}

chame-o em um arquivo de modelo (por exemplo, header.php) como este

<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>

Agora, chegando ao ponto, como faço para registrar e enfileirar "arquivos JavaScript condicionais" que existem para serem reconhecidos por navegadores específicos? Por exemplo:

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

Como faço para registrar e enfileirar isso corretamente?

PS: Eu uso o tema Reddle , desenvolvido pelos organizadores de temas da Automattic. E o header.php do tema usa diretamente o código acima mencionado - ou seja, não está na fila. Então, isso significa que é a única maneira de fazer isso?


Embora tenha quase um ano de idade, essa mesma pergunta foi feita antes . Eu não o encontrei quando procurei antes.
its_me

Respostas:


13

WP_Scriptse as WP_Stylesclasses estão atrasadas wp_enqueue_scripte wp_enqueue_stylefuncionam. Se você der uma olhada na implementação de classes ( scripts e estilos ), verá que a WP_Scriptsclasse não suporta nenhum tipo de script condicional, mas! você pode ver que WP_Stylessim! O problema é que wp_enqueue_stylenão permite que você configure a condição.

Então temos que fazer um pequeno hack:

add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
    wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );

    global $wp_styles;
    $wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}

Esse hack torna-se possível, porque todos os estilos registrados são armazenados no registeredcampo de WP_Stylesclasse. Cada estilo registrado é um objeto de _WP_Dependencyclasse, que permite adicionar dados extras.

Infelizmente esse hack não está funcionando para scripts.

Informações adicionais:
Na verdade, eu estava revisando o código no Tema da Essência de Aaron Campbell na noite passada e notei que ele estava chamando de script e estilo condicional do navegador.

/**
 * @var WP_Scripts
 */
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );

/**
 * @var WP_Styles
 */
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );

Há também um ticket e patch, mas ainda não está no núcleo . Obviamente, o script condicional não funcionará sem o patch, mas uma coisa a ser observada é que você pode usar o método add_data diretamente dentro da sua função anexada à wp_enqueue_scriptsação.


11
Unfortunately this hack is not working for scripts.Oh ... isso é péssimo! Parece que o único caminho é o que é. :( Obrigado pelo hack pela maneira :).
its_me

Parece que temos scripts de condicionais a partir de 4,2 core.trac.wordpress.org/changeset/31223
lkraav
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.