• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Agregar CSS en WordPress de manera correcta
Anuncio banner webservi

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

  • Guía visual de Hooks para StoreFront y WooCommerceGuía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisiteExtraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post TypeEliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
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 primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Métodos alternos para desactivar plugins en WordPress

Contenido de relleno en WordPress

Personalizar la página de error 404 en WordPress

Zona de widgets en el contenido de artículos en WordPress

Recientes

  • Guía visual de Hooks para StoreFront y WooCommerce
  • Extraer un sitio desde un multisite
  • Eliminar el slug de la URL de un Custom Post Type
  • Búsqueda en tabla personalizada en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad