Botones Fijos Laterales en WordPress (Sin Plugins)

Aunque los plugins son una opción común en WordPress para la incorporación de funciones adicionales, la implementación de botones fijos mediante código presenta ventajas significativas. Al evitar la dependencia de plugins, reduces la carga en los recursos de tu sitio, mejoras la eficiencia y mantienes un mayor control sobre la personalización. Además, minimizar la cantidad de plugins contribuye a una mayor estabilidad y seguridad del sitio, ya que reduces la exposición a posibles vulnerabilidades.

El universo de WordPress es vasto y lleno de posibilidades para personalizar y mejorar la experiencia del usuario. Uno de los elementos más destacados para lograr esto son los «Botones Fijos Laterales en WordPress». Estos botones ofrecen una manera elegante y práctica de destacar llamadas a la acción, enlaces importantes o simplemente facilitar la navegación del usuario mientras exploran tu sitio web.

El código que estamos explorando no solo es una solución visualmente atractiva y eficiente, sino que también ofrece una adaptabilidad excepcional. Personalizar estos botones según tus necesidades específicas se vuelve una tarea accesible, permitiéndote ajustar los enlaces, íconos y estilos de acuerdo con la identidad de tu marca.

¿Qué son los Botones Fijos Laterales en WordPress?

Antes de sumergirnos en los detalles de cómo implementar estos botones, es crucial comprender qué son exactamente. Los Botones Fijos Laterales son elementos gráficos o iconos que permanecen visibles en un lateral de la página mientras el usuario se desplaza hacia abajo. Este diseño intuitivo permite un acceso rápido a funciones clave o enlaces relevantes, independientemente de la ubicación del usuario en la página.

Beneficios de Utilizar Botones Fijos Laterales en WordPress

1. Facilitan la Navegación: Al mantener accesibles ciertos enlaces o funciones, los usuarios pueden explorar tu sitio sin perderse información importante.
2. Aumentan las Conversiones: Colocar llamadas a la acción estratégicamente en los botones laterales puede aumentar las conversiones al dirigir la atención del usuario hacia acciones específicas.
3. Mejoran la Experiencia del Usuario: Al proporcionar una navegación más sencilla y directa, los usuarios experimentarán una mayor comodidad y satisfacción al explorar tu sitio.
4. Diseño Estético: Los Botones Fijos Laterales pueden ser diseñados de manera atractiva, agregando un toque visual único y moderno a tu sitio.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

Las imagenes del los iconos fueron descargados de iconos8.es

 function agregar_botones_fijos() {
    ?>
    <style>
        /* Estilos para los botones fijos */
        .botones-fijos {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 999;
        }

        .botones-fijos a {
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 10px;
            color: #ffffff;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 5px;
            width: auto;
            height: auto;
            transition: all 0.3s ease-in-out;
            white-space: nowrap; /* Evita que el texto se divida en varias líneas */
            position: relative; /* Añadido para el ajuste de posición */
			font-family: 'Montserrat', sans-serif; /* Aplica la fuente Montserrat */

        }

        .botones-fijos a img {
            width: 40px; /* Ajusta el tamaño de los iconos según tus necesidades */
            height: 40px; /* Ajusta el tamaño de los iconos según tus necesidades */
            margin-right: 10px;
            transition: transform 0.3s ease-in-out;
        }

        .botones-fijos a span {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            margin-right: 20px; /* Ajusta la separación entre el icono y el texto */
        }

        .botones-fijos a:hover {
            background-color: #f4f4f4;
            color: black;
        }

        .botones-fijos a:hover img {
            transform: scale(1.5); /* Ajusta el factor de escala al hacer hover */
        }

        .botones-fijos a:hover span {
            opacity: 1;
        }

    </style>

    <div class="botones-fijos">
        <a href="enlace_red_social_instagram" >
            <img src="https://friendly-ferret-cg0bt.instawp.xyz/wp-content/uploads/2023/12/icons8-instagram-50.png" alt="Instagram">
		    <span>Instagram</span>            
        </a>
        <a href="enlace_red_social_facebook" >
            <img src="https://friendly-ferret-cg0bt.instawp.xyz/wp-content/uploads/2023/12/icons8-facebook-50.png" alt="Facebook">
            <span>Facebook</span>
        </a>
		<a href="enlace_contacto" >
            <img src="https://friendly-ferret-cg0bt.instawp.xyz/wp-content/uploads/2023/12/icons8-tik-tok-50.png" alt="Tik Tok">
            <span>Tik Tok</span>
        </a>
        <a href="enlace_contacto" >
            <img src="https://friendly-ferret-cg0bt.instawp.xyz/wp-content/uploads/2023/12/icons8-envelope-50.png" alt="Correo">
            <span>Contacto</span>
        </a>
    </div>
    <?php
}

 add_action('wp_footer', 'agregar_botones_fijos');