Agregar CSS en WordPress de manera correcta

[ 6 junio 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

Anteriormente habíamos visto cómo Insertar javascript en WordPress de forma correcta, de manera similar ahora veremos diferentes formas de cómo agregar CSS en WordPress de manera correcta para no perder tus modificaciones cuando actualices WordPress.

Generalidades

Es probable que si estas trabajando en un sitio web quieras hacer algunos cambios de diseño, si las opciones de configuración del theme que usas (o plugins ) son limitadas, estos cambios en diseño lo puedes hacer a través de los estilos CSS, sin embargo ¿en donde es conveniente insertar este código CSS adicional?, ya que no queremos perder los cambios en una actualización.

Opción 1 – Usando el Personalizador del Tema

Las versiones recientes de WordPress incluyen en Apariencia > Personalizar, una opción para agregar código CSS, tal como se ve en la siguiente imagen.

Al igual que todas las otras opciones de esta pantalla se pueden ver los cambios realizados inmediatamente en la parte derecha de la pantalla, para tener los cambios de manera permanente se tienen que guardar usando el botón publicar.

El código CSS que coloques aquí sólo será para este theme especifico, al cambiar de theme este código no tendrá efecto.

Opción 2 – Usando un Child Theme para agregar CSS

Si tienes un theme al cual quieres hacer modificaciones que no sólo implican cambios en diseño a través de CSS, podrías evaluar hacer un tema hijo o child theme, y tener la flexibilidad de cambiar incluso archivos .php.

Te sugiero revisar el artículo: Crear un Child Theme en WordPress de manera correcta

Opción 3 – Usando un archivo CSS adicional

Si tu theme usa algún Framework como Genesis, en el cual los themes ya son temas hijos, y quieres agregar código CSS a través de un archivo, lo recomendable en este caso sería agregar un archivo CSS personalizado adicional a tu theme.

Puedes usar el siguiente código en tu archivo functions.php.


add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles');

function custom_enqueue_styles() {
	wp_enqueue_style( 'custom-style', 
					  get_stylesheet_directory_uri() . '/css/custom.css', 
					  array(), 
					  wp_get_theme()->get('Version')
					);
}

En el código anterior

Usamos el hook wp_enqueue_scripts para poner en cola un nuevo script
Dentro de la función a la que hace referencia el hook usamos wp_enqueue_style
Usamos el texto custom-style como identificador
Hacemos referencia al archivo custom.css que esta dentro de la carpeta css
El parámetro array(), indica si hay alguna dependencia, en caso de haberla la dependencia se cargará antes
Finalmente definimos la versión, que será la versión del theme

Es posible que igualmente el theme hijo se actualice, en tal caso tendrías que volver a añadir el código en el archivo functions.php, otra opción sería que uses un plugin de Snippets para agregar código sin perder los cambios al actualizar.

Opción 4 – Usando un plugin

Como opción final tenemos el uso de un plugin para agregar CSS, hay varios que podrías evaluar sin embargo uno de los más livianos es: Simple Custom CSS. Tras instalarlo verás en el menú de Apariencia un enlace adicional de CSS Personalizado, también aparecerá la misma opción en el Personalizador del theme (similar a lo que vimos en la opción 1).

La ventaja de este tipo de plugins es que conserva los cambios aún si se cambia de theme

Conclusión

Como verás existen diferentes formas de agregar estilos CSS a tu sitio web, selecciona la que más te convenga, lo principal es no perder los cambios CSS que agregas cuando realices actualizaciones del theme o de WordPress.

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.