php - scripts - wordpress enqueue script header
WordPress-Enqueue scripts para solo si LT IE 9 (8)
Actualización para WordPress 4.7.3 con scripts que se cargan desde CDN:
add_action( ''wp_enqueue_scripts'', ''load_IE_fallback'' );
function load_IE_fallback() {
wp_register_script( ''ie_html5shiv'', ''https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js'', '''', ''3.7.3'', false );
wp_register_script( ''ie_respond'', ''https://oss.maxcdn.com/respond/1.4.2/respond.min.js'', '''', ''1.4.2'', false );
wp_enqueue_script( ''ie_html5shiv'');
wp_enqueue_script( ''ie_respond'');
wp_script_add_data( ''ie_html5shiv'', ''conditional'', ''lt IE 9'' );
wp_script_add_data( ''ie_respond'', ''conditional'', ''lt IE 9'' );
}
En un tema de WordPress, ¿cómo se incluyen condicionalmente los scripts para ie8 y abajo? Esto es principalmente para aplicar polyfills para varias características html5 / css3. Veo que wp tiene la variable $ is_IE que se puede usar como un condicional para incluir solo scripts para IE. ¿Hay alguna forma de agregar el script solo para ciertas versiones de IE en lugar de todas? Esto es simple con algo de HTML, es decir, comentarios condicionales, pero me gustaría incluir todos los scripts en el mismo lugar en mi archivo de funciones.
Condicional para versiones específicas en HTML:
<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->
Condicional para todos los IE en WP:
global $is_IE;
if ( $is_IE ) {
wp_enqueue_script( ''iepolyfill'', bloginfo(''stylesheet_directory'').''/js/iepolyfill.min.js'' );
}
He mirado alrededor y principalmente he encontrado detalles sobre scripts condicionales solamente para backend wp.
¿Alguna sugerencia?
Como WordPress es un script PHP, puede acceder a la variable del servidor a través de $ _SERVER
A continuación, puede buscar detectar el navegador con PHP, PHP: si Internet Explorer 6, 7, 8 o 9
Esta es una pesadilla monstruosa. Solo quiero dormir un poco esta noche, ¿está bien?
Esto no funciona
$wp_styles->add_data("foo", "conditional", "lt IE 9");
Teniendo en cuenta que todo lo demás que se sugiere aquí es solo un truco, terminé codificándolos en mi plantilla.
header.php
<head>
<!-- ... -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
El único inconveniente de esto es si no los quiere en cada página. Sin embargo, seamos honestos, los querrás en la mayoría de las páginas, por lo que la regla 80/20 dicta que esto es lo suficientemente bueno para mí.
Intenta usar la función wp_style_add_data() (oficialmente utilizada en el tema twentythirteen and twentyfourteen :
wp_enqueue_style( ''iepolyfill'', bloginfo( ''stylesheet_directory'' ) . ''/js/iepolyfill.min.js'' );
wp_style_add_data( ''iepolyfill'', ''conditional'', ''if lt IE 9'' );
Actualización: desde WordPress> = 4.2.0 hay una función que se usa de la misma manera. Se llama:
wp_script_add_data()
La mejor manera de hacerlo es poner en cola los scripts y luego usar wp_style_add_data () para poner condicional. Este método está siendo utilizado por temas oficiales como veinte y trece
Hay una respuesta similar a esto, pero agrega extra si está en la condición que está mal.
wp_register_style( ''ie_html5shiv'', get_template_directory_uri() . ''/js/html5shiv.js'' );
wp_enqueue_style( ''ie_html5shiv'');
wp_style_add_data( ''ie_html5shiv'', ''conditional'', ''lt IE 9'' );
wp_register_style( ''ie_respond'', get_template_directory_uri() . ''/js/respond.min.js'' );
wp_enqueue_style( ''ie_respond'');
wp_style_add_data( ''ie_respond'', ''conditional'', ''lt IE 9'' );
Para WordPress 4.2+
Use wp_script_add_data para envolver el script en un comentario condicional:
wp_enqueue_script( ''html5shiv'', ''//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js'' );
wp_script_add_data( ''html5shiv'', ''conditional'', ''lt IE 9'' );
wp_enqueue_script( ''respond'', get_template_directory_uri() . ''/js/respond.min.js'' );
wp_script_add_data( ''respond'', ''conditional'', ''lt IE 9'' );
Solo asegúrese de registrar el script antes de invocar wp_script_add_data (el registro es manejado por wp_enqueue_script arriba), y de que el primer argumento que pase a wp_script_add_data coincida con el primer argumento que pasó cuando registró el script.
Para WordPress 4.1
Puede usar el filtro script_loader_tag hoy para poner en cola scripts envueltos en comentarios condicionales. Aquí hay una implementación de ejemplo:
wp_enqueue_script( ''html5shiv'', ''//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js'', array(), ''3.7.2'', false );
add_filter( ''script_loader_tag'', function( $tag, $handle ) {
if ( $handle === ''html5shiv'' ) {
$tag = "<!--[if lt IE 9]>$tag<![endif]-->";
}
return $tag;
}, 10, 2 );
Y si desea incluir más de un script de la misma manera, puede usar algo como:
// Conditional polyfills
$conditional_scripts = array(
''html5shiv'' => ''//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.js'',
''html5shiv-printshiv'' => ''//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv-printshiv.js'',
''respond'' => ''//cdn.jsdelivr.net/respond/1.4.2/respond.min.js''
);
foreach ( $conditional_scripts as $handle => $src ) {
wp_enqueue_script( $handle, $src, array(), '''', false );
}
add_filter( ''script_loader_tag'', function( $tag, $handle ) use ( $conditional_scripts ) {
if ( array_key_exists( $handle, $conditional_scripts ) ) {
$tag = "<!--[if lt IE 9]>$tag<![endif]-->";
}
return $tag;
}, 10, 2 );
Solución para WordPress 4.2 y superior
La forma correcta sería aplicar wp_enqueue_script dado que es JavaScripts aquí, y no CSS. Además, es mejor usar get_bloginfo (''stylesheet_url'') para asegurarse de que esto también funciona en Temas secundarios.
/**
* IE Fallbacks
*/
function load_IE_fallback() {
wp_register_script( ''ie_html5shiv'', get_bloginfo(''stylesheet_url''). ''/js/html5shiv.min.js'', __FILE__, false, ''3.7.2'' );
wp_enqueue_script( ''ie_html5shiv'');
wp_script_add_data( ''ie_html5shiv'', ''conditional'', ''lt IE 9'' );
wp_register_script( ''ie_respond'', get_bloginfo(''stylesheet_url''). ''/js/respond.min.js'', __FILE__, false, ''1.4.2'' );
wp_enqueue_script( ''ie_respond'');
wp_script_add_data( ''ie_respond'', ''conditional'', ''lt IE 9'' );
}
add_action( ''wp_enqueue_scripts'', ''load_IE_fallback'' );
- Debe usar
wp_register_script()cada vez que agregue scripts a sus temas o complementos de WP. - Servidor olfatear es en general una mala idea, porque no está seguro.
- Por lo general, desea orientar navegadores que carecen de ciertas funciones, no necesariamente solo el navegador IE. Modernzr es buenos guiones para hacer precisamente eso.
Para IE, las etiquetas condicionales funcionan muy bien. A continuación, le mostramos cómo puede agregar etiquetas condicionales a un script, por ejemplo, para HTML5shiv :
global $wp_scripts;
wp_register_script(
''html5shiv'',
get_bloginfo(''template_url'').''/assets/js/html5shiv.js'',
array(),
''3.6.2''
);
$wp_scripts->add_data( ''html5shiv'', ''conditional'', ''lt IE 9'' );