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.
Denise
Para páginas de terceiro nível (netos), 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 neta, eu só vejo as outras páginas netas no menu. Como este código precisaria ser modificado para mostrar todos os links filhos, mesmo quando em páginas netas?
vicky
como obter os ids das páginas filhas, não os ids das netas... por favor ajude, sou um 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 funcionar na parte administrativa, mas depois no próprio site não há atributos de página/menus suspensos da categoria Receitas. O que estou fazendo de errado? Tudo está 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 de shortcode funcionam.
Alguma ideia de como fazer funcionar ao usar widgets do Elementor?
WPBeginner Support
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 eu procuro há muitas horas! e funciona como mágica, basta adicionar o código no function.php do tema e depois adicionar o shortcode na página onde quero que as subpáginas apareçam, e voilà!!!
maravilhoso, muito obrigado pela sua generosidade!!
WPBeginner Support
Olá Frederic,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for more WordPress video tutorials.
Admin
Mariano
Oi!
Obrigado pelo código. Como posso exibir a imagem destacada de cada página filha?
Ron
Como acontece com muitos dos 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 fazer 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 é erro Fatal error: Uncaught Error: Call to undefined function add_shortcode()
com add_filter não é erro mas funciona normalmente
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 em uma página pai. Preciso dessa funcionalidade para um dos meus projetos wordpress e sou totalmente novato em wordpress.
Alex
Sou o único que não consegue fazer funcionar?
Eu 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), eu 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 isto 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 a filha, por exemplo, uma província (Gauteng), se vincule à página pai de "para venda" e à página pai de "para alugar".
Como faço isso?
Michelle
Zakhar
Como posso criar um shortcode com um parâmetro, por exemplo, [wpb_childpages id="1"], onde id="1" é o 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 as 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 eu quero criar uma lista suspensa (listbox) para a qual as páginas filhas seriam adicionadas em uma ordem predefinida (digamos, em ordem alfabética). Após ler a Introdução, um visitante pode prosseguir escolhendo qualquer página da lista à sua vontade (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,
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 uma nota lateral, se eu quisesse exibir um trecho com sua respectiva imagem, como eu faria? Obrigado!
Astrid
Eu consegui descobrir 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 trechos e uma imagem, eu usaria as mesmas consultas - assim como posts sob uma categoria.
Thanks in advance
Jade
Olá, eu estava me perguntando o que você quis dizer com 'query'? Como exatamente você fez os trechos e as imagens serem exibidos na página pai?
Obrigado!
Mehar
Muito ú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 que não é de shortcode, você pode querer informar aos usuários que eles precisam alterar
return $string;paraecho $string;ouno template da página deles, usar echo para 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 (ex: example.com/home), mas ao visualizar o site sem isso (example.com), a lista de subpáginas não é exibida. Alguém pode me indicar onde estou errando?
Agradeço desde já – muito novo no Wordpress.
Emily Jennewein
Como faço para que esta função exiba a própria página pai 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 você adiciona uma classe ativa no atual?
Jenny
Existe agora um plugin que pode fazer o mesmo?
e também podemos decidir onde a caixa com as páginas de submenus irá em qualquer área da página, não apenas no topo da página? 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 uma maneira de modificar isso para imprimir posts filhos de tipos de postagem personalizados em uma página de post de tipo de postagem personalizado? Obrigado, é muito útil!
Sokeara
É muito bom 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 páginas de netos?
Obrigado!
amitabha197
Há um erro nas páginas que não têm páginas filhas, então eu 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
Não consegui fazer o código do template “wpb_list_child_pages();” funcionar, mas o echo shortcode resolveu. Valeu!
Erik
Basta mudar o “return $string” para “echo $string” (isso imprimirá as páginas).
fariha
obrigado, funcionou
Coen Siebenheller
Adicionei o código ao functions.php e quando adiciono o shortcode [wpb_childpages] no meu texto, funciona. Mas quando tento adicioná-lo a um dos meus templates, não aparece nada. Alguém sabe o que estou fazendo de errado?
Elena Rapisardi
Ótima explicação!!
Há alguma forma de exibir sempre as páginas pai?
Quin
Isso é brilhante, obrigado.
Existe alguma maneira de adaptá-lo para que o Pai exiba o Neto, e não o Filho?
Dejan
Ótima função, obrigado!
Richelly Italo
Ótima ideia, obrigado cara.
Steph
Você pode nos dizer como parar a lista no primeiro nível? Eu gostaria de mostrar todas as subpáginas desse pai, mas não os filhos das subpáginas. Obrigado.
Stefan
Basta adicionar &depth=1
sort_column=menu_order&title_li=&child_of=’ . $post->post_parent . ‘&echo=0&depth=1
Martin Capodici
Ótimo. Eu amo 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 poderia 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 página filha
– resto 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 feitos de tipos de postagem personalizados.
Obrigado..
Ivica
O melhor plugin para exibir páginas filhas em uma 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 utilizável. Como Tyler Moore faria.
Obrigado.
Yousef
Nancy
Isso é ótimo! Tenho muitos links adicionados manualmente para páginas filhas, e isso vai 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, de modo que em uma página filha, quando o shortcode for incluído, todas as filhas do mesmo pai sejam listadas EXCETO a página atualmente exibida. Eu ainda estou aprendendo PHP, então, embora eu tente descobrir isso sozinho, agradeceria qualquer ajuda para fazer essa alteração no código.