Registre e enfileire arquivos javascript condicionais (específicos do navegador)?

Question

Registre e enfileire arquivos javascript condicionais (específicos do navegador)?

#1 resposta do Eugene Manuilov (13 votos)

8

A comunidade WP.SE sempre avisou o uso de wp_register_script e wp_enqueue_script para adicionar scripts em um tema / modelo (e, da mesma forma, wp_register_style e wp_enqueue_style para folhas de estilo).

É assim que eu registro e enfileiro meus scripts ...

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');
}

, em seguida, chame-o em um arquivo de modelo (digamos, 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 estão lá 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 wranglers de tema da Automattic . E o header.php do tema usa diretamente o código acima mencionado - ou seja, não é enfileirado. Então, isso significa que é a única maneira de fazer isso?

wp-enqueue-script wp-register-script javascript

por its_me 06.06.2012 / 06:35

1 resposta

Tags wp-enqueue-script wp-register-script javascript

Como evitar a execução da consulta padrão, preservando a capacidade de usar WP_Query no modelo? meta_query para chaves que ainda não estão definidas

score 13 · Accepted Answer

As classes

WP_Scripts e WP_Styles estão atrás das funções wp_enqueue_script e wp_enqueue_style . Se você der uma olhada na implementação de classes ( scripts e estilos ) então você verá que WP_Scripts class não suporta nenhum tipo de scripts condicionais, mas! você pode ver que WP_Styles faz! O problema é que wp_enqueue_style nã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 truque se torna possível, porque todos os estilos registrados são armazenados no campo registered da classe WP_Styles . Cada estilo registrado é um objeto da classe _WP_Dependency , que permite adicionar dados extras.

Infelizmente, este hack não está funcionando para scripts.

Informações adicionais:
Eu estava realmente passando o código em Essence Theme de Aaron Campbell ontem à noite e notei que ele estava chamando um script e um 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 core . Obviamente, o script condicional não funcionará sem o patch, mas uma coisa a notar é que você pode usar o método add_data diretamente dentro de sua função que está anexada à ação wp_enqueue_scripts .