Introducción
Este tutorial explica, paso a paso y con todo lujo de detalles, cómo colocar el autor y la fecha debajo del título en un post de WordPress usando únicamente CSS, sin tocar PHP. Se ofrecen varias técnicas (flexbox, grid, posicionamiento absoluto y pseudo-elementos), ejemplos concretos y consideraciones de accesibilidad, SEO y compatibilidad para que puedas elegir la que mejor encaje con tu tema.
Antes de empezar: identificar la estructura HTML de tu tema
Cada tema de WordPress estructura el título y la metadata de forma distinta. Antes de aplicar CSS, inspecciona el HTML (Herramientas de desarrollador del navegador) y localiza selectores como:
- .entry-header (contenedor típico del título y meta)
- .entry-title o h1.entry-title
- .entry-meta, .post-meta, .byline, .posted-on (elementos con autor y/o fecha)
- time (elemento semántico con atributo datetime)
Conocer la jerarquía (si .entry-meta está antes o después del título en el DOM, o si está en otro contenedor) condiciona la técnica CSS a usar.
Principios a tener en cuenta
- Visual ≠ DOM: El CSS cambia la presentación visual no es necesario modificar el orden en el DOM para mostrar meta debajo del título.
- Accesibilidad y SEO: Es preferible no eliminar la metadata del DOM. Reordenar visualmente con CSS mantiene la semántica y el orden lógico para lectores de pantalla y motores de búsqueda.
- Compatibilidad: Order de flexbox y grid tienen buen soporte moderno para navegadores muy antiguos puede necesitarse un fallback con posicionamiento absoluto o display:block.
Escenario 1 — .entry-meta ya existe y está junto al título (solución recomendada: flexbox)
Si el título y la metadata son elementos hermanos dentro de un mismo contenedor (por ejemplo .entry-header), la forma más limpia es usar flexbox y controlar el orden visual con la propiedad order.
Ejemplo CSS (flexbox):
/ Contenedor que envuelve título y meta /
.entry-header {
display: flex
flex-direction: column / apila verticalmente /
align-items: flex-start
gap: 0.35rem / espacio entre título y meta /
}
/ Asegura que el título esté primero visualmente /
.entry-title {
order: 1
margin: 0
}
/ Y la meta después /
.entry-meta {
order: 2
font-size: 0.92rem
color: #666
margin-top: 0.25rem
}
Si en el DOM la meta aparece antes del título, no importa: el orden visual se controla con order. Esta técnica conserva el orden lógico del HTML y la semántica.
Escenario 2 — El tema muestra título y meta en la misma línea (inline) o la meta está dentro del título
Algunos temas colocan la meta inline o dentro de un elemento que hace que todo quede en la misma línea. En ese caso convertir los elementos en bloques y añadir margen es suficiente.
/ Forzar que el título y la meta sean bloques independientes /
.entry-title,
.entry-meta {
display: block
}
/ Separar visualmente /
.entry-meta {
margin-top: 0.35rem
color: #777
font-size: 0.95rem
}
Escenario 3 — .entry-meta está fuera del contenedor del título (no son hermanos)
Si la metadata está en otra parte del DOM (por ejemplo, arriba del título o en un contenedor diferente), puedes usar CSS Grid o posicionamiento absoluto para situarla visualmente debajo del título. Preferible: modificar el contenedor padre para usar grid y asignar áreas. Si no puedes, posicionamiento absoluto es fallback.
Ejemplo con CSS Grid (cuando puedes aplicar al contenedor común):
/ Contenedor común que engloba título y meta /
.entry-header {
display: grid
grid-template-columns: 1fr
grid-template-areas:
title
meta
gap: 0.35rem
}
.entry-title { grid-area: title }
.entry-meta { grid-area: meta }
Ejemplo con posicionamiento absoluto (usa relative en el contenedor y absolute en la meta):
/ Contenedor que rodea el título (debe abarcar la altura del título) /
.entry-header {
position: relative
padding-bottom: 1.2rem / reserva espacio para la meta absoluta /
}
/ Mover la meta abajo del título con absolute /
.entry-meta {
position: absolute
left: 0
bottom: 0 / se apoya en la base del contenedor /
transform: translateY(100%) / sitúa justo debajo /
font-size: 0.92rem
color: #666
}
Este método puede complicar el flujo del documento (los lectores de pantalla y el salto de foco siguen el DOM), por lo que se usa cuando no hay alternativa.
Crear o reutilizar contenido con pseudo-elementos (limitaciones)
Con CSS solo puedes generar texto con content: attr(…) si la información está disponible en atributos del elemento (ej. time[datetime] o atributos data-) o si ya existe un elemento con la meta que puedas ocultar y replicar. No puedes leer el texto interior de un elemento hijo y reubicaro sin PHP/JS.
Ejemplo: si tu título tiene un atributo data-date (raro en temas por defecto), puedes mostrarlo así:
/ Necesita que el elemento tenga algo como:/ .entry-title::after { content: Publicado el attr(data-date) display: block margin-top: 0.35rem color: #666 font-size: 0.95rem }
Si el tema ya incluye un lttime datetime=2025-09-24gt, puedes mostrar su atributo datetime con content: attr(datetime) en un pseudo-elemento de ese mismo lttimegt, pero no puedes extraer el texto del lttimegt desde fuera sin modificar HTML o usar JS.
Ejemplo práctico completo — mover .entry-meta debajo del título con flexbox y estilos finos
/ Ejemplo completo recomendable /
.entry-header {
display: flex
flex-direction: column
gap: 0.35rem
align-items: flex-start
}
/ Título: tamaño y espaciado /
.entry-title {
order: 1
font-size: 1.8rem
line-height: 1.15
margin: 0
}
/ Metadata: ligera, contraste y legibilidad /
.entry-meta {
order: 2
font-size: 0.95rem
color: #6b6b6b
display: block
}
/ Ajustes para pantallas pequeñas /
@media (max-width: 480px) {
.entry-title { font-size: 1.35rem }
.entry-meta { font-size: 0.9rem }
}
Consejos prácticos y checklist antes de publicar
- Inspecciona el HTML con las herramientas de desarrollador para conocer selectores exactos.
- Prueba primero en la consola CSS del navegador para ajustar selectores y estilos sin tocar archivos del tema.
- Si tu tema usa caches o minificadores de CSS, limpia cache tras aplicar cambios.
- Mantén la metadata en el DOM. Evita removerla o duplicarla sin control.
- Verifica la lectura por lectores de pantalla tras cambiar el orden visual.
- Comprueba cómo afecta a microdatos (schema.org) y si necesitas mantener JSON-LD separado.
Compatibilidad y fallbacks
- Flexbox y order: compatible con la mayoría de navegadores modernos (IE10 con prefijos parciales). Si necesitas soporte para navegadores muy antiguos, prepara un fallback con display:block y márgenes.
- Grid: sólo para navegadores modernos utilízalo solo si quieres funciones avanzadas y sabes que tu audiencia usa navegadores actuales.
- Absolute positioning: funciona ampliamente, pero puede romper el flujo y causar superposiciones si no reservas espacio.
Resumen rápido
La manera más segura y limpia de poner autor y fecha debajo del título sin tocar PHP es usar flexbox (o grid) para reordenar visualmente los elementos. Si la metadata no está en el mismo contenedor, puedes usar grid o posicionamiento absoluto como últimos recursos. Evita generar contenido complejo solo con pseudo-elementos salvo que la información ya exista en atributos. Siempre comprueba accesibilidad, SEO y compatibilidad en varios navegadores.
Leave a Reply