¿Registrar y poner en cola archivos javascript condicionales (específicos del navegador)?

8

La comunidad WP.SE siempre ha aconsejado el uso de wp_register_scripty wp_enqueue_scriptpara agregar scripts en un tema / plantilla (y del mismo modo, wp_register_styley wp_enqueue_stylepara hojas de estilo).


Así es como me registro y pongo en cola mis guiones ...

Primero, agrego algo como esto en 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');
}

luego llámalo en un archivo de plantilla (por ejemplo, header.php) como este

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

Ahora, llegando al punto, ¿cómo registro y coloco "archivos condicionales de JavaScript" que deben ser reconocidos por navegadores específicos? Por ejemplo:

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

¿Cómo me registro y coloco esto correctamente?

PD: uso el tema Reddle , desarrollado por los wranglers de temas en Automattic. Y el header.php del tema usa directamente el código recién mencionado, es decir, no está en cola. Entonces, ¿eso significa que es la única forma de hacerlo?

soy yo
fuente
Aunque tiene casi un año, esta misma pregunta se hizo antes . No lo encontré cuando busqué antes.
its_me

Respuestas:

13

WP_Scriptsy las WP_Stylesclases están detrás wp_enqueue_scripty las wp_enqueue_stylefunciones. Si echa un vistazo a la implementación de clases ( scripts y estilos ), verá que la WP_Scriptsclase no admite ningún tipo de scripts condicionales, ¡pero! se puede ver que WP_Styleshace! El problema es que wp_enqueue_styleno le permite configurar la condición.

Entonces tenemos que hacer un pequeño truco:

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

Tal pirateo es posible, porque todos los estilos registrados se almacenan en el registeredcampo de WP_Stylesclase. Cada estilo registrado es un objeto de _WP_Dependencyclase, que le permite agregar datos adicionales.

Lamentablemente, este truco no funciona para los scripts.

Información adicional:
Anoche estaba revisando el código del tema Essence Theme de Aaron Campbell y me di cuenta de que estaba llamando tanto un guión condicional como un estilo de 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' );

También hay un boleto y un parche, pero aún no está en el núcleo . Obviamente, el script condicional no funcionará sin el parche, pero una cosa a tener en cuenta es que puede usar el método add_data directamente dentro de su función que está adjunta a la wp_enqueue_scriptsacción.

Eugene Manuilov
fuente
1
Unfortunately this hack is not working for scripts.Oh ... eso apesta! Parece que la única forma es como es. :( Gracias por el truco por cierto. :)
its_me
Parece que tenemos scripts condicionales a partir de 4.2 core.trac.wordpress.org/changeset/31223
lkraav