¡Hola, amantes de WordPress y del diseño web! En otro artículo hablé de como insertar un archivo de javascript personalizado en tu template, hoy vamos a hablar de cómo añadir un archivo adicional css a tu tema hijo, para darle una vuelta de tuerca a tu sitio con un poco de magia CSS, y no, no necesitas ser un mago del código para hacerlo. ¿Preparados? ¡Allá vamos!
Contenido
Paso 1: Acceso FTP a tu Tema o Tema hijo
Usa tu cliente FTP favorito o el administrador de archivos de tu hosting para colarte en el directorio de tu tema hijo en WordPress. Nosotros siempre usamos FileZilla, es un cliente gratuito de gran potencia.
Una vez tengas preparado el acceso a las tripas de tu WordPress, es hora de avanzar al siguiente paso.
Paso 2: Organiza tus ficheros
Si eres de los mios y te gusta tener todo bien organizado, te recomiendo crear una carpeta css para almacenar este y otros archivos css que quieras incluir en el futuro, de hecho yo siempre lo creo de esta manera: nombre_tema/assets/css/
Paso 3: Crea y prepara tu archivo CSS
Ahora necesitamos crear ese archivo mágico, custom_style.css. Vamos a colocarlo en el directorio que creamos en el paso anterior.
En este archivo es donde plasmarás y escribiremos todas tus locuras creativas en css. Piensa en colores, fuentes, espaciados, fondos e incluso animaciones en css que explicaremos en otro artículo… en fin, en todo aquello que haga a tu sitio tener vida y gritar «¡soy único en el mundo!«.
Paso 4: Conecta el nuevo archivo css a tu Tema
Abre el archivo functions.php de tu tema o tema hijo. Aquí es donde la magia comienza a suceder. Vamos a decirle a WordPress: «Eh, tengo este fabuloso archivo CSS que quiero usar». Aquí te dejo un hechizo, digo, un fragmento de código, para hacerlo, copia y pega este código al inicio del functions.php y después de los primeros comentarios.
/*Código para incluir archivo css. Por Soluciones Web 365*/
function sw365_enqueue_styles() {
wp_enqueue_style( 'custom_style', get_stylesheet_directory_uri() . '/assets/css/custom_style.css');
}
add_action( 'wp_enqueue_scripts', 'sw365_enqueue_styles' );
Paso 5: ¡Enhorabuena! Observa y Disfruta
Pués con todo en su lugar, es hora de ver tu obra de arte en acción. Refresca tu sitio y ahora tanto solo debes añadir el todo el código css que necesites a tu archivo.
Recuerda, el diseño web es un arte, y con herramientas como CSS3, tienes el pincel para crear tu propia obra maestra. Experimenta, diviértete y, sobre todo, ¡haz que tu sitio destaque y sea único!