¿Quiere crear un pie de página flotante adhesivo 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 hacer una barra tan flotante, así que aquí está. En este artículo, le mostraremos cómo crear un pie de página flotante adhesivo en WordPress.
¿Qué es la barra de pie de página flotante?
Una barra de pie de página flotante pegajosa le permite mostrar a los usuarios su contenido importante de manera destacada. Esta barra siempre permanece visible para los usuarios, 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:
- Atraiga más clics a otras publicaciones del blog
- Crea tu lista de correo
- Llamar la atención sobre ofertas / ventas especiales
En este artículo, le mostraremos dos métodos para agregar un pie de página flotante adhesivo en su sitio de WordPress. Uno usa un plugin mientras que el otro es un método de código que estamos usando en TrucosWP. Puede elegir el que le resulte más fácil de usar.
Método 1: cree manualmente una barra de pie de página flotante pegajosa en WordPress
Este método requiere agregar código en archivos de WordPress. Si es nuevo en agregar 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, necesita ubicar el archivo footer.php en su carpeta de temas de WordPress y descárguelo en su escritorio. Estarí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.trucoswp.com/">TrucosWP 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 o utilice el sencillo plugin CSS personalizado.
/*TrucosWP 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 hecho esto, 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 el directorio de temas, debe crear una.
Ahora debe cargar el archivo floatingbar.js que creó anteriormente en la carpeta js que acaba de crear.
El siguiente paso es agregar (cargar) el archivo JavaScript en su tema de WordPress.
Pegue este código en el archivo functions.php de su tema o en un plugin 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 el pie de página móvil 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.
La ventaja de utilizar este método es que puede rotar aleatoriamente varios enlaces en el pie de página flotante mientras lo hacemos.
Sin embargo, la dificultad es que debe agregar algún 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 un pie de página móvil en WordPress
OptinMonster es un popular plugin 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 de OptinMonster es un archivo barra flotante de encabezado y pie de página que puede utilizar para ver un formulario de aceptación de correo electrónico y para promocionar enlaces / ofertas individuales.
La ventaja 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 comprar OptinMonster (Plan Plus o Pro), puede utilizar el API de OptinMonster WordPress plug-in en su sitio. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Este plugin 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ú llamado OptinMonster a la barra de administración de WordPress. Al hacer clic en él, accederá a la página de configuración del plugin.
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 la configuración del plugin y haga clic en el botón «Conectar a OptinMonster». El 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 de 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».
Luego 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.
Puedes personalizar todas estas plantillas a tu 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 en el que puede configurar el aspecto y la configuración de su opción.
Cuando haya terminado de configurar el aspecto 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 solicitar un descuento especial.
Cuando crea la barra flotante por primera vez, se detiene de forma predeterminada.
Una vez que haya terminado de configurar, 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 Opciones de actualización y el plugin lo mostrará.
Haga clic en el enlace «Cambiar 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 la barra flotante solo en publicaciones, páginas, categorías y otras áreas específicas.
Eso es todo, la opción 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 útiles para dirigir el tráfico a su sitio de WordPress.
¿Te ha resultado útil??
0 / 0