Añadir CSS personalizado

Aunque la mayoría de los cambios se pueden hacer con los ajustes en el editor de WordPress, es posible que prefieras utilizar CSS para personalizar tu sitio si tienes experiencia escribiendo código CSS. Con esta guía aprenderás a editar tu web con CSS.

Esta función está disponible en sitios con nuestros planes Premium, Business y Commerce de WordPress.com, y el plan Pro heredado. Para los sitios con los planes gratuito y Personal, mejora tu plan para acceder a esta función.

CSS es la abreviatura del inglés para «hojas de estilo en cascada». Es un lenguaje de marcado que controla la apariencia de los elementos HTML en una página web. WordPress incluye un editor de CSS para añadir tus propios estilos de CSS para sustituir los estilos por defecto de tu tema.

El potencial de CSS para modificar el diseño de una web es casi infinito. Sin embargo, requiere conocimientos sobre el funcionamiento de CSS y HTML (o al menos ganas de aprender). La guía de CSS de MDN web docs es un buen lugar para empezar a aprender CSS.

Si no te interesa aprender CSS, elige un tema de bloques para tu sitio. Estos temas ofrecen las opciones más flexibles para personalizar cualquier aspecto del diseño de tu web sin necesidad de tener conocimientos de código informático.

Hay dos métodos para acceder al editor de CSS de tu sitio, dependiendo de tu tema. A continuación se explica cada método.

Si tu sitio utiliza un tema compatible con el editor del sitio, puedes personalizar el sitio con CSS utilizando este método. Una forma rápida de determinar si tu sitio utiliza el editor del sitio es comprobarlo en la sección Apariencia del escritorio. Si ves Editor aquí, puedes acceder al editor de CSS siguiendo estos pasos:

1. Dirígete al escritorio de tu sitio.
2. Ve a Apariencia → Editor.
3. Haz clic en Estilos en el menú Diseño de la izquierda.
   • Si tu tema incluye variaciones de estilo, haz clic en el icono del lápiz para abrir las opciones de Estilos:

4. Haz clic en los tres puntos situados a la derecha del encabezado «Estilos» y elige «CSS adicional»:

5. Escribe o pega tu CSS en el cuadro de texto proporcionado.
6. Haz clic en el botón «Guardar» situado en la parte superior derecha de la pantalla para guardar el CSS en tu sitio.

Puedes previsualizar el impacto de tus cambios de CSS en cualquier tipo de bloque cargando el Libro de estilo. Haz clic en el icono del ojo para abrir el libro de estilo.

En los temas del Editor del sitio, puedes aplicar código CSS a bloques concretos de todo el sitio siguiendo los pasos que se indican a continuación.

1. Dirígete al escritorio de tu sitio.
2. Ve a Apariencia → Editor.
3. Haz clic en Estilos en el menú Diseño de la izquierda.
   • Si tu tema incluye variaciones de estilo, haz clic en el icono del lápiz para abrir las opciones de Estilos.
4. En esta ocasión, elige la sección «Bloques» para acceder a los ajustes y personalizar la apariencia de bloques concretos para todo el sitio.
5. Haz clic en el nombre del bloque al que deseas añadir CSS. También puedes localizar el tipo de bloque que desees utilizando el cuadro de búsqueda.
6. Desplázate hasta la parte inferior y haz clic en «Avanzado».
7. En la casilla «CSS adicional», escribe el CSS que se aplicará a todas las instancias de ese tipo de bloque. Al añadir CSS por bloque, no es necesario incluir un selector de CSS, basta con añadir la propiedad y el valor. En el video anterior se incluye un ejemplo.
8. Haz clic en el botón «Guardar» situado en la parte superior derecha de la pantalla para guardar el CSS en tu sitio.

Para los temas que no utilizan el Editor del sitio, incluidos los temas clásicos y muchos temas de terceros, puedes añadir CSS siguiendo estos pasos:

