Exibir todos os sub-níveis de pagina no WordPress

O WordPress não disponibiliza (até onde eu sei) uma função nativa para exibir todos os níveis de páginas, então segue uma função para solucionar este “problema”, mas antes vamos entender o que seria os níveis de página.

Por exemplo, temos uma página principal (Pai) chamada açai, para essa página eu quero criar uma sub-página para falar dos acompanhamentos, então criaremos uma página filha (ou sub-página) da página açai chamada acompanhamentos, para ficar mais detalhado eu vou criar uma página para cada acompanhamento e deixarei como páginas filhas de acompanhamento, são elas, leite em pó, granola, leite condensado e banana. Então nossas estrutura de página ficou assim:

  • açai -> página principal
    • acompanhamentos -> página filha de nível 1
      • leite em pó -> página filha de nível 2
      • granola -> página filha de nível 2
      • leite condensado -> página filha de nível 2
      • banana -> página filha de nível 2

Neste exemplo acima temos 2 níveis de sub-paginas, a função abaixo exibirá a lista de pagina semelhante ao exemplo, vamos a ele:

 

function show_all_children_page( $post_id, $current_level = 1) {
    $children = get_posts( array(
        'post_type' =>'page',
        'posts_per_page' => -1,
        'post_parent' => $post_id,
        'order_by' => 'title',
        'order' => 'ASC' ) );
    if ( empty($children) ) return;
    echo '<ul class="children level-'.$current_level.'-children">';
    foreach ($children as $child) {
        echo '<li>';
        echo '<a href="'.get_permalink($child->ID).'">';
        echo apply_filters( 'the_title', $child->post_title );
        echo '</a>';
        // agora chamar a mesma função para a pagina filha desta pagina filha
        show_all_children_page( $child->ID, $current_level+1 );
        echo '</li>';
        }
    echo '</ul>';
    }

Seguindo o exemplo de estrutura de paginas citada acima a saída html ficaria a seguinte:

<ul class="children level-1-children">
	<li>
		<a href="#">Açai</a>
		<ul class="children level-2-children">
			<li>
				<a href="#">Acompanhamentos</a>
				<ul class="children level-3-children">
					<li><a href="#">Leite em pó</a></li>
					<li><a href="#">Granola</a></li>
					<li><a href="#">Leite condensado</a></li>
					<li><a href="#">Banana</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Perceba que para cada inicio de novo nível temos a class level-x-children, onde o ‘x’ seria o numero do nível correspondente.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>