Como adicionar ícones aos itens do menu de navegação do WordPress

Crie um cardápio

Primeiras coisas primeiro, no functions.php do nosso tema (como sempre, o meu se chama Parque infantil), registraremos um novo local no menu de navegação:

1

function playground_setup() {

2

    //Register menu locations

3

    register_nav_menus(

4

        array(

5

            'header-menu' => __( 'The Header Menu', 'playground' ),

6

            //more locations here

7

        )

8

    );

9

}

10

add_action( 'after_setup_theme', 'playground_setup' );

Através do admin, criaremos um novo menu e o associaremos a este local:

A seguir, exibiremos esse menu em todos os lugares que quisermos usando o wp_nav_menu() função e passando como o valor do theme_location digite o local que criamos.

Em nosso exemplo, este será o menu principal e ficará no cabeçalho.

Aqui está o código do cabeçalho – nosso logotipo virá de um SVG Sprite como discutimos em um tutorial anterior:

1

 class="site-header">

2

3

         class="logo" href="" aria-label="forecastr logo">

4

             width="178" height="38" role="img">

5

                 href="#logo">

6

7

8

9

        wp_nav_menu(

10

            array(

11

                'container'      => false,

12

                'theme_location' => 'header-menu',

13

            )

14

        );

15

        ?>

16

17

Estilize o cabeçalho com CSS

Esta é a aparência do cabeçalho:

Para conseguir esse layout, precisaremos dos seguintes estilos:

1

:root {

2

  --white: #fff;

3

  --orange: #e76f51;

4

  --lightyellow: #fcf5e4;

5

}

6

7

.site-header {

8

  position: sticky;

9

  top: 0;

10

  padding: 3vh 0;

11

  z-index: 1;

12

  background: var(--lightyellow);

13

}

14

15

.site-header nav {

16

  display: flex;

17

  align-items: center;

18

  justify-content: space-between;

19

  padding: 0 20px;

20

}

21

22

.site-header .logo svg {

23

  fill: var(--orange);

24

}

25

26

.site-header .menu {

27

  list-style: none;

28

  padding: 0;

29

  margin: 0;

30

  justify-content: center;

31

  gap: 20px;

32

}

33

34

.site-header .menu,

35

.site-header .menu li,

36

.site-header .menu a {

37

  display: inline-flex;

38

}

39

40

.site-header .menu a {

41

  align-items: center;

42

  gap: 5px;

43

  text-decoration: none;

44

  font-size: 22px;

45

  padding: 0 10px;

46

  border-radius: 5px;

47

  border: 2px solid transparent;

48

  transition: border 0.15s ease-out;

49

}

50

51

.site-header .menu svg,

52

.site-header .menu path {

53

  fill: var(--orange);

54

}

55

56

.site-header .menu .current-menu-item a,

57

.site-header .menu a:hover {

58

  border-color: var(--orange);

59

}

Faça um plano

Vamos agora tornar nosso menu mais atraente adicionando um ícone a cada item do menu. Existem diferentes maneiras de fazer isso, por exemplo:

Aqui iremos com a segunda opção.

Se você procurar esse filtro nos arquivos do WordPress, você o encontrará no wp-includes/nav-menu-template.php caminho de arquivo.

O objetivo é adicionar uma função de retorno de chamada a esse filtro que irá apenas modificar os itens do menu do cabeçalho.

Então, no functions.phpcolocaremos um código inicial semelhante a este:

1

function modify_nav_menu_args( $sorted_menu_items, $args ) {

2

    if ( 'header-menu' === $args->menu->slug ) :

3

        foreach ( $sorted_menu_items as $item ) :

4

            //do something

5

        endforeach;

6

    endif;

7

8

    return $sorted_menu_items;

9

}

10

add_filter( 'wp_nav_menu_objects', 'modify_nav_menu_args', 10, 2 );

Para tornar este processo o mais compreensível possível, adicionaremos ícones de quatro maneiras diferentes.

Ícones da biblioteca Font Awesome

Vamos primeiro discutir como incluir ícones Font Awesome em nosso menu. Para simplificar, carregaremos esta biblioteca através de um CDN como este:

1

//functions.php

2

3

