Cómo mostrar un mensaje y una cuenta atrás en la parte superior del sitio web

¿Te gustaría aprender a crear una barra superior (top bar) para mostrar un mensaje personalizado a tus usuarios?

Pues eso es lo que voy a enseñarte a hacer en este tutorial:

Y además del mensaje, como bonus mostraremos una cuenta atrás real, no de las que se reinician cada vez que se actualiza la página.

Esto es ideal para anunciar novedades que tengan fecha de finalización, como por ejemplo, que hay disponible un cupón de descuento por tiempo limitado.

Para hacer este plugin vamos a partir del trabajo que nos dio hecho ChatGPT, pero mejorando el código y empezando desde cero en un orden que creo que te permitirá entender mejor todo el proceso.

Así que dicho esto, ¡empezamos!

1- Creamos la top bar de forma estática

Lo primero que haremos será crear un nuevo plugin llamado scv-top-counter y dentro del directorio crearemos su archivo principal llamado scv-top-counter.php.

Una vez tengamos eso, añadimos una cabecera a nuestro plugin, indicando su nombre y descripción, si lo deseas puedes añadir el resto de campos.

Y ahora mostrar nuestra top bar justo encima de la barra de navegación, usamos el action hook wp_body_open, que lo añade dentro del elemento HTML body en la parte superior.

A este hook le enganchamos la función de callback scv_tc_add_message que comprueba si el usuario no está conectado (para no molestar a quien ya lo está) y muestra un mensaje estático.

<?php
/*
Plugin Name: Top Counter
Description: Mostrar mensaje y cuenta atrás en la parte superior del sitio, si el usuario no está logueado.
*/

add_action( 'wp_body_open', 'scv_tc_add_message' );

function scv_tc_add_message() {
  if( ! is_user_logged_in() ):
      echo '<div id="scv-top-message">👋 En 9 días, 1 horas, 14 minutos y 18 segundos se cierran las puertas a nuevos alumnos en la academia.
</div>';
  endif;
}

2- Le asignamos estilos básicos

Ahora para comprobar que todo se muestra correctamente vamos a asignar unos estilos básicos a la top bar.

Para ello creamos un nuevo directorio llamado assets y dentro creamos el archivo style.css, el cual encolamos gracias al action hook wp_enqueue_scripts.

add_action( 'wp_enqueue_scripts', 'scv_tc_enqueue_scripts' );

function scv_tc_enqueue_scripts() {
  if ( ! is_user_logged_in() ) {

    wp_enqueue_style( 'scv-tc-style', plugin_dir_url(__FILE__) . 'assets/style.css' );

  }
}

Y ahora le asignamos fondo, color y estilos al mensaje:

#scv-top-message {
  padding: 20px;
  background: #ef4e7b;
  color: white;
  font-weight: bold;
  text-align: center;
}

3- Dinamizamos el mensaje

Ahora que ya sabemos mostrar un mensaje estático, es momento de que el usuario pueda indicar qué texto desea mostrar.

Para ello haremos usaremos la API de opciones para almacenar el mensaje y la API de ajustes para añadir una nueva sección en el apartado de «Ajustes generales» de WordPress.

En primer lugar pasamos de tener un mensaje estático a obtenerlo de una opción que llamaremos scv_tc_message:

function scv_tc_add_message() {
  if( ! is_user_logged_in() ):

    $message = get_option( 'scv_tc_message' );

    if( ! empty( $message ) ):
      echo '<div id="scv-top-message">' . $message . '</div>';
    endif;
  endif;
}

Ahora con la API de ajustes:

• Añadimos una nueva sección en «Ajustes generales» gracias a la función add_settings_section, que muestra un título y una breve descripción.
• Añadimos un nuevo campo de formulario a esa sección para que usuario pueda introducir el mensaje gracias a add_settings_field.
• Registramos el nuevo ajuste con register_setting para que sea WordPress el encargado de guardarlo cuando el usuario pulse el botón de actualizar.

add_action( 'admin_init', 'scv_tc_settings' );

function scv_tc_settings() {
  // Add section to General Settings
  add_settings_section(
    'scv_tc_section',
    'Top counter',
    'scv_tc_section_callback',
    'general'
  );

  // Add fields to the section
  add_settings_field(
    'scv_tc_message',
    'Mensaje',
    'scv_tc_message_callback',
    'general',
    'scv_tc_section'
  );

  // Register the options
  register_setting( 'general', 'scv_tc_message', 'sanitize_text_field' );
}

function scv_tc_section_callback() {
  echo '<p>Indica un mensaje y una fecha.</p>';
}

function scv_tc_message_callback() {
  $message = get_option( 'scv_tc_message' );

  echo '<input type="text" name="scv_tc_message" value="' . esc_attr( $message ) . '" class="regular-text" />';
}

4- Creamos una cuenta atrás con JS

Para darle un plus de urgencia a nuestro mensaje lo ideal es mostrar una cuenta atrás.

Una cuenta atrás que sea real, no de las timo que abundan en nuestro mundillo y para ello usaremos JavaScript.

