¿Qué es la barra flotante de pie de página?
Una barra de pie de página flotante y pegajosa le permite mostrar de manera destacada su contenido importante a los usuarios. Esta barra permanece visible para los usuarios en todo momento, por lo que es más probable que hagan clic en ella y descubran contenido más útil.
Puede utilizar la barra de pie de página flotante para:
- Genere más clics en otras publicaciones del blog
- Crea tu lista de correo electrónico
- Llamar la atención sobre ofertas / rebajas especiales
En este artículo, le mostraremos dos métodos para agregar una barra de pie de página flotante pegajosa en su sitio de WordPress. Uno usa un plugin mientras que el otro es un método de código que estamos usando en . Puede elegir el que le resulte más fácil de usar.
Método 1: crear manualmente una barra de pie de página flotante y adhesiva en WordPress
Este método requiere que agregue código en sus archivos de WordPress. Si es la primera vez que agrega código, consulte nuestra guía sobre cómo pegar fragmentos de la web en WordPress.
Primero, debe conectarse a su sitio de WordPress utilizando un cliente FTP o un administrador de archivos en cPanel.
En su cliente FTP, debe ubicar el footer.php en su carpeta de temas de WordPress y descárguelo en su escritorio. Estaría ubicado en un camino como este:
/wp-content/themes/your-theme-folder/
A continuación, debe abrir el archivo footer.php en un editor de texto sin formato como el Bloc de notas y agregar el siguiente código justo antes del </body> etiqueta.
<div class="fixedbar"> <div class="boxfloat"> <ul id="tips"> <li><a href="https://www.wpbeginner.com/"> Link is the First Item</a></li> <li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li> </ul> </div> </div>
Puede agregar tantos elementos de lista como desee. Le mostraremos cómo rotarlos aleatoriamente en cada carga de página.
El siguiente paso es agregar los estilos CSS.
Puede agregar CSS a su tema de WordPress style.css archivo o use el CSS personalizado simple plugin.
/* Footer Bar*/
.fixedbar {
background: #000;
bottom: 0px;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
left:0;
padding: 0px 0;
position:fixed;
font-size:16px;
width:100%;
z-index:99999;
float:left;
vertical-align:middle;
margin: 0px 0 0;
opacity: 0.95;
font-weight: bold;
}
.boxfloat {
text-align:center;
width:920px;
margin:0 auto;
}
#tips, #tips li {
margin:0;
padding:0;
list-style:none
}
#tips {
width:920px;
font-size:20px;
line-height:120%;
}
#tips li {
padding: 15px 0;
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text-decoration: none;
}
Después de agregar el CSS, es posible que no pueda ver los cambios en su sitio web. Esto se debe a que hemos configurado la visualización de los elementos de nuestra lista en ninguno.
A continuación, usaremos jQuery para mostrar aleatoriamente un elemento de nuestra lista en cada carga de página.
Debe abrir un editor de texto sin formato como el Bloc de notas en su computadora y agregar este código a un archivo en blanco:
(function($) {
this.randomtip = function(){
var length = $("#tips li").length;
var ran = Math.floor(Math.random()*length) + 1;
$("#tips li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
randomtip();
});
})( jQuery );
Una vez que haya terminado, debe guardar este archivo como floatingbar.js en su escritorio.
Ahora abra su cliente FTP y conéctese a su servidor web. Vaya a la carpeta de su tema y busque la carpeta js. Estaría en un camino como este:
/wp-content/themes/your-theme-folder/js
Si no hay una carpeta js en su directorio de temas, entonces necesita crear una.
Ahora debe cargar el archivo floatingbar.js que creó anteriormente en la carpeta js que acaba de crear.
El siguiente paso es poner en cola (cargar) el archivo JavaScript en su tema de WordPress.
Pegue este código en el archivo functions.php de su tema o en un sitio específico plugin.
function wpb_floating_bar() {
wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );
Eso es todo, ahora puede visitar su sitio web para ver la barra de pie de página flotante en acción. Vuelva a cargar la página un par de veces para ver la barra de pie de página que muestra aleatoriamente diferentes elementos de su lista.
El beneficio de usar este método es que puedes rotar aleatoriamente varios enlaces en la barra de pie de página flotante como lo estamos haciendo.
Sin embargo, la dificultad es que necesita agregar código. Además, no puede usar esta barra flotante para otras cosas sin hacer demasiadas personalizaciones de CSS.
Método 2: usar OptinMontser para agregar una barra de pie de página flotante en WordPress
OptinMonster es una popular generación de leads plugin que funciona en todos los sitios web. Le ayuda a convertir a los visitantes del sitio web en suscriptores y clientes.
Una de las características que tiene OptinMonster es barra flotante de encabezado y pie de página que puede utilizar para mostrar un formulario de suscripción de correo electrónico, así como para promocionar enlaces / ofertas individuales.
El beneficio de utilizar este método es:
- Fácil de configurar (sin código)
- Puede mostrar barras flotantes personalizadas en diferentes páginas / categorías de su sitio web.
- Puede usarlo para crear su lista de correo electrónico y promocionar ofertas.
El único inconveniente es que OptinMonster es un servicio de pago. Pero puede utilizar nuestro Cupón OptinMonster: WPB10 para obtener un 10% de descuento en cualquier plan OptinMonster.
Después de haber comprado OptinMonster (Plan Plus o Pro), puede utilizar el API de OptinMonster WordPress plugin en tu sitio. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Esto plugins simplemente actúa como un conector entre su sitio de WordPress y OptinMonster.
Tras la activación, el plugin agregará un nuevo elemento de menú etiquetado como OptinMonster a su barra de administración de WordPress. Al hacer clic en él, te llevará a pluginpágina de configuración.
Se le pedirá que proporcione su nombre de usuario y clave de API de OptinMonster. Puede obtener estas claves de su cuenta de OptinMonster.
Copie y pegue las claves en el plugin configuración y haga clic en el botón ‘Conectar a OptinMonster’. La plugin ahora conectará su sitio de WordPress a su cuenta de OptinMonster.
A continuación, debe hacer clic en el botón ‘Crear nueva opción’.
Esto lo llevará a la página ‘Crear nueva opción’ en el sitio web de OptinMonster.
Primero, debe proporcionar un título para su campaña Optin y seleccionar un sitio web donde utilizará esta opción. Si su sitio no aparece en la lista, haga clic en el enlace «Agregar un nuevo sitio web».
A continuación, puede hacer clic en la barra flotante debajo de ‘Seleccione su tipo de suscripción’ para usar las plantillas disponibles para usar como una barra flotante.
Puede personalizar todas estas plantillas a su gusto. Seleccione el que se parezca más a lo que tiene en mente.
Tan pronto como seleccione una plantilla, OptinMonster lanzará su personalizador de diseño. Es un constructor de apuntar y hacer clic donde puede configurar la apariencia y la configuración para su opción.
Cuando haya terminado de configurar la apariencia de su suscripción, asegúrese de hacer clic en el botón Guardar.
Si bien estos se denominan optin, no siempre tienen que serlo. Puede usar la función Sí / No para agregar el botón para ver una publicación de blog o reclamar un descuento especial.
Cuando crea su barra flotante por primera vez, está en pausa de forma predeterminada.
Una vez que haya terminado de configurarlo, coloque el cursor sobre la barra de estado en el menú superior y elija Iniciar campaña.
Su barra flotante ahora está lista para agregarse a su sitio de WordPress.
Regrese al área de administración de su sitio de WordPress y visite OptinMonster »Optins. Verá su opción de suscripción aquí. Si no lo ve, haga clic en el botón Actualizar opciones y el plugin lo mostrará.
Haga clic en el enlace ‘Editar configuración de salida’ para continuar.
En la página siguiente, marque la casilla junto a la opción ‘Habilitar suscripción en el sitio’ y luego haga clic en guardar la configuración.
También puede usar la opción Avanzado para mostrar solo la barra flotante en publicaciones, páginas, categorías y otras áreas específicas.
Eso es todo, la opción de barra de pie de página flotante ahora está activa en su sitio de WordPress.
Esperamos que este artículo le haya ayudado a agregar una barra de pie de página flotante a su sitio de WordPress. Es posible que también desee ver estos consejos prácticos para dirigir el tráfico a su sitio de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Cómo crear una barra de pie de página flotante «pegajosa» en WordPress .
Fuente: wpbeginner