{"id":233540,"date":"2023-02-16T17:16:00","date_gmt":"2023-02-16T14:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233540"},"modified":"2022-11-11T00:14:28","modified_gmt":"2022-11-10T21:14:28","slug":"como-adicionar-icones-fontawesome-a-itens-de-menu-com-campos-personalizados-avancados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-adicionar-icones-fontawesome-a-itens-de-menu-com-campos-personalizados-avancados\/","title":{"rendered":"Como adicionar \u00edcones Fontawesome a itens de menu com campos personalizados avan\u00e7ados"},"content":{"rendered":"\n

Este post mostrar\u00e1 como voc\u00ea pode usar os campos personalizados avan\u00e7ados (ACF) para permitir a adi\u00e7\u00e3o de \u00edcones ao seu menu. Neste exemplo, adicionaremos um \u00edcone Fontawesome<\/a>, mas voc\u00ea pode modificar o c\u00f3digo para atender \u00e0s suas necessidades. Voc\u00ea pode adicionar um seletor de arquivos para arquivos SVG ou outra coisa.<\/p>\n

Este guia funcionar\u00e1 com a vers\u00e3o gratuita do Advanced Custom Fields<\/a>, mas certifique-se de ter a vers\u00e3o 5.6 ou mais recente.<\/p>\n

Adicionando o grupo e o campo ACF<\/h2>\n

A primeira etapa \u00e9 adicionar o pr\u00f3prio campo aos itens de menu. Este guia adicionar\u00e1 uma entrada de texto para digitar o nome da classe para o \u00edcone Fontawesome, mas se voc\u00ea quiser outra solu\u00e7\u00e3o (por exemplo, seletor de arquivo para arquivo SVG), modifique as entradas do campo.<\/p>\n

Certifique-se de que a localiza\u00e7\u00e3o do grupo de campos personalizados avan\u00e7ados esteja definida como "Item de menu". Voc\u00ea pode defini-la como "Todos" ou pode especificar por locais de menu ou por menus espec\u00edficos.<\/p>\n

\"Como<\/a><\/p>\n

Se voc\u00ea estiver adicionando seus campos e agrupando por c\u00f3digo, defina o par\u00e2metro de localiza\u00e7\u00e3o como ‘ nav_menu_item<\/code>‘. Consulte minha refer\u00eancia completa para adicionar campos ACF por c\u00f3digo<\/a> para saber mais.<\/p>\n

acf_add_local_field_group([\n    ...\n    'location' => [\n        [\n            [\n                'param' => 'nav_menu_item',\n                'operator' => '==',\n                'value' => 'all'\n            ]\n        ]\n    ]\n]);<\/code><\/pre>\n
Quanto ao campo em si, adicionaremos uma entrada de texto simples com o nome ‘ fontawesome_icon<\/code>‘.<\/p>\n
\"Como<\/a><\/p>\n
Ou por c\u00f3digo, adicione o campo assim:<\/p>\n
[\n    'key' => 'field_fontawesome_icon',\n    'label' => __('Fontawesome icon class', 'txtdomain'),\n    'name' => 'fontawesome_icon',\n    'instructions' => __('Type the name of a <a href=\"https:\/\/fontawesome.com\/icons?d=gallery&m=free\" target=\"_blank\">Fontawesome icon<\/a> class. Example: \"fab fa-facebook\".', 'txtdomain'),\n    'type' => 'text',\n]<\/code><\/pre>\n
Para torn\u00e1-lo mais f\u00e1cil de usar, \u00e9 uma boa ideia adicionar uma descri\u00e7\u00e3o com um link para a vis\u00e3o geral dos \u00edcones Fontawesome dispon\u00edveis<\/a>. Estou adicionando o link para mostrar apenas \u00edcones gratuitos, n\u00e3o qualquer um do Pro, pois esta \u00e9 a biblioteca que tenho no meu tema.<\/p>\n
Depois de salvar o campo no admin ou no c\u00f3digo, agora voc\u00ea deve obter o campo adicional ao expandir um item de menu:<\/p>\n
\"Como<\/a><\/p>\n
Uma nota sobre as aulas do Fontawesome<\/h2>\n
Antigamente, antes do Fontawesome 5, fornecer uma classe Fontawesome poderia ser um pouco simplificado para o usu\u00e1rio. Para o carrinho de compras voc\u00ea poderia simplesmente escrever “carrinho de compras" e em nosso c\u00f3digo poder\u00edamos adicionar a classe ” fa fa-<\/code>” e ent\u00e3o a classe dada (resultando em ” fa fa-shopping-cart<\/code>“). Mas desde Fontawesome 5 as aulas t\u00eam sido um pouco complicadas.<\/p>\n
A classe “global” ” fa<\/code>” foi substitu\u00edda por categorias espec\u00edficas para o tipo de \u00edcone. Por exemplo, m\u00eddias sociais ou logotipos est\u00e3o na categoria marcas e exigem a classe ” fab<\/code>“, \u00edcones s\u00f3lidos exigem a classe ” fas<\/code>“, enquanto os \u00edcones regulares exigem ” far<\/code>” e assim por diante. \u00c9 por isso que agora temos que exigir que o usu\u00e1rio do tema digite ambas as classes Fontawesome. Deve ser f\u00e1cil encontrar a classe certa, pois isso \u00e9 claramente mostrado em todos os \u00edcones do site do Fontawesome:<\/p>\n
\"Como<\/a><\/p>\n
Como exemplo, voc\u00ea precisa inserir ” fas fa-shopping-cart<\/code>” em nosso campo personalizado em um item de menu para o \u00edcone do carrinho de compras.<\/p>\n
Exibindo o \u00edcone no menu<\/h2>\n
A pr\u00f3xima e \u00faltima etapa \u00e9 renderizar o \u00edcone no menu, se estiver definido. Para fazer isso, usamos o filtro do WordPress [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Este filtro \u00e9 aplicado para cada menu em todos os menus renderizados logo antes de gerar seu HTML, permitindo-nos modificar a sa\u00edda de texto, classes e muito mais.<\/p>\n
Como voc\u00ea deseja gerar o \u00edcone, fica a seu crit\u00e9rio. Deseja substituir o texto do link pelo \u00edcone ou deseja mostrar o \u00edcone antes ou depois do link de texto? Seguiremos o costume de Fontawesome produzindo uma <i><\/code>tag com a classe fornecida.<\/p>\n
add_filter('wp_nav_menu_objects', function($items) {\n    foreach ($items as &$item) {\n        $icon = get_field('fontawesome_icon', $item);     \n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n        }\n    }\n    return $items;\n});<\/code><\/pre>\n
A maneira como modificamos os itens de menu \u00e9 percorrendo os itens de menu usando passagem por refer\u00eancia (adicionando um &<\/code>antes da vari\u00e1vel). Isso significa que qualquer altera\u00e7\u00e3o que fizermos no item ser\u00e1 aplicada ao objeto de itens parentais.<\/p>\n
Para cada item usamos a get_field()<\/code>fun\u00e7\u00e3o Advanced Custom Field’s para obter o valor do nosso campo, ‘ fontawesome_icon<\/code>‘. Se estiver definido, estamos prontos para ir. O exemplo de c\u00f3digo acima adicionar\u00e1 o \u00edcone antes do texto. Se voc\u00ea quiser adicionar o \u00edcone ap\u00f3s o texto, substitua a linha #6<\/code>por:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
Ou se voc\u00ea quiser substituir o texto por um \u00edcone \u2013 n\u00e3o mostrando nenhum texto, substitua a linha #6<\/code>por:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Eu adicionei um title<\/code>atributo para que seja um pouco mais informativo para o usu\u00e1rio front-end. Como o texto \u00e9 removido, \u00e0s vezes pode ser confuso para o usu\u00e1rio final para que serve o item de menu. Mas o title<\/code>atributo garante que o usu\u00e1rio receba uma dica de ferramenta com o texto do item de menu ao passar o mouse sobre o \u00edcone. Isso \u00e9 totalmente opcional, \u00e9 claro.<\/p>\n
Se voc\u00ea estiver usando um campo de um tipo diferente, por exemplo, um seletor de arquivos para arquivos SVG, ser\u00e1 necess\u00e1rio ajustar a sa\u00edda de acordo.<\/p>\n
E \u00e9 isso! Agora voc\u00ea deve obter um \u00edcone Fontawesome em todos os lugares em que o menu \u00e9 renderizado. Mas voc\u00ea provavelmente precisa adicionar algum estilo a ele. Por exemplo, adicionar algum espa\u00e7o entre o \u00edcone e o texto.<\/p>\n
Adicionando classes para um estilo mais f\u00e1cil<\/h3>\n
Voc\u00ea pode adicionar classes personalizadas \u00e0 <i><\/code>tag ou adicionar mais HTML, se necess\u00e1rio.<\/p>\n
Se voc\u00ea precisar adicionar uma classe ao item de menu de encapsulamento (o li<\/code>elemento), voc\u00ea ter\u00e1 acesso total \u00e0s classes de itens de menu que ser\u00e3o aplicadas no filtro acima. Adicione uma classe de item de menu personalizado para itens de menu de \u00edcone da seguinte forma:<\/p>\n
        ...\n        if ($icon) {\n            $item->title = '<i class=\"'. $icon. '\"><\/i>'. $item->title;\n            $item->classes[] = 'menu-with-icon';\n        }\n        ...<\/code><\/pre>\n
O menu deve sair assim:<\/p>\n
\"Como<\/a><\/p>\n
Fonte de grava\u00e7\u00e3o:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Como adicionar \u00edcones Fontawesome aos itens de menu. Usamos Campos Personalizados Avan\u00e7ados para permitir a defini\u00e7\u00e3o de classes. \u00c9 f\u00e1cil ajustar o c\u00f3digo para \u00edcones SVG ou similares.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,837,1110,806,806,837,846,846,867,867],"tags":[1170],"class_list":["post-233540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-guia-para-iniciantes","category-n-a","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233540"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233540\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}