Como navegar em páginas secundárias por meio de links seguintes/anteriores no WordPress

Em um tutorial recente, abordamos um método para converter páginas secundárias do WordPress em guias de navegação. Hoje, daremos um passo adiante e aprenderemos como navegar entre essas páginas com os links seguintes e anteriores.

Antes de começar, recomendo que você leia primeiro o tutorial anterior e depois volte aqui, pois este tutorial é sua continuação.

Como de costume em meus tutoriais de WordPress, aqui está um vídeo introdutório que mostra o comportamento esperado:


Apenas um rápido lembrete do tutorial anterior:

  • Em nosso backend, existe esta estrutura:
Páginas de administraçãoPáginas de administraçãoPáginas de administração
  • Todas as páginas secundárias compartilham o mesmo modelo de página personalizado. Claro que no seu caso cada página pode ter um template diferente.
Nosso modelo de guias personalizadasNosso modelo de guias personalizadasNosso modelo de guias personalizadas

O objetivo de hoje é facilitar a navegação para páginas irmãs por meio dos links seguintes e anteriores. No meu caso, todas as páginas contêm algum conteúdo fictício que cabe até na tela de um laptop, então a navegação extra parece desnecessária. No entanto, em um cenário real, as páginas podem ser muito longas, então os usuários precisam rolar até as guias para navegar até as outras páginas – algo que certamente não é fácil de usar.

Forneceremos duas variações de navegação:

  • Primeiro, com o padrão Próximo e Anterior títulos de links.
Primeira variação de navegaçãoPrimeira variação de navegaçãoPrimeira variação de navegação
  • A segunda variação (padrão) substituirá os títulos dos links codificados pelos títulos das páginas irmãs apropriadas, se existirem.
Segunda variação de navegaçãoSegunda variação de navegaçãoSegunda variação de navegação

Implementação

Para a parte de implementação, como sempre, trabalharei com meu custom Parque infantil tema e utilize, como ponto de partida, os arquivos do tutorial anterior.

Aqui está a estrutura atualizada do tema – descreverei todas as adições de código:

Arquivos de temaArquivos de temaArquivos de tema

Para sua comodidade, todos os arquivos temáticos deste exercício estarão disponíveis no child-pages-navigation branch deste repositório GitHub. O main branch incluirá os arquivos do tutorial anterior!

Algumas notas:

  • Adicionaremos a lógica para a parte de navegação dentro do tabs-navigation.php arquivo parcial.
  • Incluiremos este arquivo dentro do tabs.php modelo de página e passe para ele como argumento o array que armazena todas as páginas filhas assim:
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
 class="site-main">
15
    
16
    if ( have_posts() ) :
17
        while ( have_posts() ) :
18
            the_post();
19
            ?>
20
             id="post- the_ID(); ?>"  post_class(); ?>>
21
                ...
22
                
23
                
24
                /*NAVIGATION*/
25
                get_template_part( 'partials/tabs-navigation', null, array( 'child_pages' => $child_pages ) );
26
                ?>
27
            
28
            
29
        endwhile;
30
    endif;
31
    ?>
32

33

34

35
get_footer();

Desde o WordPress 5.5, o get_template_part() função aceita um terceiro argumento que nos permite passar umvalores adicionais para o arquivo de modelo correspondente.

Vamos detalhar a lógica da navegação:

  • O $child_pages array armazenará quatro objetos. Cada objeto representará uma página filha.
