Botón Flotante para Reservas de Hotel en Tema Twenty Seventeen

staryhorse · 24 Abr 2018

Hola estoy intentando introducir un botón flotante el tema "Twenty Seventeen", estoy personalizando este tema para un hotel y necesitaría que haya un botón flotante (No Pop Up) que al dar clic llame al sistema de reservas que tenemos contratado a otra empresa. El botón debería llamar a una sentencia HTML que es la de nuestro sistema de reservas.
He buscado Plugins pero solo he encontrado uno de pago, si alguien conoce alguna forma de meterlo con codigo HTML seguramente en el Header para que este siempre disponible?

Alguna idea?, gracias de antemano.

Saludos

BotBeta · 27 Dic 2024

staryhorse dijo:
Hola estoy intentando introducir un botón flotante el tema "Twenty Seventeen", estoy personalizando este tema para un hotel y necesitaría que haya un botón flotante (No Pop Up) que al dar clic llame al sistema de reservas que tenemos contratado a otra empresa. El botón debería llamar a una sentencia HTML que es la de nuestro sistema de reservas.
He buscado Plugins pero solo he encontrado uno de pago, si alguien conoce alguna forma de meterlo con codigo HTML seguramente en el Header para que este siempre disponible?

Alguna idea?, gracias de antemano.

Saludos

¡Hola staryhorse!

Para añadir un botón flotante en el tema "Twenty Seventeen" que haga clic en el sistema de reservas, puedes hacerlo modificando el archivo header.php o bien mediante un código CSS y HTML en el archivo functions.php o usando el Personalizador de WordPress. Aquí tienes una guía básica para que lo puedas implementar:

### Opción 1: Usar header.php

1. Accede a tu panel de administración de WordPress.
2. Ve a Apariencia > Editor de temas.
3. Selecciona el archivo header.php y añade el siguiente código justo antes de la etiqueta de cierre </body>:

Insertar CODE, HTML o PHP:

html
   <div id="boton-flotante">
       <a href="URL_DE_TU_SISTEMA_DE_RESERVAS" target="_blank">Reservar Ahora</a>
   </div>

4. Luego, agrega un poco de CSS para hacerlo flotante. Ve a Apariencia > Personalizar > CSS Adicional y añade:

Insertar CODE, HTML o PHP:

css
   #boton-flotante {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background-color: #0073aa; /* Cambia el color si lo deseas */
       color: white;
       padding: 10px 15px;
       border-radius: 5px;
       text-align: center;
       z-index: 9999;
   }

   #boton-flotante a {
       color: white;
       text-decoration: none;
   }

   #boton-flotante:hover {
       background-color: #005177; /* Color al pasar el ratón */
   }

### Opción 2: Usar functions.php

Si prefieres no tocar header.php, puedes usar el archivo functions.php para inyectar el HTML:

1. Accede a Apariencia > Editor de temas y selecciona el archivo functions.php.
2. Añade el siguiente código al final del archivo:

Insertar CODE, HTML o PHP:

php
   function agregar_boton_flotante() {
       ?>
       <div id="boton-flotante">
           <a href="URL_DE_TU_SISTEMA_DE_RESERVAS" target="_blank">Reservar Ahora</a>
       </div>
       <style>
           #boton-flotante {
               position: fixed;
               bottom: 20px;
               right: 20px;
               background-color: #0073aa; /* Cambia el color si lo deseas */
               color: white;
               padding: 10px 15px;
               border-radius: 5px;
               z-index: 9999;
           }

           #boton-flotante a {
               color: white;
               text-decoration: none;
           }

           #boton-flotante:hover {
               background-color: #005177; /* Color al pasar el ratón */
           }
       </style>
       <?php
   }
   add_action('wp_footer', 'agregar_boton_flotante');

Recuerda reemplazar URL_DE_TU_SISTEMA_DE_RESERVAS con la URL real del sistema de reservas que estás utilizando.

### Notas Finales

Realiza una copia de seguridad de tus archivos antes de hacer cambios.
Si no estás familiarizado con la edición de código, puede que sea mejor usar un entorno de pruebas o buscar ayuda de un desarrollador.

Espero que esto te ayude a implementar el botón flotante de reservas en tu hotel. ¡Buena suerte! Si tienes más preguntas, no dudes en preguntar.

Saludos.

Botón Flotante para Reservas de Hotel en Tema Twenty Seventeen

staryhorse

BotBeta

Temas similares