Custom 404 & MaintenanceDocs

Documentación de Custom 404 & Maintenance

Pasos de instalación y una referencia completa de cada ajuste, con ejemplos concretos — el mismo nivel de detalle que usa nuestro soporte para ayudar a los clientes.

Ver como Markdown

Antes y después

Misma tienda, misma URL: arrastra el control para comparar la página estándar de Magento con la generada por el módulo.

Página 404

Página 404 personalizada con el logo de la tienda, número 404 grande, título “Page not found”, cuadro de búsqueda y botón para volver al inicio Página 404 estándar del tema Hyvä con cabecera, pie y el texto genérico “Whoops, our bad...”
Magento estándar Con el módulo

Izquierda: la página 404 estándar del tema (aquí Hyvä), con cabecera, pie y texto genérico. Derecha: la misma URL con el módulo — pantalla completa, logo de la tienda, 404 grande, búsqueda en el catálogo y botón para volver al inicio.

Página de mantenimiento

Página de mantenimiento con la marca de la tienda: logo, título “We’ll be back soon” y nota “We will be back online at 14:00 (CET)” Página de mantenimiento estándar de Magento: “Service Temporarily Unavailable” en negro sobre fondo blanco
Magento estándar Con el módulo

Izquierda: la página de mantenimiento estándar de Magento, “Service Temporarily Unavailable” en negro sobre blanco. Derecha: la página con la marca de la tienda, mensaje y la nota destacada “We will be back online at 14:00 (CET)”, servida con HTTP 503.

Instalación

Requisitos

Magento 2.4.x. PHP 8.1–8.5. Compatible con el tema predeterminado Luma y con el tema Hyvä. Requiere el módulo gratuito codingrow/module-core, que se instala automáticamente. No hay ninguna clave que introducir: el módulo se activa automáticamente en tu dominio.

Pasos de instalación

  1. Solicita el módulo en la página del producto solo con tu email: recibirás por email las credenciales de Composer (también están en tu área de cliente). Guárdalas desde la raíz de tu proyecto Magento:
    composer config http-basic.repo.codingrow.com <username> <password>
  2. composer config repositories.codingrow composer https://repo.codingrow.com
  3. composer require codingrow/module-custom-404-maintenance
  4. bin/magento module:enable Codingrow_Custom404Maintenance
  5. bin/magento setup:upgrade — en modo production también setup:di:compile, setup:static-content:deploy y cache:flush.
  6. No hay ninguna clave que pegar: el módulo se activa automáticamente en tu dominio, pasa directamente a la configuración que se describe abajo.

setup:upgrade también instala la skin de la página de mantenimiento en pub/errors. Si no lo consigue (permisos de archivos), ejecuta una vez bin/magento codingrow:c404m:deploy con el usuario propietario de los archivos de Magento.

Configuración

Abre Admin → Stores → Configuration → Codingrow Extensions → Custom 404 & Maintenance. Cada campo se puede definir a nivel Default, Website y Store View: usa el selector Scope arriba a la izquierda para tener textos o diseño distintos por idioma.

La cabecera del módulo en la parte superior de la página de configuración, con la versión instalada.
La cabecera del módulo en la parte superior de la página de configuración, con la versión instalada.
Grupo License: estado Active y campo License Key vacío — el módulo es gratuito, no hace falta ninguna clave.
Grupo License: estado Active y campo License Key vacío — el módulo es gratuito, no hace falta ninguna clave.
AjusteQué haceNotas
404 Page
Enable custom 404 pageSustituye la página 404 de Magento.Sí/No.
Show large "404" numberGran número de color encima del título.Usa el color de acento.
Title / MessageLos textos de la página.Vacío = texto predeterminado traducido. En el mensaje se admite HTML básico (b, strong, i, em, a, br, p, ul, ol, li, span).
Show search boxBuscador del catálogo de la tienda.
"Back to home" button labelTexto del botón.Vacío = texto predeterminado.
Maintenance Page
Installation statusIndica si la skin está instalada en pub/errors.Debe indicar Installed (ver Página de mantenimiento).
Enable custom maintenance pageMuestra tu página mientras el mantenimiento está activo.Sí/No por store view.
Title / MessageLos textos de la página.Igual que para la página 404.
Highlighted noteNota breve en el color de acento.P. ej. "Volvemos a las 14:00".
Auto-reload page every (seconds)Recarga automáticamente la página del visitante.0 = nunca; 60 = cada minuto.
Design
Logo / Logo max widthLogo de la tienda, logo personalizado o ninguno.Logo de la tienda = el configurado en Content → Design → Configuration.
BackgroundColor sólido, degradado de dos colores o imagen a pantalla completa.Oscurecimiento de la imagen de 0 a 90%.
Content boxNinguno, claro u oscuro.
Font / Title size / AlignmentTipografía de ambas páginas.
Colores de texto, acento y texto de los botonesColores, cada uno con selector de color.Acento = número 404, enlaces, botones, nota.