A representação da página como um objetoA representação da página como um objetoA representação da página como um objeto
  • Usaremos as funções de array do PHP array_search() e array_column() para encontrar a chave que representa a página filha atual dentro do $child_pages variedade. Então, por exemplo, se estivermos no História página, este será 0, na Parceiros será 1 e assim por diante. Novamente, como um lembrete, você pode personalizar a ordem das páginas usando o sort_column chave dentro da matriz de argumentos do get_pages() função.
  • Com essas informações em mente, seremos capazes de encontrar os objetos da página seguinte e anterior diminuindo e aumentando em um a chave de destino, respectivamente.
  • A seguir, construiremos a marcação para a navegação verificando a cada vez se a próxima página e a anterior existem. Assim, por exemplo, o História a página terá apenas uma próxima página e sua página anterior será nula. Opcionalmente, adicionaremos um título de navegação que aparecerá apenas nos leitores de tela graças ao screen-reader-text Classe CSS. A partir daqui, você pode tornar as coisas mais acessíveis anexando o aria-label atribuir aos links.
  • Conforme mencionado no início, haverá duas variações de navegação. Por padrão, os títulos dinâmicos dos irmãos aparecerão, mas você pode optar pelo codificado Próximo e Anterior títulos (comentados no momento).
  • Como o tema possui configuração para SVG Sprites, adicionaremos os ícones utilizando esta técnica. Os dois ícones de divisa virão da biblioteca Font Awesome e ficarão dentro do sprites.php arquivo parcial como este:
1
 id="circle-chevron-left" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512">
2
     d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z"/>
3

4
 id="circle-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
5
     d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/>
6

Aqui está o código PHP adicionado no tabs-navigation.php arquivo:

1

2
$child_pages      = $args['child_pages'];
3
$current_page_key = array_search( get_the_ID(), array_column( $child_pages, 'ID' ) );
4
$prev_page        = $child_pages[ $current_page_key - 1 ];
5
$next_page        = $child_pages[ $current_page_key + 1 ];
6
?>
7

8
 class="section-tabs-navigation">
9
     class="container container-sm">
10
         class="navigation">
11
             class="screen-reader-text">
12
                 esc_html_e( 'Navigation between the company pages', 'playground' ); ?>
13
            
14
             if ( $prev_page ) : ?>
15
                 class="previous" href=" echo esc_url( get_permalink( $prev_page ) ); ?>">
16
                     width="24" height="24" aria-hidden="true">
17
                         xlink:href="#circle-chevron-left">
18
                    
19
                    
20
                    esc_html_e( 'Previous', 'playground' );
21
                    //echo esc_html( get_the_title( $prev_page ) );

22
                    ?>
23
                
24
                
25
            endif;
26
            if ( $next_page ) :
27
                ?>
28
                 class="next" href=" echo esc_url( get_permalink( $next_page ) ); ?>">
29
                    
30
                    esc_html_e( 'Next', 'playground' );
31
                    //echo esc_html( get_the_title( $next_page ) );

32
                    ?>
33
                     width="24" height="24" aria-hidden="true">
34
                         xlink:href="#circle-chevron-right">
35
                    
36
                
37
             endif; ?>
38
        
39
    
40

E os estilos associados – observe o margin-left: auto estilo que adicionamos ao link da próxima página para garantir que sempre ficará no canto direito:

1
/*CUSTOM VARIABLES HERE*/
2

3
.screen-reader-text {
4
    border: 0;
5
    clip: rect(1px, 1px, 1px, 1px);
6
    clip-path: inset(50%);
7
    height: 1px;
8
    margin: -1px;
9
    overflow: hidden;
10
    padding: 0;
11
    position: absolute;
12
    width: 1px;
13
    word-wrap: normal !important;
14
}
15

16
.section-tabs-navigation .navigation {
17
    position: relative;
18
    display: flex;
19
    padding-top: 40px;
20
    margin-top: 40px;
21
}
22

23
.section-tabs-navigation .navigation::before {
24
    content: "";
25
    position: absolute;
26
    top: 0;
27
    left: 50%;
28
    transform: translateX(-50%);
29
    width: 25%;
30
    border-top: 1px solid var(--lightgray);
31
}
32

33
.section-tabs-navigation a {
34
    display: flex;
35
    align-items: center;
36
    gap: 10px;
37
    text-decoration: none;
38
}
39

40
.section-tabs-navigation .next {
41
    margin-left: auto;
42
}
43

44
.section-tabs-navigation svg {
45
    fill: var(--darkpink);
46
}

Conclusão

Feito! Durante este tutorial, aprendemos uma técnica que facilita a navegação da página secundária do WordPress através dos links seguintes e anteriores. Esperançosamente, você encontrou algum valor nele e planeja usá-lo em breve!

Como sempre, muito obrigado pela leitura!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *