Tutorial WordPress para añadir botón en footer

Hola amigos, qué tal la semana? Bueno para hoy tengo un pequeño tutorial WordPress para añadir un botón en el footer.

Ya sabes, el típico botón fijo con un mensaje tipo “TE LLAMAMOS” o “CONSULTANOS” que al hacer clic en él nos redirige a la página de contacto.

La verdad que se le puede dar muchas funciones a este pequeño botón.

Por ejemplo podemos utilizarlo para añadir un código que muestre las últimas noticias o comentarios del blog.

Tutorial WordPress

Bueno, este tutorial lo realizó para WordPress pero es simple código HTML5 y CSS3, así que puede exportarse a cualquier plataforma.

De hecho, en este tutorial vamos a crear una plantilla HTML5, la cual nos servirá para que podamos exportarlo donde queramos.

¿Empezamos?

Creando archivo .html

Bien, este paso es sencillo. Crea una nueva carpeta en tu escritorio y dentro, crea un nuevo archivo de texto.

El nombre de la carpeta es irrelevante, pero para organizarnos, vamos a nombrar la carpeta como: PlantillaBtnf.

Lo mismo con el nombre de archivo, lo nombraremos como: Btnf.html.

Cuando renombramos el archivo de texto de “nuevo archivo.txt” a “Btnf.html” Windows, nos preguntará si queremos cambiar la extensión.

Responderemos que Sí.

Código HTML cabecera

Bueno, como es una plantilla HTML5 vamos a añadir el código de la cabecera o head.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>

Ahora, debajo de la etiqueta <head> vamos a añadir el código CSS para los estilos del botón.

Este código deberás importarlo o insertarlo allá donde quieres añadir tu botón.

Si el sitio donde vas a añadir el código CSS ya tiene un archivo .css omite las etiquetas <style> y </stile>

<style>
@media (min-width: 480px)
.msg-fijo {
    width: 150px;
}

.msg-fijo {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 12px;
    line-height: 16px;
    z-index: 1000;
    width: 100%;
    text-align: center;
}

.msg-fijo a {
    text-decoration: none;
    color: white;
    display: block;
    height: 34px;
    width: 15%;
    padding: 10px 0;
    background: #333;
    border-bottom: 3px solid #40BF70;
    transition: background 200ms linear;
}

* {
    box-sizing: border-box;
}

@media (min-width: 544px)
body {
    font-size: 16px !important;
    line-height: 24px;
    padding-top: 52px;
	font-family: opensans,Helvetica,Arial,sans-serif !important;

}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}
</style>

Y con esto ya hemos terminado la parte de la cabecera de la plantilla.

Ahora añadimos la etiqueta </head> para cerrar la cabecera.

Código HTML body

Bien, ahora vamos a la parte del cuerpo, donde irá el botón.

Justo debajo de la etiqueta </head> vamos a colocar el siguiente código:

<body>
<div class="msg-fijo" style="display: block;">
  <a href="#" title="Te llamamos" class="llamamos trackevent" data-category="we-call-you" data-label="fixed-tab">TE LLAMAMOS</a>
</div>

</body>

Como con el código de los estilos, si vamos a añadir el código del botón en una web, vamos a tener que omitir las etiquetas <body> y </body>.

Para finalizar vamos a añadir la etiqueta </html> para cerrar el código.

Nuestra plantilla debería quedar de la siguiente forma:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<style>
@media (min-width: 480px)
.msg-fijo {
    width: 150px;
}

.msg-fijo {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 12px;
    line-height: 16px;
    z-index: 1000;
    width: 100%;
    text-align: center;
}

.msg-fijo a {
    text-decoration: none;
    color: white;
    display: block;
    height: 34px;
    width: 15%;
    padding: 10px 0;
    background: #333;
    border-bottom: 3px solid #40BF70;
    transition: background 200ms linear;
}

* {
    box-sizing: border-box;
}

@media (min-width: 544px)
body {
    font-size: 16px !important;
    line-height: 24px;
    padding-top: 52px;
	font-family: opensans,Helvetica,Arial,sans-serif !important;

}

html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<div class="msg-fijo" style="display: block;">
  <a href="#" title="Te llamamos" class="llamamos trackevent" data-category="we-call-you" data-label="fixed-tab">TE LLAMAMOS</a>
</div>

</body>
</html>

Conclusión

Como dije al principio del artículo, este botón tiene infinidades de aplicaciones en nuestro sitio web, depende de ti encontrar su utilidad.

Espero que este artículo te haya servido de ayuda.