En un tema de WordPress, ¿cómo condicionalmente incluyen secuencias de comandos para ie8 y abajo? Esto es principalmente para aplicar polyfills para varios html5/css3 características. Veo que wp tiene el $is_IE variable que puede ser utilizado como un condicional para incluir sólo las secuencias de comandos para la IE. Hay una manera de agregar el script para que sólo ciertas versiones de IE, aunque en lugar de todos ellos? Esto es sencillo con algo de HTML ie comentarios condicionales, pero me gustaría incluir los scripts todos en el mismo lugar en mis funciones de archivo.

Condicional para versiones específicas en HTML:

<!--[if lt IE 9]> <script src="iepolyfill.min.js"></script> <![endif]-->

Condicional para todos, es decir, en la nota WP:

    global $is_IE;

    if ( $is_IE ) {
        wp_enqueue_script( 'iepolyfill', bloginfo('stylesheet_directory').'/js/iepolyfill.min.js' );
    }

He mirado alrededor y, principalmente, encontrar los detalles acerca de guiones condicionales para wp backend sólo.

Alguna sugerencia?

InformationsquelleAutor circlecube | 2012-07-19

7 Comentarios

  1. 1

    Como wordpress es un script PHP, se puede acceder a variable de servidor a través de $_SERVER

    A continuación, puede buscar para detectar el navegador con PHP, PHP: Si internet explorer 6, 7, 8 , o 9

    • ¿Qué acerca de la caché de cinco
    • Respuesta incompleta. Esto no trata de cómo introducir un condicional en torno a una secuencia de comandos mediante wp_enqueue_script, la manera prescrita de añadir javascript a su tema.
  2. 71

    Para WordPress 4.2+

    Uso wp_script_add_data incluir el script en un condicional comentario:

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

    Sólo asegúrese de registrar la secuencia de comandos antes de invocar wp_script_add_data (el registro es manejado por wp_enqueue_script arriba), y que el primer argumento que se le pasa wp_script_add_data coincide con el primer argumento pasado cuando se registró la secuencia de comandos.


    Para WordPress 4.1

    Puede utilizar el script_loader_tag filtro hoy a poner en cola los scripts envuelto en los comentarios condicionales. He aquí un ejemplo de aplicación:

    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 una secuencia de comandos de la misma manera, usted 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 );
    • He encontrado esta respuesta a través de Google como me estaba enfrentando el mismo problema como el OP. Es una gran respuesta, pero incluso el ejemplo de uso de una función anónima no es gran cosa porque no cargar correctamente la secuencia de comandos a través de WordPress. Dependiendo de los plugins que uso esto puede conducir a problemas, quizás porque se carga la misma secuencia dos veces, por lo que siempre tienen un ojo en el código HTML de WordPress que realmente se imprime.
    • De acuerdo. Ese es un buen punto, Sven.
    • Creo que esto está bien, pero que realmente no es mejor que sólo con la fuerza de codificación de ellos en el header.php archivo de la omi.
    • Depende de cómo te guste la estructura de su tema. Si usted no aprovechar wp_enqueue_script o wp_enqueue_style en el tema y sólo tiene una header.php archivo, a continuación, se hace un montón de sentido para el grupo de la secuencia de comandos/css incluye en header.php. Pero si, por ejemplo, hacer uso de la cola de funciones para gestionar su incluye, es muy útil para centralizar la secuencia de comandos/estilo incluye en un solo lugar. Este enfoque facilita.
    • Sería esto también funciona cuando el comercio de wp_head para wp_footer?
    • Absolutamente.
    • Parece que esto va a ser parte de 4.2! core.trac.wordpress.org/ticket/16024
    • Fue esta añadido en la 4.2?
    • El script_loader_tag fue añadido en la versión 4.1. Apoyo para $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' ); fue añadido en la 4.2.
    • Gracias @AndrewP va a tener una mirada en el wordpress docs ahora!
    • Puede alguien mucho tonto abajo y ofrecer un trabajo completo de código de ejemplo de cómo se supone que voy a implementar lo que sea 4.2 está apoyando?
    • He añadido un ejemplo de la WP 4.2+ versión de los guiones de carga con comentarios condicionales. Eso hace que quede claro, o ¿todavía tiene preguntas?
    • La edición es clara y comprensible. Gracias por tomarse el tiempo para aplicar a la edición.

  3. 24
    • Debe utilizar wp_register_script() en el momento de añadir scripts a tu WP themes o plugins.
    • Lado del servidor sniffing es en general mala idea, porque es seguro.
    • Por lo general, usted quiere navegadores de destino que carecen de sertain características, no necesariamente sólo el navegador IE. Modernzr es bueno scripts para hacer precisamente eso.

    Para IE, condicional etiquetas funcionan muy bien. He aquí cómo usted puede agregar etiquetas condicionales en una secuencia de comandos, es un ejemplo 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' );
    • Esto sólo funciona para $wp_styles. Relacionados con la venta de entradas: #16024.
    • Sí, esto no funciona bien. Compruebe la fuente de salida. No condicional comentario en torno a las secuencias de comandos.
    • Lo siento a Mikael, pero este realmente necesita ser votado para que la gente no piense que es una solución viable.
    • Aannnnnddd… esto finalmente se trabajará en la nota WP 4.2! core.trac.wordpress.org/ticket/16024
  4. 8

    Solución para WordPress 4.2 y por encima de

    La forma correcta sería aplicar wp_enqueue_script ya que JavaScripts aquí, y no de los estilos css. También, es mejor utilizar get_bloginfo(‘stylesheet_url’) para asegurarse de que esto funciona también 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' ); 
    • Yo estaba a punto de añadir exactamente lo mismo de mi, pero veo que ya has hecho. He probado esta y me funciona con get_template_directory_uri().'/js/lib/excanvas.js' en mi tema functions.php
    • Esta es la respuesta correcta, gracias
    • Gracias por proporcionar esta respuesta. Nada me molesta más que cuando el interrogador encuentra una respuesta, pero no se molesta a romper hacia abajo para los demás.
  5. 7

    Actualización para WordPress 4.7.3 con scripts de carga de la 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' );
    }
  6. 2

    La mejor manera de hacerlo es poner en cola las secuencias de comandos y, a continuación, utilizar wp_style_add_data() para poner condicional. Este método está siendo utilizado por oficiales temas como veinte trece

    Hay una respuesta similar a esta pero añade extra si 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' );
    • Buena captura. Se puede proponer un cambio o comentario sobre el similar de respuesta para un cambio tan pequeño.
  7. 1

    Intente utilizar el wp_style_add_data() función (oficialmente utilizado en twentythirteen y twentyfourteen tema:

    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 utiliza en la misma forma. Se llama:

    wp_script_add_data()
    • Han confirmado que no hay imprevistos o consecuencias negativas para el uso de la wp_style lógica para añadir JavaScript? Agregar el archivo como un <script> elemento, y no como un <link> elemento?
    • Trabajó como un encanto, gracias!
    • Este código genera HTML para incluir un archivo CSS, Javascript no.

Dejar respuesta

Please enter your comment!
Please enter your name here