Cómo añadir fácilmente CSS personalizado a tu sitio de WordPress

¿Quieres añadir CSS personalizado para cambiar el aspecto de tu sitio?

Añadir CSS personalizado te ayuda a cambiar el diseño y la apariencia de tu sitio web, lo que no es posible mediante las opciones por defecto. Utilizar el FTP es demasiado confuso para la mayoría de los principiantes, pero hay otras formas de añadir CSS personalizado.

En este artículo, te mostraremos cómo añadir fácilmente CSS personalizado a tu sitio de WordPress sin editar ningún archivo del tema.

Añadir CSS personalizado a tu sitio de WordPress

¿Por qué añadir CSS personalizado en WordPress?

CSS es la abreviatura de Cascading Style Sheets (hojas de estilo en cascada) y es un lenguaje que te ayuda a dar estilo a tu sitio web de WordPress. El CSS y el HTML van de la mano, ya que el CSS se utiliza para dar estilo a diferentes elementos del HTML como el color, el tamaño, el diseño y la visualización

Añadir CSS personalizado ayuda a personalizar el diseño y la apariencia de tu sitio, lo que no es posible a través de las opciones por defecto. Te da más control, y puedes hacer cambios fácilmente en tu tema de WordPress con unas pocas líneas de código

Por ejemplo, digamos que quieres cambiar el color de fondo de cada entrada individual en lugar de utilizar el mismo color en todo el sitio web. Añadiendo un código CSS personalizado, puedes personalizar el fondo de una entrada o página específica.

Del mismo modo, puedes cambiar el estilo y la apariencia de las categorías de productos en tu tienda de comercio electrónico utilizando CSS adicional

Dicho esto, vamos a echar un vistazo a las diferentes formas en que puedes añadir CSS personalizado a tu sitio web de WordPress. Puedes hacer clic en el siguiente enlace para saltar a cualquier sección que te interese:

Método 1: Añadir CSS personalizado mediante el personalizador de temas

Desde la versión 4.7 de WordPress, los usuarios pueden añadir CSS personalizado directamente desde el área de administración de WordPress. Esto es superfácil, y podrás ver tus cambios con una vista previa en vivo al instante.

En primer lugar, tienes que dirigirte a la sección Apariencia " Personalizar desde tu panel de control de WordPress.

El personalizador de temas de WordPress

Esto lanzará la interfaz del personalizador de temas de WordPress.

Verás la vista previa en vivo de tu sitio con un montón de opciones en el panel izquierdo. Haz clic en la pestaña "CSS adicional" del panel izquierdo.

Haz clic en CSS adicional

La pestaña se deslizará para mostrarte un sencillo cuadro donde puedes añadir tu CSS personalizado. En cuanto añadas una regla CSS válida, podrás verla aplicada en el panel de vista previa en vivo de tu sitio web.

Añadir CSS y publicar

Puedes seguir añadiendo código CSS personalizado hasta que estés satisfecho con el aspecto de tu sitio.

No olvides hacer clic en el botón "Publicar" de la parte superior cuando hayas terminado.

Nota: Cualquier CSS personalizado que añadas utilizando el personalizador de temas sólo está disponible con ese tema en particular. Si quieres utilizarlo con otros temas, tendrás que copiarlo y pegarlo en tu nuevo tema utilizando el mismo método.

Método 2: Añadir CSS personalizado mediante un plugin

El primer método sólo te permite guardar el CSS personalizado para el tema actualmente activo. Si cambias de tema, puede que tengas que copiar y pegar tu CSS personalizado en el nuevo tema.

Si quieres que tu CSS personalizado se aplique independientemente del tema de WordPress que estés utilizando, entonces este método es para ti.

Lo primero que tienes que hacer es instalar y activar el CSS Personalizado Simple plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress

Tras la activación, sólo tienes que ir a Apariencia " CSS personalizado y escribe o pega tu CSS personalizado.

Añadir CSS personalizado mediante un plugin

No olvides pulsar el botón "Actualizar CSS personalizado" para guardar los cambios.

Ahora puedes ver tu sitio web de WordPress para ver el CSS personalizado en acción.

Método 3: Añadir CSS adicional con el Editor del Sitio Completo (FSE)

Otra forma de añadir CSS personalizado en WordPress es utilizando el Editor del Sitio Completo (FSE). Con FSE, puedes editar la disposición y el diseño de todo el sitio web utilizando el editor de bloques de WordPress, igual que cuando editas una entrada o una página del blog

Ten en cuenta que el editor completo del sitio sólo está disponible para determinados temas. Para más detalles, puedes ver nuestro artículo sobre los mejores temas de edición de sitio completo de WordPress.

Utilizar un plugin para añadir CSS es un poco más fácil. Dicho esto, si prefieres no utilizar un plugin, te mostraremos cómo acceder al personalizador aunque ya no esté disponible en tu menú de administración.

Todo lo que tienes que hacer es entrar en tu administrador de WordPress.

A continuación, sólo tienes que copiar y pegar la siguiente URL en tu navegador, y sustituir "ejemplo.com" por el nombre de dominio de tu propio sitio web.

https://example.com/wp-admin/customize.php

Esto te llevará a una versión limitada del personalizador de temas. En el menú de la izquierda, deberías ver la opción de añadir CSS personalizado en la parte inferior.

Simplemente haz clic en la pestaña "CSS adicional"

Selecciona la opción de CSS adicional

Ahora sigue adelante e introduce tu código CSS en el área de CSS adicional

Después de añadir el código, simplemente haz clic en el botón "Publicar"

css adicional en el tema fse

Usar un plugin de CSS personalizado frente a añadir CSS en el tema

Todos los métodos descritos anteriormente se recomiendan para los principiantes. Los usuarios avanzados también pueden añadir CSS personalizado directamente a sus temas.

Sin embargo, no se recomienda añadir fragmentos de CSS personalizado en tu tema principal. Tus cambios de CSS se perderán si accidentalmente actualizas el tema sin guardar tus cambios personalizados.

Lo mejor es utilizar un tema hijo. Sin embargo, muchos principiantes no quieren crear un tema hijo. Aparte de añadir CSS personalizado, a menudo los principiantes no saben realmente cómo van a utilizar ese tema hijo.

El uso de un plugin de CSS personalizado te permite almacenar tu CSS personalizado independientemente de tu tema. De este modo, puedes cambiar fácilmente de tema y tu CSS personalizado seguirá estando ahí.

Otra forma estupenda de añadir CSS personalizado a tu sitio de WordPress es utilizar el plugin CSS Hero. Este maravilloso plugin te permite editar casi todos los estilos CSS de tu sitio de WordPress sin escribir una sola línea de código.

CSS Hero cambia el margen inferior

También puedes añadir CSS personalizado con el SeedProd plugin. SeedProd es un constructor de sitios web de arrastrar y soltar que te permite crear temas de WordPress personalizados y páginas de destino para tu sitio de WordPress. Puedes editar fácilmente la configuración global de CSS, sin necesidad de código

Añadir CSS personalizado con SeedProd

Esperamos que este artículo te haya ayudado a añadir CSS personalizado a tu sitio de WordPress. Quizás también quieras ver nuestra guía sobre cómo elegir el mejor software de diseño web, y los mejores plugins constructores de páginas de arrastrar y soltar de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo añadir fácilmente CSS personalizado a tu sitio de WordPress puedes visitar la categoría Plugins.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Go up