1. Dirígete al escritorio de tu sitio.
2. Navega a Apariencia → Personalizar → CSS adicional.
3. Escribe o pega tu CSS en el cuadro de texto proporcionado. La ventana de vista previa de la derecha reflejará tus cambios.
4. Haz clic en el botón «Guardar cambios» para guardar el CSS en tu sitio.

Las últimas 25 versiones de las ediciones de CSS se guardan y se puede acceder a ellas haciendo clic en la opción «Ver historial completo», que se encuentra en la parte inferior del editor de CSS. Puedes restaurar versiones anteriores de tu CSS aquí.

Si la opción no aparece, no hay historial de CSS que restaurar.

La opción «Ancho de medios» debe utilizarse si has modificado el ancho del área de contenido principal mediante CSS personalizado. El ajuste «Ancho de medios» es el tamaño por defecto para imágenes de tamaño completo al insertarlas en tu sitio.

Ten en cuenta que esta opción no afecta al tamaño de las imágenes que hayas añadido antes de modificar el ajuste (según cómo se hayan insertado), y es posible que tengas que volver a insertarlas una vez modificado.

Por defecto, el CSS personalizado que añadas al editor de CSS se cargará tras el CSS original del tema, lo que significa que tus reglas pueden tener preferencia y sustituir a los estilos del tema.

Puedes desactivar por completo el CSS original del tema haciendo clic en la casilla de verificación «No utilizar el CSS original del tema». Esto te permitirá usar cualquier tema de WordPress.com como lienzo en blanco para diseñar con CSS. Esta es una opción avanzada que solo debes utilizar si deseas comenzar de cero y diseñar el CSS de tu tema desde el principio.

Si deseas utilizar como base las reglas de CSS existentes (el enfoque más común y el recomendado), puedes dejar esta opción desactivada.

WordPress.com es compatible con los preprocesadores CSS de LESS y Sass (sintaxis SCSS). Se trata de una opción avanzada para los usuarios que quieran utilizar las extensiones de CSS, como las variables y los «mixins». Para obtener más información, visita las webs de LESS y Sass.

El crédito del pie de página no debe modificarse con CSS. Puedes eliminar o modificar el crédito del pie de página con los ajustes en función del tipo de tema que utilice el sitio:

• Si tu sitio utiliza un tema de bloques, puedes editar o eliminar el crédito del pie de página utilizando el Editor del sitio, sin necesidad de CSS.
• Si tu sitio usa un tema clásico, puedes cambiar el crédito del pie de página por un logotipo minimalista de WordPress. Puedes ocultar el crédito si el sitio tiene una suscripción al plan Business o Commerce.

Sí, pero solo en sitios con plugins activados.

Puedes elegir las fuentes de tu web utilizando las opciones de tu tema. Al trabajar con CSS, solo podrás usar esas dos fuentes web en el front end. Sin embargo, puedes añadir fuentes adicionales mediante plugins de terceros.

Sí. Puedes subir una imagen en la biblioteca de medios y consultarla mediante su URL directa desde tu hoja de estilo de CSS. A continuación, te mostramos un ejemplo de cómo utilizar una imagen de fondo en la hoja de estilo:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Recomendamos realizar las modificaciones de CSS mediante el editor de CSS, como se explica en esta guía. Cuando añades CSS utilizando este método, se anulan las reglas de CSS de la hoja de estilos de tu tema. Se trata de un método seguro que facilita la depuración de conflictos de CSS y la restauración de versiones anteriores de CSS que hayas añadido.

Si eres experto en editar archivos de temas directamente, puedes hacerlo a través de SFTP o creando un tema hijo. Recomendamos probar los cambios en un sitio de pruebas antes de aplicarlos al sitio activo.

Todas las mejoras de WordPress.com se renuevan cada año. Si cancelas tu suscripción, tu CSS personalizado seguirá guardándose pero dejará de estar visible en tu sitio para los demás usuarios. Si quieres volver a aplicarlos a tu sitio, puedes adquirir de nuevo el plan y los estilos se volverán a aplicar automáticamente si no has cambiado los temas. Si has cambiado los temas, encontrarás tus CSS anteriores en las revisiones de CSS.

Esta página se ha traducido del inglés. Lee la página original.