¿Quieres añadir notas a pie de página a las entradas de tu blog en WordPress?
Si está escribiendo un artículo que hace referencia a una investigación o contiene mucha información compleja, quizá le convenga utilizar notas a pie de página en su contenido. Se trata de pequeñas marcas numeradas en un texto que aportan contexto adicional a una frase o párrafo.
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.
El editor de WordPress.org cuenta ahora con una característica integrada de notas al pie que puede utilizar fácilmente para insertar contexto adicional.
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: Añadir notas a pie de página de WordPress con el editor Gutenberg
Este método es mejor para las personas que quieren usar notas al pie simples y no quieren instalar un plugin para este propósito.
Para utilizar el bloque Notas al pie de WordPress, tendrás que abrir el editor de bloques de Gutenberg para una entrada o página nueva o existente.
Después, sólo tienes que resaltar una palabra del 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, la tipografía, las dimensiones y el borde del bloque mediante los ajustes del panel derecho.
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.
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: Añadir notas al pie en WordPress con un plugin
Otro método para 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.
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.
Consejo extra: Utilice los campos personalizados de WordPress para añadir más información a su contenido
Además de las notas a pie de página, otra forma de proporcionar información adicional en sus entradas y páginas de WordPress es mediante el uso de campos personalizados.
Los campos personalizados de WordPress son metadatos que se utilizan para insertar información adicional en una entrada o página. Por ejemplo, si tiene un blog con varios autores, es posible que desee mostrar los nombres de sus colaboradores en la entrada del blog, no sólo el suyo.
Si usted está interesado en los campos personalizados, sólo tiene que marcar / comprobar nuestra WordPress campos personalizados 101 guía.
Le mostraremos cómo añadir campos personalizados utilizando el editor de bloques y algunos plugins, incluyendo WPCode. Este plugin ofrece una forma segura y fácil de añadir fragmentos de código a tu sitio web WordPress, incluso si eres principiante.
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. También puedes echar un vistazo a nuestra selección de los mejores plugins de tipografía para WordPress y a nuestra guía práctica sobre cómo mostrar y ocultar texto en entradas de WordPress con el efecto conmutador.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Sometimes on the site I use excerpts from books or other blogs as opinions about something, and I always added them below the article. But this method is much more elegant, as it adds a small link to the information below the line directly to the excerpt. From the website user’s point of view, it will be a much better way to solve this. Thanks for another one of many inspirations on how to make content more user-friendly.
THANKGOD JONATHAN says
This is really good. But since Gutenberg editor work similar with Block editor, should I just use the block editor or must install the Gutenberg editor again?
WPBeginner Support says
They are the same editor, it just has two different names
Administrador
samarth says
I have a question. Adding Footnotes through the custom (HTML) method will cause in-article wording and would the article length will be increased?
And, If through the plugin, the words of footnotes won’t be counted as blog post words?
sorry for any grammatical mistakes.
WPBeginner Support says
Both methods would be adding text to your article, we would not recommend either method if you only wanted to increase your word count.
Administrador
Ciprian says
Hi,
Thanks for this info, I`ve tried it and it`s working fine, but now I have a curiosity:
– the link for this notes are dofollow, from seo point of view, is this ok or we should make them nofollow?
– if we need them nofollow, how can we do that?
Thanks a lot.
WPBeginner Support says
For nofollowing links, you would want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/how-to-add-nofollow-links-in-wordpress/
Administrador
Didier Van Bogget says
Work fine ! Really simple. Thank you.
David says
Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?
Editorial Staff says
Are you using WordPress.com or self-hosted WordPress.org?
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrador
Hank says
I added the plugin and tried some footnotes. When I click on the little number that should link to the footnote, it takes me below the comment box on the WordPress page and doesn’t display the footnote. I have to scroll up to see the footnote.
Does anyone know how I can get it to land on the actual footnote?
Editorial Staff says
It sounds like a CSS issue in your theme which causing this.
Administrador
Hank DeBey says
I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.
Evan Lowry says
Does it still do this when you view the page when you are signed out of the Dashboard? For me, when the dashboard menu is up top (when I am signed in), it makes it appear that the FN links are taking me too low–but then when I view the same page logged out, as a reader would, the FNs work properly.
Evan Lowry says
This is a great plugin, but in the version I downloaded for 3.5.1, the footnotes reset after ten, back to zero, in the footer. Does anyone know how to fix this? I just want it to continue: 11, 12, etc…
Editorial Staff says
Did you try contacting the author?
Administrador
Kiesha Michelle says
Thanks for this!! I was trying to figure out how to add footnotes….
fatihtoprak says
Great plugin thanks for that.
retlkpr says
Now that is one I did not know about. Thanks! It works great.