.

CSS Personalizado Wordpress

CSS Personalizado WordPress

Aquí te muestro trucos de CSS personalizado para WordPress que la gente suele buscar, con explicación paso a paso de qué hace cada selector y cada propiedad. Todos sirven para pegarlos en Apariencia → Personalizar → CSS adicional (o en el Editor del sitio → “CSS adicional”, según tu versión). Ajusta las clases si tu tema usa otras (usa el inspector del navegador para confirmar).

1) Header “pegajoso” (sticky) que no tapa la barra de admin

.site-header {
  position: sticky;   /* Fija el header mientras haces scroll */
  top: 0;             /* Lo ancla al borde superior de la ventana */
  z-index: 999;       /* Lo pone por encima de otros elementos */
  backdrop-filter: saturate(180%) blur(8px); /* Efecto sutil de vidrio (opcional) */
}

/* Si estás logueado, WordPress añade .admin-bar al <body> */
.admin-bar .site-header { top: 32px; } /* Compensa la barra de admin en desktop */
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; } /* Compensa en móvil/tablet */
}
  • .site-header: selector típico del header (en tu tema puede ser header.site-header o #masthead).
  • position: sticky + top: hace que el header se quede arriba.
  • z-index: evita que quede oculto.
  • .admin-bar: solo aparece cuando estás logueado; movemos el header para que no lo tape la barra.

2) Subrayado animado en el menú y color del ítem activo

.main-navigation a {
  position: relative;         /* Necesario para posicionar el pseudo-elemento */
  text-decoration: none;      /* Quitamos subrayado nativo */
}
.main-navigation a::after {
  content: "";                /* Crea la “línea” animada */
  position: absolute; 
  left: 0; bottom: -4px; 
  width: 0; height: 2px; 
  background: currentColor;   /* Usa el color del texto del link */
  transition: width .25s ease;
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
  width: 100%;                /* Al pasar el mouse o estar activo, subraya */
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: #0ea5e9;             /* Color del ítem activo */
}
  • .main-navigation: contenedor típico del menú.
  • ::after: dibuja una línea que crece en hover/activo.
  • current-menu-item/current_page_item: clases que añade WordPress a la página actual.

3) Anchos de bloques de Gutenberg (contenidos “wide” y “full”)

/* Ancho base del contenido */
.wp-block {
  max-width: 720px;        /* Cambia el ancho de lectura */
  margin-left: auto;
  margin-right: auto;
}

/* Bloques alineados como “wide” */
.alignwide {
  max-width: 1100px;       /* Más ancho para secciones destacadas */
}

/* Bloques a ancho completo */
.alignfull {
  max-width: none;         /* Ocupar el 100% del viewport */
  width: 100%;
}
  • .wp-block: selector general de bloques.
  • alignwide/alignfull: clases estándar de Gutenberg para anchuras especiales.

4) Ocultar el título solo en ciertas páginas

/* Reemplaza 42 por el ID de tu página (mira el número en la URL del editor clásico o de listado) */
.page-id-42 .entry-title { 
  display: none;           /* Oculta el título en esa página concreta */
}
  • .page-id-XX: WordPress añade una clase por ID en el <body>.
  • .entry-title: título de la entrada/página (puede variar por tema).

5) Botones consistentes (Gutenberg + WooCommerce)

/* Botón de Gutenberg */
.wp-block-button__link,
/* Botones “genéricos” en muchos temas */
.button,
/* Botones en WooCommerce */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
  display: inline-block;
  padding: .75rem 1.25rem; /* Altura y “acolchado” */
  border-radius: .75rem;   /* Esquinas redondeadas modernas */
  font-weight: 600;
  text-decoration: none;
  background: #0ea5e9;     /* Color de fondo */
  color: white;            /* Texto en blanco para contraste */
  border: 0;
  transition: transform .12s ease, filter .12s ease;
}
.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  transform: translateY(-1px); /* Micro-interacción */
  filter: brightness(1.05);    /* Un pelín más luminoso */
}
  • Agrupamos selectores de botones frecuentes para uniformidad.
  • transition + transform: sensación de respuesta sin JS.

6) Imágenes 100% fluidas y sin “saltos”

.wp-block-image img,
.entry-content img {
  max-width: 100%;   /* Nunca excede el ancho del contenedor */
  width: 100%;       /* Llena el contenedor para maquetaciones fluidas */
  height: auto;      /* Mantiene proporción */
  display: block;    /* Elimina espacios bajo la línea base */
}
  • Funciona para la mayoría de imágenes dentro del contenido.

7) Tipografía global rápida (responsive)

