Como adicionar notas de rodapé simples e elegantes em suas postagens de blog do WordPress

Deseja adicionar notas de rodapé às postagens do seu blog no WordPress?

Se estiver escrevendo um artigo que faça referência a pesquisas ou que contenha muitas informações complexas, talvez queira usar notas de rodapé em seu conteúdo. Essas são pequenas marcas numeradas em um texto que fornecem contexto adicional a uma frase ou parágrafo.

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.

O editor do WordPress.org agora tem um recurso de nota de rodapé incorporado que você pode usar facilmente para inserir contexto adicional.

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: Adicionar notas de rodapé do WordPress com o Editor Gutenberg

Esse método é melhor para pessoas que desejam usar notas de rodapé simples e não querem instalar um plug-in para essa finalidade.

Para usar o bloco Notas de rodapé do WordPress, você precisará abrir o editor de blocos do Gutenberg para uma postagem ou página nova ou existente.

Depois disso, 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, a tipografia, as dimensões e a borda do bloco usando as configurações no painel à direita.

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.

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: Adicionar notas de rodapé do WordPress com um plug-in

Outro método de criação de 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.

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 bônus: Use os campos personalizados do WordPress para adicionar mais informações ao seu conteúdo

Além das notas de rodapé, outra maneira de fornecer informações adicionais em seus posts e páginas do WordPress é usar campos personalizados.

Os campos personalizados do WordPress são metadados usados para inserir informações adicionais em um post ou página. Por exemplo, se você administra um blog com vários autores, talvez queira exibir os nomes dos colaboradores na postagem do blog, e não apenas o seu.

Se você estiver interessado em campos personalizados, dê uma olhada em nosso guia 101 sobre campos personalizados do WordPress.

Mostraremos a você como adicionar campos personalizados usando o editor de blocos e alguns plugins, inclusive o WPCode. Esse plug-in oferece uma maneira segura e fácil de adicionar trechos de código ao seu site WordPress, mesmo que você seja um iniciante.

Esperamos que este artigo tenha ajudado você a aprender como adicionar notas de rodapé ao seu site WordPress. Talvez você também queira dar uma olhada em nossas escolhas de especialistas para os melhores plug-ins de tipografia do WordPress e em nosso guia sobre como mostrar e ocultar texto em publicações do WordPress com o efeito de alternância.

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.