El CSS personalizado le da el control sobre el estilo de su sitio de WordPress, permitiéndole ajustar todo, desde las fuentes y los colores hasta los diseños. Aquí tiene una guía sobre cómo añadir CSS personalizado a WordPress utilizando diferentes métodos que se adapten a sus necesidades.

Método 1: Utilizar la función CSS personalizada incorporada en WordPress

WordPress tiene una opción integrada para añadir CSS personalizado directamente en el panel de control. Es ideal para pequeños retoques y fácil de usar para principiantes.

1. Acceder al personalizador
   • Conéctese y vaya a Apariencia > Personalizar.

2. Seleccione "CSS adicional"
   • En la barra lateral izquierda, pulse CSS adicional. Aparecerá un cuadro de texto en el que podrá introducir su código CSS.

3. Añada su CSS personalizado
   • Escriba su código. Por ejemplo:

4. Previsualizar y publicar
   • Verá una vista previa en directo de los cambios. Cuando esté satisfecho, haga clic en Publique.

Lo mejor para: Ajustes sencillos, no es necesario editar el archivo del tema.

Método 2: Utilizar el archivo Style.css del tema hijo

Es mejor utilizar un tema hijo de style.css para cambios más significativos. De este modo, sus ediciones permanecerán seguras incluso tras las actualizaciones del tema.

1. Habilitar un tema hijo
   • Si aún así necesita empezar a utilizar uno, cree o instale un tema hijo. Plugins como Configurador de temas infantiles hágalo fácil.

2. Acceda al archivo Style.css
   • En Apariencia > Editor de archivos de temasseleccione el tema hijo style.css archivo.

3. Añada su CSS
   • Añada su CSS personalizado en el fondo del archivo. Ejemplo:

.custom-header { color de fondo: #2c3e50; color: #ffff; }
.custom-button { background-color: #e74c3c; color: #ffff; padding: 10px 20px; border-radius: 5px; }

4. Guardar cambios
   • Haga clic en Actualizar archivo para ahorrar.

Lo mejor para: Grandes cambios de estilo que deberían mantenerse tras las actualizaciones.

Método 3: Añadir CSS personalizado con un plugin

Si prefiere evitar la edición de archivos o temas hijo, los plugins pueden gestionar el CSS personalizado. Esto es estupendo para gestionar CSS en varias páginas.

• CSS y JS personalizados sencillos: Ligero y fácil de añadir CSS y JavaScript.
• WPCode: Añade CSS en todo el sitio o por página.
• SiteOrigin CSS: Editor visual para principiantes.

Ejemplo utilizando WPCode:

1. Instalar WPCode
   • Ir a Plugins > Añadir nuevo Plugin, busque WPCode, instalar y activar.

2. Crear un Nuevo fragmento CSS
   • Diríjase a Fragmentos de código > Añadir fragmento. Elija Fragmento CSS.

3. Elija la colocación
   • Para que el CSS funcione en todo el sitio, seleccione Cabecera del sitio.

Lo mejor para: Fácil gestión de CSS sin tocar los archivos del tema.

Método 4: Añadir CSS personalizado a través de Page Builders (Elementor, Divi)

Los constructores de páginas como Elementor y Divi suelen tener opciones CSS integradas, lo que simplifica la gestión de estilos.

En Elementor:

1. Seleccionar elemento y acceso Avanzado Ajustes
   • En Elementor, seleccione un elemento, vaya a Avanzado ajustes, y encuentre CSS personalizado (Elementor Pro).

2. Introduzca el código CSS
   • Utilice la palabra clave selector para apuntar al elemento. Ejemplo:

selector { background-color: #333; color: #fff; }

En Divi:

1. Ir a Opciones del tema
   • Navegue hasta Divi > Opciones de tema > CSS personalizado.

2. Introduzca y guarde el código CSS
   • Añada su CSS personalizado y guarde.

Lo mejor para Los que ya utilizan constructores de páginas con fácil acceso a CSS personalizado.

Método 5: Añadir directamente CSS a través de FTP o Editor de Código

Si está familiarizado con el FTP y desea un control total, puede editar los archivos CSS directamente en el servidor.

Pasos:

1. Conectar vía FTP
   • Utilice un cliente FTP (como FileZilla) para conectarse a su sitio.
2. Navegue hasta la carpeta de temas
   • Vaya a wp-content/themes/your-child-theme/ y abra style.css.

3. Editar y cargar
   • Añada su CSS personalizado, guárdelo y cárguelo.

Lo mejor para: Usuarios avanzados que necesitan un control total.

Preguntas frecuentes

1. ¿Por qué no funciona mi CSS personalizado?

Borre su navegador caché o cualquier plugin de caché del sitio, ya que el caché podría estar bloqueando las actualizaciones.

2. ¿Cómo evito que el CSS se pierda durante las actualizaciones?

Utilice un tema infantil o plugin para almacenar CSS en lugar de modificar los archivos del tema padre.