{"id":233495,"date":"2023-02-16T16:41:00","date_gmt":"2023-02-16T13:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233495"},"modified":"2022-11-11T00:00:50","modified_gmt":"2022-11-10T21:00:50","slug":"como-agregar-iconos-de-fontawesome-a-los-elementos-del-menu-con-campos-personalizados-avanzados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-agregar-iconos-de-fontawesome-a-los-elementos-del-menu-con-campos-personalizados-avanzados\/","title":{"rendered":"C\u00f3mo agregar \u00edconos de Fontawesome a los elementos del men\u00fa con campos personalizados avanzados"},"content":{"rendered":"\n

Esta publicaci\u00f3n le mostrar\u00e1 c\u00f3mo puede usar los campos personalizados avanzados (ACF) para permitir agregar \u00edconos a su men\u00fa. En este ejemplo, agregaremos un \u00edcono de Fontawesome<\/a>, pero puede modificar el c\u00f3digo para que se ajuste a sus necesidades. En su lugar, podr\u00eda agregar un selector de archivos para archivos SVG o algo m\u00e1s.<\/p>\n

Esta gu\u00eda funcionar\u00e1 con la versi\u00f3n gratuita de Campos personalizados avanzados<\/a>, pero aseg\u00farese de tener la versi\u00f3n 5.6 o posterior.<\/p>\n

Agregar el grupo y el campo ACF<\/h2>\n

El primer paso es agregar el propio campo a los elementos del men\u00fa. Esta gu\u00eda agregar\u00e1 una entrada de texto para escribir el nombre de la clase para el icono de Fontawesome, pero si desea otra soluci\u00f3n (por ejemplo, un selector de archivos para un archivo SVG), modifique las entradas de campo.<\/p>\n

Aseg\u00farese de que la ubicaci\u00f3n de su grupo de campos personalizados avanzados est\u00e9 configurada en "Elemento de men\u00fa". Puede configurarlo en "Todos", o puede especificar por ubicaciones de men\u00fa o por men\u00fas espec\u00edficos.<\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Si est\u00e1 agregando sus campos y agrupando por c\u00f3digo, establezca el par\u00e1metro de ubicaci\u00f3n en ‘ nav_menu_item<\/code>‘. Consulte mi referencia completa para agregar campos ACF por c\u00f3digo<\/a> para obtener m\u00e1s informaci\u00f3n.<\/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
En cuanto al campo en s\u00ed, agregaremos una entrada de texto simple con el nombre ‘ fontawesome_icon<\/code>‘.<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
O por c\u00f3digo, agregue el campo as\u00ed:<\/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 que sea m\u00e1s f\u00e1cil de usar, es una buena idea agregar una descripci\u00f3n con un enlace a la descripci\u00f3n general de los \u00edconos de Fontawesome disponibles<\/a>. Estoy agregando el enlace para mostrar solo los \u00edconos gratuitos, no ninguno de los Pro, ya que esta es la biblioteca que tengo en mi tema.<\/p>\n
Despu\u00e9s de guardar el campo en admin o en el c\u00f3digo, ahora deber\u00eda obtener el campo adicional cuando expanda un elemento del men\u00fa:<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Una nota sobre las clases de Fontawesome<\/h2>\n
En los "viejos tiempos", antes de Fontawesome 5, proporcionar una clase de Fontawesome pod\u00eda simplificarse un poco para el usuario. Para el carrito de compras, simplemente podr\u00eda escribir "carrito de compras" y en nuestro c\u00f3digo podr\u00edamos agregar la clase " fa fa-<\/code>" y luego la clase dada (dando como resultado " fa fa-shopping-cart<\/code>"). Pero desde Fontawesome 5 las clases se han complicado un poco.<\/p>\n
La clase "global" " fa<\/code>" ha sido reemplazada por categor\u00edas espec\u00edficas para el tipo de icono. Por ejemplo, las redes sociales o los logotipos est\u00e1n en la categor\u00eda de marcas y requieren la clase " fab<\/code>", los \u00edconos s\u00f3lidos requieren la clase " fas<\/code>", mientras que los \u00edconos regulares requieren " far<\/code>", y as\u00ed sucesivamente. Esta es la raz\u00f3n por la que ahora tenemos que solicitar al usuario del tema que escriba en ambas clases de Fontawesome. Deber\u00eda ser f\u00e1cil encontrar la clase correcta, ya que esto se muestra claramente en cada \u00edcono en el sitio de Fontawesome:<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Como ejemplo, debe ingresar " fas fa-shopping-cart<\/code>" en nuestro campo personalizado en un elemento del men\u00fa para el \u00edcono del carrito de compras.<\/p>\n
Mostrar el icono en el men\u00fa<\/h2>\n
El siguiente y \u00faltimo paso es representar el \u00edcono en el men\u00fa si est\u00e1 configurado. Para ello utilizamos el filtro de WordPress [wp_nav_menu_objects](https:\/\/developer.wordpress.org\/reference\/hooks\/wp_nav_menu_objects\/)<\/code>. Este filtro se aplica a cada men\u00fa en todos los men\u00fas representados justo antes de generar su HTML, lo que nos permite modificar la salida de texto, las clases y m\u00e1s.<\/p>\n
La forma en que desea generar el icono depende nuevamente de usted. \u00bfDesea reemplazar el texto del enlace con el icono o desea mostrar el icono antes o despu\u00e9s del enlace de texto? Seguiremos la costumbre de Fontawesome generando una <i><\/code>etiqueta con la clase proporcionada.<\/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
La forma en que modificamos los elementos del men\u00fa es recorriendo los elementos del men\u00fa usando pasar por referencia (agregando un &<\/code>antes de la variable). Esto significa que cualquier cambio que hagamos en el elemento, se aplicar\u00e1 al objeto de elementos de crianza.<\/p>\n
Para cada elemento, usamos la get_field()<\/code>funci\u00f3n de campo personalizado avanzado para obtener el valor de nuestro campo, ‘ fontawesome_icon<\/code>‘. Si est\u00e1 listo, estamos listos para comenzar. El ejemplo de c\u00f3digo anterior agregar\u00e1 el \u00edcono antes del texto. Si desea agregar el \u00edcono despu\u00e9s del texto, reemplace la l\u00ednea #6<\/code>con:<\/p>\n
$item->title .= '<i class=\"'. $icon. '\"><\/i>';<\/code><\/pre>\n
O si desea reemplazar el texto con un \u00edcono, sin mostrar ning\u00fan texto, reemplace la l\u00ednea #6<\/code>con:<\/p>\n
$item->title = '<i class=\"'. $icon. '\" title=\"'. $item->title. '\"><\/i>';<\/code><\/pre>\n
Agregu\u00e9 un title<\/code>atributo para que sea un poco m\u00e1s informativo para el usuario frontend. Dado que se elimina el texto, a veces puede resultar confuso para el usuario final para qu\u00e9 sirve el elemento del men\u00fa. Pero el title<\/code>atributo se asegura de que el usuario reciba informaci\u00f3n sobre herramientas con el texto del elemento del men\u00fa cuando se desplaza sobre el icono. Esto es totalmente opcional, por supuesto.<\/p>\n
Si est\u00e1 utilizando un campo de un tipo diferente, por ejemplo, un selector de archivos para archivos SVG, debe ajustar la salida en consecuencia.<\/p>\n
\u00a1Y eso es! Ahora deber\u00eda obtener un \u00edcono de Fontawesome en todas partes donde se muestra el men\u00fa. Pero probablemente necesites agregarle algo de estilo. Por ejemplo, agregar algo de espacio entre el icono y el texto.<\/p>\n
Adici\u00f3n de clases para un estilo m\u00e1s f\u00e1cil<\/h3>\n
Puede agregar clases personalizadas a la <i><\/code>etiqueta o agregar m\u00e1s HTML si es necesario.<\/p>\n
Si necesita agregar una clase al elemento del men\u00fa de ajuste (el li<\/code>elemento), tiene acceso completo a las clases de elementos del men\u00fa que se aplicar\u00e1n en el filtro anterior. Agregue una clase de elemento de men\u00fa personalizado para elementos de men\u00fa de iconos como este:<\/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
El men\u00fa debe salir as\u00ed:<\/p>\n
\"C\u00f3mo<\/a><\/p>\n
Fuente de grabaci\u00f3n:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
C\u00f3mo agregar \u00edconos de Fontawesome a los elementos del men\u00fa. Usamos campos personalizados avanzados para permitir la definici\u00f3n de clases. Es f\u00e1cil ajustar el c\u00f3digo para iconos SVG o 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":[892,892,716,716,831,1110,800,800,831,840,840,861,861],"tags":[1172],"class_list":["post-233495","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-guia-para-principiantes","category-n-a","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233495"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233495\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}