Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Cómo agregar CSS personalizado a tu sitio de WordPress

by
Length:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

El ecosistema de WordPress es enorme, por lo que puede ser un desafío encontrar el tema perfecto que se ajuste a tu marca en todos los aspectos. Un buen punto de partida es navegar a través de los miles de temas de WordPress de alta calidad en ThemeForest.

Sin embargo, con frecuencia sucede que encuentras un diseño casi perfecto, pero aún quieres modificarlo un poco, o mucho. Aunque la mayoría de los temas de WordPress vienen con opciones integradas que te permiten modificar aspectos básicos, tales como la tipografía y los colores, algunas veces quieres realizar cambios más grandes. Es entonces cuando necesitas agregar CSS personalizado a tu sitio de WordPress.

En este tutorial, veremos cuatro técnicas para añadir CSS personalizado a WordPress:

  1. usando el personalizador
  2. con un complemento
  3. editando el archivo style.css de tu tema hijo
  4. editando el archivo functions.php de tu tema hijo

Las dos primeras técnicas no requieren que generes un tema hijo. Puedes hacer todo desde tu administrador de WordPress, sin tocar los archivos fuente o conectarte a tu servidor a través de FTP. Ambos son métodos excelentes que te permiten agregar reglas CSS personalizadas rápidamente a tu sitio.

Sin embargo, si quieres realizar cambios significativos, crear un tema hijo puede ser una buena idea, incluso si se requiere más trabajo para configurarlo. Además de agregar reglas CSS personalizadas directamente a tu tema de WordPress, también puedes poner en cola archivos CSS externos de forma segura con la ayuda de un tema hijo.

1. Agrega CSS personalizado a WordPress a través del personalizador

Cuando agregas CSS personalizado a tu sitio de WordPress a través del personalizador, tu CSS personalizado estará vinculado a tu tema. Puedes conservar las personalizaciones siempre y cuando estés usando el mismo tema. Tus modificaciones tampoco serán eliminadas cuando actualices el tema. Sin embargo, cuando cambies a un tema nuevo, tus reglas CSS adicionales se perderán. (Si quieres agregar CSS independiente del tema a tu sitio de WordPress, necesitarás usar un complemento.)

Puedes abrir el personalizador haciendo clic en el menú Appearance > Customize (Apariencia > Personalizar) en la barra lateral izquierda de tu área de administración de WordPress.

Open the Customizer

Ya que el personalizador muestra una vista previa en vivo de tu sitio, puedes ver los cambios que estás haciendo inmediatamente. Por ejemplo, así es como se ve con el tema Twenty Twenty:

Customizer Live View

Puedes ver la barra lateral del personalizador del lado izquierdo de la pantalla. Aquí, navega hasta el último elemento del menú llamado Additional CSS (CSS adicional). Aquí es en donde puedes insertar el CSS personalizado que quieras agregar a tu tema. Solamente necesitas escribir tus reglas de estilo en el área de texto debajo de las instrucciones:

Additional CSS box in Customizer

Digamos que quieres cambiar la propiedad font-size del encabezado. De forma predeterminada, las opciones de tema de Twenty Twenty no te permiten hacer eso. La forma más sencilla de averiguar cuál regla CSS debes sobrescribir es mediante el uso de las herramientas para el desarrollador de tu navegador. Haz clic derecho en el encabezado y elige la opción Inspect (Inspeccionar) o Inspect Element (Inspeccionar elemento, dependiendo de tu navegador) para abrir el inspector de tus DevTools justo en el elemento del encabezado:

Inspect headline with Firefox DevTools

La herramienta de inspección te mostrará que el tema Twenty Twenty usa la siguiente regla de estilo para controlar el valor de font-size del encabezado:

Ya que la mayoría de las DevTools también muestran el nombre del archivo y el número de línea de cada regla de estilo (style.css, línea 4716 en la imagen a continuación), también puedes abrir el archivo CSS en tu editor de código y revisar el código exacto.

Find CSS to override in DevTools

