Cómo añadir CSS personalizado a un sitio web WordPress (3 métodos)

¿Está pensando en personalizar algunas funciones de su sitio web WordPress? Una de las grandes ventajas de WordPress es que suele haber muchas formas diferentes de hacer lo mismo.

Puede contratar a un diseñador web, utilizar un Creador de páginas de WordPresso simplemente arremangarse y añadir CSS personalizado a su sitio de WordPress.

Si le entusiasma la idea de obtener un control casi ilimitado sobre el estilo de los distintos elementos de su sitio web, ¡está en el lugar adecuado!

Siga leyendo para aprender todo lo que necesita saber sobre la personalización de su sitio web WordPress con CSS personalizado.

3 formas diferentes de añadir CSS personalizado a WordPress

Hay diferentes maneras de añadir CSS personalizado a WordPress y ninguna de ellas es necesariamente la mejor solución para cada situación.

Le explicaremos cada uno de ellos y usted decidirá cuál utilizar.

Antes de seguir adelante, es el momento de hacer una copia de seguridad de su sitio web.

Lo primero es lo primero: haga una copia de seguridad de su sitio web

Independientemente de tu nivel de conocimientos, hacer una copia de seguridad de tu sitio web debería ser una de las primeras cosas que hagas antes de intentar personalizar nada.

Si sigues todos los pasos que te mostraremos, es probable que nada salga mal. Sin embargo, si cometes un error en algún punto, existe la posibilidad de que rompas tu sitio web.

Tener una copia de seguridad le ofrece una forma fácil de restablecer su sitio web si esto sucede.

La forma más fácil de crear una copia de seguridad es mediante el uso de un plugin de copia de seguridad dedicado como UpdraftPlus.

Para empezar, simplemente instale y active el plugin UpdraftPlus desde el repositorio de WordPress.

Una vez activado, vaya a Ajustes en el panel izquierdo y haga clic en UpdraftPlus Copias de seguridad.

A continuación, puede hacer clic en Copia de seguridad para crear una copia de seguridad en su servidor web.

También puede hacer clic en el botón UpdraftPlus interno Ajustes para seleccionar una ubicación de almacenamiento remoto adicional.

Ahora que tu sitio web está a salvo, es hora de personalizarlo con CSS en WordPress.

Como se ha mencionado, hay tres maneras diferentes de hacer esto. Empezaremos añadiendo CSS personalizado a WordPress mediante un plugin.

¿Preparados? Empecemos.

Cómo añadir CSS personalizado a WordPress mediante un plugin

Los plugins son herramientas útiles que le permiten añadir características o funciones adicionales a su sitio web de WordPress con el mínimo esfuerzo.

Existen varios plugins que facilitan la adición de CSS personalizado a un sitio web WordPress. Algunos de los más populares y recomendados son Fragmentos de código, CSS y JS personalizados sencillos, Héroe CSSy muchos más.

Para añadir un nuevo plugin, visite su panel de WordPress, haga clic en Plugins > Añadir nuevoy busque su plugin preferido.

Para este ejemplo, vamos a trabajar con fragmentos de código.

Cómo añadir CSS personalizado a WordPress mediante fragmentos de código

Fragmentos de código facilita la ejecución de fragmentos de código CSS en tu sitio. Con este plugin, no tienes que editar los archivos de tu tema para añadir código, ya que la interfaz GUI imita el archivo functions.php de tu tema.

Una vez que haya instalado y activado el plugin, sitúe el cursor sobre Apariencia en el backend de WordPress y haga clic en CSS personalizado.

En la interfaz Simple Custom CSS, basta con pegar el código CSS y hacer clic en Actualizar CSS personalizado.

Otros plugins CSS a tener en cuenta

Hay muchos otros plugins CSS que te ayudarán a hacer lo mismo. También tienen sus características únicas, así que asegúrate de echarles un vistazo antes de decidirte por uno.

He aquí algunas de las mejores opciones:

CSS y JS personalizados sencillos

