Integración de Librerías CSS en Proyectos Web

Contenido del curso

Comenzar con WordPress

Armar estructura del Theme

Contruir vistas

Personalizar el Loop de WordPress

Extra

Cierre del curso

31
Fundamentos de WordPress: Creación de Catálogo de Productos
02:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:35

Integración de Librerías CSS en Proyectos Web

Curso de WordPress Práctico

Clase 14 de 31

Clase 14 / 31

Recursos

¿Cómo crear y manejar librerías en una función de WordPress?

Al desarrollar temas en WordPress, el manejo adecuado de librerías es crucial para mantener un código limpio y eficiente. A través de esta guía detallada, aprenderás a registrar y poner en cola tus librerías, usando funciones que se pueden aplicar en múltiples proyectos. ¡Vamos a descubrirlo!

¿Qué son las funciones de WordPress que registran y encolan librerías?

WordPress proporciona funciones específicas para manejar scripts y estilos. Aquí, aprenderás a usar estas funciones para registrar y encolar eficientemente tus librerías:

wp_register_style y wp_enqueue_style: Se utilizan para gestionar estilos CSS.
wp_register_script y wp_enqueue_script: Manejan los archivos JavaScript.

Estos métodos permiten especificar el nombre del identificador ("handle"), el origen de los archivos, dependencias que deben cargarse antes, número de versión del archivo y el contexto de su carga (por ejemplo, en el front-end o en el panel de administración).

¿Cómo iniciar con wp_register_style?

Comencemos por registrar estilos usando wp_register_style:

function custom_styles() {
    wp_register_style('vuetify', 'URL_DEL_ARCHIVO_CSS_DE_VUETIFY', array(), '4.4.1', 'all');
    wp_register_style('montserrat', 'URL_DEL_ARCHIVO_DE_FUENTE_MONTSERRAT', array(), '1.0', 'all');
}

add_action('wp_enqueue_scripts', 'custom_styles');

¿Cómo aplicar los estilos registrados?

Luego, debes encolar los estilos registrados para que se implementen en tu sitio web:

function enqueue_custom_styles() {
    wp_enqueue_style('vuetify');
    wp_enqueue_style('montserrat');
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/css/style.css', array('vuetify', 'montserrat'), '1.0', 'all');
}

add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

¿Cómo probar que la integración de estilos funciona?

Para verificar que los estilos se están cargando correctamente, puedes añadir una regla CSS simple en tu archivo style.css:

body {
    background-color: black;
}

Actualiza tu navegador para confirmar que los estilos están siendo aplicados tal como lo esperas. Esto te asegurará que tus estilos y librerías se han integrado correctamente.

Explora y experimenta con estas herramientas en WordPress. Recuerda que el manejo apropiado de librerías enriquecerá tus proyectos y los hará mucho más profesionales. ¡Sigue experimentando y aprendiendo!