Ahora puedes sobrescribir la regla font-size insertando la misma regla CSS con un valor diferente en el campo de entrada Additional CSS (CSS adicional), por ejemplo:

Custom CSS added via Customizer

Ya que el personalizador muestra una vista previa en vivo, puedes ver el efecto de la nueva regla a medida que la escribes.

Toma en cuenta que, si quieres mantener la responsividad de tu tema, es importante que prestes atención a las consultas de medios. Puedes probar el tema para diferentes tamaños de pantalla usando los pequeños iconos de dispositivos (escritorio, tableta, móvil) en la parte inferior de la barra lateral del personalizador.

Una vez que hayas agregado todas las reglas CSS personalizadas que desees, puedes presionar el botón Publish (Publicar) en la parte superior de la barra lateral del personalizador, y tus cambios entrarán en funcionamiento de inmediato.

2. Agrega CSS personalizado a WordPress con un complemento

La mayor ventaja de usar un complemento CSS es que te permite agregar a tu sitio CSS independiente del tema, que puedes mantener al cambiar a un tema nuevo. Esta técnica puede ser útil cuando quieres modificar la apariencia de contenido independiente del tema añadido por un complemento, por ejemplo una página adicional, un tipo de publicación personalizada o un widget.

Además, si deseas agregar una gran cantidad de CSS personalizado a tu sitio, quizá también sientas que la página de configuraciones y la interfaz de usuario de un complemento son más fáciles de usar que el pequeño campo de entrada del personalizador. En cuanto al lado negativo, toma en cuenta que estos complementos pueden ralentizar tu sitio, ya que le agregan una sobrecarga adicional al tiempo de carga de la página en comparación con el personalizador, que está integrado en el núcleo de WordPress.

En el repositorio de complementos de WordPress.org, puedes encontrar un par de complementos gratuitos que te permiten agregar CSS personalizado a tu sitio de WordPress. En este tutorial vamos a usar Simple Custom CSS (CSS personalizado simple), que funciona sin ninguna configuración adicional.

Puedes instalar el complemento Simple Custom CSS desde el menú Plugins > Add New (Complementos > Agregar nuevo) de tu área de administración de WordPress:

Install the Simple Custom CSS plugin

Después de instalar y activar el complemento, haz clic en el menú Appearance > Custom CSS (Apariencia > CSS personalizado), que te llevará a la página de administración del complemento. Ya que Simple Custom CSS solamente tiene un campo de entrada, es muy fácil de usar. Solamente necesitas escribir tu CSS personalizado en el área de texto y presionar el botón Update Custom CSS (Actualizar CSS personalizado).

Add custom CSS with the Simple Custom CSS plugin

3. Agrega CSS personalizado al archivo style.css de tu tema hijo

Si deseas modificar significativamente el CSS de tu tema, es una idea razonable crear un tema hijo y agregarle tu código personalizado. Un tema hijo se encuentra por encima del tema padre. Este usa las mismas plantillas, pero te permite sobrescribir cualquier archivo del tema padre, no solamente CSS, sino también JavaScript, PHP y recursos estáticos, tales como imágenes.

Puedes agregar tus personalizaciones al tema hijo mientras el tema padre permanece intacto. Cuando se lanza una nueva actualización para el tema padre, puedes actualizarlo de forma segura, ya que tu código personalizado se encontrará en el tema hijo. Sin embargo, el tema hijo también heredará las actualizaciones del tema padre, por lo que puedes tener tanto las actualizaciones como el CSS personalizado al mismo tiempo.

Para crear un tema hijo, puedes consultar nuestro tutorial paso a paso de Rachel McCollin. En este artículo voy a usar un tema hijo del tema Twenty Twenty que he creado siguiendo el tutorial anterior.

Twenty Twenty child theme activated

Se requiere que cada tema hijo incluya dos archivos (aunque puedes sobrescribir cualquier otro archivo del tema padre si lo deseas):

  1. style.css para los estilos CSS personalizados
  2. functions.php para las funciones de temas personalizadas

