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

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:

• 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.

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.

• A segunda variação (padrão) substituirá os títulos dos links codificados pelos títulos das páginas irmãs apropriadas, se existirem.

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:

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();

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

• O $child_pages array armazenará quatro objetos. Cada objeto representará uma página filha.

• 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!