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í