CSS y JS personalizados sencillos le permite añadir código CSS y JS sin modificar los archivos de su tema o plugin.

Algunas de sus características clave incluyen un editor de texto con resaltado de sintaxis, añadir CSS o JS al frontend o al lado del administrador, añadir tantos códigos como quieras y mantener tus cambios personalizados cuando cambies el tema.

Héroe CSS

Héroe CSS es un plugin fácil de usar que facilita el proceso de edición de CSS. Tiene una interfaz fácil e intuitiva de apuntar y hacer clic o arrastrar y soltar que hace que la personalización sea más fácil que nunca. Esto funciona mejor para los principiantes con cero conocimientos de codificación.

Con CSS Hero, tienes acceso a una enorme colección de fuentes de Google y control total sobre la combinación de colores.

Una vez activado cualquier plugin, puede encontrarlo en su panel de control a través de Apariencia >> CSS personalizado.

Algunos de estos plugins también pueden tener su sección dedicada en su tablero de instrumentos, pero eso variará según el plugin.

Añadir CSS Personalizado Usando el Personalizador de WordPress

WordPress tiene un personalizador de temas integrado que puedes aprovechar. Independientemente del tema que elijas, siempre puedes modificarlo a tu gusto con esta función.

Navegue hasta el Apariencia de su panel de control y haga clic en Personalízalo.

Desplácese hasta la parte inferior de la página y haga clic en CSS adicional.

Aquí podrá añadir cualquier código CSS.

Mientras añades el código, tendrás la opción de previsualizarlo en vista de escritorio y móvil. Esto te ayudará a hacerte una idea de cómo queda en ambas interfaces antes de publicarlo.

Este método no necesita ningún plugin y mucha gente tiende a optar por esto ya que es más sencillo.

Una ventaja adicional es que tu código CSS se conserva incluso cuando actualizas tu tema o cambias de tema.

Cómo añadir CSS personalizado a WordPress utilizando el editor de temas

La forma más directa de escribir algo de CSS en tu sitio web WordPress es usar el editor de WordPress. También es el método más arriesgado, pero si has hecho una copia de seguridad de tu sitio web no te pasará nada.

Un paso adicional que hay que dar es crear un tema hijo. Aunque hay diferentes maneras de hacerlo, si utilizas el tema Astra, éste viene con su propio generador de temas hijo.

Para empezar, vaya a la página Generador de temas infantiles Astra.

Todo lo que tiene que hacer es introducir un nombre para su nuevo tema hijo y hacer clic en el botón Genere botón . Su nuevo tema hijo se descargará por defecto.

Si está utilizando un tema diferente, puede considerar el uso de un plugin como Configurador de temas infantiles.

Para utilizar este plugin, sitúe el cursor sobre Plugins a continuación, haga clic en Añadir nuevo en el backend de WordPress.

Buscar Configurador de temas infantiles. Una vez que lo encuentres, instálalo y actívalo.

Para crear su nuevo tema hijo, vaya a Herramientas en el panel de control de WordPress y haga clic en Temas hijo.

Se abrirá el asistente de configuración.

Haga clic en Analice para averiguar si es posible crear un tema hijo a partir de su tema actual. En la mayoría de los casos, no debería haber ningún problema.

Una vez autorizado, el siguiente paso es crear el tema hijo.

Basta con hacer clic en Crear nuevo tema hijoy su nuevo tema hijo estará listo para su uso.

Añadir CSS directamente al archivo Style.CSS

Para empezar, sitúe el cursor sobre Apariencia en el menú de la izquierda del panel de control de WordPress.

Haga clic en Editor de temas. Esto le dará acceso a algunos de los archivos subyacentes que hacen que su tema funcione.

Por defecto, se abrirá el style.css que es el archivo que estás buscando.

Desplázate hasta la parte inferior de la hoja de estilos y pega tu código CSS. Actualiza el archivo, ¡y ya está!

Problemas comunes con el CSS personalizado de WordPress y cómo solucionarlos

