En un artículo anterior habíamos visto cómo agregar imágenes a los ítems de menú en WordPress, sin embargo en muchos casos preferimos añadir iconos, como los brindados por Font Awesome, en lugar de imágenes a los ítems de menú.
Resultado Final
Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen
Usando los iconos de Font Awesome
Una manera rápida de empezar a usar Font Awesome es crear un kit, una vez registrado y conectado en el sitio Font Awesome, puedes ir a la opción de Kits y crear uno nuevo.
Una vez tengas el kit, puedes revisar la opción de Set Up, se mostrará un código que tiene una url que usaremos posteriormente para hacer referencia a los iconos del kit.
Código para usar el Kit de Font Awesome en WordPress
Puedes agregar el siguiente código en el archivo functions.php de tu tema hijo.
No te olvides reemplazar la URL https://kit.fontawesome.com/xxxxx.js, por la URL generada en tu Kit de Font Awesome.
// Encolamiento del archivo .js del kit
add_action( "wp_enqueue_scripts", "dcms_insertar_js" );
function dcms_insertar_js() {
wp_register_script( 'custom_fonts', 'https://kit.fontawesome.com/xxxxx.js', [], '6.0');
wp_enqueue_script( 'custom_fonts' );
}
// Agregar código HTML al título del menú
add_filter( 'nav_menu_item_title', 'dcms_add_icon_item_menu', 10, 2 );
function dcms_add_icon_item_menu( $title, $menu_item ) {
$classes = '';
foreach ( $menu_item->classes as $key => $class ) {
if ( substr( $class, 0, 3 ) == 'fa-' ) {
$classes .= $class . ' ';
}
}
if ( $classes ) {
$title = '<i class="' . $classes . '"></i> ' . $title;
}
return $title;
}
// Eliminar las clases de Font Awesome del item de menú (contenedor)
add_filter( 'nav_menu_css_class' , 'dcms_remove_item_classes' , 10, 3 );
function dcms_remove_item_classes( $classes, $item, $args ) {
foreach ( $classes as $key => $class ) {
if ( substr( $class, 0, 3 ) == 'fa-' ) {
unset( $classes[ $key ] );
}
}
return $classes;
}
En el código anterior:
- La primera porción de código simplemente encola el archivo javascript remoto generado por Font Awesome
- La siguiente porción de código usa el Hook nav_menu_item_title, que hace referencia a la función dcms_add_icon_item_menu
- Dentro de esta función comprobamos si el objeto menu_item tiene alguna clase de Font Awesome asignada
- Luego construimos el HTML que requiere Font Awesome incluyendo sus clases y agregamos ese código antes del título del ítem de menú
- La última porción de código usa el Hook nav_menu_css_class que hace referencia a la función dcms_remove_item_classes
- Lo que hacemos dentro de esta función es quitar todas esas clases agregadas de Font Awesome ya que no tiene sentido que se encuentren a nivel del contenedor del ítem de menú
Agregando clases CSS a los ítems de menú
Primero necesitarás habilitar la opción de clases, desde Apariencia Menús, tal como se muestra en la siguiente pantalla:
Luego puedes agregar a tus ítems de menú las clases de Font Awesome del ícono que te interese por cada ítem de menú.
Conclusión
Como has podido comprobar, puedes dar un aspecto más atractivo a tu menú agregando iconos, en este artículo hemos visto como hacerlo directamente a través de código usando el servicio de iconos de Font Awesome.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...