Recentemente, um de nossos leitores nos perguntou como exibir páginas filhas de uma página do WordPress? É uma pergunta que recebemos com bastante frequência no WPBeginner, e ela destaca uma necessidade comum de melhorar a navegação do site e a experiência do usuário.
Se você organiza seu site WordPress com páginas pai e filhas, talvez queira exibir suas páginas filhas ou subpáginas na página pai principal. Isso ajuda os usuários a verem facilmente todas as informações disponíveis em uma seção específica e a navegarem rapidamente para tópicos relacionados.
Você também pode querer mostrar o link da página pai principal em cada subpágina para facilitar a navegação, criando um efeito semelhante a um breadcrumb. Essa navegação simplificada impede que os usuários se percam nas profundezas do seu site e aprimora a experiência geral de navegação deles.
Neste artigo, mostraremos como exibir facilmente uma lista de páginas filhas para uma página pai no WordPress.
Quando você precisa mostrar uma lista de páginas filhas?
O WordPress vem com dois tipos de postagem padrão chamados posts e páginas. Posts são conteúdo de blog e geralmente são organizados com categorias e tags.
Páginas são conteúdos únicos ou independentes que são perenes, como uma página 'Sobre nós' ou uma página 'Fale conosco', por exemplo.
No WordPress, as páginas podem ser hierárquicas, o que significa que você pode organizá-las com páginas pai e filhas. Por exemplo, você pode querer criar uma página de Produto com páginas filhas para Recursos, Preços e Suporte.
Para criar uma página filha, siga nosso guia sobre como criar uma página filha no WordPress.
Depois de criar suas páginas pai e filha, você pode querer listar as páginas filhas na página pai principal.
Agora, uma maneira fácil de fazer isso é editando manualmente a página pai e adicionar uma lista de links individualmente.
No entanto, você precisará editar manualmente a página pai toda vez que adicionar ou excluir uma página filha.
Não seria mais agradável se você pudesse simplesmente criar uma página filha e ela aparecesse automaticamente como um link na página pai?
Dito isso, vamos dar uma olhada em outras maneiras dinâmicas de exibir rapidamente uma lista de páginas filhas na página pai no WordPress. Mostraremos três métodos, para que você possa escolher o que for melhor para você:
- Método 1. Exibir Páginas Filhas na Página Pai usando um Plugin
- Método 2. Listar Páginas Filhas de uma Página Pai usando Código
- Método 3. Exibir Dinamicamente Páginas Filhas Sem Nenhum Shortcode
Método 1. Exibir Páginas Filhas na Página Pai usando um Plugin
Este método é a maneira mais fácil de exibir páginas filhas em uma página pai e é recomendado para todos os usuários.
Primeiro, você precisa instalar e ativar o plugin Page-list. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa editar a página pai e simplesmente adicionar o seguinte shortcode onde você deseja exibir a lista de páginas filhas.
[subpages]
Agora você pode salvar sua página e visualizá-la em uma nova aba do navegador. Você notará que ela exibe uma lista simples com marcadores de todas as páginas filhas.
Se desejar, você pode adicionar um CSS personalizado para alterar a aparência da lista.
Aqui estão alguns exemplos de CSS que você pode usar como ponto de partida.
ul.page-list.subpages-page-list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}
Após aplicar seu CSS personalizado, você pode visualizar a página pai.
Veja como ficou em nosso site WordPress de teste:
O plugin fornece vários parâmetros de shortcode que permitem definir a profundidade, excluir páginas, o número de itens e muito mais.
Para mais detalhes, por favor veja a página do plugin para documentação detalhada.
Método 2. Listar Páginas Filhas de uma Página Pai usando Código
Este método é um pouco avançado e requer que você adicione código ao seu site WordPress. Se você nunca fez isso antes, por favor, dê uma olhada em nosso guia sobre como copiar e colar código no WordPress.
Para listar páginas filhas sob uma página pai, você precisa adicionar o seguinte código em um plugin de snippets de código ou no arquivo functions.php do seu tema:
function wpb_list_child_pages() {
global $post;
if ( is_page() && $post->post_parent )
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '<ul class="wpb_page_list">' . $childpages . '</ul>';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
Na WPBeginner, sempre recomendamos adicionar código no WordPress com o plugin WPCode.
O WPCode permite que você adicione facilmente código personalizado sem editar os arquivos do seu tema, para que você não precise se preocupar em quebrar seu site.
Primeiro, você precisa instalar e ativar o plugin gratuito WPCode. Para instruções passo a passo, veja este guia sobre como instalar um plugin do WordPress.
Uma vez que o plugin esteja ativado, navegue até Code Snippets » Add Snippet no seu painel do WordPress.
A partir daí, passe o mouse sobre a opção ‘Adicionar seu código personalizado (Novo trecho)’ e clique no botão ‘Adicionar trecho personalizado’.
Em seguida, você precisa escolher ‘Trecho PHP’ como o tipo de código na lista de opções que aparecem na tela.
Em seguida, adicione um título para o seu snippet, que pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.
Agora, simplesmente cole o código acima na caixa ‘Visualização do código’.
Depois disso, basta alternar o interruptor de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Salvar trecho’ na parte superior da página.
Este código primeiro verifica se uma página tem um pai ou se a própria página é um pai.
Se for uma página pai, ele exibe as páginas filhas associadas a ela. Se for uma página filha, ele exibe todas as outras páginas filhas de sua página pai.
Por último, se esta for apenas uma página sem página filha ou pai, o código simplesmente não fará nada. Na última linha do código, adicionamos um shortcode, para que você possa exibir facilmente páginas filhas sem modificar seus modelos de página.
Para exibir páginas filhas, basta adicionar o seguinte shortcode em uma página ou widget de texto na barra lateral:
[wpb_childpages]
Não se esqueça de salvar suas alterações e visualizá-las em uma aba do navegador. É assim que aparece em nosso site de teste.
Agora você pode estilizar esta lista de páginas usando algum CSS personalizado.
Aqui está um código CSS de exemplo que você pode usar como ponto de partida:
ul.wpb_page_list {
list-style: none;
list-style-type: none;
background-color: #eee;
border: 1px solid #CCC;
padding: 20px;
}
Método 3. Exibir Dinamicamente Páginas Filhas Sem Nenhum Shortcode
Usar shortcodes é conveniente, mas o problema com eles é que você terá que adicionar shortcodes em todas as páginas que têm páginas pai ou filhas.
Você pode acabar tendo shortcodes em muitas páginas e, às vezes, pode até esquecer de adicioná-lo.
Uma abordagem melhor seria editar o arquivo do modelo de página em seu tema, para que ele possa exibir automaticamente as páginas filhas.
Para fazer isso, você precisa editar o template principal page.php, ou criar um template de página personalizado no seu tema.
Você pode editar seu tema principal, mas essas alterações desaparecerão se você mudar ou atualizar seu tema. É por isso que seria melhor se você criasse um tema filho e então fizesse suas alterações no tema filho.
No seu arquivo de template de página, você precisa adicionar esta linha de código onde você deseja exibir as páginas filhas.
<?php wpb_list_child_pages(); ?>
É só isso. Seu tema agora detectará automaticamente as páginas filhas e as exibirá em uma lista simples.
Você pode personalizar os estilos com CSS e formatação.
Aqui está um exemplo de como o site OptinMonster exibe a página pai e as subpáginas:
Esperamos que este artigo tenha ajudado você a listar páginas filhas de uma página pai no WordPress. Você também pode querer ver nosso guia sobre as páginas mais importantes para criar em um novo site WordPress, e nossa comparação dos melhores construtores de páginas WordPress de arrastar e soltar para criar layouts personalizados sem nenhum código.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Philip
Olá, isso funciona, exceto que o pai também está sendo exibido, como faço para mostrar apenas as páginas filhas, obrigado
WPBeginner Support
O método mais simples para o que parece que você quer seria não ter conteúdo na página pai e ter seu conteúdo apenas nas páginas filhas.
Admin
Sachit Shori
Muito obrigado. Você me salvou.
WPBeginner Support
You’re welcome
Admin
Emmanuel Husseni
Olá Wpbeginner,
Por favor, como posso ordenar todas as páginas filhas alfabeticamente na página pai. Segui todos os passos, mas as subpáginas estão aparecendo aleatoriamente na página pai.
Aguardando resposta. ....Obrigado
WPBeginner Support
Você mudaria as duas instâncias de menu_order em nosso código para ser: post_title
Admin
Iyke O.
Como faço para tornar a lista recolhível na barra lateral.
WPBeginner Support
Para torná-la recolhível, você pode usar um plugin de acordeão, como um dos artigos aqui: https://www.wpbeginner.com/showcase/best-wordpress-accordion-plugins/
Admin
Stacie
Fácil de seguir e fez o trabalho. Muito obrigado por compartilhar!
WPBeginner Support
You’re welcome, glad our content could be helpful
Admin
Aaro
Posso atribuir uma classe CSS a esta função? Assim, quando eu fizer alterações CSS nos elementos ul, isso não afetará outros ul no site.
Ou alguma outra solução simples para isso?
WPBeginner Support
You could add your CSS class in the ul section of the function
Admin
Keshav Murthy
Olá, Equipe WPB,
Muito obrigado por este Snippet e pelo tutorial.
Isso me economizou muito tempo e me ajudou.
Com os melhores cumprimentos,
Keshav Murthy
WPBeginner Support
Glad our tutorial could help
Admin
Gary Granai
Instalei o plugin code snippets no wordpress 4.9.8
Copiei o código de https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond e adicionei a um novo snippet em code snippets.
Criei uma página e depois uma página que recebeu o atributo de ter a primeira página como página pai.
O relacionamento filho-pai é mostrado na lista de páginas no menu suspenso de atributos.
Quando abro a página pai, não vejo nada que mostre uma página filha.
Então tentei usar a página functions.php.
Adicionei o código copiado de https://www.wpbeginner.com/wp-tutorials/how-to-display-a-list-of-child-pages-for-a-parent-page-in-wordpress/#respond ao final do código na página functions.
Quando abro a página pai, ela não é exibida. O que é exibido é uma mensagem de erro dizendo que há código inesperado.
Restaurei a página functions.php ao seu estado original.
Que alterações devo fazer no que tentei fazer.
WPBeginner Support
Olá Gary,
Certifique-se de que você publique a página filha antes de testar o código. Copie também o código cuidadosamente novamente para garantir que você não está copiando os números ou quaisquer caracteres inesperados.
Admin
Itika
Tenho uma pergunta. Adicionei subpáginas em uma página pai, mas quando abro o site no celular e clico na página pai, ela abre uma página pai vazia. Para ver as subpáginas suspensas, é preciso segurar o botão da página pai. Como posso corrigir isso? Não quero que essa página vazia abra. Quero que, ao tocar na página pai, ela abra o menu suspenso.
Por favor, sugira como fazer isso.