¿Cómo encolar o agregar archivos js y css a WordPress?

Encolar archivos css y js a WordPress

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í

Agregar un comentario:

AUTOR DEL BLOG

Manuel Caudillo Web Developer y Estratega Digital en CDMX, 26 años, SEO, Traveller

Contacto: 5539000734 / cacvmanu@gmail.com




Proyección Digital.