Sumário no WordPress: Como fazer um índice para o seu blog

Ao escrever um artigo para o seu blog, a organização do seu conteúdo é vital, para que você possa ter êxito em sua publicação. Você pode escrever excelentes artigos, mas se o seu leitor e visitante não tiver uma navegabilidade fácil, melhor dizendo, um índice, para ele localizar a informação desejada rapidamente, com certeza, ele deixará a sua publicação.

Neste artigo, você aprenderá como fazer um índice para navegação interna em seu blog e facilitar a vida do seu visitante, utilizando links âncora.

O que é um link âncora?

Um link âncora redireciona para outro trecho do seu artigo dentro da mesma página. O objetivo desse tipo de link é permitir a navegação interna de uma página web, como foi dito anteriormente. Sendo muito utilizado quando o texto do nosso artigo é extenso, facilitando a navegação do usuário pelos trechos da nossa publicação.

Ele pode ser utilizado em subtítulos, imagens, listas, parágrafos, enfim, você poderá utilizar em qualquer tag HTML do seu blog.

Como fazer um índice para o meu blog?

Exitem várias maneiras de você fazer um índice, estilo sumário, para o seu blog, neste artigo, vamos destacar duas formas de fazer uma navegação interna:

• manualmente (válido para todas as páginas web);
• e utilizando plugins (válido WordPress).

Eu, particularmente, só “meio antigo” e prefiro criar índices para páginas web, manualmente. Por quê? Mesmo utilizando o WordPress, com inúmeros plugins para tal finalidade, fazendo dessa maneira, acaba sendo mais “vantajoso”, para o nosso site. Principalmente, se o objetivo é mantermos a nossa página de internet rápida. O excesso de plugins e seus scripts, acaba prejudicando o desempenho e a performance do nosso site. Por isso, a minha preferência é fazer uso do bom e velho HTML.

Criando um índice manualmente para o seu site ou blog WordPress

1. Abra o modo texto do seu Post ou Página do WordPress, conforme a imagem abaixo:

2. No editor de texto, localize algumas dessas tags HTML, no trecho do seu artigo que você deseja “levar” o visitante do seu blog:
   • <img src=”……” />
   • <p>
   • <ol>
   • <li>…..
   • <h1>
   • <h2>
   • …..

Preparando a âncora do sumário

Geralmente, as tags mencionadas acima, principalmente os <h1>, <h2>, <h3>, … que são tags de cabeçalhos ou subtítulos, são as mais utilizadas para essa finalidade. Vamos supor que você localizou uma tag HTML de cabeçalho, de nível 03 (<h3>). Ela que inicia o bloco de texto desejado para “levar” o visitante do seu blog até aquele conteúdo, ao clicar em seu índice. Simplesmente, adicione o atributo “id”, conhecido como identificador exclusivo, da seguinte forma, dando um nome a ele:

Onde, o “nome-da-ancora” é o identificador criado por você, com aspas (“….”). Como “nome-da-ancora”, procure usar palavras relacionadas ao seu próprio subtítulo. Se você tiver uma tag de cabeçalho de nível 02, com o subtítulo: “A Copa do Mundo é Nossa”, então o seu id, poderá ser:

No identificador (id), não utilize espaços, caracteres especiais (@, #, %, …), pontuação (., ?, !, …), cê-cedilha (ç). Resumindo, utilize apenas letras e números. Na pior das hipóteses, pode-se utilizar o hífen (-). Para cada identificador, independente da tag HTML, nunca utilize o mesmo nome.

Caso você tenha mais cabeçalhos ou outras tags HTML, simplesmente, siga o exemplo abaixo:

Finalizando o índice e criando os links

Uma vez preparada a âncora do nosso blog, agora é a vez de concluirmos o nosso índice, linkando as âncoras.

1. Volte para o Editor Visual do WordPress, conforme a imagem abaixo:

1. No editor visual do WordPress, digite os textos abaixo e formate-os como lista ordenada ou não-ordenada, ficando ao seu critério:

1. Agora, vamos inserir os links em nossos textos, para criarmos o índice. Utilize o simbolo hashtag, cerquilha ou jogo-da-velha (#), para cada link, conforme a imagem abaixo:

O uso da cerquilha (#) é para indicar que é um link interno. Dessa forma, como exemplo, o link completo do seu índice será: “www.meusite.com.br/minha-publicacao#nome-da-ancora”.

Para finalizar o nosso sumário, entre novamente em modo texto e edite a região do índice criado, conforme o exemplo abaixo, em seu código HTML:

Ao final, o seu índice, terá a aparência abaixo. Obviamente, ele deverá estar no início do seu artigo.

Como fazer um índice automaticamente usando plugin

Para fazermos o nosso índice automaticamente o procedimento é bem simples, conforme os passos abaixo:

1. Instale o plugin Table Of Contents Plus e ative-o.
2. Marque qual o tipo de publicação (páginas, posts, …) deverá ter o índice automático para o seu blog e salve-o.

O plugin possui outras configurações, mas apenas isso, já resolve. Ou seja, fazendo a instalação e o ativando.

Lembrando que o plugin não é atualizado há algum tempo, onde, você poderá ter algum tipo de incompatibilidade, ao fazer o seu sumário automaticamente, utilizando o Table of Contents Plus.

Quer aprender como criar e gerenciar um site usando o WordPress, consulte as nossas aulas particulares (Grande São Paulo) e cursos online de WordPress.

Bem é isso. Seu blog já tem um índice de navegação para os seus leitores? Gostou da nossa dica? Curta a nossa página nas redes sociais e compartilhe o nosso artigo.