Cómo añadir notas a pie de página sencillas y elegantes en las entradas de su blog de WordPress

¿Has visto alguna vez sitios web con pequeños números en superíndice en el texto que enlazan con información adicional al final de la página? Se llaman notas a pie de página y son una forma estupenda de proporcionar contexto adicional o citar fuentes sin saturar el contenido principal.

Algunos de nuestros lectores nos han preguntado cómo añadir notas a pie de página a sus entradas de WordPress, sobre todo cuando escriben contenidos que requieren mucha investigación o artículos que necesitan citas.

En este artículo, le mostraremos cómo añadir notas a pie de página sencillas y elegantes a las entradas de su blog de WordPress, paso a paso.

¿Por qué añadir notas a pie de página a las entradas de tu blog en WordPress?

Si dirige un blog educativo, publica investigaciones o cubre noticias, las notas a pie de página son una forma estupenda de dar más contexto a su contenido. Puede utilizarlas para añadir comentarios, resaltar hechos importantes o insertar citas de fuentes académicas en su sitio web.

Una nota a pie de página suele aparecer como un pequeño número en superíndice dentro del cuerpo principal del texto. El contenido de la nota al pie se coloca en la parte inferior de la página o aparece como información emergente para distinguirlo del contenido principal.

He aquí un ejemplo:

Además de aportar claridad y transparencia a sus lectores, las notas a pie de página pueden hacer que su sitio web en WordPress parezca más profesional y digno de confianza. Demuestran que has investigado y que tienes las fuentes compatibles con / dar soporte a tus afirmaciones.

Afortunadamente, el editor de WordPress.org incorpora una característica de notas al pie que puedes utilizar fácilmente para insertar contexto adicional. De este modo, no tendrás que añadir manualmente las notas a pie de página.

Esta guía te mostrará cómo añadir notas al pie de página de WordPress a las entradas o páginas de tu blog utilizando dos métodos. Uno es con el bloque Notas al pie en el editor Gutenberg, y el otro es con un plugin.

Puede utilizar los siguientes enlaces para saltar a un método específico:

Método 1: Cómo añadir notas a pie de página en WordPress sin plugins

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

Para utilizar el bloque Notas al pie de WordPress, tendrás que abrir el editor de bloques de Gutenberg para una entrada nueva o existente.

Después, puede empezar a añadir bloques de párrafos, imágenes y otros tipos de contenido a la entrada del blog. Incluso puedes añadir vers alitas para dar estilo al texto y captar la atención de los lectores.

Ahora, sólo tienes que resaltar una palabra de tu contenido a la que quieras añadir la nota a pie de página. En la barra de herramientas del bloque, haz clic en la flecha desplegable y selecciona “Nota al pie”.

Ahora será redirigido a la parte inferior de la página, donde se ha añadido automáticamente el bloque Notas al pie. Aquí puede introducir información adicional.

Además, puede personalizar el color del texto, la tipografía, las dimensiones y el borde del bloque mediante los ajustes del panel derecho.

Si hay enlaces en la nota a pie de página, puede cambiar el color de los enlaces para que destaquen.

No dude en repetir este paso para incluir tantas notas a pie de página como necesite.

Cuando previsualice su sitio de WordPress, debería haber un enlace a pie de página con la frase que ha resaltado antes.

Si hace clic en el hipervínculo, le llevará al final de la página con la nota a pie de página.

Aquí también puede hacer clic en la flecha con hipervínculo para volver a la sección en la que está asignada la nota a pie de página.

También puede obtener una vista previa de su sitio web en el móvil para asegurarse de que la nota a pie de página es legible en las pantallas de los teléfonos inteligentes.

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

Método 2: Cómo añadir notas al pie en WordPress con un plugin

Otra forma de crear notas a pie de página es utilizar el plugin gratuito Modern Footnotes. A diferencia del bloque Notas al pie, ofrece muchas más opciones para modificar el aspecto de las notas al pie.

Por ejemplo, puede hacer que la nota al pie aparezca como información emergente, así como información extra en la parte inferior de la página.

Lo primero que debes hacer es instalar el plugin Modern Footnotes. Para obtener más información acerca de la instalación de plugins, marca / comprobar nuestra guía sobre cómo instalar un plugin de WordPress.

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

Configuración de los ajustes del plugin Modern Footnotes

Con el plugin instalado, ahora puedes ir a Ajustes ” Notas al pie modernas. Aquí es donde puedes establecer los ajustes de las notas al pie según tus preferencias.

Vamos a establecer los ajustes uno por uno.

La opción “Comportamiento de la nota al pie de página en un ordenador de sobremesa” le permite seleccionar el comportamiento de la nota al pie de página cuando el sitio web se visualiza en un ordenador de sobremesa.

Puede hacer que la nota al pie aparezca al pasar el cursor sobre la información emergente o cuando el usuario haga clic en ella. Alternativamente, la nota al pie puede expandirse bajo el texto de la nota.

