¿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.
Índice de contenidos
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.
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
Actualización
Gracias al comentario de Javier, hemos recordado que no hemos explicado cómo crear el enlace para compartir en redes sociales. Por eso, hemos preparado un codepen especial para explicar su funcionamiento. Cualquier duda que tengáis, podéis dejarla en comentarios 🙂
27 comentarios
Hola muchas gracias por tu tutorial es muy bueno.
Lo hice en mi tema que es AVADA y me pasa algo peculiar y es que los botones se ocultan detrás del slider y otras secciones. sabes como lo puedo arreglar?
La página es esta
http://testgravity.com/servi/
Hola Jorge!
Muchas gracias por tu comentario! Encantados de poder ayudarte 🙂
He entrado en la URL y no he visto la caja, entiendo es que porque la has ocultado mientras arreglas este bug que me comentas. Para solucionarlo, te proponemos lo siguiente:
1. Click derecho sobre la barra y selecciones la opción «inspeccionar»
2. Una vez en el editor, verás la clase CSS .social-menu con el código del tutorial
3. Puedes añadir otra regla de CSS llamada z-index, a la cual debes poner un valor numérico.
Lo que está sucediendo seguramente es que en el eje Z de tu web, el slider tiene una posición superior, solo tienes que añadir nueves al valor z-index de la clase .social-menu hasta que quede por encima. Pero cuidado, no vaya a ser que se coloque por encima de otros elementos importantes jejeje.
Comenta si te ha servido o si tienes alguna duda más.
No, es que me tocó hacerlo de otra forma desde tu teoría . Lo que te pregunte lo resolví con un z-index: 9999;
Lo probaré y comento. Se ve genial!
Lo mismo que el post anterior. Los botones quedan ocultos cuando los colocas en el header.php. Son visibles si los colocas en footer.php.
He tratado de implementarlo pero a la hora de terminarlo cuando doy en el icono correspondiente no me dirige a ningun lado para compartir, supongo falta un codigo java script o no?
Hola Javier, gracias por recordarnos esto. El tema de los enlaces es bastante sencillo, consiste en poner el enlace de la URL actual de la página y añadirle un prefijo dependiendo de la red social en la que quieras compartirlo. Hemos preparado este codepen para que puedas verlo más claro:
Cómo compartir enlaces en redes sociales
Gracias me sirvió muy bien, se te agradece mucho. Saludos.
Muchas gracias Kil! 😀
Impecable, gracias!!
Gracias Nicolás ^^
Impecable, gracias!!
Muchas gracias por el tutorial, está muy bien explicado!
Me encanta la idea de no tener que instalar tantos plugins! Hasta ahora tenia un plugin pero me va muy lenta la pagina así que he decidido desinstalarlo y implemetar tu código. Me gustaría pero que la barra esté situada a la derecha de la pantalla en vez de la izquierda, pero no lo consigo. ¿qué debería de cambiar?
Un saludo
Montsant
Gracias Montsat por tu comentario 🙂
Cuando hice el tutorial no tenia mucha idea, pero para estas cosas puedes usar Code Snippets, funciona bastante bien para pequeño códigos en vez de tener tantos plugins.
Para poner la barra a la derecha, simplemente modificas la linea 16 del CSS donde dice left:0 y lo cambias por right:0 .
Y listo! Comenta si se quedó como querías 🙂
Muchas gracias por el tutorial, está muy bien explicado!
Me encanta la idea de no tener que instalar tantos plugins! Hasta ahora tenia un plugin pero me va muy lenta la pagina así que he decidido desinstalarlo y implemetar tu código. Me gustaría pero que la barra esté situada a la derecha de la pantalla en vez de la izquierda, pero no lo consigo. ¿qué debería de cambiar?
Un saludo
Montsant