Você já viu sites que têm números pequenos e sobrescritos no texto com links para informações adicionais na parte inferior da página? Eles são chamados de notas de rodapé e são uma ótima maneira de fornecer contexto extra ou citar fontes sem sobrecarregar o conteúdo principal.
Alguns de nossos leitores perguntaram como adicionar notas de rodapé às suas publicações no WordPress, especialmente quando escrevem conteúdo com muita pesquisa ou artigos que precisam de citações.
Neste artigo, mostraremos como adicionar notas de rodapé simples e elegantes às postagens do seu blog no WordPress, passo a passo.
Por que adicionar notas de rodapé às postagens do seu blog no WordPress?
Se você administra um blog educacional, publica pesquisas ou cobre notícias, as notas de rodapé são uma ótima maneira de dar mais contexto ao seu conteúdo. Você pode usá-las para adicionar comentários, destacar fatos importantes ou inserir citações de fontes acadêmicas em seu site.
Normalmente, uma nota de rodapé aparece como um pequeno número sobrescrito no corpo principal do texto. O conteúdo real da nota de rodapé é então colocado na parte inferior da página ou aparece como uma dica de ferramenta para diferenciá-lo do conteúdo principal.
Aqui está um exemplo:
Além de proporcionar clareza e transparência para seus leitores, as notas de rodapé podem fazer com que seu site WordPress pareça mais profissional e confiável. Elas mostram que você fez sua pesquisa e tem as fontes para apoiar suas afirmações.
Felizmente, o editor do WordPress.org tem um recurso de nota de rodapé integrado que você pode usar facilmente para inserir contexto adicional. Dessa forma, você não precisará adicionar manualmente as notas de rodapé.
Este guia mostrará a você como adicionar notas de rodapé do WordPress aos posts ou páginas do seu blog usando dois métodos. Um deles é usar o bloco Footnotes no editor Gutenberg e o outro é usar um plug-in.
Você pode usar os links abaixo para ir para um método específico:
Método 1: Como adicionar notas de rodapé no WordPress sem um plug-in
Esse método é melhor para pessoas que desejam usar notas de rodapé simples em publicações de blog e não querem instalar um plug-in para fazer isso.
Para usar o bloco WordPress Footnotes (Notas de rodapé), você precisará abrir o editor de blocos do Gutenberg para uma postagem nova ou existente.
Depois disso, você pode começar a adicionar blocos de parágrafos, imagens e outros tipos de conteúdo à postagem do blog. Você pode até adicionar letras maiúsculas para estilizar o texto e chamar a atenção dos leitores.
Agora, basta destacar uma palavra em seu conteúdo à qual deseja adicionar a nota de rodapé. Na barra de ferramentas do bloco, clique na seta suspensa e selecione “Footnote” (Nota de rodapé).
Agora você será redirecionado para a parte inferior da página, onde o bloco Footnotes (Notas de rodapé) foi adicionado automaticamente. Aqui, você pode digitar suas informações adicionais.
Além disso, você pode personalizar a cor do texto, a tipografia, as dimensões e a borda do bloco usando as configurações no painel à direita.
Se houver links na nota de rodapé, talvez você queira alterar a cor dos links para que eles se destaquem.
Sinta-se à vontade para repetir essa etapa e incluir quantas notas de rodapé forem necessárias.
Quando você visualizar seu site WordPress, deverá haver um link de nota de rodapé para a frase que você destacou anteriormente.
Se você clicar no hiperlink, ele o levará ao final da página com a nota de rodapé.
Aqui, você também pode clicar na seta com hiperlink para voltar à seção em que a nota de rodapé está atribuída.
Você também pode querer visualizar seu site no celular para garantir que a nota de rodapé seja legível nas telas dos smartphones.
Embora esse método seja bastante simples para iniciantes, ele não oferece muitas opções de personalização. Se estiver procurando mais maneiras de alterar a aparência da nota de rodapé, passe para o próximo método.
Método 2: Como adicionar notas de rodapé do WordPress com um plug-in
Outra maneira de criar notas de rodapé é usar o plug-in gratuito Modern Footnotes. Ao contrário do bloco Footnotes, ele oferece muito mais opções para modificar a aparência da nota de rodapé.
Por exemplo, você pode fazer com que a nota de rodapé apareça como uma dica de ferramenta, bem como informações adicionais na parte inferior da página.
A primeira coisa que você fará é instalar o plug-in Modern Footnotes. Para obter mais informações sobre a instalação de plug-ins, consulte nosso guia sobre como instalar um plug-in do WordPress.
Observação: Se não tiver certeza se deve usar esse plug-in, você pode instalá-lo no WordPress Playground temporário e brincar com ele.
Configuração das definições do plug-in Modern Footnotes
Com o plug-in instalado, agora você pode ir para Settings ” Modern Footnotes (Configurações ” Notas de rodapé modernas). É aqui que você pode definir as configurações de nota de rodapé de acordo com suas preferências.
Vamos examinar cada configuração uma a uma.
‘Desktop footnote behavior’ permite selecionar como a nota de rodapé deve se comportar quando o site estiver sendo visualizado em um computador desktop.
Você pode fazer com que a nota de rodapé apareça quando o cursor passar sobre a dica de ferramenta ou quando o usuário clicar na dica de ferramenta. Como alternativa, a nota de rodapé pode se expandir abaixo do texto com nota de rodapé.
A escolha fica a critério de suas preferências. Dito isso, a nota de rodapé será expandida abaixo do texto por padrão em telas de celular.
Além disso, você também pode marcar a caixa “Fazer com que o conteúdo da nota de rodapé apareça na dica de ferramenta nativa do navegador da Web ao passar o mouse sobre o número da nota de rodapé”, se necessário. Isso significa que a nota de rodapé aparecerá na dica de ferramenta do navegador, e não na do plug-in, quando o cursor passar sobre o texto.
Recomendamos desativar essa configuração se você escolher a opção de dica de ferramenta para o comportamento da nota de rodapé na área de trabalho. Caso contrário, você terá duas dicas de ferramenta para a mesma nota de rodapé, o que pode ser irritante para os leitores.
Abaixo, você também pode optar por exibir a lista de notas de rodapé na parte inferior das postagens. Dessa forma, o leitor pode ver todas as informações adicionais em um só lugar.
Talvez você também queira ativar esse recurso quando a postagem do blog for distribuída por meio de feeds RSS.
Rolando para baixo, você pode optar por inserir um título para sua lista de notas de rodapé e escolher uma tag de título para ela. Isso ajuda a separar o conteúdo real de sua postagem de blog das notas de rodapé. Você pode escrever algo como Referências, Notas de rodapé, Citações ou Informações adicionais.
Se você quiser adicionar algum CSS personalizado para modificar o texto da nota de rodapé, sinta-se à vontade para inseri-lo na caixa “Modern Footnote Custom CSS”.
Por último, mas não menos importante, você pode personalizar o código de acesso Modern Footnotes se não quiser usar a versão incorporada. Certifique-se de inserir o shortcode sem os colchetes.
Quando estiver satisfeito com as configurações, basta clicar em “Save Changes” (Salvar alterações).
Adição de notas de rodapé usando o plug-in Modern Footnotes
Agora que você definiu as configurações do Modern Footnotes, vamos inserir algumas notas de rodapé em seu conteúdo. Vá em frente e abra o editor de blocos em um post ou página nova ou existente.
Há duas maneiras de adicionar uma nota de rodapé. Uma delas é com um shortcode, que é o que recomendamos.
Primeiro, localize a frase que você deseja inserir uma nota de rodapé. Em seguida, ao lado dessa frase, digite o seguinte shortcode:
[mfn]Insira sua nota de rodapé aqui[/mfn]
Certifique-se de substituir o texto entre os colchetes por suas informações.
Sugerimos também que o shortcode seja colocado no mesmo bloco da frase, ao lado do texto, sem nenhum espaço entre eles, como no exemplo abaixo. Caso contrário, a nota de rodapé pode parecer desconectada do texto.
O outro método é digitar o texto da nota de rodapé ao lado da frase à qual você deseja adicionar a nota de rodapé. Certifique-se de que não haja espaço entre o texto da nota de rodapé e a frase.
No exemplo abaixo, queremos adicionar uma nota de rodapé contendo uma citação acadêmica para a frase que começa com ‘Studies suggest…’
Em seguida, destaque a nota de rodapé e clique no botão de seta para baixo na barra de ferramentas. Depois disso, selecione “Adicionar uma nota de rodapé”.
A desvantagem do segundo método é que pode ser difícil rastrear quais linhas de texto receberam uma nota de rodapé e quais não receberam quando você estiver editando o conteúdo. É por isso que recomendamos o método de código curto.
Ao visualizar o post do blog, você verá que agora há um número ao lado da frase. Se você usar a opção de dica de ferramenta, esta será a aparência da nota de rodapé:
Por outro lado, a nota de rodapé aparecerá abaixo do texto se você usar a formatação expansível.
Esta é a aparência quando você clica no número:
Por fim, se você optar por exibir todo o conteúdo da nota de rodapé na parte inferior da publicação, poderá rolar para baixo para encontrar tudo lá.
Elas devem estar em algum lugar acima da seção de comentários.
Dica profissional: Deseja adicionar uma isenção de responsabilidade no final da publicação do blog em vez de uma nota de rodapé? Confira nosso guia sobre como adicionar automaticamente um aviso de isenção de responsabilidade no WordPress para obter instruções passo a passo.
Saiba mais maneiras de personalizar seu conteúdo do WordPress
Além das notas de rodapé, há muitas maneiras de tornar seu conteúdo do WordPress mais interessante e legível para os visitantes.
Por exemplo, você pode adicionar fontes personalizadas ao WordPress. Dessa forma, você pode criar uma tipografia que pareça única e diferente da de outros concorrentes, tornando seu site mais memorável.
Além disso, é possível destacar determinados textos em seus blocos de texto para direcionar a atenção dos usuários para as informações mais importantes.
Outra coisa que você pode fazer é exibir uma visualização ao vivo dos seus links internos ou externos quando os visitantes passarem o mouse sobre eles à medida que percorrem o seu conteúdo. Essa é uma maneira fácil e envolvente de visualizar o tipo de página que eles verão se clicarem no link.
Aqui estão outras dicas que você pode conferir:
- Como destacar novas postagens para visitantes que retornam no WordPress
- Como adicionar conteúdo dinâmico no WordPress (guia para iniciantes)
- Como adicionar um redimensionador de fonte no WordPress para acessibilidade
- Como adicionar o modo escuro ao seu site WordPress (fácil)
- Como exibir rótulos de informações nutricionais no WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar notas de rodapé ao seu site WordPress. Talvez você também queira ler nossas escolhas de especialistas para os melhores construtores de páginas de arrastar e soltar para WordPress e nosso guia sobre como editar um site WordPress.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
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
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
They are the same editor, it just has two different names
Administrador
samarth
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
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
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
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
Work fine ! Really simple. Thank you.
David
Hey, forgive my ignorance, but I can’t figure out how to activate this, or any other plugin. What am I missing?
Editorial Staff
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
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
It sounds like a CSS issue in your theme which causing this.
Administrador
Hank DeBey
I had some remnants of earlier footnote attempts in the code. I removed those and things are better. Thanks for your help.
Evan Lowry
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
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
Did you try contacting the author?
Administrador
Kiesha Michelle
Thanks for this!! I was trying to figure out how to add footnotes….
fatihtoprak
Great plugin thanks for that.
retlkpr
Now that is one I did not know about. Thanks! It works great.