WordPress: pantalla mantenimiento web

Avisa a tus usuarios cuando tu sitio web este disponible

Cualquier diseñador web que se precie, te dirá que una pantalla de mantenimiento web, es necesaria.

Es un modo de hacer ver a tus usuarios que te preocupa su espera, y por tanto, les facilitas información acerca de cuando estarás disponible.

Además, tus usuarios tendrán oportunidad de:

• Ver información sobre tu trabajo (importante poner tu logo)
• Suscribirse para que les llegue aviso cuando estés disponible
• Visitar tus principales redes sociales
• Contactar con empresa/entidad por formulario web.

Ver esta captura de pantalla, para comprobar estos detalles.

---

Índice

1. ¿Para que casos es esto importante?
2. WP Maintenance Mode (plugin WordPress)
   – Características
   – Modo funcionamiento
   Pestaña General
   Pestaña Diseño
   Pestaña Módulos
3. Videotutorial

---

¿Para que casos es esto importante?

• Si estas próximo a abrir un sitio web nuevo
• Si tienes que actualizar plugins pesados, temas o sistema WordPress
• Porque no te gusta la pantalla que ofrece por defecto WordPress cuando actualiza plugins/temas/sistema

Esto que para algunos puede parecer una tontería, para los que trabajamos en el mundo de diseño web (no programadores web) nos parece significativo.

Dado que el tiempo que está de mantenimiento un sitio web, es tiempo que también debemos invertir en no perder clientes (a veces hay plugins problemáticos que requieren más atención).

---

WP Maintenance Mode (plugin WordPress)

El plugin que yo utilizo se llama: WP Maintenance Mode (Autor: Designmodo).

Cuando comencé a utilizar este plugin era mucho más rudimentario y no permitía personalización alguna de la imagen de fondo. Con el tiempo ha ido ganando en elegancia y personalización. Antes de ver sus características, una nota de advertencia.

Nota 1: Es recomendable que active este plugin el administrador del sitio web/blog que es quien tiene todos los permisos para ver todas las características del plugin aunque es algo que se puede cambiar.

Características

• Totalmente personalizable (cambio de colores, textos y fondos)
• Formulario de suscripción (correos electrónicos de exportación a .csv)
• Temporizador de cuenta atrás (tiempo restante)
• Formulario de contacto (recibir correos electrónicos de los visitantes)
• Página de próximamente estará disponible el sitio web
• Plantillas de ‘Landing page’
• Funciona en WordPress Multisitio
• Responsive disponible (diseño amigable en móviles)
• Iconos de redes sociales (Github, Dribbble, Twitter, Facebook, Pinterest, Google+. LinkedIn)
• Funciona con cualquier tema de WordPress
• Opciones de SEO
• Excluir direcciones URL de mantenimiento

Modo funcionamiento

Vamos a ver unas capturas de pantalla por cada pestaña del panel de control del plugin, que después explicaremos en videotutorial mejor.

Pestaña General

• Estado: Activado/Desactivado
  Consejo: Aunque el plugin estuviera activado, aquí nos permite activarle realmente para presentar o no la pantalla de mantenimiento.

Nota 2: Es recomendable tener 2 navegadores web. Por ejemplo, yo trabajo desde ‘Google Chrome’ donde puedo seguir viendo el sitio web, tanto el back-end como front-end. Y si quiero ver como queda la pantalla de mantenimiento web, lo veré desde ‘Mozilla Firefox’ u ‘Opera’ o el navegador que desees.

• Evitar Robots de Búsqueda: Si/No
  ¿Permitir a los Robots de Búsqueda evitar el modo de mantenimiento?
  Consejo: Yo pongo que No.
• Rol de administración: Administrador/Editor/Autor/Colaborador/Suscriptor
  ¿Qué rol de usuario se requiere para acceder a la administración de este blog?
  Consejo: Yo pongo Administrador.
• Rol de sitio: Administrador/Editor/Autor/Colaborador/Suscriptor
  ¿Qué rol de usuario se requiere para acceder a este blog?
  Consejo: Yo pongo Administrador.
• Meta Etiqueta Robots: noindex, nofolow / index, follow
  La meta etiqueta robots le permite definir de manera más granular como deben ser indexadas y servidas las páginas a los usuarios en los resultados de búsqueda.
  Consejo: Yo pongo noindex, nofolow.
