Como criar um índice de conteúdo em uma postagem do WordPress

Um índice analítico é uma parte necessária das postagens do WordPress, especialmente postagens longas com muitos títulos. A criação de um índice ajuda os leitores a acompanhar e compreender a ideia de maneira fácil e rápida. Além disso, também ajuda a adicionar mais palavras-chave nas postagens, o que é muito bom para o SEO.

Métodos para criar um índice analítico

Existem 2 métodos para criar um índice analítico em uma postagem do WordPress.

O primeiro método é usar um plugin. Isso é simples, rápido e gratuito para especialistas em código e novatos no WordPress.

O segundo está usando código. Isso permite que você personalize seu índice analítico, até mesmo os menores detalhes, mas é bastante complicado para um não codificador. Vamos escrever o código para criar um índice analítico nesta postagem. Basta copiar e colar!

Vamos percorrer o processo de criação de um índice analítico com um plug-in primeiro:

Método 1: usar um plug-in para criar índice analítico

Etapa 1: criar e configurar o conteúdo do índice

Existem muitos plug-ins gratuitos para a criação de índices no WordPress. Escolhemos o Índice LuckyWP porque ele nos fornece um resultado altamente personalizável e bonito. No entanto, este plugin tem muitas configurações, o que pode confundi-lo no início. Portanto, siga nossas instruções para economizar seu tempo.

O Índice do LuckyWP é um plugin gratuito e está disponível no wordpress.org. Você acabou de instalar e ativar o plugin no Dashboard .

Em seguida, vá para Configurações > Índice , você verá a tela de configurações.

Aqui, há 4 guias que você precisa prestar atenção: Geral, Aparência, Inserção automática, Cabeçalhos de processamento . Eles são guias usados ​​para configurar e personalizar a exibição do índice analítico. Misc. é uma guia com configurações complexas e sem importância, portanto, você pode ignorá-la.

Nesta etapa, você apenas trabalha na guia Geral .

Existem várias configurações nesta seção. Para economizar tempo, você deve se concentrar nas partes importantes abaixo:

• Numeração: para numerar os títulos. Você deve escolher uma destas opções: Sem numeração, Números decimais (aninhados), Números romanos (aninhados) .

Eu escolho números decimais (aninhados) , então meu TOC fica assim:

• Título: Título do índice. É o conteúdo padrão.

Vamos deixar o resto das configurações como padrão, porque isso não afeta muito seu TOC.

Clique em Salvar alterações para terminar. Então, fizemos as configurações gerais do TOC. Vamos passar para a próxima etapa.

Etapa 2: insira o índice na postagem

Existem 2 métodos para inserir um índice analítico em sua postagem: inserção automática e manual.

Inserir automaticamente significa que um índice é adicionado a todas as postagens automaticamente. Dessa forma, você economiza muito tempo e esforço, mas não funciona se você quiser inserir um sumário em apenas alguns posts.

Inserir manualmente significa que se você deseja ter um sumário em uma postagem, você precisa inseri-lo nessa postagem você mesmo. Isso pode levar mais tempo e pode cometer erros.

Apresentaremos os dois métodos em detalhes. Você pode escolher a opção que mais lhe convier.

Inserindo Automaticamente

Vá para a guia Auto Insert> Enable . O plugin escolhe Post como padrão. Se você não quiser, pode mudar para outro tipo de postagem.

Na seção Posição , escolha onde deseja inserir o índice analítico. Não se esqueça de clicar em Salvar alterações !

Portanto, todas as postagens no tipo de postagem escolhido possuem os índices.

Inserindo Manualmente

A inserção manual parece complicada, mas na verdade é muito simples. Vá para a guia Cabeçalhos de processamento . Lá, escolha também o tipo de postagem e clique em Salvar alterações .

Em seguida, vá para o editor de postagem de uma postagem no tipo de postagem que você escolheu e clique em Ativar TOC .

Agora, seu TOC está basicamente pronto. Além disso, podemos estilizar sua cor, fonte, tamanho dos itens, ... para torná-lo mais bonito. Siga a próxima etapa.

Etapa 3: personalizar a tela do índice

Existem também 2 métodos para personalizar a exibição do índice: personalizá-lo em todas as postagens de uma vez e personalizá-lo individualmente em cada postagem.

Personalize o índice em todas as postagens

Você pode personalizar todos os índices em detalhes acessando a guia Aparência . Existem muitas configurações, como tamanho da fonte do título, tamanho da fonte dos itens, cor do link , ...

Não é necessário perceber todas as configurações, apenas foque no que deseja.

Por exemplo, não gosto do azul e do tamanho da fonte do título atual. Quero mudar a cor para cinza escuro e um tamanho menor para que fiquem melhores com a postagem. Portanto, irei personalizar o tamanho da fonte do título, o tamanho da fonte dos itens, a cor do link e manter as configurações restantes como a imagem abaixo:

