¿Quieres crear una barra de pie de página flotante y 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 y pegajosa en WordPress.
¿Qué es Floating Footer Bar?
Una barra de pie de página flotante y pegajosa le permite mostrar de forma prominente 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:
- Conducir más clics a otras entradas del blog
- Construya su lista de correo electrónico
- Llamar la atención sobre ofertas especiales/ventas
En este artículo, le mostraremos dos métodos para añadir una barra de pie de página flotante y pegajosa en su sitio WordPress. Uno usa un plugin 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 y pegajosa en WordPress
Este método requiere que añada código en sus archivos de WordPress. Si eres nuevo en añadir código, por favor, echa un vistazo a nuestra guía sobre cómo pegar fragmentos de la web en WordPress.
Primero, necesita conectarse a su sitio WordPress usando un cliente FTP o un administrador de archivos en cPanel.
En su cliente FTP, debe localizar el archivo footer.php en la carpeta temática de WordPress y descargarlo en 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 plano como el Bloc de notas y añadir el siguiente código justo antes de la etiqueta.
12345678910
- El enlace AprenderWP es el primer elemento
- WordPress.org es el segundo elemento
- Fácil de configurar (sin código)
- Puede mostrar barras flotantes personalizadas en diferentes páginas / categorías de su sitio web.
- Puede utilizarlo para crear su lista de correo electrónico, así como para promocionar ofertas.
ul> div>div>div
Puede añadir tantos elementos de la lista como desee. Le mostraremos cómo rotarlos al azar en cada carga de página.
El siguiente paso es añadir los estilos CSS.
Puedes añadir CSS al archivo style.css de tu tema de WordPress o usar el plugin Simple Custom CSS.
1234567891011121314141516171718192021222324252627282930313233343536373839404142434445/*WPBarra de pie de página principiante*/.fixedbar {background: #000; fondo: 0px; color:#fff; familia de fuentes: Arial, Helvética, sans-serif; izquierda:0; acolchado: 0px0; posición:fijo; tamaño de fuente:16px; anchura:100%; índice z:99999; flotación:izquierda; alineación vertical:medio; margen: 0px00; opacidad: 0,95; peso de fuente: negrita;}.boxfloat {alineación de texto:centro; anchura:920px; margen:0auto;}. #tips, #tips li {margin:0; padding:0; list-style:none}#tips {width:920px; font-size:20px; line-height:120%;}#tips li {padding: 15px0; display:none;}#tips li a{color: #DIFUNDE LA PALABRA-
Después de agregar el CSS, es posible que no pueda ver los cambios en su sitio web. Esto se debe a que hemos establecido 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.
Necesita abrir un editor de texto plano como el Bloc de notas en su ordenador y añadir este código a un archivo en blanco:
1234567891011(function($) {this.randomtip = function(){ varlength = $(«#tips li»).length; varran = Math.floor(Math.random.*length) + 1; $(«#tips li:nth-child(«+ ran + «)»).show();}; $(document).ready(function(){ randomtip();});})( jQuery);
Una vez que haya terminado, necesita guardar este archivo como floatingbar.js en su escritorio.
Ahora abra su cliente FTP y conéctese a su servidor web. Vaya a su carpeta temática y localice la carpeta js. Sería en un camino como este:
/wp-content/themes/your-theme-folder/js
Si no hay ninguna carpeta js en su directorio de temas, entonces necesita crear una.
Ahora necesitas subir el archivo floatingbar.js que creaste antes a la carpeta js que acabas de crear.
El siguiente paso es encolar (cargar) el archivo JavaScript en el tema de WordPress.
Pegue este código en el archivo functions.php de su tema o en un plugin específico del sitio.
1234functionwpb_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 mostrando al azar los diferentes elementos de su lista.
El beneficio de usar este método es que puedes rotar al azar múltiples enlaces en la barra de pie de página flotante como lo estamos haciendo nosotros.
Sin embargo, la dificultad es que necesitas añadir código. Además, no puedes usar esta barra flotante para otras cosas sin hacer demasiadas personalizaciones de CSS.
Método 2: Uso de OptinMontser para agregar una barra de pie de página flotante 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 que tiene OptinMonster es una barra flotante de encabezado y pie de página que puede utilizar para mostrar un formulario de opción de correo electrónico, así como para promover enlaces/ofertas individuales.
El beneficio de usar este método es:
La única desventaja 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 de OptinMonster.
Después de comprar OptinMonster (plan Plus o Pro), puede utilizar el plugin de la API de OptinMonster WordPress en su sitio. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Estos plugins sólo actúan como un conector entre su sitio WordPress y OptinMonster.
Al activarlo, 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 la API de OptinMonster. Puede obtener estas claves desde su cuenta de OptinMonster.
Copie y pegue las claves en la configuración del plugin y haga clic en el botónConnect to OptinMonster. El plugin ahora conectará tu sitio de WordPress a tu cuenta de OptinMonster.
A continuación, debe hacer clic en el botón «Crear nueva opción».
Esto le llevará a la páginaCrear nueva opción en el sitio web de OptinMonster.
Primero debe proporcionar un título para su Campaña de Opting y seleccionar un sitio web en el que utilizará esta opción. Si su sitio no aparece en la lista, haga clic en el enlace «Añadir un nuevo sitio web».
A continuación, puede hacer clic en la barra Flotante bajo el botón `Seleccione su tipo de opción para usar las plantillas disponibles para usar como barra flotante.
Puede personalizar todas estas plantillas a su gusto. Selecciona el que más se parezca a lo que tienes 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 de su opción.
Cuando haya terminado de configurar la apariencia de su opción, asegúrese de hacer clic en el botón de guardar.
Si bien estos son llamados optins, no siempre tienen que serlo. Puede utilizar la función Sí / No para añadir el botón para ver una entrada del blog o solicitar un descuento especial.
La primera vez que crees tu barra flotante, está Pausada por defecto.
Una vez que haya terminado de configurarlo, pase el ratón por encima de la barra de estado del menú superior y seleccione Iniciar campaña.
Su barra flotante está ahora lista para ser agregada a su sitio de WordPress.
Vuelva al área de administración de su sitio WordPress y visite OptinMonster » Optins . Verá que su opción aparece aquí. Si no lo ve, haga clic en el botón Actualizar opciones y el plugin lo mostrará.
Haga clic en el enlaceEditar configuración de salida para continuar.
En la página siguiente, marque la casilla situada junto a la opción `Habilitar optin en el sitio y, a continuación, haga clic en la configuración de guardar.
También puede utilizar la opción Avanzado para mostrar únicamente la barra flotante en determinados mensajes, páginas, categorías y otras áreas.
Eso es todo, la opción de barra de pie de página flotante está ahora en vivo en su sitio de WordPress.
Esperamos que este artículo le haya ayudado a añadir una barra de pie de página flotante a su sitio de WordPress. También puedes ver estos consejos útiles para dirigir el tráfico a tu sitio de WordPress.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.
Deja una respuesta