Vamos a ver con un ejemplo, cómo podemos cargar en footer de WordPress, nuestros archivos CSS u Hojas de Estilo, o nuestros archivos JS o scripts de Javascript.
Descripción
Cargar las hojas de estilos o archivos CSS y los scripts o archivos JS, en el footer de nuestro theme, lo que nos facilita son solo ventajas. Entre ellas, está de darle una óptima experiencia al usuario o visitante que viene a nuestra página web, debido a que estos archivos que se tienen que cargar en nuestra web, a veces son demasiado pesados. Algunos ocupan hasta 1 mega, sí, ¡1 pedazo de mega!. Y dirás, “buá, ¿en serio, me estás diciendo que por un simple mega…). Si 1 mega es como si yo aplastara una hormiguita en el campo. Mi conexión va a 200 megas de velocidad de descarga”. El problema está, en que no eres tú el que decide si una web tiene buena experiencia de usuario para los demás, sino tu amiguito el robocito de Google, Bing, etc. que escanea tu página. Como note que tarde algo en cargar, te marcará en su lista de “páginas no guays como experiencia para el usuario“.
Por tanto al grano!.
¿Qué implica que una página cargue lenta cuando accedes a ella por primera vez, de un listado de un buscador donde había otras iguales?
Pues que si tarda, me piro a ver la otra página.
Así de simple.
Pues para esto es este ejemplo, para que lo gordo lo cargue al final, y mientras tanto, el usuario se ponga a ver las fotos o cosas chulas de nuestra página.
Ejemplos de archivos
Como ejemplos de archivos podemos tener estos:
CSS
style_de_tu_theme.css(no es recomendable poner en el footer la hoja de estilos de tu theme wordpress)- style_personal.css
- font-awesome.css
- otra-font.css
JS
- tu-archivo-js-custom.js
Código
Estas funciones, las tendríamos que añadir, en el archivo functions.php que traiga nuestro theme de WordPress, al final del todo.
Función para remover estilos CSS del HEAD
Esta función, es por si un plugin o tu mismo theme, ya te ha cargado una hoja de estilos determinada, y por tanto, si la quieres enviar al footer, la tienes que remover previamente.
<?php
function remover_css() {
//Entre paréntesis escribiremos entre comillas,
//el ID de la hoja de estilos, sin el "-css" del final si lo tiene.
wp_dequeue_style('tu-estilo-id');
wp_deregister_style('tu-estilo-id');
}
add_action( 'wp_enqueue_scripts', 'remover_css', 9999 );
add_action( 'wp_head', 'remover_css', 9999 );
Función para remover scripts JS del HEAD
Esta función, es por si un plugin o tu mismo theme, ya te ha cargado un script de javascript determinado, y por tanto, si lo quieres enviar al footer, lo tienes que remover previamente.
<?php
function remover_js() {
//Entre paréntesis escribiremos entre comillas,
//el ID del script de javascript, o en caso de que no tenga id, como ocurre con muchos plugins,
//suele ser el nombre del plugin.
wp_dequeue_script('tu-script-id');
wp_deregister_script('tu-script-id');
}
add_action( 'wp_enqueue_scripts', 'remover_js', 9999 );
add_action( 'wp_head', 'remover_js', 9999 );
Función para cargar estilos CSS en FOOTER
La función para cargar los estilos CSS sería esta:
<?php
function cargar_footer_styles() {
wp_enqueue_style( 'tu-estilo-id', get_template_directory_uri() . '/css/style.css' );
};
add_action( 'get_footer', 'cargar_footer_styles' );
Función para cargar scripts JS en FOOTER
La función para cargar los archivos JS de javascript sería esta:
<?php
function cargar_footer_scripts() {
wp_enqueue_script( 'tu-archivo-js', get_template_directory_uri() . '/js/archivo.js' );
};
add_action( 'get_footer', 'cargar_footer_scripts' );