La opción que elija dependerá de sus preferencias. Dicho esto, la nota a pie de página se expandirá debajo del texto por defecto en las pantallas de los móviles.

Además, también puede marcar / comprobar la casilla ‘Hacer que el contenido de la nota al pie aparezca en la información emergente nativa del navegador / explorador al pasar el cursor sobre el número de la nota’ si es necesario. Esto significa que la nota al pie aparecerá en la información emergente del navegador en lugar de en la del plugin cuando el cursor pase por encima del texto.

Le recomendamos que desactive este ajuste si elige la opción de información emergente para el comportamiento de las notas al pie de página del escritorio. De lo contrario, aparecerán dos informaciones emergentes para la misma nota, lo que puede resultar molesto para los lectores.

A continuación, también puede optar por mostrar el catálogo de notas a pie de página en la parte inferior de las entradas. De este modo, el lector puede ver toda la información adicional en un solo lugar.

También puede activar esta característica cuando la entrada del blog se sindica a través de feeds RSS.

Desplazándose hacia abajo, puede optar por insertar un encabezado para su anuncio / catálogo / ficha y elegir una etiqueta de encabezado para el mismo. Esto ayuda a separar el contenido real de la entrada del blog de las notas a pie de página. Puede escribir algo como Referencias, Notas a pie de página, Citas o Información adicional.

Si quieres añadir algún CSS personalizado para modificar el texto de la nota al pie, no dudes en insertarlo en la casilla “CSS personalizado de la nota al pie moderna”.

Por último, puedes personalizar el shortcode de Modern Footnotes si no quieres utilizar la versión integrada. Asegúrate de introducir el shortcode sin los corchetes.

Cuando estés satisfecho con los ajustes, sólo tienes que hacer clic en “Guardar cambios”.

Añadir notas a pie de página con el plugin Modern Footnotes

Ahora que ya has establecido los ajustes de Modern Footnotes, vamos a insertar algunas notas a pie de página en tu contenido. Abre el editor de bloques para una entrada o página nueva o existente.

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

En primer lugar, busque la frase en la que desea insertar una nota a pie de página. A continuación, justo al lado de esa frase, escriba el siguiente shortcode:

[mfn]Inserte su nota a pie de página aquí[/mfn]

Asegúrese de sustituir el texto entre paréntesis por su información.

También sugerimos colocar el shortcode dentro del mismo bloque que la frase, justo al lado del texto, sin ningún espacio intermedio, como en el ejemplo siguiente. De lo contrario, la nota al pie puede parecer desconectada del texto.

El otro método consiste en escribir el texto de la nota a pie de página a continuación de la frase a la que desea añadir la nota. Asegúrate de que no haya ningún espacio entre el texto de la nota y la frase.

En el ejemplo siguiente, queremos añadir una nota a pie de página que contenga una cita académica para la frase que empieza por “Los estudios sugieren…”.

A continuación, resalte la nota a pie de página y haga clic en el botón con la flecha hacia abajo de la barra de herramientas. A continuación, seleccione “Añadir una nota al pie”.

El inconveniente del segundo método es que puede resultar difícil hacer un seguimiento de las líneas de texto que han recibido una nota a pie de página y las que no cuando se está editando el contenido. Por eso recomendamos el método shortcode.

Cuando previsualice la entrada del blog, verá que ahora hay un número al lado de la frase. Si utiliza la opción de información emergente, este es el aspecto que tendrá la nota a pie de página:

En cambio, la nota a pie de página aparecerá debajo del texto si utiliza el formato ampliable.

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

Por último, si opta por mostrar todo el contenido de las notas a pie de página en la parte inferior de la entrada, puede desplazarse hacia abajo para encontrarlo todo allí.

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

Más información sobre cómo personalizar el contenido de WordPress

Además de las notas a pie de página, hay muchas formas de hacer que el contenido de WordPress resulte más interesante y legible para los visitantes.

Por ejemplo, puede añadir fuentes personalizadas a WordPress. De esta forma, puedes crear una tipografía con un aspecto único y diferente al de otros competidores, lo que hará que tu sitio web sea más memorable.

Además, puede resaltar determinados textos en sus bloques de texto para dirigir la atención de los usuarios a la información más importante.

También puede mostrar una vista previa en directo de sus enlaces internos o externos cuando los visitantes pasen el cursor por encima a medida que avanzan por su contenido. Es una forma fácil y atractiva de ver una vista previa del tipo de página que verán si enlazan.

Aquí tienes otros consejos que puedes marcar / comprobar:

• Cómo destacar nuevas entradas para los visitantes que regresan en WordPress
• Cómo añadir contenido dinámico en WordPress (Guía para principiantes)
• Cómo añadir un redimensionador de fuentes en WordPress para mejorar la accesibilidad
• Cómo añadir el modo oscuro a su sitio web 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 añadir notas a pie de página a tu sitio web en WordPress. Puede que también quieras leer nuestra selección de los mejores maquetadores de arrastrar y soltar para WordPress y nuestra guía práctica sobre cómo editar un sitio web en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.