Índice

Crie um índice clicável para artigos longos e controle onde aparece, como é inserido e como cada artigo o pode usar.

Visão geral

O Índice cria uma lista clicável de cabeçalhos a partir do seu conteúdo. É uma forma prática de dar navegação rápida a artigos longos, tutoriais, guias e páginas de documentação.

Caminho no painel de administração: Airygen SEO -> Definições -> Índice.

Este módulo suporta saída manual, inserção automática, controlo por artigo, temas visuais e uma área de Pré-visualização para rever o aspeto geral antes de publicar.

Métodos de saída

O Índice suporta colocação manual e inserção automática no conteúdo.

Saída manual

Use a saída manual quando quiser decidir exatamente onde o índice aparece no tema, no conteúdo ou no editor.

Use a Função de modelo quando quiser colocar o índice diretamente num ficheiro do tema.
Use o Shortcode quando quiser inserir o índice dentro do conteúdo do artigo ou noutra área que aceite shortcodes.
Use o Bloco quando quiser controlar a posição visualmente no editor de blocos.

Função de modelo:

<?php if ( function_exists( 'airygen_the_toc' ) ) { airygen_the_toc(); } ?>

Shortcode:

[airygen_toc]

Bloco:

<!-- wp:airygen/toc /-->

Injeção automática

Use a inserção automática quando quiser que o Airygen SEO coloque o índice sozinho nos artigos compatíveis.

O campo Posição de inserção permite escolher Antes do conteúdo ou Após o primeiro parágrafo.
A inserção automática é útil quando quer uma posição consistente em muitos artigos longos.
A saída manual é melhor quando precisa de controlo exato dentro do template, do layout ou do próprio conteúdo.

Se ativar a saída manual e a inserção automática ao mesmo tempo, verifique o frontend publicado para confirmar que o índice não aparece em duplicado.

Configurações

A página está dividida em Definições, Layout e Pré-visualização.

Separador Definições

Use este separador para controlar o método de saída, a estrutura do índice, o comportamento das ligações e as regras de âncora.

Controlos de saída

A área de saída manual disponibiliza os snippets Função de modelo, Shortcode e Bloco para colocar o índice onde precisar.
A saída automática insere o TOC no conteúdo dos artigos compatíveis sem ter de editar cada publicação manualmente.
O campo Posição de inserção decide se a saída automática aparece Antes do conteúdo ou Após o primeiro parágrafo.

Cabeçalho da secção

O controlo Título decide se o índice mostra um cabeçalho visível acima da lista.
O campo Texto altera o texto mostrado acima do índice.
O campo Nível de cabeçalho altera a hierarquia do título visível.

Âmbito

O campo Tipos de artigo a incluir define que tipos de conteúdo podem apresentar o índice.

Estrutura

O campo Cabeçalhos mínimos oculta o índice até o artigo ter cabeçalhos suficientes.
O campo Níveis de cabeçalho permite incluir H2, H3 e H4 na lista do índice.

Comportamento

A opção Scroll suave anima o deslocamento quando o visitante clica numa ligação do TOC.
A opção Adicionar numeração transforma a lista num esquema numerado.
A opção Recolher ao carregar mostra o índice recolhido ao abrir a página.

Âncoras

O campo Prefixo de âncora adiciona um prefixo aos IDs gerados para evitar conflitos com outras âncoras da página.
O campo Excluir cabeçalhos ignora os cabeçalhos que correspondem às frases separadas por vírgulas que introduzir.

Separador Layout

Use este separador para controlar o tema visual do índice e ajustar o estilo de cada área.

Temas

O tema Snow Slate aplica um visual branco neutro com texto em tom ardósia.
O tema Honey Paper aplica um estilo quente em tom de pergaminho.
O tema Sky Breeze aplica um aspeto azul claro e mais arejado.
O tema Menta Calma aplica um visual verde suave.
O tema Rosa Rosado aplica um aspeto rosa mais delicado.
O tema Névoa de lavanda aplica um visual violeta claro.

Estilo

A área Contentor do cabeçalho da secção permite ajustar Largura da borda, Estilo do contorno, Raio da borda, Cor do contorno, Preenchimento, Margem e Cor de fundo do cabeçalho visível.
A área Título da secção permite ajustar Cor, Tamanho da fonte e Estilo da fonte do texto do título.
A área Contentor do corpo da secção permite ajustar a borda, o raio, o preenchimento, a margem e o fundo do contentor principal do índice.
A área Ligação permite ajustar a Cor, o Tamanho da fonte e se as ligações ficam a negrito, em itálico ou sublinhadas.
O controlo Indentação ajusta o recuo interno usado pela lista de ligações do TOC.

Separador Pré-visualização

Use este separador para rever uma amostra simplificada do índice antes de testar a página real.

A Pré-visualização TOC mostra a saída em Portátil, Tablet e Telemóvel.
O ecrã também apresenta Exemplo HTML e CSS Injetado para referência visual.
A pré-visualização é deliberadamente simples e serve para validar o estilo geral antes da verificação no frontend.

Painel do editor

No editor de blocos, o painel do índice permite controlar o comportamento para um artigo específico sem alterar as predefinições globais.