Si quieres agregar CSS personalizado directamente a tu tema hijo, necesitas editar style.css. Usa functions.php solamente si quieres agregar un archivo CSS externo a tu tema hijo.

Puedes editar el archivo style.css ya sea desde tu editor de código, por ejemplo Atom o Visual Studio Code, o desde el menú Appearance > Theme Editor (Apariencia > Editor de temas) de tu área de administración de WordPress (consulta la captura de pantalla mostrada a continuación).

Necesitas agregar tus reglas CSS personalizadas debajo de la sección del comentario de la parte superior, cuyo propósito es notificar al núcleo de WordPress sobre la presencia del tema hijo (así que no elimines el comentario de la parte superior). Por lo demás, puedes editar style.css como cualquier otro archivo CSS. Sea cual sea la regla CSS que coloques aquí, esta sobrescribirá a la regla CSS correspondiente del tema padre.

Edit child themes stylecss file

4. Pon en cola un archivo CSS externo en el archivo functions.php de tu tema hijo

Si quieres agregar un archivo CSS externo a tu tema hijo, necesitarás ponerlo en cola editando el archivo functions.php para que el núcleo de WordPress pueda llamarlo correctamente. Esta técnica puede ser útil cuando quieres usar una biblioteca CSS de terceros en tu sitio o modularizar tu código CSS personalizado.

Digamos que quieres cambiar los estilos de un widget creando un archivo widget.css, en el que puedes almacenar todas las reglas CSS relacionadas con el widget. En este caso, la estructura de archivos de tu tema hijo se verá de la siguiente manera:

Ademas de los dos archivos requeridos (style.css y functions.php), también tendrás una carpeta assets (recursos) que contendrá al archivo widget.css con el código CSS personalizado. Ahora necesitas editar functions.php usando ya sea tu editor de código o el menú Appearance > Theme Editor (Apariencia > Editor de temas) dentro de tu área de administración de WordPress.

Necesitas crear una función personalizada (llamada tutsplus_external_styles() en el siguiente ejemplo), en la que puedes registrar y poner a widget.css en cola usando los métodos wp_register_style() y wp_enqueue_style() de WordPress. Yo registré la hoja de estilos usando el manejador 'widget-css', pero tú puedes usar cualquier otro nombre.

También necesitas adjuntar la función personalizada tutsplus_external_styles() a la acción de WordPress llamada wp_enqueue_scripts, con la ayuda del método add_action().

Y eso es todo; el archivo widget.css personalizado ha sido agregado a tu tema. El archivo functions.php completo de tu tema hijo debería verse de la siguiente manera:

Concluyendo

Cuando necesitas agregar CSS personalizado a tu sitio de WordPress, puedes usar cuatro técnicas diferentes. Si no quieres tocar la base del código, puedes añadir tus personalizaciones ya sea con el personalizador o con un complemento para CSS personalizado. Este último método se recomienda cuando quieres agregar CSS independiente del tema a tu sitio o cuando quieres hacer muchas modificaciones sin editar el código fuente.

También puedes optar por crear un tema hijo para tus personalizaciones. Para agregar reglas de estilo personalizadas a tu tema hijo necesitas editar el archivo style.css, mientras que para poner en cola un archivo CSS externo necesitas editar functions.php. Antes de que comiences a agregar CSS personalizado a tu sitio de WordPress, piensa en lo que necesitas exactamente y cuál será el propósito de tus personalizaciones, y elige la mejor técnica en consecuencia.

Los mejores temas de WordPress en ThemeForest

Si bien puedes hacer mucho con los temas gratuitos, si estás creando sitios de WordPress profesionales, eventualmente querrás explorar los temas de paga. Puedes descubrir miles de los mejores temas de WordPress alguna vez creados en ThemeForest. Estos temas de WordPress de alta calidad mejorarán la experiencia en tu sitio web para ti y para tus visitantes.

Estos son algunos de los temas de WordPress mejor vendidos y más prometedores disponibles en ThemeForest para 2020.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.