Introducción

En este tutorial se explica con todo lujo de detalles cómo quitar —o esconder de forma accesible— el texto “Proudly powered by WordPress” que aparece en el footer de muchos temas. Se muestran varias alternativas: una solución puramente CSS que oculta el texto de la vista manteniéndolo accesible para lectores de pantalla, otra que lo elimina también del árbol de accesibilidad y la opción recomendada cuando se tiene control del tema (modificar con child theme / PHP). Además se incluyen buenas prácticas y pasos para comprobar que el cambio no afecta negativamente a la accesibilidad ni a la usabilidad.

Antes de empezar — precauciones y preparación

• Haz copia de seguridad: Antes de tocar CSS o archivos del tema, crea un backup o usa un child theme.
• Usa un child theme: Si vas a editar archivos PHP (footer.php o functions.php), trabaja siempre en un child theme para que tus cambios no se pierdan con actualizaciones.
• Inspecciona el elemento: Abre las herramientas de desarrollador (F12) y localiza la etiqueta exacta que contiene el texto. Apunta la clase o ID (por ejemplo .site-info, .powered-by, footer.site-footer), porque cada tema usa selectores distintos.
• Testea con usuarios y herramientas: Revisa con lectores de pantalla (NVDA, VoiceOver) y con teclado (tab) tras aplicar cambios.

Qué significa “accesible” en este contexto

Por accesible entendemos que el contenido se gestiona de forma que las personas que usan tecnologías asistivas obtengan la información esperada. Existen dos enfoques válidos:

• Ocultar visualmente el crédito pero mantenerlo disponible para lectores de pantalla — útil si quieres conservar la atribución en el DOM pero no mostrarla en diseño.
• Eliminar el crédito completamente tanto visualmente como del árbol de accesibilidad — si realmente necesitas que desaparezca por completo. En ese caso, es mejor eliminarlo vía PHP o asegurarse de que no deja huecos informativos.

Opción A — Ocultar visualmente pero mantener accesible (recomendado si quieres preservar la atribución)

Este método aplica un patrón visually hidden (también llamado .sr-only o screen-reader-only) directamente al selector del footer. El elemento queda fuera de la vista pero sigue accesible para lectores de pantalla y para navegadores que hacen uso del DOM.

/ Clase genérica para ocultar visualmente pero mantener accesible /
.sr-only {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  white-space: nowrap !important
  border: 0 !important
}

/ Aplicación directa al selector del crédito del footer (ajusta el selector a tu tema) /
footer.site-footer .site-info,
footer.site-footer .site-info a,
.site-info .powered-by {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  white-space: nowrap !important
  border: 0 !important
}

Dónde poner este código: Apariencia → Personalizar → CSS Adicional, o en el stylesheet (style.css) del child theme. Ajusta los selectores a los que hayas identificado en las herramientas del navegador.

Opción B — Eliminar visualmente y del árbol de accesibilidad (display: none)

Si quieres que el crédito no sea accesible ni visible, se puede ocultar con display:none. Ten en cuenta que esto quita el elemento también para lectores de pantalla y tecnologías asistivas.

/ Oculta por completo el elemento (no recomendable si quieres preservar accesibilidad) /
footer.site-footer .site-info { 
  display: none !important
}

/ Alternativa más específica /
.site-info .powered-by { 
  display: none !important
}

Uso típico: añadir en CSS Adicional o stylesheet del child theme. Nota: algunos constructores o plugins pueden reinyectar el HTML en ese caso necesitas la solución por PHP o editar el template.

Opción C — Eliminar correctamente desde el tema (método definitivo y limpio)

La forma más limpia es quitar la salida del HTML desde el tema: editar footer.php en un child theme para eliminar la línea que imprime “Proudly powered by WordPress” o usar remove_action si el tema añade la línea con una función ligada a un hook.

/ Ejemplo genérico: en functions.php del child theme /
add_action( after_setup_theme, child_remove_footer_credit )
function child_remove_footer_credit() {
    // Sustituye parent_theme_footer_credit_function por la función real del tema
    // que genera el crédito. Ejemplo ficticio:
    remove_action( wp_footer, parent_theme_footer_credit_function )
}

Si el tema imprime el texto directamente en footer.php, copia ese archivo al child theme y elimina o modifica el bloque HTML que contiene la cadena. Siempre prueba en un entorno de desarrollo antes de aplicar en producción.

Consideraciones de accesibilidad y usabilidad

• Si ocultas visualmente pero mantienes el crédito en el DOM, los lectores de pantalla seguirán anunciándolo. Esto es apropiado cuando quieres respetar atribuciones pero mejorar el diseño.
• Si lo eliminas completamente, asegúrate de que no eliminas información útil (por ejemplo, un enlace importante). Comprueba navegación con teclado y lectores de pantalla.
• Evita esconder con técnicas que mantienen foco visible y confunden usuarios de teclado: si aplicas clip/overflow, el elemento no debe ser visualmente visible pero sí navegable por tab si tiene sentido.

Pasos concretos, paso a paso

1. Haz backup del sitio y de los archivos del tema.
2. Abre tu sitio y usa las herramientas de desarrollador para localizar el selector exacto del texto del footer.
3. Prueba primero aplicando la regla .sr-only al selector en la consola del navegador — así ves resultados inmediatos sin tocar archivos.
4. Si el resultado es el deseado, copia el CSS final en Apariencia → Personalizar → CSS Adicional o style.css del child theme.
5. Si quieres eliminarlo del HTML, crea un child theme y edita footer.php o usa remove_action en functions.php según corresponda.
6. Testea con teclado (tab, shift tab) y con un lector de pantalla para comprobar comportamiento.
7. Revisa en dispositivos móviles y diferentes navegadores.

Ejemplos de selectores comunes (orientativo)

Los nombres cambian según el tema. Si no encuentras exactamente estos selectores, inspecciona tu footer y adapta.

• footer.site-footer .site-info
• .site-info .powered-by
• .site-credit, .credits, .footer-credit
• footer .powered-by a

Recursos y buenas prácticas

Si necesitas referencia extra sobre accesibilidad web y técnicas de ocultado accesible revisa documentación de accesibilidad (WCAG) y recursos de desarrollo de WordPress. Por ejemplo: WordPress Developer Resources.

Resumen práctico

• Si quieres mantener la atribución para lectores de pantalla, aplica la técnica sr-only (Opción A).
• Si quieres eliminarlo por completo y estás seguro, lo ideal es editar el tema en un child theme o usar remove_action (Opción C).
• Evita soluciones rápidas que rompan la accesibilidad o dejen enlaces enfocados pero invisibles de forma inesperada.

Ejemplo final rápido (resumen de acción)

Para la mayoría de casos donde solo quieres quitar la visualización preservando accesibilidad, pega esto en CSS Adicional y ajusta el selector:

/ Ajusta footer.site-footer .site-info al selector real de tu tema /
footer.site-footer .site-info {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  white-space: nowrap !important
  border: 0 !important
}

Aplica la alternativa que mejor encaje con tus necesidades y confirma siempre mediante pruebas de accesibilidad y usabilidad.