O campo Modo de exibição TOC permite escolher Auto, Manual ou Desativado.
Quando escolhe Manual, o painel mostra ações Inserir TOC para Bloco e Shortcode.

Como usar

Abra Airygen SEO -> Definições -> Índice.
No separador Definições, decida se quer usar saída manual, inserção automática ou apenas um desses métodos.
Se quiser colocação manual, copie a Função de modelo, o Shortcode ou o Bloco que melhor se adapta ao seu fluxo de trabalho.
Se quiser colocação automática, ative a inserção automática e escolha a Posição de inserção entre Antes do conteúdo e Após o primeiro parágrafo.
Ative o Título se quiser um cabeçalho visível acima da lista e depois ajuste Texto e Nível de cabeçalho.
Em Âmbito, confirme os Tipos de artigo a incluir que podem apresentar o índice.
Em Estrutura, defina Cabeçalhos mínimos e escolha os Níveis de cabeçalho que devem entrar na lista.
Em Comportamento, decida se quer Scroll suave, Adicionar numeração e Recolher ao carregar.
Em Âncoras, defina um Prefixo de âncora e liste em Excluir cabeçalhos os títulos que não devem aparecer no índice.
Abra Layout, escolha um dos Temas e ajuste o cabeçalho, o contentor, as ligações e a Indentação para combinar com o seu site.
Se precisar de uma regra diferente num artigo específico, abra esse artigo no editor e use Modo de exibição TOC para escolher Auto, Manual ou Desativado.
Guarde as definições, reveja o separador Pré-visualização e depois abra um artigo real com cabeçalhos suficientes para confirmar a saída final.

Depois de guardar, confirme estes pontos no site publicado:

O índice aparece apenas nos artigos que cumprem o valor de Cabeçalhos mínimos.
As ligações do índice levam os visitantes para a secção correta da página.
O Modo de exibição TOC por artigo corresponde ao método que escolheu para esse conteúdo.
O layout publicado continua correto depois de o CSS do tema ser carregado.

Pré-visualização e saída real

O separador Pré-visualização mostra uma representação simplificada do Índice com as definições atuais.

A pré-visualização ajuda a validar o tema, o contentor, a cor das ligações e a hierarquia visual do cabeçalho.
A pré-visualização também mostra Exemplo HTML e CSS Injetado para o ajudar a rever a estrutura de exemplo.
A aparência final no frontend continua a poder ser afetada pelo tema ativo, pelo CSS personalizado e pela estrutura da página à volta do conteúdo.

A página publicada pode parecer diferente da pré-visualização.

O índice real depende dos cabeçalhos realmente presentes no artigo publicado.
O tema pode alterar espaçamentos, cores, tamanhos de letra e comportamento responsivo.
Se combinar saída manual com inserção automática, a página real pode mostrar o índice mais do que uma vez.

Depois de guardar, confirme um artigo longo real para validar a posição final, a navegação por âncoras e o aspeto publicado.

Benefícios de SEO

Um índice bem configurado torna o conteúdo longo mais fácil de percorrer e de entender. Isso ajuda os leitores a chegar mais depressa à secção que procuram e torna a estrutura temática da página mais clara.

Também melhora a experiência de navegação em tutoriais, guias e documentação, porque dá um percurso visível entre secções longas sem obrigar o visitante a percorrer toda a página à procura do ponto certo.

Casos de uso

Tutoriais longos com vários passos

Antes: Um tutorial tem muitas secções, mas o leitor tem de percorrer a página inteira para encontrar a etapa exata de que precisa.

Depois: O Índice transforma esses cabeçalhos numa lista clicável, para que o leitor possa saltar diretamente para instalação, configuração ou resolução de problemas.

Documentação e bases de conhecimento

Antes: A documentação já tem bons cabeçalhos, mas a página continua a parecer pesada para quem a abre pela primeira vez.

Depois: O Índice mostra a estrutura logo no início e ajuda o visitante a perceber a organização da página antes de ler em detalhe.

Equipas editoriais que publicam guias evergreen

Antes: Cada artigo longo precisa de orientação interna clara, mas adicionar navegação manualmente em todas as publicações dá mais trabalho.

Depois: O Índice automatiza a navegação interna e ainda permite ajustar exceções por artigo através do Modo de exibição TOC.

Perguntas frequentes

Porque é que o índice não aparece em alguns artigos?

Verifique o valor de Cabeçalhos mínimos, os Níveis de cabeçalho escolhidos, os Tipos de artigo a incluir e o Modo de exibição TOC definido para esse artigo.

Devo usar saída manual ou inserção automática?

Use a inserção automática quando quiser uma posição consistente em muitos artigos. Use a saída manual quando precisar de controlo exato sobre o local onde o índice aparece.

Posso desativar o índice num artigo específico?

Sim. No editor, use Modo de exibição TOC e escolha Desativado para esse artigo.

Porque é que a pré-visualização pode ser diferente da página publicada?

A pré-visualização é uma representação simplificada. A saída real continua a depender dos cabeçalhos do artigo, do tema ativo, do CSS carregado e da estrutura da página.