Cómo añadir notas al pie de página sencillas y elegantes en tus publicaciones de blog de WordPress

¿Alguna vez has visto sitios web que tienen números pequeños, en superíndice, en el texto que enlazan a información adicional al final de la página? Esas se llaman notas al pie de página, y son una excelente manera de proporcionar contexto adicional o citar fuentes sin saturar tu contenido principal.

Algunos de nuestros lectores nos han preguntado cómo agregar notas al pie de página a sus publicaciones de WordPress, especialmente al escribir contenido con mucha investigación o artículos que necesitan citas.

En este artículo, te mostraremos cómo agregar notas al pie de página simples y elegantes a tus publicaciones de blog de WordPress, paso a paso.

¿Por qué agregar notas al pie de página a tus publicaciones de blog de WordPress?

Si tienes un blog educativo, publicas investigaciones o cubres noticias, las notas al pie de página son una excelente manera de dar más contexto a tu contenido. Puedes usarlas para agregar comentarios, resaltar hechos importantes o insertar citas de fuentes académicas en tu sitio web.

Una nota al pie de página generalmente aparece como un número pequeño en superíndice dentro del cuerpo principal de tu texto. El contenido real de la nota al pie de página se coloca al final de la página o aparece como una tooltip para distinguirla del contenido principal.

Aquí tienes un ejemplo:

Además de proporcionar claridad y transparencia a tus lectores, las notas al pie de página pueden hacer que tu sitio web de WordPress se vea más profesional y confiable. Demuestran que has investigado y que tienes las fuentes para respaldar tus afirmaciones.

Afortunadamente, el editor de WordPress.org tiene una función de notas al pie integrada que puedes usar fácilmente para insertar contexto adicional. De esta manera, no tendrás que agregar las notas al pie manualmente tú mismo.

Esta guía te mostrará cómo agregar notas al pie de página en WordPress a tus publicaciones o páginas de blog usando dos métodos. Uno es usando el bloque de Notas al pie en el editor de Gutenberg, y el otro es con un plugin.

Puedes usar los enlaces a continuación para saltar a un método específico:

• Método 1: Cómo agregar notas al pie en WordPress sin un plugin
• Método 2: Cómo agregar notas al pie de página en WordPress con un plugin
• Aprende más formas de personalizar tu contenido de WordPress

Método 1: Cómo agregar notas al pie en WordPress sin un plugin

Este método es el mejor para personas que quieren usar notas al pie simples en publicaciones de blog y no quieren instalar un plugin para hacerlo.

Para usar el bloque de Notas al pie de WordPress, necesitarás abrir el editor de bloques de Gutenberg para una publicación nueva o existente.

Después de eso, puedes comenzar a agregar bloques de párrafo, imágenes y otros tipos de contenido a la publicación del blog. Incluso puedes agregar letras capitales para estilizar tu texto y captar la atención de los lectores.

Ahora, simplemente resalta una palabra en tu contenido a la que quieras agregar la nota al pie. En la barra de herramientas del bloque, haz clic en la flecha desplegable y selecciona 'Nota al pie'.

Ahora serás redirigido a la parte inferior de la página, donde se ha agregado automáticamente el bloque de Notas al pie. Aquí, puedes escribir tu información adicional.

Además, puedes personalizar el color del texto del bloque, la tipografía, las dimensiones y el borde utilizando las configuraciones en el panel derecho.

Si hay enlaces en la nota al pie, es posible que desees cambiar el color de los enlaces para que resalten.

Siéntete libre de repetir este paso para incluir tantas notas al pie como necesites.

Cuando previsualices tu sitio de WordPress, debería haber un enlace a la nota al pie en la oración que resaltaste anteriormente.

Si haces clic en el hipervínculo, te llevará a la parte inferior de la página con la nota al pie.

Aquí, también puedes hacer clic en la flecha hipervinculada para volver a la sección donde se asignó la nota al pie.

También puedes previsualizar tu sitio web en el móvil para asegurarte de que la nota al pie sea legible en las pantallas de los smartphones.

Si bien este método es bastante sencillo para principiantes, no ofrece muchas opciones de personalización. Si buscas más formas de cambiar la apariencia de las notas al pie, continúa con el siguiente método.

Método 2: Cómo agregar notas al pie de página en WordPress con un plugin

Otra forma de crear notas al pie es usar el plugin gratuito Modern Footnotes. A diferencia del bloque de notas al pie, ofrece muchas más opciones para modificar su apariencia.

Por ejemplo, puedes hacer que la nota al pie aparezca como una ventana emergente (tooltip), así como información adicional al final de la página.

Lo primero que harás es instalar el plugin Modern Footnotes. Para más información sobre la instalación de plugins, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Nota: Si no estás seguro de si debes usar este plugin, puedes instalarlo en el WordPress Playground temporal y jugar con él.

Configuración de los ajustes del plugin Modern Footnotes

Con el plugin instalado, ahora puedes ir a Ajustes » Modern Footnotes. Aquí es donde puedes configurar los ajustes de las notas al pie según tus preferencias.

Vamos a revisar cada ajuste uno por uno.

'Comportamiento de la nota al pie en escritorio' te permite seleccionar cómo debe comportarse la nota al pie cuando el sitio web se está viendo en una computadora de escritorio.

