Cómo crear una barra de botones flotante en WordPress sin plugins

¿Te ha pasado que para añadir una pequeña funcionalidad a tu WordPress has tenido que instalar un plugin? En Wondermochi no somos nada amigos de esto, por eso Megamochi ha decidido salir a Youtube a contaros cómo hacer pequeñas cosas para vuestra web sin depender de plugins. Aprende cómo crear una barra de botones flotante en WordPress sin plugins en este post.

Tutorial de cómo añadir una barra de botones flotante en WordPress sin plugins

Sobre los plugins de WordPress

WordPress funciona con plugins y sería erróneo decir que no los vamos a usar, pero lo que no se debe hacer es depende ellos para pequeñas mejoras en nuestra web. Evidentemente, si necesitas añadir una tienda online, Woocommerce es la mejor solución, pero si necesitamos, como en este caso, añadir una pequeña barra de iconos a nuestro tema, no deberíamos tener un plugin que solo hiciera eso ¿Por qué, ahí van algunas razones?

A. Los plugins deben actualizarse siempre, tener plugins de sobra solo alargará este proceso.

B. Los plugins con los que trabaja tu web afectan a su rendimiento, a mayor cantidad de plugins, más potencia necesitas para funcionar correctamente. Si además estás usando plugins pesados como Visual Composer o Revolution Slider, ya estás muy cerca del límite de tus recursos como para añadir más leña al fuego.

C. Cada plugin tiene un desarrollador más o menos conocido. Eso no es un problema en el caso de los plugins más usados del mercado, porque sus desarrolladores tienen reconocimiento y prestigio para avalar sus creaciones. Pero ¿qué pasa con esos plugins hechos por programadores particulares? Son pequeños, funcionan de forma muy concreta y son, en apariencia, inofensivos. Pero muchas veces, estos plugins gratuitos no pueden costear su propio mantenimiento, y sus desarrolladores terminan vendiendo a otra empresa la autoría del plugin. Esto quiere decir que una empresa compra un recurso que está instalado en nuestra web, con permisos asignados, y si esta empresa tiene malas intenciones puede usar el código del plugin para inyectar datos como backlinks. Esto no es algo común por suerte, pero ya se están dando algunos casos.

Si quieres más información sobre este tema, echa un ojo al post sobre Licencias de Plugins Premium y Seguridad en WordPress

Código del tutorial

See the Pen Floatin social menu by Rafa Fields (@Rafafields) on CodePen.0

Como podéis ver, aquí está todo el contenido que creamos en el video. Os dejamos escritas las instrucciones de uso:

1. Modifica y/o añade los botones que necesites en tu barra HTML

2. Modifica y/o añade los colores que necesites (como en la línea 24 del CSS)

3. Personaliza las variables de Radius y Size a tu gusto para poner más o menos curvas; y para personalizar el tamaño; respectivamente

4. Convierte el SCSS en CSS pulsando en la flecha superior derecha del panel de CSS y elige la opción “View compiled CSS”.

5. Busca una parte de tu tema que se muestre siempre, nosotros recomendamos el archivo footer.php que encontrarás en raíz de tu tema en el FTP (Ojo, no hagas esto desde el backend, antes se podía pero últimamente está fallando mucho y puedes romper tu tema!!). Cuando lo localices, haz una copia de seguridad de este archivo en tu pc. En caso de fallo grave con los siguientes puntos, solo tienes que volver a subir el archivo.

6. Ahora sí, con una copia de este archivo de repuesto, puedes pegar el HTML del recurso antes de la etiqueta <footer> como te explicamos en el video.

7. Accede a tu zona de administrador y entra en Personalizar. De todos los paneles a la izquierda, despliega el último. Lo reconocerás porque se llama “Custom CSS” o “CSS personalizado”. Al desplegarlo, aparece un campo de texto especial para CSS, solo tienes que pegar el CSS (no te olvides de convertirlo como te explicamos en el paso 4) que has personalizado previamente.

Ya está, todo debería estar funcionando

¿No funciona? ¿Se ha roto la web? ¿Has invocado al demonio? No problem. Deja tu caso en los comentarios de este post o en el video y te ayudaremos!

 

Conclusión

No necesitas un plugin para esto. Deja de alimentar tu web con alimentos procesados y tómate un tiempo para pensar en lo mejor para su tracto intestinal.

Nos vemos en el próximo tutorial.

Megamochi

Cómo adaptar tu negocio digital a la nueva RGPD

Cómo adaptar tu negocio digital a la nueva RGPD

Recopilamos todo lo que hemos estudiado para nosotros y te lo regalamos.