¿Quieres crear una barra de pie de página flotante pegajosa en WordPress? Hemos estado usando la barra de pie de página flotante en nuestro sitio web durante muchos años porque nos ayuda a reducir la tasa de rebote y aumentar las páginas vistas por los usuarios. Muchos de ustedes nos han preguntado cómo crear una barra flotante similar, así que aquí está. En este artículo, le mostraremos cómo crear una barra de pie de página flotante adhesiva en WordPress.
¿Qué es la barra de pie de página flotante?
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 más contenido ú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 especiales / venta
En este artículo, le mostraremos dos métodos para agregar una barra de pie de página flotante adhesiva en su sitio de WordPress. Uno usa un complemento mientras que el otro es un método de código que estamos usando en AprenderWP. Puedes elegir el que te resulte más fácil de usar.
Método 1: crear manualmente una barra de pie de página flotante 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 usando un cliente FTP o un administrador de archivos en cPanel.
En su cliente FTP, necesita ubicar el footer.php archivo en su carpeta de temas de WordPress y descárguelo a su escritorio. Se ubicaría 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/">WPBeginner 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 la 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 complemento Simple Custom CSS.
/*WPBeginner 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 floatbar.js en su escritorio.
Ahora abra su cliente FTP y conéctese a su servidor web. Vaya a la carpeta de su tema y localice la carpeta js. Serí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 floatbar.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 complemento específico del sitio.
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 puede rotar aleatoriamente múltiples 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 un popular complemento de generación de prospectos 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 una barra flotante de encabezado y pie de página que puede utilizar para mostrar un formulario de suscripción por correo electrónico, así como para promocionar enlaces/ofertas individuales.
El beneficio de usar 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 puedes usar 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 OptinMonster API de WordPress complemento en su sitio. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Estos complementos solo actúan como un conector entre su sitio de WordPress y OptinMonster.
Tras la activación, el complemento agregará un nuevo elemento de menú etiquetado OptinMonster a su barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del complemento.
Se le pedirá que proporcione su nombre de usuario y clave de la API de OptinMonster. Puede obtener estas claves desde su cuenta de OptinMonster.
Copie y pegue las claves en la configuración del complemento y haga clic en el botón ‘Conectar a OptinMonster’. El complemento 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 está 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 opció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 generador 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 optin, asegúrese de hacer clic en el botón Guardar.
Si bien estos se llaman optins, 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, desplace 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 » Opciones. Verá su optin listado aquí. Si no lo ve, haga clic en el botón Actualizar opciones y el complemento 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 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á disponible 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 atraer tráfico a su sitio de WordPress.
.