Do you want to switch to Platzi in English?
1

Scripts asíncronos en Wordpress

Hay ocasiones en las que necesitamos que los scripts se descarguen en nuestro navegador al mismo tiempo que se carga la visualización de la página web. Esto se realiza con las etiquetas “defer” y “async” de Javascript..
¿Pero cómo se hace esto con los scripts de los temas de Wordpress?

En el artículo original hay varias formas de hacerlo según la necesidad, pero aquí explico como hacer que todos los scripts sean “defer” (te recomiendo que leas en qué consiste “defer” y “async” de Javascript).

Si conoces el código de Wordpress, sabrás que la función wp_footer() es la que carga todos los archivos javascript.

Para añadir la etiqueta “defer” en todos los scripts nos vamos al archivo functions.php que está situado dentro de la carpeta del tema (/wp-content/themes/el_tema_que_estoy_usando).

En functions.php añadimos al final del archivo el siguiente código:

function js_async_attr($tag){

return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Esto hace que cada vez que se inserte un script en HTML, este venga acompañado del tag defer=“defer” .

Hay otros casos en los que sólo queramos hacer asíncronos algunos scripts, incluso combinar ambas características pero eso se detalla en el artículo original.

Espero que les haya sido de gran ayuda.

Saludos 😄

Escribe tu comentario
+ 2