• Redirección: URL que quieras.
  Si deseas enviar a un usuario a una URL (que no forma parte de su sitio WordPress) después de iniciar sesión, define dicha URL (incluya http://)
  Consejo: Yo no puse nada.
• Excluir:
  wp-cron
  feed
  wp-login
  login
  wp-admin
  wp-admin/admin-ajax.php
  Excluye feed, páginas, archivos o direcciones IP del modo de mantenimiento. ¡Agrega un slug por línea!
  Consejo: Yo lo dejo tal cual.
• Aviso: Si/No.
  ¿Deseas ver avisos cuándo el modo de mantenimiento está activo?
  Consejo: Yo pongo que Sí.
• Enlace al escritorio: Si/No
  ¿Deseas agregar un enlace al escritorio en tu página de mantenimiento?
  Consejo: Yo pongo que No (aunque para los que no recuerden como acceder a su acceso WordPress, es mejor que lo pongáis).

Pestaña Diseño

Contenido

• Título (Etiqueta HTML): Por ejemplo, JOAN MORCI – Mantenimiento Web.
  Consejo: Esta información es la que vemos en la pestaña propia del navegador. Convendría que tuviera que ver con el nombre de tu Empresa.
• Encabezado: Por ejemplo, ‘Mantenimiento web’.
  Consejo: Algo que tenga que ver con la página donde se encuentran.
• Texto: Por ejemplo, ‘JOAN MORCI – Diseño – Edición – Maquetación. Disculpa las molestias. Vuelvo en breve’.
  Consejo: Puedes poner algo que identifique a tu Empresa y una disculpa por encontrarse el visitante tu sitio web en mantenimiento.

<p><img class="aligncenter" src="https://joanmorci.com/wp-content/uploads/2015/12/Logo_Ojo_Joan-Morci_2.png" alt="logo Joan Morci" /></p>
<p style="text-align: center;">Joan Morci | Diseño - Edición - Maquetación<br />Disculpa las molestias. Vuelvo en breve.</p>

Fondo

• Seleccionar tipo: Color personalizado/Fondo cargado/Fondo predefinido.
  Consejo: Puedes elegir un tono de color de fondo, subir una imagen, o elegir una imagen de paisaje que te ofrece el propio plugin.
• Sube un fondo: Si eliges la opción, Fondo cargado, podrás subir desde tu Escritorio de ordenador la imagen que quieres.
  Consejo: Se te sugerirá un tamaño apropiado de 1920×1280 pixeles.

Pestaña Módulos

Contador

• ¿Mostrar contador?: Si/No.
  Consejo: Esta opción, tan sólo si necesitas mostrar que abrirás una web en breve, en cuestión de días. Yo nunca lo he utilizado para largo tiempo.
• Fecha de inicio: Muestra un calendario.
  Consejo: Cuando lo he utilizado para un corto periodo de tiempo, minutos, no sé porque no ha ido.
• Contador (tiempo restante): 0 Días 0 Horas 0 Minutos.
• Color: de la fuente o tipografía.

Suscribirse

• ¿Mostrar suscribirse?: Si/No.
  Consejo: En mi caso, puse que Sí. Por sien otras ocasiones han visto tu sitio y les agrada tu contenido, no hay necesidad de perder ese visitante.
• Texto: Por ejemplo, ‘Notificarme cuando este listo’.
  Consejo: Puedes utilizar el correo de tu suscriptor, también para avisarle cuando tu sitio web este de nuevo disponible.
• Estadísticas: Hay 0 suscriptores.
  Consejo: Marca el número de suscriptores registrados en el momento de encontrarnos de mantenimiento web.

Redes sociales

• ¿Mostrar redes sociales?: Si/No.
  Consejo: Yo puse que Sí. Es la mejor opción si tenéis alguna.
• ¿Destino de enlaces?: Página nueva/Misma página.
  Selecciona como se abrirán los enlaces.
  Consejo: Yo puse Página nueva.
• Github:
• Dribbble:
•  Twitter: https://twitter.com/joanmorci
• Facebook:
• Pinterest:
• Google+: https://plus.google.com/u/0/+Joanmorci
• Linkedin: https://www.linkedin.com/in/joanmorci/

Contacto

• ¿Mostrar contacto?: Si/No
  Consejo: Yo puse que Sí. Y aparece una casilla final para contactar, es decir, un formulario. Lo que rellenes irá a parar a la dirección de correo que escribas en la siguiente opción.
• Dirección de correo electrónico: joanmorci@gmail.com
• Efectos: Mover al inicio / Ampliar / Colapsar.

Google Analytics

• ¿Usar Google Analytics?: Si/No.
  Consejo: Yo puse que No, porque no me interesa hoy por hoy, pero si estuvierais a punto de abrir una web nueva, entonces tenéis que dar que Sí.
• Código de rastreo: Tendrías que acudir al sitio de Google, Encontrar su código de seguimiento, su ID de seguimiento y su número de propiedad.

---

Videotutorial

• WordPress: pantalla mantenimiento web
  ‘WP Maintenance Mode’. Plugin que permite ver información, suscribirse para que les llegue aviso cuando estés disponible, visitar tus redes sociales o contactarte por formulario web.

---

Fuente imágenes

Ver apartado relacionado en mi Pinterest.