Tener una página web profesional es clave para atraer y mantener a tu audiencia. Sin embargo, todos los sitios web necesitan un poco de mantenimiento de vez en cuando, o quizás estés lanzando una nueva página que aún no está lista para el público. Es en estos momentos cuando una página de «Sitio en Construcción» se convierte en tu mejor aliada.
Este artículo te enseñará cómo implementar una página de «Sitio en Construcción» que no solo informa a tus visitantes que estás trabajando en mejorar su experiencia, sino que lo hace de una manera elegante y profesional. El código que te proporciono hará que tu página de mantenimiento destaque con un toque de interactividad que mantendrá a tus visitantes informados y conectados mientras esperas el gran lanzamiento.
Imagina que estás trabajando en una renovación importante de tu sitio web o preparando algo completamente nuevo. Con este código, podrás configurar una fecha de inauguración y mostrar un contador regresivo en tiempo real, lo que crea anticipación y mantiene a tus visitantes comprometidos. Además, podrás incluir un enlace para que se unan a tu grupo de WhatsApp, manteniendo a tu audiencia actualizada y creando una comunidad antes de que tu sitio esté en línea.
Este código es especialmente útil para desarrolladores web, diseñadores y dueños de negocios que desean mantener una imagen profesional incluso durante los tiempos de inactividad de su sitio. No necesitas ser un experto en programación para implementarlo; lo único que debes hacer es seguir los pasos que te muestro y adaptar el diseño a tus necesidades específicas. ¡Es hora de convertir la espera en una oportunidad de conexión y marketing!
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Función para mostrar la página de en construcción
function modo_en_construccion_profesional() {
// Comprobar si el usuario es administrador
if (!current_user_can('edit_themes') || !is_user_logged_in()) {
// Definir la fecha de inauguración
$fecha_inauguracion = '2024-08-25T00:00:00'; // Ajusta la fecha y hora de inauguración según sea necesario
// Mostrar la página de en construcción
echo '<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio en Construcción</title>
<style>
body {
background-color: #f0f0f0;
color: #333;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
text-align: center;
}
.construction-container {
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 90%;
animation: fadeIn 1s ease-in-out;
}
.logo {
max-width: 150px;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #2c3e50;
}
h2 {
font-size: 1.5rem;
margin-bottom: 30px;
color: #7f8c8d;
}
p {
font-size: 1.1rem;
color: #34495e;
margin-bottom: 30px;
}
.countdown {
font-size: 2rem;
color: #e74c3c;
margin-bottom: 30px;
font-weight: bold;
}
.join-whatsapp {
margin-top: 20px;
}
.join-whatsapp a {
padding: 15px 25px;
border-radius: 50px;
background-color: #25D366;
color: #fff;
text-decoration: none;
font-size: 1.1rem;
font-weight: bold;
transition: background-color 0.3s ease;
}
.join-whatsapp a:hover {
background-color: #128C7E;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="construction-container">
<img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/logo-dark.svg" alt="Logo de la Web" class="logo"> <!-- Reemplaza con la URL de tu logo -->
<h1>Sitio en Construcción</h1>
<h2>Estamos trabajando para mejorar tu experiencia</h2>
<p>Únete a nuestro grupo de WhatsApp para estar informado de los avances y actualizaciones sobre la construcción de nuestra web.</p>
<div class="join-whatsapp">
<a href="https://chat.whatsapp.com/GuCLC8Sp8uJ6ztNFpYpuwb" target="_blank">Únete al Grupo de WhatsApp</a>
</div><br><hr>
<h3>Nos vemos en:</h3>
<div id="countdown" class="countdown"></div> <!-- Contador regresivo -->
</div>
<script>
// Configuración del contador regresivo
var countDownDate = new Date("' . $fecha_inauguracion . '").getTime();
// Actualizar el contador cada segundo
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
// Cálculo de días, horas, minutos y segundos
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Mostrar el resultado en el elemento con id="countdown"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Si el contador llega a 0, mostrar mensaje
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "¡Estamos en vivo!";
}
}, 1000);
</script>
</body>
</html>';
die();
}
}
add_action('get_header', 'modo_en_construccion_profesional');
Lenguaje del código: PHP (php)Entendiendo el Código
Función modo_en_construccion_profesional
Esta función es el núcleo del código. Su propósito es mostrar una página de «Sitio en Construcción» cuando un usuario que no tiene privilegios de administrador intenta acceder al sitio.
Comprobación de privilegios de usuario
El código verifica si el usuario actual tiene permisos de administrador con la función current_user_can('edit_themes'), lo que generalmente significa que el usuario tiene acceso a la edición de temas en WordPress. Además, verifica si el usuario está autenticado con is_user_logged_in(). Si el usuario no cumple con alguna de estas condiciones (es decir, no es administrador o no está conectado), el código procede a mostrar la página de «Sitio en Construcción».
Definición de la fecha de inauguración
Aquí se define la variable $fecha_inauguracion, que contiene la fecha y hora exacta en formato ISO 8601 en la que el sitio estará disponible para el público. Esta fecha se usará más adelante para el contador regresivo que se muestra en la página.
Generación del contenido HTML
Se utiliza echo para generar una página HTML completa que se muestra a los usuarios que no tienen acceso al sitio. Esta página incluye un mensaje que informa que el sitio está en construcción, así como un diseño atractivo y moderno. La página utiliza CSS para estilizar los elementos, asegurando que se vea profesional y esté bien presentada.
Estilos CSS
El código incluye una sección de estilos CSS en línea dentro del <style> del <head>. Estos estilos definen el aspecto visual de la página, como el fondo, el color del texto, el tamaño y estilo de las fuentes, el diseño de contenedores, las animaciones, y más. Por ejemplo, el contenedor principal utiliza una combinación de gradiente y sombras para darle un aspecto moderno y atractivo, mientras que se aplican animaciones CSS para un efecto de entrada suave.
Estructura HTML
La estructura HTML dentro del <body> incluye varios elementos clave:
- Un contenedor principal (
<div class="construction-container">) que organiza el contenido visualmente. - Un logo (
<img>), encabezados (<h1>y<h2>), y un párrafo (<p>) que proporcionan información a los usuarios. - Un enlace de WhatsApp que invita a los usuarios a unirse a un grupo para recibir actualizaciones.
- Un elemento
<div id="countdown">que se utiliza para mostrar el contador regresivo.
Contador regresivo
La sección de JavaScript al final del documento gestiona el contador regresivo:
Se inicializa la variable countDownDate con el valor de la fecha de inauguración definida anteriormente. Luego, se configura un intervalo que se ejecuta cada segundo para actualizar el contador en la página.
El script calcula el tiempo restante hasta la fecha de inauguración dividiendo la diferencia entre la fecha actual y la de inauguración en días, horas, minutos y segundos. Este tiempo restante se muestra dinámicamente en el elemento HTML con el id countdown.
Si el tiempo llega a cero, el intervalo se detiene y el mensaje cambia para indicar que el sitio está «en vivo».
Interrupción de la ejecución de WordPress
Finalmente, la función die(); se utiliza para detener la ejecución de cualquier otro código de WordPress, asegurando que solo la página de «Sitio en Construcción» se muestre y nada más.
Hook de WordPress
La función add_action('get_header', 'modo_en_construccion_profesional'); añade la función modo_en_construccion_profesional al hook get_header, que es uno de los primeros hooks que se ejecutan cuando se carga una página en WordPress. Esto garantiza que la página de «Sitio en Construcción» se muestre antes de que se cargue cualquier contenido del tema, a menos que el usuario sea un administrador.
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.
No paro de darte 5 estellas en todos los posts. Felicidades por el gran contenido que tienes.
No seré yo el que te impida seguir dándole 5 estrellas a los demás artículos :). Saludos.