Así que dentro de assets creamos el archivo scripts.js y lo encolamos a nuestro plugin:

function scv_tc_enqueue_scripts() {
  if ( ! is_user_logged_in() ) {

    wp_enqueue_style( 'scv-tc-style', plugin_dir_url(__FILE__) . 'assets/style.css' );

    wp_enqueue_script( 'scv-tc-script', plugin_dir_url(__FILE__) . 'assets/script.js', [], '1.0', true );

  }
}

Dentro creamos la función countdown que recibe como parámetro una cadena de texto que contiene la fecha final y a partir de aquí:

• Obtenemos la fecha y hora actual.
• La fecha final la transformamos en el mismo formato que la actual.
• Calculamos la diferencia en milisegundos entre ambas.
• Convertimos eso es días, minutos y segundos.
• Para los días dividimos la diferencia entre el número que los 86.400.000 milisegundos que tiene un día.
• Para las horas, minutos y segundos usamos el operador % para obtener el restante, el cual luego dividimos por los milisegundos correspondientes en cada caso.
• Luego el resultado lo mostraremos en un contenedor que tenga el identificador countdown.
• Y finalmente hacemos que la función countdown se ejecute cada segundo gracias a un setInterval.

function countdown(finalDate) {
  // Get the current date and time
  const today = new Date();

  // Set the final date and time for the countdown
  const final = new Date(finalDate);

  // Calculate the difference in milliseconds
  const difference = final - today;

  // Convert to days, hours, minutes, and seconds
  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  if( difference > 0 ){
    // Display the countdown on the page
    document.getElementById('countdown').innerHTML = `${days} días, ${hours} horas, ${minutes} minutos y ${seconds} segundos`;
  }
}


// Execute the countdown every second
setInterval(function() {
  const finalDate = '2022-12-31 23:59:59';
  countdown( finalDate );
}, 1000);

Y para probar si ha funcionado, mostramos la cuenta atrás en pantalla gracias a añadir un div con identificador countdown:

function scv_tc_add_message() {
  if( ! is_user_logged_in() ):

    $message = get_option( 'scv_tc_message' );

    if( ! empty( $message ) ):
      echo '<div id="scv-top-message"><div id="countdown></div>"' . $message . '</div>';
    endif;
  endif;
}

5- Hacemos que la cuenta atrás sea dinámica

Al igual que hicimos con el mensaje, también nos interesa que el usuario pueda indicar una fecha final personalizada.

Para ello repetiremos el mismo proceso de añadir un nuevo ajuste en «Ajustes generales» de WordPress:

  add_settings_field(
    'scv_tc_date',
    'Fecha',
    'scv_tc_date_callback',
    'general',
    'scv_tc_section'
  );

  register_setting( 'general', 'scv_tc_date', 'sanitize_text_field' );

function scv_tc_date_callback() {
  $date = get_option( 'scv_tc_date' );

  echo '<input type="text" name="scv_tc_date" value="' . esc_attr( $date ) . '" class="regular-text" />';
}

Y una vez hecho esto, el valor almacenado por el usuario, lo enviamos desde PHP a JS usando la función wp_add_inline_script:

    $final_date = get_option( 'scv_tc_date' );

    wp_add_inline_script(
      'scv-tc-script',
      'const script_parameters =' . json_encode([
        'finalDate' => $final_date
      ]),
      'before' );

Que recogemos en JS y se lo pasamos como parámetro de entrada a countdown:

// Execute the countdown every second
setInterval(function() {
  const finalDate = script_parameters.finalDate;
  countdown( finalDate );
}, 1000);

Y como dentro de un ajuste no podemos meter código HTML, ya que este es escapado, usamos la función sprintf para poder lograrlo:

function scv_tc_add_message() {
  if( ! is_user_logged_in() ):

    $str = '<span id="countdown"></span>';

    $message = sprintf( get_option( 'scv_tc_message' ), $str );


    if( ! empty( $message ) ):
      echo '<div id="scv-top-message">' . $message . '</div>';
    endif;
  endif;
}

6- Le añadimos un fondo animado al mensaje

Nuestro plugin ya funcionaría tal cual lo tenemos pero siempre podemos hacer más vistosa nuestra top bar si le añadimos un fondo animado.

Esto lo logramos gracias a asignar un fondo con la propiedad linear-gradient que contenga varios colores y una animación que es la que hará que ese fondo se mueva.

Y para crear la animación definiremos un keyframe.

#scv-top-message {
  padding: 20px;

  background: linear-gradient(60deg,#6fba82,#07b39b,#1098ad,#5073b8,#a166ab,#ef4e7b,#f37055,#f79533);
  background-size: 200%;
  animation: gradient-animation 10s ease infinite;  

  color: white;
  font-weight: bold;
  text-align: center;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Ya solo falta testearlo y ver como el fondo de la top bar muestra un mensaje personalizado junto a una cuenta atrás y un fondo personalizado molón que hace imposible que el usuario no mire hacia allí.

¡Y eso sería todo por este tutorial! Espero que te haya gustado y que puedas utilizarlo en futuros proyectos 🙂