No passado, mostrei como construir um componente de guia responsivo personalizado baseado em JavaScript. Além disso, há alguns anos, passei pelo processo de customização das abas do Bootstrap, dando a cada aba uma URL identificável, tornando seu conteúdo mais navegável e compartilhável.
Hoje vou mostrar como simular essa funcionalidade no WordPress com páginas filhas.
Cada guia representará uma página secundária com um painel do conteúdo da página. Esse comportamento é ideal quando seu design requer uma interface com guias, mas para fins de SEO, você precisa de URLs compartilháveis e limpos. Outro cenário surge quando cada painel da guia contém conteúdo complexo e não apenas algum texto, e você deseja evitar ter todo o conteúdo em uma página – algo que pode tornar a página de administração mais lenta.
Aqui está um vídeo introdutório que mostra o comportamento esperado:
Nossa interface com guias WordPress
Considere a seguinte estrutura hierárquica onde temos uma página pai e quatro páginas filhas:
Cada página secundária terá um layout como este:
Em relação aos elementos da página:
- Na parte superior, haverá uma localização atual onde apenas o primeiro nível (página inicial) será clicável.
- Depois, teremos as abas que representarão as páginas filhas. A página atual será a guia ativa.
- Abaixo das abas, teremos o painel de abas que mostrará o conteúdo da página atual.
Dependendo das abas que temos, precisamos pensar na interface com abas nas telas mobile. Uma solução rápida é mostrar uma barra de rolagem vertical se a largura das guias for maior que a largura do dispositivo.
Todas as páginas filhas compartilharão o mesmo modelo de página personalizado.
Implementação
Para a parte de implementação, trabalharei com meu costume habitual Parque infantil tema. Usarei os arquivos de um tutorial anterior e atualizarei apenas duas coisas — estas são as que lhe interessam se você planeja incorporar esta técnica em seus projetos:
- Primeiro e mais importante, adicionarei o personalizado
tabs.phparquivo — o modelo de página de todas as páginas filhas e - em segundo lugar, atualizarei o
style.cssarquivo com os estilos de guia.
Para sua conveniência, como sempre, todos os ativos do tema estarão disponíveis em um repositório GitHub.
Dentro do modelo personalizado, faremos o seguinte:
- Crie a farinha de rosca com três níveis de profundidade. O primeiro nível, que será clicável, terá um link para a página inicial. O segundo mostrará o título da página pai (“Empresa” no meu caso). Não será clicável porque não teremos nenhum layout para a página pai. O terceiro mostrará o título da página atual.
- Pegue as páginas filhas do pai da página atual. Você sempre pode personalizar a ordem de suas páginas usando o
sort_columnchave dentro da matriz de argumentos doget_pages()função. A classificação padrão é feita pelo título da postagem em ordem crescente, o que funciona em nosso exemplo. - Percorra-os e gere as guias. Para determinar a aba ativa, ainda dentro do loop, compararemos a URL da página atual com a URL do elemento em loop. Se corresponderem, denotaremos a guia ativa usando o
activeaula. - Imprima o conteúdo da página atual que se comportará como o painel da guia ativa.
Aqui está o código PHP necessário:
1 |
|
2 |
/* Template Name: Tabs Page */
|
3 |
get_header(); |
4 |
|
5 |
$parent_id = wp_get_post_parent_id(); |
6 |
$parent_title = get_the_title( $parent_id ); |
7 |
$child_pages = get_pages( |
8 |
array( |
9 |
'parent' => $parent_id, |
10 |
)
|
11 |
);
|
12 |
?>
|
13 |
|
14 |
|
15 |
|
16 |
if ( have_posts() ) : |
17 |
while ( have_posts() ) : |
18 |
the_post(); |
19 |
?>
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
if ( ! empty( $child_pages ) ) : |
25 |
/*BREADCRUMBS*/
|
26 |
?>
|
27 |
|
28 |
|
29 |
|
30 |
esc_html_e( 'Home', 'playground' ); ?>
|
31 |
|
32 |
|
33 |
|
34 |
echo esc_html( $parent_title ); ?>
|
35 |
|
36 |
|
37 |
the_title(); ?>
|
38 |
|
39 |
|
40 |
|
41 |
/*TABS*/ ?>
|
42 |
|
43 |
|
44 |
|
45 |
foreach ( $child_pages as $key => $child_page ) : |
46 |
$child_page_id = $child_page->ID; |
47 |
$child_page_link = get_page_link( $child_page_id ); |
48 |
$active = get_permalink() === $child_page_link ? ' active' : ''; |
49 |
?>
|
50 |
|
51 |
|
52 |
echo esc_html( $child_page->post_title ); ?>
|
53 |
|
54 |
|
55 |
endforeach; ?>
|
56 |
|
57 |
|
58 |
endif; ?>
|
59 |
|
60 |
|
61 |
|
62 |
/*TAB CONTENT*/ ?>
|
63 |
|
64 |
|
65 |
the_content(); ?>
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
endwhile; |
71 |
endif; |
72 |
?>
|
73 |
|
74 |
|
75 |
|
76 |
get_footer(); |
E os estilos associados:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.section-with-tabs .breadcrumbs { |
4 |
padding: 0; |
5 |
margin: 0 0 20px; |
6 |
list-style: none; |
7 |
display: flex; |
8 |
gap: 20px; |
9 |
font-size: 14px; |
10 |
color: var(--darkgray); |
11 |
}
|
12 |
|
13 |
.section-with-tabs .breadcrumbs .breadcrumb { |
14 |
position: relative; |
15 |
}
|
16 |
|
17 |
.section-with-tabs .breadcrumbs .breadcrumb:not(:first-child)::before { |
18 |
content: "/"; |
19 |
position: absolute; |
20 |
top: 50%; |
21 |
left: -13px; |
22 |
transform: translateY(-50%); |
23 |
}
|
24 |
|
25 |
.section-with-tabs .tabs-wrapper { |
26 |
white-space: nowrap; |
27 |
padding-bottom: 10px; |
28 |
overflow-x: auto; |
29 |
}
|
30 |
|
31 |
.section-with-tabs .tabs-wrapper::-webkit-scrollbar { |
32 |
height: 8px; |
33 |
}
|
34 |
|
35 |
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-thumb, |
36 |
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-track { |
37 |
border-radius: 6px; |
38 |
}
|
39 |
|
40 |
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-thumb { |
41 |
background: var(--darkpink); |
42 |
}
|
43 |
|
44 |
.section-with-tabs .tabs-wrapper::-webkit-scrollbar-track { |
45 |
background: var(--lightgray); |
46 |
}
|
47 |
|
48 |
.section-with-tabs .tabs { |
49 |
padding: 0; |
50 |
margin: 0; |
51 |
list-style: none; |
52 |
display: flex; |
53 |
}
|
54 |
|
55 |
.section-with-tabs .tabs .tab { |
56 |
flex-grow: 1; |
57 |
}
|
58 |
|
59 |
.section-with-tabs .tabs .tab-link { |
60 |
display: block; |
61 |
text-decoration: none; |
62 |
font-weight: bold; |
63 |
font-size: 18px; |
64 |
padding: 5px; |
65 |
color: var(--darkgray); |
66 |
min-width: 120px; |
67 |
border-bottom: 2px solid var(--lightgray); |
68 |
transition: all 0.2s; |
69 |
}
|
70 |
|
71 |
.section-with-tabs .tabs .tab.active .tab-link, |
72 |
.section-with-tabs .tabs .tab .tab-link:hover { |
73 |
color: var(--darkpink); |
74 |
border-color: var(--darkpink); |
75 |
}
|
76 |
|
77 |
.section-with-content { |
78 |
text-align: left; |
79 |
margin-top: 60px; |
80 |
}
|
Conclusão
Aqui está uma captura de tela final do que você construiu!
Durante este tutorial, aprendemos como transformar páginas secundárias do WordPress em guias de navegação. Essa técnica funciona muito bem se você planeja ter uma navegação por guias com URLs limpos e compartilháveis.
Em um próximo tutorial, mostrarei como navegar entre páginas filhas com links próximos/anteriores. Fique atento!