Meu TOC após a personalização se parece com este:

Agora, parece muito mais harmonioso.

No entanto, talvez você queira ter diferentes índices em diferentes postagens, basta rolar para baixo para ler como personalizá-lo em cada postagem.

Personalize o índice de cada postagem

Este trabalho também é simples e rápido. Primeiro, vá para o editor de postagem, escolha Índice> Personalizar .

Um pop-up Personalizar índice é exibido. Você verá algumas guias familiares como acima. Eles são Geral, Aparência e Misc. .

Vá para a guia Aparência e altere algumas configurações da mesma forma editando no Painel do plugin. Clique em Salvar para terminar!

Agora, vamos ver o resultado final da personalização do índice analítico.

Ambos os métodos de customização trazem índices muito bonitos e detalhados. Portanto, você é livre para escolher a maneira que quiser.

Agora, vamos ver como usar o código para criar um índice analítico.

Método 2: Use o código para criar um índice analítico.

Etapa 1: crie o índice para postagem

Vá para Aparência> Tema> Editor> functions.php .

Em seguida, adicione o seguinte código ao arquivo functions.php para inserir índices nas postagens.

Nota: Este código é para adicionar apenas 2 níveis de título ao índice analítico .

 function create_toc ($ html) {
    $ toc = '';
    if (is_single ()) {
        if (! $ html) return $ html;
        $ dom = novo DOMDocument ();
        libxml_use_internal_errors (true);
        $ dom-> loadHTML (mb_convert_encoding ($ html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors ();
        $ toc = '<div class = "toc-bound">
            <div class = "toc-ctr">
                índice
            </div>
            <ul class = "toc"> ';
        $ h2_status = 0;
        $ h3_status = 0;
        $ i = 1;
        foreach ($ dom-> getElementsByTagName ('*') as $ element) {
            if ($ element-> tagName == 'h2') {
                if ($ h3_status) {
                    $ toc. = '</ul>';
                    $ h3_status = 0;
                    }
                 if ($ h2_status) {
                    $ toc. = '</li>';
                    $ h2_status = 0;
                  }
                  $ h2_status = 1;
                  $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. '</a>';
                  $ element-> setAttribute ('id', 'toc-'. $ i);
                  $ i ++;
            } elseif ($ element-> tagName == 'h3') {
                if (! $ h3_status) {
                    $ toc. = '<ul class = "toc-sub">';
                    $ h3_status = 1;
                }
                $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. '</a> </li>';
                $ element-> setAttribute ('id', 'toc-'. $ i);
                $ i ++;
            }
        }
        if ($ h3_status) {
            $ toc. = '</ul>';
        }
        if ($ h2_status) {
            $ toc. = '</li>';
        }
        $ toc. = '</ul> </div>';
        $ html = $ dom-> saveHTML ();
    }
    return $ toc. $ html;
}
add_filter ('the_content', 'create_toc');

Explicação:

Não se esqueça de clicar no arquivo Atualizar após inserir o código.

Então, aqui está o resultado:

Claro, precisamos estilizá-lo um pouco. Usaremos CSS - uma ferramenta favorita de todos os programadores.

Etapa 2: usar CSS para personalizar

Para personalizar por CSS, acesse o arquivo style.css no Editor de style.css . Lá, você precisa inserir o código que escreve por você mesmo para personalizar o sumário como desejar.

Por exemplo, desejo personalizar a cor e a intensidade do índice, então irei inserir o seguinte código:

 .toc-bound {
    cor de fundo: # 619162;
    cor: #fff;
}
.toc-ctr {
    border-bottom: 1px solid #fff;
    preenchimento: 10px;
    tamanho da fonte: 20px;
    transformação de texto: maiúsculas;
}
ul.toc {
    tipo de estilo de lista: nenhum;
    preenchimento: 10px;
    padding-left: 25px;
}
.toc li a {
    cor: #fff;
}
ul.toc> li {
    tamanho da fonte: 18px;
    peso da fonte: 700;
    preenchimento: 5px 0;
}
ul.toc-sub {
    tipo de estilo de lista: nenhum;
}
ul.toc-sub li a {
    peso da fonte: 200;
}

Não se esqueça de clicar no arquivo Atualizar para salvá-lo.

O resultado final é assim:

Concluindo, tanto o uso de um plugin quanto a codificação nos fornecem os mesmos belos índices. Você pode escolher qualquer opção, desde que esteja satisfeito.

Últimas palavras

Como você pode ver, criar um índice analítico em postagens do WordPress não é nada complexo. Siga nosso tutorial e você terá belos índices. Um bom índice torna sua postagem mais clara e profissional. Assim, seus espectadores podem ter experiências mais amigáveis ​​ao ler seu blog.

Se você tiver alguma dúvida, indique-as na caixa de comentários abaixo.