Existen diversas formas en las que podemos agregar o encolar un archivo css o js a nuestro sitio web en WordPress, si trabajamos con html puro una de las formas más comunes de enlazar una hoja de estilos css y js es:
Ejemplo de como se enlaza a una hoja de estilos css dentro de las etiquetas head.
<link rel="stylesheet" href="demos/pet/css/fonts.css" type="text/css" />
Ejemplo de como se enlaza un archivo js, puede ser dentro de las etiquetas head o al final del sitio, para optimizar la carga.
<script src="js/jquery.js"></script>
En WordPress existe un proceso para enlazar los archivos css y js este proceso es conocido como encolar archivos y se lleva a cabo en el archivo functions.php, este proceso se divide en 2 pasos, el primer paso es registrar el archivo y el segundo paso es encolar el archivo.
¿Qué funciones vamos a usar?
Para los estilos (CSS):
Para los scripts (JS)
Proceso para registrar una hoja de estilos o archivo CSS
Paso 1: Registrar archivos css
En este primer paso vamos a registrar el archivo css con ayuda de la función wp_register_style()
<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
Dónde handle y src son parámetros obligatorios.
$handle: es el nombre del archivo
$src: el path donde se encuentra el archivo
$deps: son las dependencias
$ver: la versión
$media: la media puede ser definida como ‘all’, ‘screen’, ‘handheld’, ‘print’
Ejemplo:
<?php //Comprobar que no existe la funcion previamente if(!function_exists('name_styles_scripts')){ function name_styles_scripts(){ wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', null, '4.3.1', 'all'); } } ?>
Notas: El código se encuentra dentro de una función que evita colisiones, en caso de que tu archivo este dentro de una carpeta de tu tema puedes usar en el path get_template_directory_uri() . “ruta/archivo.css”
Paso 2: Encolar el archivo CSS
Para encolar un archivo css vamos a usar la función wp_enqueue_style(‘param’) que recibe como parámetro el nombre que se definio en el handle de la función wp_register_style
<?php //Comprobar que no existe la funcion previamente if(!function_exists('name_styles_scripts')){ function name_styles_scripts(){ /*Paso 1 registrar*/ wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', null, '4.3.1', 'all'); /*Paso 2 encolar*/ wp_enqueue_style('bootstrap'); } } //Agregar un acción que llama a la función add_action( 'wp_enqueue_scripts', 'name_styles_scripts'); ?>
Proceso para registrar un archivo JS
Paso 1: Registrar archivos js
En este primer paso vamos a registrar el archivo js con ayuda de la función wp_register_script()
<?php wp_register_script( string $handle, string|bool $src, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false ) ?>
Dónde $handle y $src son parámetros obligatorios.
$handle: Es el nombre del archivo
$src: Es el path donde se encuentra el archivo
$deps: es un array para las dependencuas – ejemplo array(‘jquery’)
$ver: versión
$in_footer: indica si el archivo se carga al final de la página
//Comprobar que no existe la funcion previamente if(!function_exists('name_styles_scripts')){ function name_styles_scripts(){ wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), '4.3.1', true); } } //Agregar un accion que llama a la función en el segundo parametro add_action( 'wp_enqueue_scripts', 'name_styles_scripts');
Paso 2: Encolar el archivo JS
Para encolar un archivo css vamos a usar la función wp_enqueue_script(‘param’) que recibe como parámetro el nombre que se definio en el handle de la función wp_register_script
<?php //Comprobar que no existe la funcion previamente if(!function_exists('name_styles_scripts')){ function name_styles_scripts(){ //paso 1 registrar js wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), '4.3.1', true); //paso 2 encolar js wp_enqueue_script('bootstrap'); } } //Agregar un accion que llama a la función en el segundo parametro add_action( 'wp_enqueue_scripts', 'name_styles_scripts'); ?>
Al final tendremos un segmento de código que nos permite agregar Bootstrap con su CSS, JS y jquery en nuestro tema de WordPress.
<?php //Comprobar que no existe la funcion previamente if(!function_exists('name_styles_scripts')){ function name_styles_scripts(){ //paso 1 para css, registrar css wp_register_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', null, '4.3.1', 'all'); //paso 2 para css, encolar css wp_enqueue_style('bootstrap'); //paso 1 para js, registrar js wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), '4.3.1', true); //paso 2 para js, encolar js wp_enqueue_script("bootstrap") } } //Agregar un accion que llama a la función en el segundo parametro add_action( 'wp_enqueue_scripts', 'name_styles_scripts'); ?>
¿Tienes dudas o Comentarios? Déjame un mensaje aquí