:root {
  --font-base: clamp(16px, 1.6vw, 18px); /* Tamaño fluido mínimo/máximo */
}
body {
  font-size: var(--font-base);
  line-height: 1.6;     /* Lectura cómoda */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, .entry-title { font-weight: 700; line-height: 1.2; }
h2, h3 { font-weight: 700; line-height: 1.3; }
  • clamp(min, preferido, max): tamaño fluido con límites.
  • Ajusta selectores de títulos según tu tema.

8) Blog en cuadrícula (sin tocar el loop)

/* En muchas instalaciones: .blog en <body> cuando estás en el listado del blog */
.blog .site-main {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
  gap: 24px; 
}
.blog .site-main article {
  border: 1px solid #e5e7eb;  /* Borde suave */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .15s ease, transform .15s ease;
}
.blog .site-main article:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.blog .site-main article .entry-title { 
  font-size: clamp(18px, 2vw, 22px);
  margin: 12px 16px;
}
.blog .site-main article .entry-summary { 
  margin: 0 16px 16px; 
}
  • .blog en <body>: clase que WP suele añadir en el archivo del blog.
  • Sin editar PHP: usamos CSS Grid para crear la rejilla.

9) Sidebar y widgets más “limpios”

.widget {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 20px;
}
.widget-title, .widget h2 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 700;
}
.widget a:hover { text-decoration: underline; }
  • .widget es común para todos los widgets del sidebar/footer.

10) Footer “pegado” al fondo en páginas con poco contenido (no fijo)

/* Estructura común de muchos temas: .site envuelve header, main, footer */
html, body { height: 100%; }
.site { 
  min-height: 100dvh;        /* Ocupa la altura de la ventana */
  display: flex;
  flex-direction: column;
}
.site main, .site #content { flex: 1; } /* Empuja el footer al fondo */
  • No “flota” sobre el contenido; solo ocupa el fondo cuando la página es corta.

11) Espaciado vertical coherente entre bloques

.entry-content > * + * {
  margin-top: clamp(12px, 2.2vw, 24px); /* Espaciado fluido entre elementos hermanos */
}
  • > * + *: selecciona todo elemento que tenga un hermano anterior (espaciado entre bloques sin clases extra).

12) Ajustes móviles típicos del menú hamburguesa

/* Botón de menú en temas que usan .menu-toggle */
.menu-toggle {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .5rem .75rem;
  font-weight: 600;
}

/* Menú colapsado en móvil */
@media (max-width: 768px) {
  .main-navigation ul { 
    display: none;            /* Oculta la lista por defecto */
  }
  .main-navigation.toggled ul { 
    display: block;           /* El tema añade .toggled cuando abres el menú */
  }
  .main-navigation ul li { 
    border-bottom: 1px solid #eee; 
    padding: .5rem 0;
  }
}
  • Muchos temas añaden .toggled al abrir el menú; así controlas la visibilidad solo con CSS.

13) Enlaces accesibles (color + foco visible)

a {
  color: #0ea5e9;
  text-underline-offset: .15em; /* Subrayado más separadito del texto */
}
a:hover { 
  text-decoration: underline; 
}
a:focus-visible {
  outline: 3px solid #0ea5e9; /* Foco teclado claramente visible */
  outline-offset: 2px;
}
  • Mejora accesibilidad sin romper estilos.

14) Formularios más bonitos (Contact Form 7, WPForms, etc.)

input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="password"], input[type="search"],
textarea, select {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14,165,233,.15); /* Halo accesible */
  outline: none;
}
  • Selecciona los campos comunes y da feedback claro en foco.

15) Tabla responsive sin romper el diseño

.entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.entry-content th, 
.entry-content td {
  padding: .6rem .75rem;
  border: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
  .entry-content table { display: block; overflow-x: auto; }
}
  • En móvil, permite hacer scroll horizontal en tablas amplias.

Consejos rápidos para adaptar a tu tema

  • Inspecciona el DOM: algunos temas usan #masthead, .nav-primary, #site-navigation, .content-area, etc. Cambia los selectores base.
  • Evita !important salvo que el tema tenga reglas muy específicas que no puedas sobreescribir.
  • Prueba en móvil: añade @media (max-width: 768px) para ajustar tipografías, paddings y grid.
  • Variables CSS: define colores y tamaños en :root para mantener consistencia (p. ej., --color-acento).

Sea cual sea tu tema (Astra, GeneratePress, Kadence, Bloxy, Twenty Twenty-Four, etc.) podemos ajustar cada snippet con los selectores exactos y podemos preparar un bloque “copiar y pegar” listo para tu sitio. Esta es una de las ventajas de estar suscritos a algunos de nuestros planes de Consultoria WordPress

.

Scroll al inicio