Como has visto, insertar CSS personalizado en WordPress es realmente fácil. Pero de vez en cuando pueden surgir problemas. No te preocupes, aunque estos problemas pueden ocurrir por muchas razones, normalmente son fáciles de solucionar.

Le mostraremos algunos de los problemas más comunes que puede experimentar con el CSS, cómo diagnosticarlos y cómo solucionarlos.

1. Cuestiones en cascada

Tal y como funciona CSS, es posible crear varias reglas que afecten a los mismos atributos de un elemento. Por ejemplo, un encabezado puede verse afectado por dos reglas contradictorias que pueden asignarle colores diferentes.

La cascada es una forma de resolverlos. La cascada es una propiedad CSS que prioriza las reglas CSS más recientes sobre las más antiguas en caso de conflicto.

Si ha creado algunas reglas CSS que no se están reflejando, es posible que haya una regla conflictiva que esté sustituyendo en cascada a la que usted pretendía.

Si desea crear reglas generales para algunos elementos, mientras que el estilo de algunos de esos elementos un poco diferente, usted puede hacer esto confiando en una propiedad CSS llamada especificidad.

Los ID y las clases crean reglas específicas que se priorizan en la cascada. Esto significa que no importa si hay dos o más reglas en conflicto. Todo lo que tienes que hacer es añadir un calificador como una Clase o ID al elemento que te gustaría estilizar de forma diferente.

2. Los cambios no aparecen

Después de usar CSS personalizado en tu sitio, puede que no veas ninguno de tus cambios inmediatamente. No te asustes, es probable que se trate de un problema de caché.

Empieza por borrar la caché del navegador. Si esto no resuelve el problema, borrar la caché de WordPress.

Si estos pasos no resuelven el problema, lo más probable es que esté relacionado con la calidad de tu CSS. Es probable que estés cometiendo errores o faltas de ortografía en tu código CSS.

Siga leyendo para saber cómo diagnosticar y solucionar este problema.

3. Errores y sintaxis CSS mal escrita

Los errores ortográficos son más comunes de lo que crees y es fácil pasarlos por alto. Esto puede afectar a cómo se muestra el CSS personalizado.

Aunque el código parezca correcto, incluso pequeños errores pueden impedir que su sitio tenga el aspecto que espera. En este caso, tienes que comprobar el código para asegurarte de que no hay errores ortográficos.

La forma más sencilla de hacerlo es utilizar una herramienta llamada validador de CSS, que resaltará los errores de tu CSS. El validador de CSS más popular disponible es el W3C (World Wide Web Consortium) Validador de CSS.

Hay varias formas de utilizar el validador de CSS del W3C dependiendo de la forma en que hayas insertado tu CSS. Puedes pegar fragmentos de CSS, cargar una hoja de estilos completa o simplemente pegar la URL del documento si la tiene.

A continuación, la herramienta comprobará su CSS y señalará errores básicos como faltas de ortografía u omisión de punto y coma, así como errores más graves como el incumplimiento de las normas del W3C.

¿Qué pasa con el CSS personalizado si cambias de tema?

Cuando se utiliza CSS personalizado, existe el riesgo de perderlo cuando se cambiar el tema de WordPress. Para evitarlo, crea siempre un tema hijo cuando escribas CSS personalizado.

Si no estás utilizando un tema hijo, es posible que desees guardar tu CSS personalizado en algún lugar para implementarlo fácilmente con tu nuevo tema cuando cambies de tema.

¿Listo para crear CSS personalizado en WordPress?

Saber cómo editar el CSS de su instalación de WordPress le da más control sobre el diseño de su sitio web. También le permite hacer mucho más sin tener que instalar plugins adicionales que pueden conducir a la hinchazón.

En este artículo hemos tratado tres métodos para conseguirlo.

Esto incluye el uso de un plugin, trabajar en el personalizador y editar directamente en el archivo style.css de WordPress.

Si sigues estos pasos, podrás personalizar tu sitio web como un profesional en un abrir y cerrar de ojos. No olvides hacer una copia de seguridad de tu sitio web y crear primero un tema hijo.