Cómo añadir archivos CSS y JS en tu plugin de WooCommerce

Es muy importante a la hora de desarrollar un plugin para WooCommerce o WordPress que los estilos y el JavaScript solo afecten a la parte de tu desarrollo. Una gestión inadecuada en este aspecto puede llevar a que los archivos CSS y JS interfieran con otras áreas del sitio web.

Es de vital importancia evitar problemas visuales, o de compatibilidad, que surgen cuando un plugin modifica estilos o funciones fuera de su alcance, interfiriendo con otros plugins o con el núcleo de WordPress.

Si solo necesitas aplicar estos estilos, y scripts en páginas específicas como la de un producto determinado, no tiene sentido cargarlos en lugares donde no son necesarios. Debemos considerar la eficiencia de la carga de archivos CSS y JavaScript. Esta medida mejora la velocidad de carga de las páginas, siendo un factor crucial para la experiencia del usuario y el SEO.

En esta publicación, descubriremos cómo integrar ficheros CSS y JavaScript específicamente en páginas de productos particulares. Esta técnica no solo es aplicable en el desarrollo de plugins para WooCommerce, sino también útil si desarrollas sitios web en WordPress.

Cómo cargar archivos CSS en tu plugin de WooCommerce

La mejor práctica para insertar un archivo CSS es asegurarte de que se aplique únicamente donde sean necesarios esos estilos. Esto no solo mantiene tu sitio web organizado y limpio, sino que además optimiza el rendimiento.

Ahora, veremos el método para llamar al archivo CSS específicamente en la página de detalle del producto. Esta técnica se focalizará en los productos del tipo DGC que hemos creado, demostrando cómo aplicar estilos de forma eficiente y selectiva.

public function __construct() {
    $this->init();
}
    
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
}
    
public function enqueue_styles() {
    // solo para la página de producto y para el producto de tipo DGC
    if ( is_product() && is_a( wc_get_product(), 'WC_Product_dgc' ) ) {
        wp_enqueue_style( 'dgc-product-single', PREFIX_DGC_PLUGIN_ASSETS_URL . '/css/dgc-product-single.css', array(), PREFIX_DGC_PLUGIN_VERSION, 'all' );
    }
}

Este código es parte de una clase de PHP, que es una forma común de organizar y encapsular código en WordPress y WooCommerce. Aquí, tenemos tres métodos o funciones dentro de la clase: __construct(), init(), y enqueue_styles().

Método Constructor (__construct()):

• El constructor es una función especial que se ejecuta automáticamente cuando se crea una instancia de la clase.
• Aquí, __construct() llama a la función init().

Inicialización (init()):

• La función init() está diseñada para configurar ciertas cosas al principio.
• Utiliza add_action() de WordPress para decir «Cuando WordPress esté en la fase de añadir scripts y estilos (wp_enqueue_scripts), llama a la función enqueue_styles() de esta clase».

Cargar Estilos (enqueue_styles()):

• Este método es el que realmente se ocupa de cargar los estilos CSS.
• Primero, hay una condición: if ( is_product() && is_a( wc_get_product(), 'WC_Product_dgc' ) ). Esto verifica dos cosas:
  • is_product(): ¿Estamos actualmente en una página de producto de WooCommerce?
  • is_a( wc_get_product(), 'WC_Product_dgc' ): ¿El producto en esta página es del tipo personalizado ‘DGC’?
• Si ambas condiciones se cumplen, entonces el estilo CSS específico (dgc-product-single.css) se añade a la página utilizando wp_enqueue_style().
• wp_enqueue_style() toma varios parámetros:
  • El nombre del estilo (en este caso, ‘dgc-product-single’).
  • La ruta al archivo CSS.
  • Dependencias (en este caso, no hay ninguna, por eso se pone array()).
  • La versión del estilo, para control de caché.
  • El tipo de medios para los que es este estilo (‘all’ significa que es para todos los tipos de medios).

Cómo llamar a los estilos en nuestros desarrollos

Para asegurarnos que los estilos que aplicamos no afecten a otras partes de la web, o interfieran con otros plugins, es clave usar prefijos únicos en nuestras etiquetas HTML. Esta práctica ayuda a evitar conflictos de estilos y mantiene nuestro código limpio y ordenado.

<input class="prefix-input">
<style>
    .prefix-input{
        background: red;
    }
</style>

Por ejemplo, tomemos WooCommerce y su bloque de listado de productos. Aquí, utilizan la clase wc-block-grid__product. Este es un buen ejemplo de cómo asignar estilos específicos a un componente, siendo wc el prefijo que identifica los estilos de WooCommerce. Los prefijos son esenciales porque ayudan a diferenciar y aislar nuestros estilos de los de otros desarrolladores, o del propio core de WordPress.

Además, WooCommerce usa atributos data para identificación adicional, como data-block-name="woocommerce/handpicked-products". Esto es útil para los desarrolladores que deseen aplicar hooks o ajustes específicos, permitiendo una identificación clara y directa del bloque o componente con el que se trabaja.