Puedes hacer que la nota al pie aparezca cuando el cursor se posa sobre la información emergente o cuando el usuario hace clic en ella. Alternativamente, la nota al pie puede expandirse debajo del texto referenciado.

La elección depende de tus preferencias. Dicho esto, la nota al pie se expandirá debajo del texto de forma predeterminada en pantallas móviles.

Además de eso, también puedes marcar la casilla 'Hacer que el contenido de la nota al pie aparezca en la información emergente nativa del navegador web al pasar el cursor sobre el número de nota al pie' si es necesario. Esto significa que la nota al pie aparecerá en la información emergente del navegador en lugar de la del plugin cuando el cursor se pose sobre el texto.

Recomendamos desactivar esta configuración si eliges la opción de información emergente para el comportamiento de la nota al pie en escritorio. De lo contrario, tendrás dos informaciones emergentes para la misma nota al pie, lo que puede resultar molesto para los lectores.

Abajo, también puedes elegir mostrar la lista de notas al pie al final de las publicaciones. De esta manera, el lector puede ver toda la información adicional en un solo lugar.

También podrías querer habilitar esta función cuando la publicación del blog se sindica a través de feeds RSS.

Desplazándote hacia abajo, puedes optar por insertar un encabezado para tu lista de notas al pie y elegir una etiqueta de encabezado para él. Esto ayuda a separar el contenido real de tu publicación de blog de las notas al pie. Puedes escribir algo como Referencias, Notas al pie, Citaciones o Información adicional.

Si deseas agregar CSS personalizado para modificar el texto de la nota al pie, siéntete libre de insertarlo en el cuadro 'CSS personalizado de nota al pie moderna'.

Por último, pero no menos importante, puedes personalizar el shortcode de Modern Footnotes si no quieres usar la versión integrada. Asegúrate de ingresar el shortcode sin los corchetes.

Una vez que estés satisfecho con la configuración, simplemente haz clic en ‘Guardar cambios’.

Agregar notas al pie de página usando el plugin Modern Footnotes

Ahora que has configurado los ajustes de Modern Footnotes, insertemos algunas notas al pie en tu contenido. Abre el editor de bloques para una publicación o página nueva o existente.

Hay dos maneras de agregar una nota al pie. Una es con un shortcode, que es lo que recomendamos.

Primero, encuentra la oración a la que quieres insertar una nota al pie. Luego, justo al lado de esa oración, escribe el siguiente shortcode:

[mfn]Inserta tu nota al pie aquí[/mfn]

Asegúrate de reemplazar el texto entre los corchetes con tu información.

También sugerimos colocar el código corto dentro del mismo bloque que la oración, justo al lado del texto, sin ningún espacio entre ellos, tal como en el ejemplo a continuación. De lo contrario, la nota al pie puede parecer desconectada del texto.

El otro método es escribir el texto de tu nota al pie junto a la oración a la que deseas agregarla. Asegúrate de que no haya espacio entre el texto de la nota al pie y la oración.

En el ejemplo a continuación, queremos agregar una nota al pie que contenga una cita académica para la oración que comienza con ‘Los estudios sugieren…’.

A continuación, resalta la nota al pie y haz clic en el botón de flecha hacia abajo en la barra de herramientas. Después de eso, selecciona ‘Agregar una nota al pie’.

La desventaja del segundo método es que puede ser difícil rastrear qué líneas de texto tienen una nota al pie y cuáles no cuando estás editando el contenido. Es por eso que recomendamos el método del código corto.

Cuando previsualices la publicación de blog, verás que ahora hay un número junto a la oración. Si usas la opción de tooltip, así es como se verá la nota al pie:

Por otro lado, la nota al pie aparecerá debajo del texto si usas el formato expandible.

Así es como se ve cuando haces clic en el número:

Finalmente, si eliges mostrar todo el contenido de la nota al pie al final de la publicación, puedes desplazarte hacia abajo para encontrar todo allí.

Deberían estar en algún lugar encima de la sección de comentarios.

Aprende más formas de personalizar tu contenido de WordPress

Además de las notas al pie, hay muchas maneras de hacer que tu contenido de WordPress sea más interesante y legible para los visitantes.

Por ejemplo, puedes agregar fuentes personalizadas a WordPress. De esta manera, puedes crear una tipografía que se vea única y diferente de otros competidores, haciendo que tu sitio web sea más memorable.

Adicionalmente, puedes resaltar ciertos textos en tus bloques de texto para dirigir la atención de los usuarios a la información más importante.

Otra cosa que puedes hacer es mostrar una vista previa en vivo de tus enlaces internos o externos cuando los visitantes pasen el cursor sobre ellos mientras navegan por tu contenido. Es una forma fácil pero atractiva de previsualizar qué tipo de página verán si hacen clic en el enlace.

Aquí tienes otros consejos que puedes consultar:

• Cómo resaltar publicaciones nuevas para visitantes recurrentes en WordPress
• Cómo agregar contenido dinámico en WordPress (Guía para principiantes)
• Cómo agregar un redimensionador de fuentes en WordPress para accesibilidad
• Cómo agregar modo oscuro a tu sitio web de WordPress (Fácil)
• Cómo Mostrar Etiquetas de Información Nutricional en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar notas al pie de página a tu sitio web de WordPress. También te puede interesar leer nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra guía sobre cómo editar un sitio web de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.