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 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, então você pode querer 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 exibir 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 evita 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 'Entre em contato', 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 ter criado suas páginas pai e filhas, 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 adicionando 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 algumas 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
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, consulte 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 shortcode a seguir 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 algum 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.
É assim que ficou em nosso site WordPress de teste:
O plugin fornece uma série de parâmetros de shortcode que permitem definir a profundidade, excluir páginas, número de itens e muito mais.
Para detalhes, por favor consulte 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, consulte 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');
No 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.
Depois que o plugin for ativado, navegue até Code Snippets » Add Snippet no seu painel do WordPress.
A partir daí, passe o mouse sobre a opção ‘Add Your Custom Code (New Snippet)’ e clique no botão ‘Add Custom Snippet’.
Em seguida, você precisa escolher ‘PHP Snippet’ 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 ‘Code Preview’.
Depois disso, basta alternar o interruptor de ‘Inactive’ para ‘Active’ e clicar no botão ‘Save Snippet’ 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 templates 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 exemplo de código CSS 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 de template da 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 em seu tema.
Você pode editar seu tema principal, mas essas alterações desaparecerão se você alterar ou atualizar seu tema. É por isso que seria melhor se você criasse um tema filho e, em seguida, fizesse suas alterações no tema filho.
No arquivo de template da sua página, você precisa adicionar esta linha de código onde deseja exibir as páginas filhas.
<?php wpb_list_child_pages(); ?>
É tudo. 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 mostra a página pai e as subpáginas:
Recursos Adicionais para Gerenciamento de Páginas e Posts do WordPress
Esperamos que este artigo tenha ajudado você a listar páginas filhas para uma página pai no WordPress.
Se você quiser saber mais sobre como gerenciar páginas e posts do WordPress, você também pode querer ver estes guias:
- Como Organizar ou Reordenar Páginas do WordPress com Arrastar e Soltar
- Como Duplicar uma Página ou Postagem do WordPress com um Único Clique
- Como Adicionar Status de Postagem Personalizado para Posts de Blog no WordPress
- Como Gerenciar Melhor Páginas do WordPress com Páginas Aninhadas
- Como Criar uma Página de Arquivo de Tipos de Postagem Personalizados no WordPress
Se você gostou deste artigo, então 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 Facebook.
Denise
Para páginas de terceiro nível (neto), quero mostrar o mesmo menu que é visto nas páginas filhas (todos os links filhos do pai). Com este trecho, quando em uma página de neto, eu só vejo as outras páginas de neto no menu. Como este código precisaria ser modificado para mostrar todos os links filhos, mesmo quando em páginas de neto?
vicky
como obter os ids das páginas filhas, não os ids das páginas netas... por favor, ajude, sou iniciante
Meredith L
Sou relativamente novo em blogs e recentemente mudei para o tema Kale Wordpress. Tenho tentado fazer páginas de atributos de página (sob a página pai Receitas) para que eu possa ter categorias separadas para aperitivos, sobremesas, etc. Tudo parece prosseguir na parte administrativa, mas depois no site em si não há atributos de página/menu suspenso da categoria Receitas. O que estou fazendo de errado? Está tudo definido como público, então não tenho certeza qual é o problema.
Daves
Obrigado por este código. Mas eu não quero que isso seja mostrado na página inicial (página estática), apenas nas páginas pai. Por favor, como isso pode ser feito?
Obrigado.
Boris Budeck
Estou usando o tema Generatepress (criei um tema filho a partir dele para personalização) e não consigo fazer isso funcionar. O shortcode é exibido na página de saída, parece que nem é reconhecido como um shortcode. Eu uso widgets do Elementor e nem os widgets de texto nem os de shortcode funcionam.
Alguma ideia de como fazer funcionar ao usar widgets do Elementor?
Suporte WPBeginner
Olá Boris,
Por favor, tente adicionar este código ao arquivo functions.php do seu tema ou a um plugin específico do site.
add_filter('widget_text', 'do_shortcode');1-click Use in WordPress
Admin
Frederic
um ótimo post, é exatamente o que procuro há muitas horas! e funciona perfeitamente, basta adicionar o código no functions.php do tema e depois adicionar o shortcode na página onde quero que as subpáginas apareçam, e pronto!!!
maravilhoso, muito obrigado pela sua generosidade!!
Suporte WPBeginner
Olá Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Admin
Mariano
Olá!
Obrigado pelo código. Como posso exibir a imagem destacada de cada página filha?
Ron
Como acontece com muitos trechos que encontramos, é preciso passar por todos os comentários para que funcione. O que há de errado em testar o que você escreve?
Alicia
Você pode criar um menu suspenso para páginas pai/filhas no wordpress.com, ou tem que ser a versão .org?
Razvan
E se eu quiser exibir posts filhos, não páginas filhas?
Rudy
Usar este código acaba exibindo a página pai junto com as páginas filhas, o que é redundante. Pelo que entendi, o que realmente precisamos é exibir apenas as páginas filhas, não a página pai. Alguma modificação sugerida que possa fazer isso?
Michael Feske
Great, but it works not
add_shortcode está correto ou deve ser add_filter https://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/ ?
com add_shortcode dá erro Fatal error: Uncaught Error: Call to undefined function add_shortcode()
com add_filter não dá erro mas não funciona
Milos
Na atualização de plugins, por algum motivo estranho, sempre recebo um erro:
Fatal error: Cannot redeclare wpb_list_child_pages() (previously declared in …/wp-content/themes/pagelines/functions.php:25) in …/wp-content/themes/pagelines/functions.php on line 34
Jeffrey Fry
Como você também pode exibir a data da página filha?
ethann
Olá, ótimo artigo,
Você pode me ajudar a criar um dropdown de páginas filhas na página pai. Preciso dessa funcionalidade para um dos meus projetos WordPress e sou totalmente iniciante em WordPress.
Alex
Sou o único que não consegue fazer funcionar?
Tenho a seguinte estrutura
Sobre
— Página 1
— Página 2
— Página 3
Quando estou na página "Sobre" ou em uma página filha (1, 2 ou 3), gostaria de ter uma lista com minha página pai (Sobre) e todas as filhas (1, 2, 3) – Alguém conseguiu fazer isso funcionar?
Thanks!
Kendra
OMG, desculpe, isso é irritante. Por favor, ignore minhas outras postagens. Não percebi que você não podia colar código nos comentários.
Eu NÃO consegui fazer funcionar com wpb_list_child_pages();
Eu CONSEGUI fazer funcionar com echo do_shortcode( ‘[wpb_childpages]’)
E para obter o título da página pai, inseri isso acima da lista de páginas filhas:
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
PHP if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent);
Jean Bishop
Estou usando este código e ele funciona muito bem. É possível exibir categorias em menus junto com páginas?
Michelle
Olá,
Eu quero fazer o seguinte
A página pai deve ser para venda e ou para alugar
Então eu quero que o filho, por exemplo, uma província (gauteng), vincule para venda e para alugar pai.
Como faço isso?
Michelle
Zakhar
Como posso criar um shortcode com parâmetro, por exemplo, [wpb_childpages id=”1″], onde id=”1″ é um id da página pai?
Strand
Olá,
É possível limitar os links a um número específico, como um máximo de 12 páginas filhas?
Obrigado
Aander
Obrigado,
Você poderia explicar, por favor, como posso organizar páginas filhas em uma lista suspensa que seria acessível através da página pai? (Não quero que os visitantes vejam todas as páginas filhas em forma de blogroll.)
Ou seja, na página pai, quero criar uma lista suspensa (listbox) na qual as páginas filhas seriam adicionadas em ordem predefinida (digamos, em ordem alfabética). Após ler a Introdução, um visitante pode prosseguir escolhendo qualquer página da lista de acordo com seu desejo (as páginas filhas não têm conexão lógica, então em qualquer caso ele procurará a página exata).
Meu sonho é realizável?
Obrigado novamente.
Quantum-mecha
Como adiciono paginação para a Página Filha?
Obrigado!
Astrid
Olá Equipe WPBeginner,
Eu usei o código que vocês forneceram com a "opção de shortcode" e funcionou (links para páginas filhas). No entanto, eu queria usar a opção permanente, e isso não funcionou.
Quando adicionei esta linha de código [ ] a página pai retorna um erro 500 e nenhuma página filha é exibida.
O que estou fazendo de errado?
Em tempo, se eu quisesse exibir um excerto com sua respectiva imagem, como eu faria? Obrigado!
Astrid
Consegui resolver isso.
Adicionei o trecho de código e depois adicionei este shortcode [wpb_childpages] à página pai onde eu queria que as páginas filhas fossem exibidas. Incrível!
Agora, para exibir excertos e uma imagem, eu usaria as mesmas queries – assim como posts sob uma categoria.
Thanks in advance
Jade
Oi, eu estava me perguntando o que você quis dizer com 'query'? Como exatamente você fez os excertos e as imagens serem exibidos na página pai?
Obrigado!
Mehar
Realmente útil. Obrigado.
Pradeep
Alguém poderia confirmar se a página de exemplo usada neste tutorial http://optinmonster.com/how-it-works/ usa este recurso ou não? Para mim, parece que eles estão usando abas, em vez de páginas filhas.
Se eu estiver certo, alguém poderia me direcionar para um recurso para obter esse recurso, pois estou desesperadamente procurando uma solução fluida como a que eles têm naquela página?
Muito obrigado,
Pradeep
Andrew Roberts
Para a opção sem shortcode, você pode querer informar aos usuários que eles precisam alterar
return $string;paraecho $string;ouem seu template de página exibir a função
echo page_list_child_pages();Obrigado a Erik por apontar isso acima
Meredith Adams
Obrigado!
Gaby
Obrigado! Eu estava me perguntando por que o código não funcionava...
Howard
Olá, consigo fazer isso funcionar quando visito meu domínio com um subdiretório (por exemplo, example.com/home), mas ao visualizar o site sem ele (example.com), a lista de subpáginas não é exibida. Alguém pode me indicar onde estou errando?
Agradeço desde já – sou muito novo no WordPress.
Emily Jennewein
Como você faz essa função exibir a página pai em si no topo da lista, juntamente com a lista de páginas filhas e netas? Nas páginas filhas, ela não lista a página pai.
Michael
como posso personalizar isso para exibir apenas a página filha de uma página específica?
Yester
Como adicionar uma classe ativa na página atual?
Jenny
Já existe um plugin que faz o mesmo?
e também podemos decidir onde a caixa com as subpáginas irá aparecer em qualquer área da página, não apenas no topo? Usando um plugin
Equipe WPBeginner
Sim, pode ser usado para tipos de postagem personalizados. Assim:
function wpb_list_child_pages() {
global $post;
if ( 'movie' == get_post_type() && $post->post_parent )
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->post_parent . '&echo=0' );
else
$childpages = wp_list_pages( 'post_type=movie&sort_column=menu_order&title_li=&child_of=' . $post->ID . '&echo=0' );
if ( $childpages ) {
$string = '' . $childpages . '';
}
return $string;
}
add_shortcode('wpb_childpages', 'wpb_list_child_pages');
Daniela
Isso é ótimo! Existe uma maneira de fazer o mesmo para Tipos de Postagem Personalizados que têm posts filhos?
Caroline
Também estou curioso!
Se alguém souber, por favor ajude!
dpc
Existe alguma maneira de modificar isso para imprimir posts filhos de um tipo de post personalizado em uma página de post de tipo de post personalizado? Obrigado, é muito útil!
Sokeara
É ótimo para mim! De qualquer forma, eu gostaria de saber como posso exibir o título e a miniatura da página filha na página pai.
Ashley Bell
Olá, tenho a mesma dúvida. Eu realmente gosto de como a lista é estilizada na página "Beginners Blueprint", mas não tenho ideia de como começar. Alguém pode recomendar um artigo para ler ou dar algum conselho, obrigado.
Razvan Zamfir
Olá!
Bom trecho, mas como eu listo apenas as páginas netas?
Obrigado!
amitabha197
Há um erro nas páginas que não têm páginas filhas, então modifiquei ligeiramente
if( count($childpages) != 0 ) {
$string = ” . $childpages . ”;
}
em vez de
if( $childpages ){
$string = ” . $childpages . ”;
}
Equipe WPBeginner
Para executar um shortcode em modelos do WordPress, você precisa adicioná-lo assim:
Matt Rock
Eu não consegui fazer o código do modelo "wpb_list_child_pages();" funcionar, mas o echo shortcode fez o truque. Valeu!
Erik
Apenas mude "return $string" para "echo $string" (isso imprimirá as páginas).
fariha
obrigado, funcionou
Coen Siebenheller
Adicionei o código ao functions.php e quando insiro o shortcode [wpb_childpages] no meu texto, funciona. Mas quando tento adicioná-lo a um dos meus templates, nada aparece. Alguém sabe o que estou fazendo de errado?
Elena Rapisardi
Ótima explicação!!
Existe uma maneira de exibir sempre as páginas pai?
Quin
Isso é brilhante, obrigado.
Existe uma maneira de adaptá-lo para que o Pai exiba o Neto, e não o Filho?
Dejan
Ótima função, obrigado!
Richelly Italo
A ótima ideia, obrigado, cara.
Steph
Você pode nos dizer como parar a lista no primeiro nível? Gostaria de mostrar todas as subpáginas desse pai, mas não os filhos das subpáginas. Obrigado.
Stefan
Apenas adicione &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Ótimo. Adoro essa ideia de um plugin de site e ver o código que você está adicionando (para saber que é limpo e não faz coisas ruins) em vez de depender de algum plugin que pode estar instalando qualquer coisa.
Para algo tão simples quanto listar páginas filhas, concordo que deveria fazer parte de um plugin maior em vez de apenas um plugin, caso contrário, você acaba com tantos plugins que é difícil de acompanhar.
Rishi Gangoly
This is great. I had a page on my website called “Services” and was manually linking the sub-pages, but not any more. Awesome. Thanks for this tip. Worked like a charm and did exactly what I was doing manually.
Bojan
Isso é ótimo! Colocá-lo em um plugin é um ótimo recurso e uma ótima oportunidade para estender a funcionalidade adicionando:
– Imagem em destaque da página filha (como miniatura)
– Título da filha
– O restante dos metadados (autor, data, contagem de comentários)
– Estilização em colunas, talvez
e assim por diante
Dessa forma, teríamos um plugin de Portfólio quase completo – portfólios feitos de Páginas em vez de apenas tipos de postagem personalizados.
Obrigado..
Ivica
O melhor plugin para exibir páginas filhas na barra lateral para aqueles que desejam uma navegação de páginas filhas ainda mais rápida e "limpa":
http://wordpress.org/plugins/child-page-navigation/
yousef mayeli
olá
obrigado, foi muito útil. mas se você pudesse mostrar em vídeo, seria muito mais útil. como tyler moor faria
obrigado
yousef
Nancy
Isso é ótimo! Tenho muitos links adicionados manualmente para páginas filhas, e isso tornará a manutenção do nosso site MUITO mais fácil. Acabei de testar em meu ambiente de desenvolvimento e gostaria de ajustar um pouco a função, para que em uma página filha, quando o shortcode for incluído, todos os filhos do mesmo pai sejam listados, EXCETO a página exibida no momento. Eu ainda estou aprendendo PHP, então, embora eu tente descobrir isso sozinho, agradeceria qualquer ajuda para fazer essa alteração no código.