L’anatomie d’un menu WordPress<\/h2>\n
Pour les non-initi\u00e9s, un menu WordPress est souvent une collection de liens (y compris des listes d\u00e9roulantes<\/a>). Il s’agit d’une fonctionnalit\u00e9 simple qui n’est qu’une \u00ab\u00a0vert\u00e8bre\u00a0\u00bb dans la colonne vert\u00e9brale de votre site web.<\/p>\n Nous verrons plus en d\u00e9tail dans la section suivante o\u00f9 vous verrez les menus sur un site web. Pour l’instant, sachez qu’ils peuvent s’ins\u00e9rer partout o\u00f9 vous souhaitez les afficher. Il se peut que vous n’ayez que quelques options pr\u00e9-s\u00e9lectionn\u00e9es (en fonction des zones de widgets). D’un point de vue technique, cependant, un menu peut aller n’importe o\u00f9.<\/p>\n Bien s\u00fbr, un menu WordPress est primordial pour la navigation sur un site web. Si vous disposez d’un menu de navigation clair et d\u00e9fini, cela aidera les utilisateurs \u00e0 se d\u00e9placer sur votre site, et cela permettra de r\u00e9duire votre taux de rebond<\/a>.<\/p>\n Ils ont \u00e9galement un autre objectif : Vos menus contribuent \u00e0 votre optimisation pour les moteurs de recherche (SEO)<\/a>. L’optimisation d’un menu WordPress pour le SEO d\u00e9pend davantage de ce qu’il faut laisser de c\u00f4t\u00e9 que de ce qu’il faut int\u00e9grer. Pour commencer, vous pouvez supprimer certains \u00e9l\u00e9ments – comme les nuages d\u2019\u00e9tiquettes – et limiter le nombre de liens que vous incluez.<\/p>\n Bien que Google vous autorise \u00e0 ajouter jusqu’\u00e0 250 liens sur une page, il est essentiel de conserver une \u00ab\u00a0valeur de lien<\/a>\u00a0\u00bb \u00e9lev\u00e9e. \u00c0 ce titre, r\u00e9duire le nombre de liens externes vous sera b\u00e9n\u00e9fique \u00e0 long terme.<\/p>\n\n Comme vous l’avez peut-\u00eatre d\u00e9j\u00e0 compris, en fonction des besoins de votre application, vous pouvez opter pour diff\u00e9rentes structures de menu WordPress.<\/p>\n Les menus d’en-t\u00eate, par exemple, sont les plus courants car ils traitent de la navigation principale du site<\/a>. Vous verrez aussi souvent des menus plus petits au-dessus de la navigation principale, car il s’agit d’un excellent emplacement pour les ic\u00f4nes de r\u00e9seaux sociaux, les barres de recherche, etc.<\/p>\n Le site web du partenaire Kinsta SAU\/CAL<\/a> dispose d’un menu \u00ab\u00a0fly-in\u00a0\u00bb qui comprend la navigation et les liens sociaux :<\/p>\n Ce menu montre qu’il existe d’autres cas d’utilisation d’un menu WordPress que la navigation d’un site. En utilisant les fonctionnalit\u00e9s int\u00e9gr\u00e9es de WordPress (nous y reviendrons plus tard), vous pouvez cr\u00e9er un menu pour presque tout ce dont vous avez besoin.<\/p>\n Le pied de page est tout aussi populaire que la navigation d’en-t\u00eate. Vous utiliserez souvent cette zone pour r\u00e9p\u00e9ter votre navigation principale pour les utilisateurs qui font d\u00e9filer le site vers le bas. C’est \u00e9galement un excellent endroit pour proposer des liens plus contextuels pour vos produits et services :<\/p>\n Vous verrez \u00e9galement des menus dans une colonne lat\u00e9rale si le site l’utilise :<\/p>\n Bien que la navigation principale ne soit pas souvent pr\u00e9sente ici, c’est un endroit traditionnel pour les liens sociaux<\/a>, les archives des articles de blog et bien d’autres choses encore.<\/p>\n La cr\u00e9ation d’un menu WordPress est un processus simple, quel que soit votre niveau d’expertise. Il y a trois fa\u00e7ons principales de faire le travail : utiliser la fonctionnalit\u00e9 int\u00e9gr\u00e9e de WordPress, installer une extension adapt\u00e9e ou mettre les mains dans le cambouis avec du code.<\/p>\n Ensuite, nous allons vous montrer comment cr\u00e9er un menu WordPress en utilisant ces trois approches.<\/p>\n WordPress dispose d’outils int\u00e9gr\u00e9s pour vous aider \u00e0 cr\u00e9er un menu. Un \u00e9cran d\u00e9di\u00e9 dans l’administration de WordPress sera familier \u00e0 tous, sauf aux utilisateurs les plus r\u00e9cents.<\/p>\n Bien s\u00fbr, l’utilisation de la fonctionnalit\u00e9 native pour cr\u00e9er votre menu WordPress pr\u00e9sente de nombreux avantages. Pour commencer, vous b\u00e9n\u00e9ficiez d’une compatibilit\u00e9 totale avec votre site. De plus, vous pouvez cr\u00e9er vos menus en utilisant une interface famili\u00e8re et des outils natifs.<\/p>\n Pour y parvenir, rendez-vous sur la page Apparence > Menus <\/strong>de WordPress :<\/p>\n Cet \u00e9cran se divise en plusieurs sections diff\u00e9rentes. En haut, vous trouverez l’option de s\u00e9lectionner un menu actuel ou d’en cr\u00e9er un nouveau :<\/p>\n Si vous d\u00e9cidez de cr\u00e9er un nouveau menu, donnez-lui un nom et consultez la section R\u00e9glages du menu <\/strong>:<\/p>\n Il y a beaucoup de cases \u00e0 cocher ici, mais vous avez deux d\u00e9cisions principales \u00e0 prendre :<\/p>\n Une fois que vous \u00eates pr\u00eat, cliquez sur le bouton Cr\u00e9er un menu<\/strong>. L’\u00e9cran se rafra\u00eechit et indique que vous vous trouvez dans votre nouveau menu. Ensuite, jetez un coup d’\u0153il \u00e0 la partie gauche de l’\u00e9cran :<\/p>\n Cet \u00e9cran liste tous les articles, pages, taxonomies et autres ressources pouvant \u00eatre li\u00e9es sur votre site. Vous construisez votre menu en cochant les cases sur la gauche, puis en cliquant sur le bouton Ajouter au menu<\/strong>.<\/p>\n Cela les d\u00e9placera vers la section centrale de l’\u00e9cran Menus <\/strong>:<\/p>\n Ici, vous pouvez faire glisser et d\u00e9poser les \u00e9l\u00e9ments de menu en place. Si vous cliquez sur la fl\u00e8che d’expansion situ\u00e9e \u00e0 c\u00f4t\u00e9 de chaque \u00e9l\u00e9ment, vous pouvez \u00e9galement d\u00e9finir un libell\u00e9 pour votre \u00e9l\u00e9ment de menu ou le supprimer :<\/p>\n Une fois que vous avez cliqu\u00e9 sur Enregistrer le menu<\/strong>, vous \u00eates pr\u00eat \u00e0 commencer. Si vous d\u00e9veloppez le menu Options d’\u00e9cran en haut de l’\u00e9cran, vous pouvez faire plus avec votre menu WordPress :<\/p>\n Le groupe \u00c9l\u00e9ments de l’\u00e9cran <\/strong>vous permet d’afficher les bo\u00eetes m\u00e9ta de menu dans la colonne lat\u00e9rale de gauche. En revanche, le groupe Afficher les propri\u00e9t\u00e9s avanc\u00e9es du menu <\/strong>permet d’afficher les cibles des liens, les descriptions et les classes CSS des \u00e9l\u00e9ments de la liste.<\/p>\n Il y a un autre aspect de l’\u00e9cran Menus <\/strong>qui m\u00e9rite d’\u00eatre soulign\u00e9. La case Liens personnalis\u00e9s <\/strong>vous permet de d\u00e9finir un lien de votre choix, plut\u00f4t qu’une page pr\u00e9d\u00e9finie de votre site :<\/p>\n Cette option vous permet d’ajouter des liens vers des r\u00e9seaux sociaux \u00e0 votre menu WordPress. La plateforme r\u00e9cup\u00e9rera l’ic\u00f4ne correcte pour vous en fonction du site que vous s\u00e9lectionnez, vous donnant la possibilit\u00e9 d’avoir des logos bien affich\u00e9s pour les sites que vous choisissez.<\/p>\n La solution imm\u00e9diate pour ajouter des fonctionnalit\u00e9s \u00e0 WordPress est de recourir aux extensions<\/a>. La section pr\u00e9c\u00e9dente a expliqu\u00e9 pourquoi l’option native de WordPress est presque tout ce dont vous avez besoin, mais les extensions peuvent \u00e9tendre cette fonctionnalit\u00e9.<\/p>\n La question se pose de savoir si vous avez besoin d’une extension d\u00e9di\u00e9e (et suppl\u00e9mentaire) pour cr\u00e9er un menu WordPress, bien qu’il y ait de nombreuses bonnes raisons de le faire. Pour commencer, vous allez souvent cr\u00e9er un menu bas\u00e9 sur un style auquel vous ne pouvez pas acc\u00e9der avec la configuration par d\u00e9faut. Des designs r\u00e9actifs sp\u00e9cifiques, des \u00ab\u00a0m\u00e9ga-menus\u00a0\u00bb et bien d’autres choses encore sont disponibles gr\u00e2ce aux extension.<\/p>\n De plus, vous pouvez cr\u00e9er des menus en utilisant un \u00e9diteur d\u00e9di\u00e9 et choisir parmi des mod\u00e8les pr\u00e9d\u00e9finis dans de nombreux cas. Associ\u00e9 \u00e0 des options de personnalisation \u00e9tendues, vous disposez d’une solution \u00ab\u00a0sans code\u00a0\u00bb qui fournira un menu WordPress qui fonctionne \u00e0 votre site.<\/p>\n Par exemple, l\u2019extension Max MegaMenu<\/a> n’offre aucune surprise dans ce que vous pouvez r\u00e9aliser :<\/p>\n Une fois qu’elle est install\u00e9e et activ\u00e9e<\/a>, vous trouverez un nouveau panneau Mega Menu <\/strong>dans WordPress :<\/p>\n Si vous regardez l’\u00e9cran \u00ab\u00a0Emplacements du menu\u00a0\u00bb<\/strong>, vous remarquerez qu’il y a plus de personnalisations disponibles pour vous :<\/p>\n Vous pouvez \u00e9galement appliquer des th\u00e8mes de menu et les modifier avec une port\u00e9e similaire \u00e0 celle de certains des meilleurs constructeurs de pages du march\u00e9 :<\/p>\n Nous pourrions en dire beaucoup plus ici, mais nous risquerions de nous r\u00e9p\u00e9ter. Nous vous encourageons \u00e0 consulter notre pr\u00e9c\u00e9dent article sur les extension WordPress de menu<\/a>. Nous y expliquons en d\u00e9tail comment choisir la bonne extension et comment l’utiliser.<\/p>\n Coder votre propre menu WordPress est un moyen fiable d’atteindre votre objectif pour les courageux (ou si vous \u00eates un d\u00e9veloppeur cr\u00e9ant un nouveau th\u00e8me WordPress). Bien s\u00fbr, vous n’allez pas ouvrir un \u00e9diteur de code au jour le jour pour ajouter un menu. Pour cela, vous utiliserez les outils natifs de WordPress (ou peut-\u00eatre une extension).<\/p>\n Cela dit, apprendre \u00e0 coder un menu WordPress est une condition essentielle si vous souhaitez d\u00e9velopper des th\u00e8mes. Il y a quatre parties<\/a> pour r\u00e9ussir :<\/p>\n Nous supposerons que vous \u00eates \u00e0 l’aise avec un \u00e9diteur de code<\/a>, que vous disposez d’un environnement de d\u00e9veloppement<\/a> pour travailler et que vos comp\u00e9tences sont aiguis\u00e9es<\/a>. Si vous n’avez pas encore de th\u00e8me avec lequel travailler, vous pouvez utiliser les options par d\u00e9faut de WordPress ou en choisir un dans notre liste des th\u00e8mes WordPressles plus rapides<\/a>.<\/p>\n Lorsque vous \u00eates pr\u00eat, vous devez ouvrir le fichier functions.php <\/strong>du th\u00e8me. Notez que ce fichier est diff\u00e9rent du fichier WordPress g\u00e9n\u00e9ral du m\u00eame nom. Ici, vous devez enregistrer votre menu. En d’autres termes, vous devez indiquer \u00e0 WordPress ce qu’il doit afficher sur la page Apparence > Menus<\/strong>. Pour ce faire, vous utilisez la fonction register_nav_menus()<\/a> :<\/p>\n Ce code indique \u00e0 l’onglet G\u00e9rer les emplacements <\/strong>de WordPress d’afficher deux menus : le Header Menu <\/strong>et Other Menu <\/strong>:<\/p>\n Ensuite, vous devez afficher votre menu \u00e0 l’aide de la fonction wp_nav_menu()<\/a>. Vous devez ajouter cette fonction dans le fichier de mod\u00e8le qui correspond \u00e0 l’endroit o\u00f9 vous souhaitez afficher le menu. Dans notre cas, il s’agit de l’en-t\u00eate, nous allons donc ajouter le code suivant au fichier header.php<\/strong> de notre th\u00e8me :<\/p>\n Il se peut que ce code soit envelopp\u00e9 dans une instruction \u00c0 ce stade, vous pouvez travailler avec le menu de WordPress comme n’importe quel autre. Cependant, vous pouvez \u00e9galement envisager d’ajouter du contenu suppl\u00e9mentaire \u00e0 vos \u00e9l\u00e9ments de menu. Par exemple, vous pouvez \u00e9tendre le tableau d\u00e9fini pour inclure des balises HTML qui seront rendues \u00e0 la sortie :<\/p>\n Votre derni\u00e8re t\u00e2che ici est de d\u00e9finir un callback. Par d\u00e9faut, WordPress affiche un menu rempli lorsque le menu sp\u00e9cifi\u00e9 n’est pas trouv\u00e9. Comme alternative, WordPress affichera un menu de pages quand aucun menu personnalis\u00e9 n’est s\u00e9lectionn\u00e9. Si ce n’est pas l’action que vous souhaitez, vous pouvez d\u00e9finir un param\u00e8tre diff\u00e9rent pour l’argument Une fois que vous avez compris comment cr\u00e9er un menu WordPress, vous pouvez commencer \u00e0 am\u00e9liorer ses fonctionnalit\u00e9s. Nous verrons cela dans notre derni\u00e8re section pour cr\u00e9er une bo\u00eete m\u00e9ta de menu personnalis\u00e9e pour WordPress.<\/p>\n\n Comme cette section est avanc\u00e9e, nous allons faire quelques hypoth\u00e8ses avant de continuer :<\/p>\n Cela d\u00e9passe le cadre de cet article, mais vous pouvez utiliser WordPress Plugin Boilerplate Generator<\/a> pour cr\u00e9er un nouveau mod\u00e8le d\u2019extension standardis\u00e9.<\/p>\n Lorsque vous \u00eates pr\u00eat, cr\u00e9ez et t\u00e9l\u00e9versez votre extension sur WordPress :<\/p>\n Ensuite, naviguez dans le dossier de l\u2019extension et ouvrez le fichier principal. Ici, ajoutez le code suivant :<\/p>\n La fonction WordPress add_meta_box()<\/a> permet d’enregistrer une bo\u00eete m\u00e9ta dans l’administration de WordPress. Il y a quelques arguments que vous voudrez r\u00e9f\u00e9rencer dans la documentation officielle. Nous utilisons \u00e9galement le filtre nav_menu_meta_box_object()<\/a> parce qu’il n’y a pas d’action dans le fichier nav-menus.php<\/strong>. Cette instruction d\u00e9termine si la fonction ajoute la bo\u00eete m\u00e9ta d’un \u00e9l\u00e9ment de menu pour un type d’objet. Lorsque le filtre s’ex\u00e9cute, Ensuite, nous pouvons d\u00e9finir une fonction de rappel (callback) pour produire le contenu HTML de la bo\u00eete m\u00e9ta :<\/p>\n La variable globale se souvient de l’ID du menu actuel, tandis que \u00c0 partir de l\u00e0, nous devons d\u00e9terminer l’onglet actif dans la bo\u00eete m\u00e9ta personnalis\u00e9e. Pour cela, nous d\u00e9finissons la valeur de Nous utilisons ici deux onglets, mais vous pouvez en ajouter autant que vous le souhaitez :<\/p>\n La ligne suivante r\u00e9cup\u00e8re tous les utilisateurs ayant des droits d’\u00e9criture et ajoute de nombreuses propri\u00e9t\u00e9s \u00e0 l’objet Ici, En outre, le tableau Vous pouvez maintenant imprimer les balises de la bo\u00eete m\u00e9ta. Pour cela, construisons les libell\u00e9s d’onglet et les liens.<\/p>\n N’oubliez pas d’attribuer les noms de classe, les ID et les attributs de donn\u00e9es corrects aux \u00e9l\u00e9ments de la bo\u00eete m\u00e9ta, sinon le menu ne fonctionnera pas comme pr\u00e9vu.<\/p>\n Les fonctions \u00c0 ce stade, nous avons une bo\u00eete m\u00e9ta avec des onglets d\u00e9finis :<\/p>\n L’\u00e9tape suivante consiste \u00e0 construire le contenu HTML des onglets.<\/p>\n Vous voudrez suivre le code de la section pr\u00e9c\u00e9dente dans la fonction En bref, chaque onglet contient une liste de cases \u00e0 cocher. La fonction walk_nav_menu_tree()<\/a> affiche la liste en utilisant trois arguments : Le tableau \u00c0 partir de l\u00e0, nous pouvons ajouter les touches finales.<\/p>\n La majeure partie de la bo\u00eete m\u00e9ta personnalis\u00e9e est termin\u00e9e, bien que nous devions encore ajouter un bouton d\u2019envoi <\/strong>et une ic\u00f4ne de traitement \u00ab\u00a0spinner\u00a0\u00bb.<\/p>\n Voici un court morceau de code que vous pouvez placer directement apr\u00e8s le bloc pr\u00e9c\u00e9dent :<\/p>\n Avec ces connaissances, vous pouvez ajouter presque n’importe quelle fonctionnalit\u00e9 \u00e0 vos menus ! Notez qu’il y a \u00e9galement un Gist public<\/a> de l\u2019extension sur GitHub qui peut \u00eatre t\u00e9l\u00e9charg\u00e9 gratuitement.<\/p>\n Un menu WordPress est un aspect crucial de votre site. Pour cette raison, la plateforme offre un panneau natif et puissant qui vous permettra de personnaliser chaque menu de votre site. Cependant, il ne fournira pas tout ce dont vous avez besoin par d\u00e9faut.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu.png\")
Les diff\u00e9rents types de structures de menu WordPress<\/h2>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/fly-in-menu.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/kinsta-footer-menu.png\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/sidebar-navigation.png\")
Comment cr\u00e9er un menu WordPress personnalis\u00e9 (3 m\u00e9thodes)<\/h2>\n
1. Utilisez la fonctionnalit\u00e9 int\u00e9gr\u00e9e de WordPress pour cr\u00e9er votre menu<\/h3>\n
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/The-WordPress-Menu-Screen.png\")
<\/a>![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menus-page.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-new-wordpress-menu.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-settings.png\")
\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-menu-assets.png\")
![\"Glisser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-drag-and-drop.png\")
![\"D\u00e9velopper](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-item-expand.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/screen-options.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/custom-links-box.png\")
2. Utiliser une extension pour cr\u00e9er votre menu WordPress personnalis\u00e9<\/h3>\n
![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/max-mega-menu.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-panel.png\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/mega-menu-locations.png\")
![\"L'\u00e9cran](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/menu-themes.png\")
3. \u00c9crire le code pour cr\u00e9er votre menu WordPress personnalis\u00e9<\/h3>\n
\n
function register_my_menus() {\n register_nav_menus(\n array(\n 'header' => __( 'Header Menu' ),\n other' => __( 'Autre menu' )\n )\n ) ;\n }\n add_action( 'init', 'register_my_menus' );\n<\/code><\/pre>\n![\"Enregistrement](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/register-menus.png\")
wp_nav_menu( array( 'theme_location' => 'header' ) );<\/code><\/pre>\nif<\/code>, tout comme certains de vos autres menus, et vous devrez donc respecter les conventions que vous trouverez.<\/p>\nwp_nav_menu(\n array(\n 'menu' => 'primary',\n 'link_before' => '',<\/span>\n 'link_after' => '<\/span>',\n )\n);\n<\/code><\/pre>\ntheme-location<\/code> et ajouter \u00e9galement un argument fallback_cb<\/code> :<\/p>\nwp_nav_menu(\narray(\n'menu' => 'primary',\n\/\/ do not fall back to first non-empty menu\n'theme_location' => '__no_such_location',\n\/\/ do not fall back to wp_page_menu()\n'fallback_cb' => false\n)\n);<\/code><\/pre>\nComment am\u00e9liorer votre menu WordPress<\/h2>\n
\n
![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/plugin-boilerplate-generator.png\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/install-plugin.png\")
\/**\n* Add menu meta box\n*\n* @param object $object The meta box object\n* @link https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\n*\/\nfunction custom_add_menu_meta_box( $object ) {\nadd_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );\nreturn $object;\n}\nadd_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);<\/code><\/pre>\nadd_meta_box<\/code> enregistre la bo\u00eete m\u00e9ta personnalis\u00e9e.<\/p>\nD\u00e9finition d’une fonction de rappel<\/h4>\n
\/**\n* Displays a metabox for an author menu item.\n*\n* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu\n*\/\nfunction custom_menu_meta_box(){\nglobal $nav_menu_selected_id;\n$walker = new Walker_Nav_Menu_Checklist();\n...\n}<\/code><\/pre>\n$walker<\/code> stocke une nouvelle instance de l’objet Walker_Nav_Menu_Checklist<\/code>. Cela va permettre de construire la liste HTML des \u00e9l\u00e9ments du menu.<\/p>\n$current_tab<\/code>, en respectant les points de suspension d\u00e9finis dans le bloc de code pr\u00e9c\u00e9dent.<\/p>\n$current_tab = 'all';\nif ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {\n$current_tab = 'admins';\n} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {\n$current_tab = 'all';\n}<\/code><\/pre>\n$authors<\/code> :<\/p>\n$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) ) ;\n$admins = array() ;\n\n\/* Set values to required irem properties *\/\nforeach ( $authors as &$author ) {\n $author->classes = array() ;\n $author->type = 'custom' ;\n $author->object_id = $author->nickname ;\n $author->title = $author->nickname . ' - ' . implode(', ', $author->roles) ;\n $author->objet = 'custom' ;\n $author->url = get_author_posts_url( $author->ID ) \n $author->attr_title = $author->displayname ;\n if( $author->has_cap( 'edit_users' ){\n $admins[] = $author ;\n }\n}\n$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' ) ;\n?>\n<\/code><\/pre>\nget_users<\/code> retourne un tableau d’objets $user<\/code> s\u00e9lectionn\u00e9s par les param\u00e8tres sp\u00e9cifi\u00e9s. Le param\u00e8tre who<\/code> forcera WordPress \u00e0 interroger la base de donn\u00e9es pour les utilisateurs qui ont des droits d’\u00e9criture.<\/p>\n$admins<\/code> stockera un tableau d’auteurs, tandis que $removed_args<\/code> stockera une liste de variables de requ\u00eate \u00e0 supprimer.<\/p>\n<div id=\"authorarchive\" class=\"categorydiv\">\n\t<ul id=\"authorarchive-tabs\" class=\"authorarchive-tabs add-menu-item-tabs\">\n\t\t<li <?php echo ('all' == $current_tab ? ' class=\"tabs\"' : '') ; ?>>\n\t\t\t<a class=\"nav-tab-link\" data-type=\"tabs-panel-authorarchive-all\" href=\"<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ) ; ?>#tabs-panel-authorarchive-all\">\n\t\t\t\t<?php _e( 'View All' ) ; ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\n\t\t<li <?php echo ('admins' == $current_tab ? ' class=\"tabs\"' : '') ; ?>>\n\t\t\t<a class=\"nav-tab-link\" data-type=\"tabs-panel-authorarchive-admins\" href=\"<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ) ; ?>#tabs-panel-authorarchive-admins\">\n\t\t\t\t<?php _e( 'Admins' ) ; ?>\n\t\t\t<\/a>\n\t\t<\/li>\n\t<\/ul><\/code><\/pre>\nadd_query_arg<\/code> et remove_query_arg<\/code> d\u00e9finissent des valeurs sp\u00e9cifiques aux onglets pour la variable authorarchive-tabs<\/code> et suppriment les variables inutiles.<\/p>\n![\"Onglets](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-empty-meta-box.png\")
Cr\u00e9ation du contenu HTML pour les onglets de la bo\u00eete m\u00e9ta<\/h4>\n
custom_menu_meta_box()<\/code>. Pour construire le contenu, utilisez ce qui suit dans la balise <div><\/code> que vous avez \u00e9crite dans la derni\u00e8re section :<\/p>\n<div id=\"tabs-panel-authorarchive-all\" class=\"tabs-panel tabs-panel-view-all <?php echo ('all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive') ; ?>\">\n\t<ul id=\"authorarchive-checklist-all\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) ) ;\n\t?>\n\t<\/ul>\n<\/div>\n\n<div id=\"tabs-panel-authorarchive-admins\" class=\"tabs-panel tabs-panel-view-admins <?php echo ('admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ) ; ?>\">\n\t<ul id=\"authorarchive-checklist-admins\" class=\"categorychecklist form-no-clear\">\n\t<?php\n\t\techo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) ) ;\n\t?>\n\t<\/ul>\n<\/div><\/code><\/pre>\n$items<\/code>, $depth<\/code>, et $r<\/code> – tous obligatoires.<\/p>\n$items<\/code> stocke un tableau d’utilisateurs administrateurs. La fonction array_map()<\/code> applique la fonction wp_setup_nav_menu_item()<\/a> \u00e0 $admins<\/code> et ajoute les propri\u00e9t\u00e9s des \u00e9l\u00e9ments de menu aux \u00e9l\u00e9ments du tableau.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/authors-meta-box-populated.png\")
Ajout d’un bouton d’envoi<\/h4>\n
<p class=\"button-controls wp-clearfix\">\n\t<span class=\"list-controls\">\n\t\t<a href=\"<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) ) ; ?>#authorarchive\" class=\"select-all\"><?php _e('Select All') ; ?><\/a>\n\t<\/span>\n\t<span class=\"add-to-menu\">\n\t\t<input type=\"submit\"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ) ; ?> class=\"button-secondary submit-add-to-menu right\" value=\"<?php esc_attr_e('Add to Menu') ; ?>\" name=\"add-authorarchive-menu-item\" id=\"submit-authorarchive\" \/>\n\t\t<span class=\"spinner\"><\/span>\n\t<\/span>\n<\/p>\n\n<\/div>\n<?php\n}<\/code><\/pre>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/complete-meta-box.png\")
R\u00e9sum\u00e9<\/h2>\n