>

Vamos a crear uno o varios iconos flotantes mediante código CSS + HTML y PHP para insertarlos en WordPress sin plugins

Crear un «call to action»  para que los usuarios contacten con nosotros de forma rápida es un buen recurso web especialmente en las versiones móviles de nuestras páginas.

El uso del móvil para navegar por Internet es sin duda alguna dominante. Independientemente del sector o del tipo de webs nuestra experiencia en los dos últimos años en los que hemos venido usando herramientas como Google Analytics en las webs de nuestros clientes es simplemente esta:

  • 83,5 % tráfico de móviles
  • 4,1 % tráfico generado desde tablets
  • 12,4 % visitas desde ordenadores portátiles o de sobremesa

Conclusión: Si vas a diseñar una nueva web piensa en «mobile first» y le explicas a tu cliente porqué el mock up que le estás enseñando es así, estrecho y muy alto. Ahora volvamos al tema de este artículo.

Objetivo

Queremos crear uno o varios iconos flotantes que se muestre en los laterales de la página y permitan hacer una llamada de teléfono o enviar un whatsapp. No emplearemos ningún plugin para que no se ralentice la carga de la web y se mostrarán en todas las páginas de la web. Este ejemplo se está ejecutando en una web real de la marca Wondercool (en versión móvil):

https://wondercool.eu/

Antecedentes

Voy a acuñar un nuevo término que me viene a la cabeza siempre que navego por internet buscando una solución: CPR (Copy-Paste-Run)

Cuando estamos haciendo una personalización o una web para un autónomo o una PYME los presupuestos que se manejan son bajos o muy bajos. No podemos crear código Ad Hoc porque no se paga por ello y es más el cliente tampoco lo aprecia, como es normal no sabe las horas de trabajo que puede llevar una solución a medida y por lo tanto no está dispuesto a pagar por ello así que no que la mayoría de nosotros buscamos es un CPR:

  • Copia el código
  • Pego el código y me tienen que decir claramento donde, en que fichero
  • Run, lo ejecuto y lo pruebo

Procedimiento

Necesitamos código CSS, HTML y PHP para implementar la solución. Los elementos serán:

  • Código CSS para definir colores, forma y posición del elemento flotante, el botón.
  • Código HTML que se encargará de mostrar el botón.
  • Código PHP para inyectar código HTML dentro del bloque <body></body>

¿Y dónde irá este código?

El código CSS debe ir dentro del fichero style.css de nuestra plantilla. Aunque hay varias formas de colocarlo aquí os diremos donde lo hemos puesto nosotros en nuestro ejemplo :

www/wp-content/themes/tu-tema-wordpress-activo/sytle.css

El código HTML tenemos que colocarlo después de la etiqueta <body>. En nuestro caso lo inyectamos dentro de las etiquetas <header></header> con la función que vereis abajo pero la ubiación es indiferente si no eres muy purista. En líneas generales debe estar entre <body> y </body> de cada página de tu web donde quieres que aparezca esta call to action.

El código PHP debe colocar el código HTML en su sitio y para ello hay varias técnicas. Podemos hacerlo mediante una gancho o hook en este caso empleamos uno propio de la plantilla Divi que es la plantilla en el que se ha desarrollado esta web o bien colocando directamente el código al final del fichero header.php de nuestro proyecto.

Opción 1: www/wp-content/themes/tu-tema-wordpress-activo/functions.php

Opción 2: www/wp-content/themes/tu-tema-wordpress-activo/header.php

Código CSS

¿Dónde?

Lo copio en el fichero style.css de mi tema. Si usamos un tema hijo pues dentro del style.css del tema hijo, en cualquier parte.

Si la plantilla dispone de un apartado donde incluir este código CSS no hace falta que editemos el fichero style.css. Esta zona donde incluir código CSS suele estar en Apariencia -> Personalizar -> CSS Adicional  pero depende de la plantilla.

/***Cookie notice whatsapp***/
#cookie-notice-whatsapp {
		color:#fff;
		font-family:inherit;
		background:#00E676;
		padding:15px;
		position:fixed;  /* Elemento fijo dentro del navegador */
		top:40%;  /* Posición desde el top de la web */
		width:100%;
		max-width:60px;
		box-shadow:0 10px 20px rgba(0,0,0,.2); 
		border-radius:25px 0px 0px 25px;  /* Definimos la forma ovalada */
		margin:0px;
		visibility:visible;
		z-index:1000000;
		right: 2px; 
	}
	#cookie-notice-whatsapp button{color:inherit;background:#CEDAEC;border:0;padding:10px;margin-top:10px;width:100%;cursor:pointer}
/***End Cookie notice whatsapp***/

Como se puede ver en el código la posición es a la derecha con una separación mínima de 2px. Si quisiéramos el icono a la izquierda usaríamos left: 2px; en vez de right: 2px;

Eso sí, luego no olvideis sustituir los valores de la propiedad border-radius: 25px 0px 0px 25px; por los nuevos valores border-radius: 0px 25px 25px 0px; para que los bordes redondeados salgan a la derecha en vez de la izquierda.

CSS para controlar en que dispositivos lo queremos mostrar

En este caso le estamos diciendo que el id: cookie-notice-whatsapp queremos que desaparezca en pantallas superiores a 1281px.

¿Como gestiono la aparición o no de mis iconos en todos los demás tamaños/dispositivos? Mi referencia es este artículo de Pedro Ventura: Uso básico CSS3 Media Queries para crear versiones web para móvil

¿Dónde?

Lo copio en cualquier parte de mi fichero style.css o en la correspondiente zona de CSS Adicional si esta opción está implementada por la plantilla. Lo correcto sería copiarlo al final del fichero puesto que sytle.css se lee de arriba hacia abajo pero no estoy seguro de que influya la posición, es algo en lo que tengo que documentarme bien y posiblemente publicar un artículo sobre ello.

@media (min-width:1281px) {
	#cookie-notice-whatsapp {
		display:none;
	}
}

Función que inyecta código html justo después de la etiqueta <body>

Ahora vamos a aprovechar los «ganchos» o hooks de la plantilla Divi, en este caso se usó esta plantilla, para injectar código entre las etiquetas <header> </header> de todas las páginas de nuestra web.

¿Dónde?

Copias y pegas este código al final del fichero functions.php

Conclusiones

Con tres fragmentos de código hemos conseguido crear un icono flotante con una call to action que en este caso abre whatsapp directamente con el número de teléfono de la empresa sin la necesidad de instalar un plugin.

¿Y si queremos añadir más de un icono como es el caso de nuestra propia web https://escuelaweb.prodisnet.com?

Si estamos pensando en añadir 2 o 3 iconos más como llamadas de teléfono o enlaces a un canal de You Tube lo más fácil es duplicar todo el código CSS, HTML y PHP y simplemente asignarles un #id diferente y por supuesto colocar esos nuevos elementos un %top más abajo o más arriba para que no se superpongan.

Sin son más de 3 o 4 elementos lo elegante es jugar con la propiedad CSS Flex. Mi guía favorita para usarla además de la web w3schools.com es CSS-TRICKS (Flex)

Referencias

La idea de crear este elemento flotante sin plugin parte del artículo de Ricardo Prieto (Silo Creativo) con modificacones propias adaptadas a las necesidades de la web donde lo hemos implementado.