Cómo crear una barra de pie de página flotante "pegajosa" en WordPress

¿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, ya que nos ayuda a reducir la tasa de rebote y aumentar las visitas de los usuarios a la página. Muchos de ustedes nos han preguntado cómo hacer 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 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
• Llamar la atención sobre promociones especiales / rebajas

En este artículo, le mostraremos dos métodos para agregar una barra de pie de página flotante adhesiva a su sitio de WordPress. Uno usa un complemento mientras que el otro es un método de código que usamos en MundoCMS. 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 a sus 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 iniciar sesión en su sitio de WordPress utilizando un cliente FTP o un administrador de archivos en cPanel. En su cliente FTP, debe ubicar el archivo footer.php en la carpeta del tema de WordPress y descargarlo en su escritorio. Estaría ubicado en una ruta como esta: / wp-content / themes / your-theme-folder / Luego 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 etiqueta.

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 al archivo style.css de su tema de WordPress o usar el complemento CSS personalizado simple. / * Barra de pie de página de MundoCMS * / .fixedbar {background: # 000; bajo: 0px; color: #fff; familia tipográfica: Arial, Helvetica, sans-serif; izquierda: 0; relleno: 0px 0; posición: fija; tamaño de fuente: 16px; ancho: 100%; índice z: 99999; flotador izquierdo; alineación vertical: media; margen: 0px 0 0; opacidad: 0,95; peso de fuente: negrita; } .boxfloat {alineación de texto: centro; ancho: 920px; margen: 0 automático; } #tips, #tips li {margin: 0; acolchado: 0; estilo de lista: ninguno} #tips {ancho: 920px; tamaño de fuente: 20px; altura de la fila: 120%; } #tips li {relleno: 15px 0; pantalla: ninguna; } #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. De hecho, 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. Necesita abrir un editor de texto plano como el Bloc de notas en su computadora y agregar este código a un archivo vacío: (function ($) {this.randomtip = function () {var length = $ ("# tips li"). Length; var run = Math.floor (Math.random () * length) + 1; $ ("# tips li: nth-child (" + ran + ")"). Show ();}; $ (document) .ready (función () {sugerencia aleatoria ();});}) (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 su carpeta de temas y busque la carpeta js. Estaría en una ruta como esta: / wp-content / themes / your-theme-folder / js Si no hay una carpeta js en su directorio de temas, debe crear una. Ahora necesita descargar 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 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 varias 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 la barra de pie de página flotante como lo hacemos nosotros. Sin embargo, la dificultad es que debes agregar código. Además, no puede usar esta barra flotante para otras cosas sin hacer demasiada personalización 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 de OptinMonster es una barra flotante de encabezado y pie de página que puede usar para mostrar un formulario de registro de correo electrónico, así como promover enlaces / ofertas únicos. La ventaja de utilizar este método es:

• Fácil de instalar (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 y promover 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 complemento de la API de WordPress de OptinMonster 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 simplemente actúan como un conector entre su sitio de WordPress y OptinMonster. Tras la activación, el complemento agregará un nuevo elemento de menú titulado 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 API de OptinMonster. Puede obtener estas claves de 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. Luego tienes que hacer clic en el botón "Crear nueva opción".

Esto lo llevará a la página "Crear una 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".

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. Puede personalizar todas estas plantillas a su gusto. Elija el que más se parezca a lo que tiene en mente. Tan pronto como seleccione una plantilla, OptinMonster lanzará su personalizador de diseño. Este es un generador de apuntar y hacer clic donde puede configurar la apariencia y los ajustes 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. Aunque estos se denominan optin, no siempre tienen que serlo. Puede usar la función Sí / No para agregar un botón para ver la publicación del blog o solicitar un descuento especial. Cuando crea su barra flotante por primera vez, se pone en reposo 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 complemento lo mostrará. Haga clic en el enlace "Cambiar la 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 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. También puede consultar estos prácticos consejos para dirigir tráfico a su sitio de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.