Este post lo voy a publicar por que me ha preguntado acerca de como mover al footer de Wordpress el JavaScript. Por todos los que hacemos webs es conocido que todos los códigos JavaScript que se cargan en tu web pueden hacer que tu sitio se ralentice. Esto resulta especialmente preocupante cuando provocan que el contenido de tu web tarde en cargarse. Esto hará que muchos usuarios pueden abandonarla antes de que termine de cargar (internet y sus usuarios se mueven rápido).
Puedes minimizar el efecto JavaScript mediante plugins de caché. Otra opción sería aplazar su carga, pero si se cargan desde la cabecera de tu tema, como suelen tener la mala costumbre de hacer, primero se cargarán los scripts, por minimizados que estén, y luego el contenido ¿se va viendo el problema?. El contenido tardará demasiado en cargar.
Por eso, si no puedes prescindir de los scripts (se hacen cosas maravillosas con ellos), una solución a aplicar es mover al footer automáticamente todos los JavaScripts . Moviéndolos para que pasen de cargarse del archivo header.php y pasen a hacerlo en el archivo footer.php.
Hay plugins como W3 Total Cache que ofrecen soluciones para esto. Hay que aclarar que no siempre funciona. Por esto podemos optar a hacerlo manualmente, sin necesidad de plugins.
Esto lo conseguiremos con tan solo tres pasos.
Mover al footer el JavaScript de tu Wordpress en tres sencillos pasos
El primero de estos pasos es añadir el siguiente código al archivo functions.php. Aun que yo recomiendo utilizar un plugin de funciones (para no sobrecargar el archivo del sistema):
function theme_strip_tags_content($text, $tags = '', $invert = false) { preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags ); $tags = array_unique( $tags[1] ); if ( is_array( $tags ) AND count( $tags ) > 0 ) { if ( false == $invert ) { return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text ); } else { return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text ); } } elseif ( false == $invert ) { return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text ); } return $text; } function theme_insert_js($source) { $out = ''; $fragment = new DOMDocument(); $fragment->loadHTML( $source ); $xp = new DOMXPath( $fragment ); $result = $xp->query( '//script' ); $scripts = array(); $scripts_src = array(); foreach ( $result as $key => $el ) { $src = $result->item( $key )->attributes->getNamedItem( 'src' )->value; if ( ! empty( $src ) ) { $scripts_src[] = $src; } else { $type = $result->item( $key )->attributes->getNamedItem( 'type' )->value; if ( empty( $type ) ) { $type = 'text/javascript'; } $scripts[$type][] = $el->nodeValue; } } foreach ( $scripts as $key => $value ) { $out .= '<script type="'.$key.'">'; foreach ( $value as $keyC => $valueC ) { $out .= "\n".$valueC; } $out .= '</script>'; } foreach ( $scripts_src as $value ) { $out .= '<script src="'.$value.'"></script>'; } return $out; }
El segundo paso a realizar sería abrir el archivo header.php del tema y sustituir wp_head(); por esto otro:
ob_start(); wp_head(); $themeHead = ob_get_contents(); ob_end_clean(); define( 'HEAD_CONTENT', $themeHead ); $allowedTags = ' <style><link><meta><title>'; print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
Para finalizar, en el archivo footer.php debemos incluir el siguiente código antes de