Introducción y objetivo

En este tutorial detallado aprenderás a convertir el bloque de “Leer más” (More / core/more) de WordPress en un botón destacado visualmente, accesible y adaptable a distintos temas (clásicos y basados en bloques). Verás varias opciones: aplicar CSS directo, añadir una clase mediante PHP, registrar una variación de bloque en Gutenberg y cómo integrar estilos en theme.json para themes full-site-editing. También cubriré buenas prácticas de accesibilidad, responsive y rendimiento.

Antes de empezar: identificar el HTML que genera tu tema

Dependiendo del tema y de si usas el editor clásico o el bloque More en Gutenberg, el HTML puede variar. Los selectores más comunes son:

• a.more-link o .more-link (salida típica de get_the_content() / the_content() en muchos themes).
• .wp-block-more a o .wp-block-more__inside-link (salida del bloque More en algunas implementaciones).
• .wp-block-button .wp-block-button__link (si usas un botón manual en lugar del bloque More).

Abre la página en tu navegador y usa las herramientas de desarrollador (Inspector) para confirmar la estructura y clases esto te permitirá seleccionar el selector correcto en CSS.

1. Estilizar mediante CSS (método más rápido)

Este método sirve para la mayoría de los temas y no requiere tocar PHP ni archivos del tema si usas Apariencia → Personalizar → CSS adicional.

CSS recomendado (versión completa, accesible y responsive)

/ Estilo base para distintos selectores comunes del Leer más /
a.more-link,
.wp-block-more a,
.wp-block-button .wp-block-button__link,
.entry-content .more-link {
  display: inline-block
  padding: .65rem 1.1rem
  background-color: #0073aa / color principal /
  color: #ffffff
  text-decoration: none
  border-radius: 6px
  border: 1px solid rgba(0,0,0,0.08)
  box-shadow: 0 2px 0 rgba(0,0,0,0.06)
  transition: background-color .18s ease, transform .08s ease, box-shadow .12s ease
  font-weight: 600
  line-height: 1
}

/ Hover / Focus: mantener contraste y dar feedback /
a.more-link:hover,
.wp-block-more a:hover,
.wp-block-button .wp-block-button__link:hover,
a.more-link:focus,
.wp-block-more a:focus,
.wp-block-button .wp-block-button__link:focus {
  background-color: #006799
  transform: translateY(-1px)
  box-shadow: 0 6px 18px rgba(3, 40, 71, 0.12)
  outline: none
}

/ Focus visible accesible (mejor para teclado) /
a.more-link:focus-visible,
.wp-block-more a:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,115,170,0.18), 0 6px 18px rgba(3, 40, 71, 0.12)
}

/ Tamaños para móviles: botón ocupa ancho completo si se prefiere /
@media (max-width: 550px) {
  a.more-link,
  .wp-block-more a,
  .wp-block-button .wp-block-button__link {
    display: block
    width: 100%
    text-align: center
    padding: .85rem 1rem
  }
}

/ Soporte para themes que usan !important en sus reglas: aumentar especificidad /
.entry-content a.more-link,
.post a.more-link,
.page a.more-link {
  / solo se usa para sobreescribir reglas problemáticas /
}

/ Preferencias de movimiento reducido /
@media (prefers-reduced-motion: reduce) {
  a.more-link,
  .wp-block-more a,
  .wp-block-button .wp-block-button__link {
    transition: none
    transform: none
  }
}

Aplica este CSS en uno de estos lugares (orden recomendado):

1. Personalizar → CSS adicional (rápido, bueno para pruebas).
2. Archivo style.css de un child theme (recomendado para cambios permanentes en temas no block-based).
3. Plugin de estilos CSS personalizados o plugin de snippets si no quieres tocar el tema.

2. Añadir una clase al enlace Leer más via PHP (para control total)

Si tu tema genera el enlace sin la clase que quieres o con markup difícil de seleccionar, puedes filtrar el enlace para añadir clases, aria-labels o attributes adicionales. Usa el filtro get_the_content_more_link o the_content_more_link.

Ejemplo: añadir la clase btn-leer-mas y un aria-label

