Agregar CSS y JavaScript en Temas de WordPress de Forma Correcta

25/10/2024 | CSS, JavaScript, WordPress | 0 comentarios

Optimiza tu tema WordPress integrando CSS y JavaScript correctamente, utilizando funciones nativas y asegurando compatibilidad.


En la creación de themes o plugins siempre hay la necesidad de incluir archivos CSS y Javascript. Si estas creando un tema lo puedes colocar directamente en los archivos header.php y footer.php, pero existe una forma mas eficiente y mantenible de hacerlo en WordPress.

Agregar CSS

Para agregar hojas de estilo (CSS), se debe editar el archivo functions.php e incluir la función wp_enqueue_style().


wp_enqueue_style($name, $path, $dependency, $version, $type);

Donde se tiene:

  • $name: Nombre único del estilo.
  • $path: Ruta del archivo CSS a incluir.
  • $dependency: Array con dependencias de CSS.
  • $version: Versión del estilo CSS.
  • $type: Tipo de media (opcional), con opciones: all, screen, print.

Luego, si tenemos un archivo de estilos main.css ubicado en la carpeta css/ del tema podemos agregar el estilo con el siguiente código.


function custom_enqueue_scripts() {
    $path = get_template_directory_uri();

    wp_enqueue_style('main-css',  $path . '/css/main.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Agregar JavaScript

Para agregar archivos JavaScript se debe editar el archivo functions.php y usar la función wp_enqueue_script().


wp_enqueue_script($name, $path, $dependency, $version, $load);

Donde se tiene:

  • $name: Nombre único del script.
  • $path: Ruta del archivo JS incluir.
  • $dependency: Array con dependencias de JavaScript.
  • $version: Versión del archivo JS.
  • $load: Define si se carga el Javascript en el footer (true) o header (false).

Cómo ejemplo agregamos un archivo main.js ubicado en la carpeta js/, requiere que se cargue previamente jQuery y que debe cargarse en el footer.


function custom_enqueue_scripts() {
    $path = get_template_directory_uri();

    wp_enqueue_script('main-js', $path . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Si necesitas cargar estilos o scripts en algunas páginas, se usan las funciones condicionales de WordPress de la siguiente manera.


function custom_enqueue_scripts() {
    $path = get_template_directory_uri();

    if (is_page('contact')) {
        wp_enqueue_script('contact-js', $path . '/js/contact.js', false, $version, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

Ejemplo completo

Vamos a incluir dos estilos: main.css y vendor.css, además tres archivos JavaScript: main.js, contact.js, ReCaptcha (Los dos últimos archivos sólo en la página de contacto).


function kodetop_enqueue_scripts() {
    $path      = get_template_directory_uri();
    $version   = wp_get_theme()->get('Version');
    $recaptcha = 'https://www.google.com/recaptcha/api.js?render=' . RECAPTCHA_KEY;

    // register styles
    wp_enqueue_style('main-css', $path . '/css/main.css', false, $version);
    wp_enqueue_style('vendor-css', $path . '/styles/vendor.css', false, $version);

    // register scripts
    wp_enqueue_script('main-js', $path . '/js/main.js', false, $version, true);

    if (is_page('contact')) {
        wp_enqueue_script('contact-js', $path . '/js/contact.js', false, $version, true);
        wp_enqueue_script('recaptcha', $recaptcha, false, false, true);
    }
}
add_action( 'wp_enqueue_scripts', 'kodetop_enqueue_scripts' );

Recomendaciones

No incluyas archivos CSS y JS en los archivos header.php y footer.php, siempre usa las funciones wp_enqueue_style() y wp_enqueue_script() para garantizar la compatibilidad con los plugins y otros temas.

Si tu archivo JavaScript depende de librerías como jQuery o Bootstrap, especifícalas en el array de dependencias. Puedes ver la lista completa de librerías incluidas en WordPress

Siempre usa el parámetro para indicar la versión de los archivos, si cargas nuevos archivos puedes cambiar la versión para evitar que los usuarios carguen una versión antigua de los archivos.

Referencias

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>