La utilización de estos atributos facilita una gestión más precisa y eficiente del CSS y JavaScript en nuestros desarrollos de WooCommerce.

Cómo cargar assets JS en tu plugin WordPress

Cargar archivos JavaScript en tu plugin de WordPress sigue un proceso similar al de los archivos CSS, con algunas diferencias clave. Al igual que con CSS utilizamos la acción wp_enqueue_scripts, esta vez gestionará scripts JavaScript.

Para llamar a un archivo de JavaScript, también recurrimos a wp_enqueue_scripts, pero los parámetros que utilizamos se enfocan en scripts en lugar de estilos. Esto asegura que tus scripts se carguen de manera adecuada y solo donde sean necesarios, manteniendo tu sitio web rápido y funcional.

public function __construct() {
    $this->init();
}
    
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
}
    
public function enqueue_scripts() {
    // solo para la página de producto y para el producto de tipo DGC
    if ( is_product() && is_a( wc_get_product(), 'WC_Product_dgc' ) ) {
        wp_enqueue_script( 'dgc-product-single', PREFIX_DGC_PLUGIN_ASSETS_URL . '/js/dgc-product-single.js', array(), PREFIX_DGC_PLUGIN_VERSION, true );
    }
}

Esta técnica es fundamental para evitar conflictos con otros scripts, y para garantizar que el rendimiento de tu sitio web no se vea afectado negativamente. Al igual que con los archivos CSS, la eficiencia y la precisión en la carga de JavaScript son aspectos clave para una experiencia de usuario óptima y para el buen funcionamiento del plugin.

Cómo asignar información para utilizarla en JavaScript

Una técnica interesante en el desarrollo de plugins es utilizar el atributo data para pasar información de PHP a JavaScript. Esto también facilita a otros desarrolladores el acceso a datos importantes directamente desde el HTML, sin necesidad de buscar en la documentación del plugin, o revisar el código fuente.

Si tomemos como ejemplo WooCommerce y su manejo eficiente de los atributos data, al igual que en el caso del CSS, WooCommerce aprovecha estos atributos para transmitir información útil.

Por ejemplo, utilizan data-products="[2256,2390,2308,18464]" para pasar una lista de IDs de productos, y data-columns="4" para definir el número de columnas en un layout. Esta técnica es sumamente útil para desarrolladores que desean interactuar con esos datos mediante JavaScript.

Esta forma de asignar y acceder a la información es fundamental porque facilita la manipulación de datos dentro de los scripts de JavaScript de una manera estructurada y accesible. Además, mejora significativamente la interactividad y la funcionalidad del plugin, ofreciendo una experiencia más fluida y dinámica para los usuarios.

Recomendación para un desarrollo óptimo con JavaScript

Siempre que sea posible evita el uso de jQuery u otras librerías externas al trabajar en nuevas funcionalidades con JavaScript en tus desarrollos de WordPress y WooCommerce. Optar por JavaScript nativo tiene ventajas importantes:

• Reducción de Dependencias: Al usar JavaScript puro, eliminas la necesidad de depender de librerías externas. Esto minimiza los riesgos de incompatibilidades o conflictos con otros scripts o plugins.
• Mejora en la Velocidad de Carga: Al no cargar librerías adicionales como jQuery, reduces el peso total de la página y, por lo tanto, mejoras la velocidad de carga del sitio. Esto es importante tanto para la experiencia del usuario como para el SEO.
• Consistencia en el Código: Algunos temas o plugins de WordPress podrían no utilizar ciertas librerías como jQuery, lo que podría causar problemas en tu código si dependes de ellas. Utilizar JavaScript nativo asegura una mayor consistencia y compatibilidad.

Al centrarte en JavaScript nativo, aseguras un desarrollo más compatible, limpio y eficiente, lo que beneficia tanto a los usuarios finales como a la comunidad de desarrolladores de WordPress.

Finalizando con claves y buenas prácticas en CSS y JS para plugins de WooCommerce

Hemos visto técnicas clave para añadir archivos CSS y JavaScript de manera efectiva en tus plugins de WooCommerce, siempre con el objetivo de mejorar la experiencia del usuario y optimizar el rendimiento del sitio. Destacamos la importancia de cargar estos archivos solo «dónde» y «cuándo» sean necesarios, utilizando prácticas como el uso de prefijos únicos y atributos data para una mejor eficacia y organización.

Si estás interesado en profundizar más en cómo manejar JavaScript en tus desarrollos de WordPress, te recomendamos leer nuestra publicación Cómo añadir JavaScript a un plugin de WordPress. En ella, descubrirás una estrategia efectiva para integrar JavaScript en plugins de WordPress sin depender de archivos externos. Con esta técnica optimiza tu sitio sin complicaciones.

Y si en algún momento buscas un impulso adicional, o quieres mejorar la calidad de tus proyectos, considera nuestro servicio de desarrollo de plugins para WordPress. Estamos preparados para ofrecerte el soporte y la expertise necesarios para transformar tus ideas en realidad, centrándonos siempre en la excelencia y eficacia.