Introducción

Este tutorial explica, paso a paso y con ejemplos listos para usar, cómo cambiar el color de los enlaces visitados únicamente dentro de las entradas del blog en WordPress. Incluye distintas formas de aplicar el cambio (CSS directo, Personalizador, funciones en functions.php), cómo encontrar el selector correcto para tu tema y resolución de problemas comunes (caché, especificidad, limitaciones de los navegadores).

Concepto básico

Para alterar el color de enlaces visitados solo en las entradas necesitamos:

• Identificar la clase que el tema añade al contenedor del contenido de la entrada (por ejemplo .single-post, .single, .entry-content o .post).
• Aplicar una regla CSS que use la pseudo-clase :visited pero limitada a ese contenedor.
• Colocar ese CSS en el sitio (Personalizador → CSS adicional, archivo style.css del child theme o mediante enqueue desde functions.php).

Limitación importante sobre :visited (privacidad de los navegadores)

Por razones de privacidad, los navegadores restringen qué propiedades pueden cambiarse con :visited. Entre las propiedades permitidas están:

• color
• background-color
• border-color
• outline-color
• column-rule-color
• propiedades de color de SVG (fill, stroke) y valores relacionados con currentColor

No es posible con seguridad cambiar propiedades que afecten el layout o exponer información (por ejemplo width, height, position, content, etc.). Por tanto, lo habitual es usar color o background-color para enlaces visitados.

Cómo localizar el selector correcto

1. Abre una entrada del blog en tu navegador.
2. Haz clic derecho sobre el contenido y selecciona Inspeccionar (o DevTools).
3. Mira el elemento body y el contenedor del contenido: suelen aparecer clases como single-post, postid-123, single, o en el contenedor .entry-content, .post-content, .article-content.
4. Usa esos nombres de clase para construir tu selector CSS: por ejemplo .single-post .entry-content a:visited.

Ejemplo básico (la opción más común)

Esta regla afecta solo a los enlaces dentro del contenido de las entradas individuales cuando el tema usa .single-post y .entry-content:

/ Cambiar color de enlaces visitados SOLO en entradas individuales /
.single-post .entry-content a:visited {
  color: #6f42c1 / color para enlaces visitados /
}

/ Mantener color distinto para enlaces no visitados /
.single-post .entry-content a:link {
  color: #0073aa
}

/ Hover y active (buena práctica incluirlos) /
.single-post .entry-content a:hover,
.single-post .entry-content a:active {
  color: #004a7c
}

Variantes según el tema

Muchos temas usan selectores distintos. Aquí algunos ejemplos alternativos:

/ Si el tema usa .single y .post-content /
.single .post-content a:visited {
  color: #b03a2e
}

/ Si el contenido principal usa .entry-content dentro de .post /
.post .entry-content a:visited {
  color: #2c3e50
}

/ Para plantillas de bloques (Gutenberg) puede ser útil chequear .wp-block-post-content /
.single .wp-block-post-content a:visited {
  color: #8e44ad
}

Dónde añadir el CSS

Opciones seguras y recomendadas:

• Personalizador → CSS adicional: pega la regla CSS directamente. Rápido y seguro.
• Child theme style.css: si usas un child theme, añade la regla en su style.css para que no se pierda al actualizar el tema padre.
• Enqueue desde functions.php: añadir CSS mediante wp_add_inline_style o registrando un archivo CSS. Útil si quieres control programático.
• Plugin de CSS personalizado: como Simple Custom CSS o equivalente.

Ejemplo: añadir el CSS mediante functions.php (child theme)

/ Añadir CSS inline específico para enlaces visitados en entradas /
function mi_tema_agregar_css_enlaces_visitados() {
    css = 
    .single-post .entry-content a:visited {
        color: #6f42c1
    }
    
    wp_register_style(mi-estilo-enlaces-visitados, false)
    wp_enqueue_style(mi-estilo-enlaces-visitados)
    wp_add_inline_style(mi-estilo-enlaces-visitados, css)
}
add_action(wp_enqueue_scripts, mi_tema_agregar_css_enlaces_visitados)

Orden correcto de pseudoclases (LVHA)

Al declarar estilos para enlaces conviene respetar el orden lógico: a:link, a:visited, a:hover, a:active (LO-VE-HA). Si usas reglas separadas, asegúrate de que no se sobreescriban por orden o especificidad.

Cuando la regla no surte efecto: lista de comprobación

1. ¿Estás usando el selector correcto? Compruébalo en DevTools y prueba con un selector más específico en DevTools hasta que funcione.
2. ¿Hay una regla más específica o con !important que lo esté sobrescribiendo? Usa DevTools para ver la cascada.
3. ¿Tienes caché activo (plugin de caché, CDN)? Vacía la caché y prueba en modo incógnito.
4. ¿El CSS se está cargando después del CSS del tema? Si se carga antes, será sobrescrito por el tema. Si es necesario, aumenta la especificidad o usa wp_add_inline_style para inyectarlo después.
5. ¿Estás probando en un navegador que limita propiedades de :visited? Recuerda que solo propiedades de color están permitidas.

Uso de !important (cuando no hay alternativa)

Si tras comprobar todo no consigues que tu regla tenga prioridad, puedes forzarla con !important, aunque es mejor evitarlo si puedes aumentar la especificidad adecuadamente.

.single-post .entry-content a:visited {
  color: #ff4500 !important
}

Pruebas y verificación

1. Abre una entrada y haz clic en un enlace interno o externo para marcarlo como visitado.
2. Refresca la página o abre de nuevo la entrada. Verifica el color del enlace visitado.
3. Si no cambia, abre DevTools y revisa las reglas CSS aplicadas al enlace para identificar cuál está bloqueando el cambio.
4. Prueba en modo incógnito y en otro navegador para confirmar que no sea un problema de caché local.

Consideraciones finales y buenas prácticas

• Prioriza añadir estilos en un child theme o mediante el Personalizador para evitar perder cambios.
• Evita modificar archivos del tema padre directamente.
• Documenta en el child theme o en el plugin dónde aplicaste el cambio por si lo necesitas revertir.
• Respeta los límites de :visited y usa colores que mantengan el contraste y accesibilidad (contraste suficiente entre texto y fondo).

Resumiendo

El camino habitual es: inspeccionar el HTML de una entrada para localizar la clase contenedora, crear una regla CSS del tipo .single-post .entry-content a:visited { color: #xxxxxx }, y añadirla vía Personalizador, child theme o functions.php. Comprueba la especificidad, vacía el caché y ten en cuenta las limitaciones de los navegadores sobre :visited.