• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar CSS en WordPress de manera correcta

Agregar CSS en WordPress de manera correcta

Agregar CSS en WordPress

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

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Opciones personalizador theme

 
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.

Cambios CSS en pantalla personalizador

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).

Plugin simple custom CSS

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
  • Sincronizar WooCommerce y Google SheetsSincronizar WooCommerce y Google Sheets
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,20 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. nacho

    24 agosto, 2018

    Muy buen articulo, gracias por la info.

  2. Alex

    21 octubre, 2018

    para un javascript el proceso es el mismo?

    • Jhon Marreros Guzmán

      23 octubre, 2018

      Hola, varía un poco, te sugiero revisar: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/

  3. Josué Mtz

    31 marzo, 2021

    Como puedo agregar diferentes archivos css usando media queries en functions.php? Es decir, quiero separar mobile.css de tablet.css y desktop.css

    • Jhon Marreros Guzmán

      4 abril, 2021

      Hola
      El functions.php no te sirve para eso, allí sólo colocas código PHP, las medias queries van directamente en un archivo .css, y no es necesario igual que lo tengas en archivos separados, pueden ir en un mismo archivo, de hecho tenerlo en archivos separados te complicaría.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar Google Fonts en WordPress sin usar plugins

Centrar Logo en Menú Principal

Mostrar el nombre de usuario en el menú de WordPress

Agregar redes sociales en la cabecera de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados