✅Mejorando tu Sitio con Botones Fijos Laterales en WordPress (Sin Plugins)

En el siempre dinámico ecosistema de WordPress, optimizar la interactividad y perfeccionar la estética de tu sitio web resulta crucial para destacar en la vasta red digital.

En esta exploración detallada, nos sumergiremos en un código específico diseñado para la inclusión de botones fijos en tu página. Estos botones no solo constituyen un componente visualmente atractivo, sino que también desempeñan un papel fundamental al mejorar la accesibilidad a tus perfiles de redes sociales y detalles de contacto.

La incorporación de botones fijos no es solo una cuestión de estética. Estos elementos actúan como accesos directos, facilitando a tus visitantes la conexión con tus perfiles de redes sociales y proporcionando un acceso instantáneo a la información de contacto clave. Este aumento en la interactividad fortalece la conexión entre tu audiencia y tu contenido, facilitando la participación y el seguimiento en diferentes plataformas.

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 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.

En última instancia, estos botones fijos se traducen en una mejora sustancial en la experiencia del usuario. Facilitan la navegación, brindan accesibilidad inmediata a tus canales de comunicación y redes sociales, y contribuyen a una presentación estilizada y coherente de tu contenido. En el transcurso de este artículo, desglosaremos el funcionamiento detallado de este código, proporcionándote los conocimientos necesarios para implementar y personalizar eficientemente estos botones fijos.

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

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" class="boton-red-social">
            <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" class="boton-red-social">
            <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" class="boton-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" class="boton-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');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Puedes descargar las imágenes de los iconos de los botones desde aquí.

Desde los elementos HTML hasta las funciones y ganchos utilizados, cada componente desempeña un papel clave en la mejora de la interactividad y la estética de tu sitio.

Hooks y Funciones en WordPress

Gancho wp_footer

El código se incorpora al pie de página del sitio utilizando el gancho wp_footer. Este gancho es esencial en WordPress, ya que asegura que el código se ejecute después de que la estructura principal de la página se haya generado. La función agregar_botones_fijos se une a este gancho, lo que significa que se ejecutará en el pie de página del sitio.

Estilos CSS

Posicionamiento y Estilo

• Selector .botones-fijos: Este selector define la posición fija de los botones en la pantalla, centrándolos verticalmente y estableciendo una elevada z-index para garantizar que estén por encima de otros elementos.
• Estilos de Enlaces (.botones-fijos a): Se definen estilos para los enlaces que actúan como botones, incluyendo propiedades como color, padding, bordes redondeados y transiciones.
• Estilos de Imágenes y Texto: Se definen estilos específicos para las imágenes dentro de los botones (img) y para el texto descriptivo (span), controlando su tamaño, espaciado y transiciones.
• Estilos Hover: Se establecen cambios en el fondo, color de texto, escala de imagen y opacidad al hacer hover sobre los botones para mejorar la experiencia visual.

Estructura HTML Generada Dinámicamente

Contenedor y Botones Individuales

• Div Contenedor (<div class="botones-fijos">): Este div envuelve todos los botones fijos, proporcionando un contenedor para aplicar estilos de manera cohesiva.
• Botones Individuales (<a>): Cada botón es un enlace (<a>) con una clase específica (boton-red-social o boton-contacto). Contiene una imagen (<img>) y un span (<span>) para el texto descriptivo.

Conclusión

Este desglose técnico destaca la integración cuidadosa de ganchos, funciones, HTML y CSS para implementar botones fijos en WordPress. Cada componente se sincroniza para mejorar tanto la estética como la funcionalidad del sitio. Al entender este código a un nivel más profundo, puedes personalizarlo con confianza y adaptarlo según las necesidades específicas de tu proyecto en WordPress.

Nos vemos en el siguiente tutorial.

Un saludo.