Desinstalación

Restaura la página de mantenimiento estándar de Magento antes de eliminar el módulo:

bin/magento codingrow:c404m:deploy --uninstall
composer remove codingrow/module-custom-404-maintenance
bin/magento setup:upgrade

Si eliminas el módulo sin --uninstall, la página de mantenimiento sigue mostrando la última versión generada hasta que se elimine la skin. Para volver simplemente a las páginas estándar sin desinstalar, pon Enable custom 404 page y/o Enable custom maintenance page en No.

Guía de uso

Página 404

Cuando una dirección no existe, en lugar de la página CMS “404 Not Found” la tienda muestra una página a pantalla completa con el logo, un gran “404” opcional, título, mensaje, buscador opcional y el botón “Volver al inicio”. La respuesta mantiene el estado HTTP 404, lleva noindex y nunca se guarda en caché, por lo que los buscadores no la indexan.

Los archivos estáticos no se ven afectados. Los 404 de imágenes, CSS o JS inexistentes los gestiona el servidor web, no Magento, así que mantienen la respuesta del propio servidor.
El grupo 404 Page (Not Found): activación, número “404” grande, título, mensaje, cuadro de búsqueda y texto del botón “Back to home”. Los campos vacíos usan los textos predeterminados traducidos.
El grupo 404 Page (Not Found): activación, número “404” grande, título, mensaje, cuadro de búsqueda y texto del botón “Back to home”. Los campos vacíos usan los textos predeterminados traducidos.
La página 404 resultante en escritorio: logo, 404, título, mensaje, cuadro de búsqueda y botón para volver al inicio.
La página 404 resultante en escritorio: logo, 404, título, mensaje, cuadro de búsqueda y botón para volver al inicio.
La misma página 404 en un smartphone.
La misma página 404 en un smartphone.

Página de mantenimiento

Mientras el mantenimiento está activo (bin/magento maintenance:enable) Magento no se ejecuta y responde pub/errors/503.php. Por eso el módulo:

  1. instala una skin en pub/errors/codingrow_c404m/ y la activa en pub/errors/local.xml (un local.xml ya existente se guarda en local.xml.codingrow_c404m.bak);
  2. pregenera el HTML de la página para cada store view;
  3. durante el mantenimiento elige la store view de la petición (MAGE_RUN_CODE del servidor web → dominio/ruta → cookie de la tienda → idioma del navegador → tienda predeterminada) y sirve su página con HTTP 503 y Retry-After. Si la página no está activada para esa store view, se muestra la estándar de Magento.

El HTML se regenera solo al guardar la sección, al cambiar el logo en Content → Design → Configuration y en cada maintenance:enable. Las IP excluidas con --ip siguen viendo la tienda.

¿El estado de instalación indica “Not installed yet”? El servidor web no puede escribir en pub/errors (algo normal y seguro en servidores protegidos). Ejecuta una vez bin/magento codingrow:c404m:deploy con el usuario propietario de los archivos de Magento y vuelve a cargar la página de configuración: debe indicar Installed.
El grupo Maintenance Page: Installation status Installed con la fecha de la última generación de la página, activación, título, mensaje, nota destacada y recarga automática.
El grupo Maintenance Page: Installation status Installed con la fecha de la última generación de la página, activación, título, mensaje, nota destacada y recarga automática.
La página de mantenimiento durante bin/magento maintenance:enable, con la nota destacada “We will be back online at 14:00 (CET)”.
La página de mantenimiento durante bin/magento maintenance:enable, con la nota destacada “We will be back online at 14:00 (CET)”.
La misma página de mantenimiento en un smartphone.
La misma página de mantenimiento en un smartphone.

Diseño

El diseño se aplica a ambas páginas: logo (logo de la tienda, logo personalizado — jpg, png, gif, svg, webp — o ninguno) con anchura máxima; fondo de color sólido, degradado de dos colores o imagen a pantalla completa con oscurecimiento del 0 al 90%; recuadro del contenido ninguno, claro u oscuro; fuente, tamaño del título y alineación; color del texto, color de acento (número 404, enlaces, botones, nota) y color del texto de los botones, cada uno con selector de color. La página es HTML/CSS autónomo y no usa el tema, por eso se ve idéntica en Hyvä y Luma.

