fbpx

Crear una página de mantenimiento personalizada en WordPress

Si habitualmente realizas tareas de mantenimiento en tu web, hoy vemos cómo hacerlo con una página personalizada para tu instalación de WordPress.

En el tutorial Activar el modo mantenimiento de WordPress, vimos cómo mostrar la página de manteniendo nativa de WordPress con un mensaje personalizado.

Pero si lo que buscas es tener una página de mantenimiento con un diseño personalizado para tu proyecto, o el de tus clientes, puedes hacerlo de forma sencilla con el snippet que encontrarás a continuación.

¿Cómo crear una página de mantenimiento personalizada en WordPress?

Para crear una página de mantenimiento que tenga un diseño personalizado en tu instalación de WordPress, sólo tienes que seguir los siguientes pasos.

Paso 1. Crear el archivo html

Crea un archivo mantenimiento.html con el siguiente contenido, en el directorio raíz de tu instalación de WordPress.

<!doctype html>
<title>Sitio en mantenimiento</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #f16558; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>
 
<article>
    <h1>Ups! ¡Estamos trabajando en ello!</h1>
    <div>
        <p>Disculpa las molestias, pero estamos realizando tareas de mantenimiento en la web. Estaremos de vuelta en breve. Si necesitas hablar con nosotros de forma urgente, <a href="mailto:#">puedes enviarnos un email</a>.</p>
        <p>— El equipo</p>
    </div>
</article>

El código anterior es un ejemplo sencillo, pero puedes modificar el texto como quieras, añadir un email de contacto o insertar una creatividad totalmente personalizada.

Paso 2. Modifica el archivo .htaccess

Para activar la página mantenimiento.html que acabas de crear, sólo tienes que añadir el siguiente snippet en el archivo .htaccess de tu instalación de WordPress.

RewriteEngine On
RewriteBase /
RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.123
RewriteCond %{REQUEST_URI} !^/mantenimiento\.html$
RewriteRule ^(.*)$ https://tudominio.com/mantenimiento.html [R=307,L]

Como ves, el código anterior, una vez hayas guardado los cambios en el archivo .htaccess, le indica a tu servidor web que todas las visitas que lleguen a tu web las desvíe a la página mantenimiento.html.

Así, el archivo mantenimiento.html puedes tenerlo siempre en la carpeta de tu instalación de WordPress, y cuando necesites mostrar tu página de mantenimiento, solo tienes que añadir el código del paso 2 en el archivo .htaccess.

Resumiendo…

Como ves, no es necesario instalar ningún plugin para mostrar una página de mantenimiento personalizada en WordPress. Bastan unas pocas líneas de código en tu archivo .htaccess para resolverlo de forma fácil y rápida. Además, haciéndolo así, cada vez aprenderás más sobre tu instalación de WordPress y el funcionamiento de tu proyecto online.

Si te ha gustado este tutorial, recuerda que si te suscribes, tendrás acceso a todo el contenido premium.

Y como siempre, si tienes cualquier problema, no dudes en contactar conmigo. Nos vemos en la próxima entrega, con un nuevo tutorial. 😉

Author avatar
Ángel Martín
Ayudo a emprendedores y empresas a digitalizar su negocio y sus procesos optimizando sus costes.