Tutoriel sur l'utilisation du plugin ACF : ajouter des champs aux éléments de menu

WordPress Les menus sont des outils puissants pour organiser un ensemble de liens (éléments de menu), et les thèmes utilisent souvent ces menus pour créer des fonctions de navigation. Ce guide vous montrera en détail comment ajouter des champs personnalisés aux éléments de menu de WordPress et comment modifier la sortie HTML des éléments de menu. Les plugins utilisés sontACF(Champs personnalisés avancés).

ACFLe plugin est maintenant renommé SCF et est installé dans le Plugin Marketplace :

Ajout de champs

Le plugin Advanced Custom Fields permet d'ajouter facilement des champs personnalisés aux éléments de menu, suivez les étapes ci-dessous.

1. amélioration de soiDéfinition des champsDans l'écran Administration, cliquez surAjouter un nouveaupour créer un nouveau groupe de champs.
2. Ajoutez les champs que vous souhaitez voir apparaître lors de l'édition des éléments de menu
3. en positionminuscules, sélectionnezpoint de menuRègle et sélectionnez "Tous" (pour afficher ce groupe de champs sur toutes les rubriques du menu) ou "Menu/emplacement spécifique" (pour afficher ce groupe de champs uniquement sur des rubriques spécifiques du menu).

modifier un champ

Une fois qu'un groupe de champs a été créé et désigné pour apparaître dans l'écran de modification des éléments de menu, il peut être modifié en accédant à l'écran de modification des éléments de menu.Apparence > MenuPage d'administration pour modifier les valeurs des champs.

WP stocke chaque élément de menu en tant qu'objet post dans le fichierwp_postsACF stockera toutes les valeurs des champs personnalisés dans le fichierwp_postmetaTableau.

Champs d'affichage

Le code HTML des éléments de menu de WordPress peut être facilement personnalisé grâce au filtre wp_nav_menu_objects. Ce filtre est exécuté à chaque fois que le menu est rendu (via la fonction wp_nav_menu()) et vous permet de modifier les objets des éléments du menu. Chaque objet contient un élémenttitreValeurs de sortie dans chaque élément de lien de menu<a>.

Cet exemple montre comment modifier tous les objets de l'élément de menu avec le nouvel élément "icône (informatique)"Attachez une icône lorsqu'une valeur existe pour le champ.

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

function my_wp_nav_menu_objects( $items, $args ) {

    // boucle
    foreach( $items as &$item ) {

        // vars
        $icon = get_field('icon', $item) ;


        // ajouter une icône
        if( $icon ) {

            $item->title . = ' ' ;

        }

    }


    // return
    return $items ;

}

rendre un verdict

Voici comment il apparaît dans le navigateur. Remarquez les nouvelles icônesÉléments !