El grupo Design (both pages) con fondo degradado: logo y ancho máximo del logo, colores de fondo y del degradado, recuadro, fuente, tamaño del título, alineación, colores de texto, acento y texto de los botones.
El grupo Design (both pages) con fondo degradado: logo y ancho máximo del logo, colores de fondo y del degradado, recuadro, fuente, tamaño del título, alineación, colores de texto, acento y texto de los botones.
Background en Image: miniatura de la imagen subida, opción Delete Image e Image darkening (%), aquí 15.
Background en Image: miniatura de la imagen subida, opción Delete Image e Image darkening (%), aquí 15.
Resultado con imagen de fondo, oscurecimiento del 15%, recuadro claro y color de acento azul.
Resultado con imagen de fondo, oscurecimiento del 15%, recuadro claro y color de acento azul.
Otra combinación: sin recuadro, fuente serif, alineación a la izquierda y color de acento terracota.
Otra combinación: sin recuadro, fuente serif, alineación a la izquierda y color de acento terracota.

Vista previa en vivo

El grupo Live Preview muestra la página 404 o la página de mantenimiento, en Desktop o Mobile, actualizada mientras editas los campos y con el scope seleccionado — antes de guardar. Las imágenes recién subidas (logo personalizado, imagen de fondo) aparecen en la vista previa después de guardar.

Vista previa en directo con cambios sin guardar: fondo oscuro, acento morado y el título personalizado “Oops! This page took a day off”.
Vista previa en directo con cambios sin guardar: fondo oscuro, acento morado y el título personalizado “Oops! This page took a day off”.
Las pestañas 404 page / Maintenance page y Desktop / Mobile: aquí la página 404 en Desktop.
Las pestañas 404 page / Maintenance page y Desktop / Mobile: aquí la página 404 en Desktop.
La página de mantenimiento en la pestaña Mobile.
La página de mantenimiento en la pestaña Mobile.
Después de guardar, la imagen de fondo subida también aparece en la vista previa.
Después de guardar, la imagen de fondo subida también aparece en la vista previa.
Vista previa de la página de mantenimiento con la misma imagen de fondo.
Vista previa de la página de mantenimiento con la misma imagen de fondo.

Comando CLI

bin/magento codingrow:c404m:deploy instala o actualiza la skin de mantenimiento en pub/errors y regenera las páginas de todas las store views. Solo lo necesitas cuando el servidor web no puede escribir en pub/errors; los archivos de la skin se crean con permisos 644/755. --uninstall restaura local.xml y elimina la skin, recuperando la página de mantenimiento estándar de Magento.

codingrow:c404m:deploy regenera la página para las store views; tras maintenance:enable los visitantes ven la página personalizada (HTTP 503); --uninstall restaura la página estándar de Magento antes de eliminar el módulo.
codingrow:c404m:deploy regenera la página para las store views; tras maintenance:enable los visitantes ven la página personalizada (HTTP 503); --uninstall restaura la página estándar de Magento antes de eliminar el módulo.

Solución de problemas

  • Sigo viendo la antigua página 404: comprueba que Enable custom 404 page esté en Yes en el scope de la store view que estás mirando, vacía la caché (System → Cache Management) y prueba una dirección que realmente no exista.
  • Durante el mantenimiento veo la página estándar de Magento: Installation status debe ser Installed, la página debe estar activada para esa store view y tu IP no debe estar excluida con --ip. Después ejecuta bin/magento codingrow:c404m:deploy.
  • Idioma incorrecto durante el mantenimiento: define los textos en el scope de la store view correcta; si varias store views comparten la misma dirección, deciden la cookie de la tienda y después el idioma del navegador. Luego ejecuta bin/magento codingrow:c404m:deploy.
  • El logo no aparece: con Store logo se toma de Content → Design → Configuration → Header → Logo Image (o del logo del tema); elige Custom logo para subir uno y aumenta Logo max width si se ve demasiado pequeño.
  • La imagen de fondo no aparece en la vista previa: las imágenes subidas aparecen después de guardar; comprueba que Background esté en Image.

Licencia

Custom 404 & Maintenance es gratuito y no hay ninguna clave que introducir: una vez instalado, el módulo se activa automáticamente en tu dominio. Realiza una ligera verificación en línea con codingrow.com, enviando solo el dominio de la tienda, el producto y la versión instalada (ningún dato de tus clientes), y recuerda la última respuesta, de modo que un problema de red temporal no lo desactiva. El formulario de la página del producto solo sirve para enviarte las credenciales del repositorio Composer de Codingrow, con las que descargas el módulo y sus actualizaciones.

Si algún día el módulo pasa a ser de pago: los dominios que ya lo hayan activado siguen siendo gratuitos, para siempre, en todas las versiones publicadas hasta esa fecha — sin cambio de dominio ni solicitudes al soporte. El log de Magento indica la última versión que puedes instalar gratis; las versiones posteriores requerirían una licencia.