function playground_scripts_and_styles() {

4

    wp_enqueue_script( 'fa-icons', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js');

5

    ...

6

}

7

add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

A seguir, colocaremos as classes de ícones desejadas para cada item de menu no campo de descrição – esse campo não é impresso por padrão no código, a menos que o forcemos.

De volta à nossa função de retorno de chamada, usaremos um i tag para exibir a descrição de cada item do menu – fique à vontade para adicionar aria-hidden="true" se você quiser:

1

//functions.php

2

3

function modify_nav_menu_args( $sorted_menu_items, $args ) {

4

    if ( 'header-menu' === $args->menu->slug ) :

5

        foreach ( $sorted_menu_items as $item ) :

6

            if ( $item->description ) :

7

                $item->title = '. $item->description . '">' . $item->title;

8

            endif;

9

        endforeach;

10

    endif;

11

12

    return $sorted_menu_items;

13

}

14

add_filter( 'wp_nav_menu_objects', 'modify_nav_menu_args', 10, 2 );

No console do navegador, veremos algo assim:

O resultado final será parecido com este – o primeiro item mostra os estados de foco e ativo:

Ícones da coleção Feather

Continuando, vamos aprender como incorporar ícones por meio da coleção de ícones Feather. Novamente, para simplificar, carregaremos esta coleção através de um CDN como este:

1

//functions.php

2

3

function playground_scripts_and_styles() {

4

    wp_enqueue_script( 'feather-icons', 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js' );

5

    ...

6

}

7

add_action( 'wp_enqueue_scripts', 'playground_scripts_and_styles' );

Assim como fizemos com os ícones Font Awesome, colocaremos o nome do ícone desejado para cada item de menu no campo de descrição.

De volta à nossa função de retorno de chamada, usaremos um i tag para exibir a descrição de cada item do menu. Observe a presença do data-feather ícone que a biblioteca exige, conforme mencionado nas instruções.

1

 function modify_nav_menu_args( $sorted_menu_items, $args ) {

2

    if ( 'header-menu' === $args->menu->slug ) :

3

        foreach ( $sorted_menu_items as $item ) :

4

            if ( $item->description ) :

5

                $item->title = '. $item->description . '">' . $item->title;

6

            endif;

7

        endforeach;

8

    endif;

9

10

    return $sorted_menu_items;

11

}

12

add_filter( 'wp_nav_menu_objects', 'modify_nav_menu_args', 10, 2 );

Por último, mas não menos importante, em nosso JavaScript, temos que chamar o método feather.replace() método para associar os nomes dos ícones aos ícones SVG reais.

No console do navegador, veremos algo assim:

O resultado final será parecido com este – o primeiro item mostra os estados de foco e ativo:

Ícones personalizados

Tudo isso parece ótimo, mas e se quisermos usar ícones personalizados? Nesse caso, temos opções diferentes. Vamos ver dois deles em ação.

Carregar ícones para a biblioteca de mídia

Uma opção é fazer upload de todos os ícones para a biblioteca de mídia e depois passar o ID do anexo da imagem na descrição do menu.

Por exemplo, no nosso caso, carreguei os mesmos ícones SVG Feather que usamos antes.

No meu caso, o ID do anexo do ícone inicial é 47.

Então, no retorno de chamada, usaremos o wp_get_attachment_image() função para obter todas as informações deste ícone.

1

function modify_nav_menu_args( $sorted_menu_items, $args ) {

2

    if ( 'header-menu' === $args->menu->slug ) :

3

        foreach ( $sorted_menu_items as $item ) :

4

            if ( $item->description ) :

5

                $item->title = wp_get_attachment_image( $item->description, 'full', true ) . $item->title;

6

            endif;

7

        endforeach;

8

    endif;

9

10

    return $sorted_menu_items;

11

}

12

add_filter( 'wp_nav_menu_objects', 'modify_nav_menu_args', 10, 2 );

No console do navegador, veremos algo assim:

O resultado final ficará assim:

Observe que a cor de preenchimento do ícone não muda nos estados ativo e de foco, pois ele é renderizado como uma imagem e não como SVG.

Crie um novo campo – Plugin ACF

Outra opção é usar um plugin como o plugin WordPress Advanced Custom Fields (ACF) para adicionar um novo campo de imagem aos itens de menu.

Este caso é mais conveniente caso você queira exibir o campo de descrição e precise de outro campo para o ícone.

Através das configurações, especificaremos como tipo de retorno o ID da imagem e não o padrão Matriz de imagens.

Em seguida, faremos upload do ícone desejado:

E finalmente, usaremos ACF’s get_field() função para gerar os ícones de destino:

1

//functions.php

2

3

function modify_nav_menu_args( $sorted_menu_items, $args ) {

4

    if ( 'header-menu' === $args->menu->slug ) :

5

        foreach ( $sorted_menu_items as $item ) :

6

            $icon_id = get_field( 'icon', $item );

7

            if ( $icon_id ) :

8

                $item->title = wp_get_attachment_image( $icon_id, 'full', true ) . $item->title;

9

            endif;

10

        endforeach;

11

    endif;

12

13

    return $sorted_menu_items;

14

}

15

add_filter( 'wp_nav_menu_objects', 'modify_nav_menu_args', 10, 2 );

O código gerado e o resultado são exatamente os mesmos de antes:

Conclusão

Pronto, pessoal! Espero que agora você tenha um bom entendimento de como tornar os menus de navegação do WordPress mais atraentes, incorporando ícones de diferentes bibliotecas de ícones, ou mesmo de suas próprias bibliotecas personalizadas!

Fique ligado, pois mais conteúdo WordPress está chegando. Como sempre, muito obrigado pela leitura!