add_filter(the_content_more_link, mi_more_button_class, 10, 2)
function mi_more_button_class(link, text) {
  // Añadimos clase y aria-label conservando URL y texto original
  link = str_replace(
Después añade CSS específico para .btn-leer-mas (puedes reutilizar el CSS del ejemplo anterior cambiando selectores).
3. Registrar una variación (block style) para el bloque core/more en Gutenberg
Registrar una variación permite que el editor muestre la opción de estilo y aplique una clase en el markup del bloque, ideal para usuarios que quieren activar el estilo desde el editor sin código manual.
Registrar la variación en functions.php
add_action(init, function() {
  if (function_exists(register_block_style)) {
    register_block_style(core/more, array(
      name => boton-destacado,
      label => Botón destacado,
    ))
  }
})
Luego añade CSS que apunte a la clase que Gutenberg añadirá (casi siempre será .is-style-boton-destacado):
/ Selector que añade Gutenberg cuando aplicas la variación /
.wp-block-more.is-style-boton-destacado a {
  / Reusar reglas del bloque botón /
  display: inline-block
  padding: .65rem 1.1rem
  background: linear-gradient(180deg,#0086c6,#006799)
  color: #fff
  border-radius: 8px
  text-decoration: none
  box-shadow: 0 4px 14px rgba(2,25,54,0.12)
}
4. Para themes full-site-editing (block themes): usar theme.json
Si tu tema usa theme.json puedes inyectar estilos para bloques desde allí, manteniendo la filosofía FSE. Abre el theme.json de tu child theme o del theme y añade estilos para core/more o para un bloque de tipo button según convenga.
Ejemplo mínimo de theme.json
{
  version: 2,
  styles: {
    blocks: {
      core/more: {
        color: {
          text: #ffffff,
          background: #0073aa
        },
        spacing: {
          padding: 12px 20px
        },
        border: {
          radius: 6px
        },
        typography: {
          fontWeight: 600
        }
      }
    }
  }
}
Nota: theme.json tiene ciertas limitaciones y la estructura exacta puede depender de la versión de WordPress. Para personalizaciones avanzadas (hover, focus) conviene complementar con CSS adicional.
5. Consideraciones de accesibilidad y SEO

Contraste: asegura contraste suficiente entre fondo y texto. Usa herramientas de chequeo WCAG para contraste mínimo 4.5:1 en texto normal.
Keyboard: el enlace debe ser accesible mediante teclado evita cambiarlo por un elemento span sin role. Si quieres aspecto de botón no cambies el elemento semántico a.
Focus visible: incluye reglas :focus-visible, no elimines el outline por completo.
Aria-label: si el texto del enlace es genérico, añade aria-label con contexto (por ejemplo Leer más sobre Título del artículo).
Rel: si enlazas a contenidos externos o descargas, añade rel=noopener noreferrer cuando aplique.

6. Variantes visuales y microinteracciones
Puedes enriquecer el botón con iconos (SVG inline), con animaciones sutiles (transform, box-shadow) o con efectos de gradiente. Mantén las animaciones suaves y respeta prefers-reduced-motion. Ejemplo de microinteracción:
/ Microinteracción: icono pseudo (si tu tema permite pseudo-elements en selectores) /
a.more-link::after {
  content: →
  display: inline-block
  margin-left: .5rem
  transform: translateX(0)
  transition: transform .18s ease
}
a.more-link:hover::after,
a.more-link:focus::after {
  transform: translateX(4px)
}
7. Cómo depurar problemas comunes

El CSS no se aplica: confirma el selector con el inspector y verifica la prioridad (usa selectores más específicos o en última instancia un child theme). Evita usar !important salvo que sea imprescindible.
El bloque More no añade clase esperada: usa el filtro PHP o registra una variación para que Gutenberg añada la clase.
Estilo diferente en páginas/archivos: algunos themes usan template parts distintos. Aplica selectores que incluyan .entry-content o .post para apuntar correctamente.
Conflicto con plugins de cache/optimización: limpia la cache y vuelve a minificar si usas concatenación CSS prueba en modo desarrollo.

8. Checklist final antes de publicar

Probar en móviles y escritorio.
Revisar contraste y estado focus con teclado.
Confirmar que el enlace mantiene la semántica (es un a con href).
Evitar dependencias de fuentes o imágenes externas innecesarias.
Comprobar que no hay ruptura de diseño en otros elementos del theme.

Ejemplos prácticos resumidos
1) CSS rápido para añadir en Personalizar → CSS adicional:
a.more-link {
  display:inline-block
  padding:.6rem 1rem
  background:#ff5b4a
  color:#fff
  border-radius:6px
  text-decoration:none
}
2) PHP para añadir clase al enlace:
add_filter(the_content_more_link, function(link) {
  return str_replace(
3) Registrar estilo en Gutenberg:
add_action(init, function() {
  register_block_style(core/more, [
    name => destacado,
    label => Destacado (botón)
  ])
})
Conclusión práctica
Transformar el bloque de “Leer más” en un botón destacado es una mejora estética y de usabilidad que puede realizarse de formas muy accesibles: con CSS directo para resultados rápidos, con PHP para control del markup o con integración en Gutenberg/theme.json para soluciones más profesionales y reutilizables. Sigue las buenas prácticas de accesibilidad, prueba en distintos dispositivos y elige la estrategia que mejor encaje con el flujo de trabajo de tu proyecto.