{"id":234262,"date":"2023-02-23T10:03:00","date_gmt":"2023-02-23T07:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234262"},"modified":"2022-11-12T02:43:03","modified_gmt":"2022-11-11T23:43:03","slug":"tutoriel-sur-le-theme-wordpress-pour-debutants-partie-9-menus-et-zones-de-widgets","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-sur-le-theme-wordpress-pour-debutants-partie-9-menus-et-zones-de-widgets\/","title":{"rendered":"Tutoriel sur le th\u00e8me WordPress pour d\u00e9butants \u2013 Partie 9 : Menus et zones de widgets"},"content":{"rendered":"\n

Cette le\u00e7on explique comment ajouter deux fonctionnalit\u00e9s principales de WordPress \u00e0 notre th\u00e8me\u00a0; menus et zones de widgets. Nous apprenons \u00e0 enregistrer un emplacement pour le menu de navigation principal d’un site et \u00e0 afficher le menu dans nos mod\u00e8les, ainsi qu’\u00e0 autoriser l’ajout de widgets dans notre barre lat\u00e9rale et notre pied de page.<\/p>\n

Les passionn\u00e9s d’entre vous ont peut-\u00eatre remarqu\u00e9 que ni les "Menus" ni les "Widgets" ne sont accessibles \u00e0 partir du menu "Apparence" dans le panneau d’administration. C’est parce que notre th\u00e8me ne les prend pas encore en charge. Nous allons corriger cela dans cette le\u00e7on – en commen\u00e7ant par les menus .<\/p>\n

Menu WordPress<\/h2>\n

Il y a deux parties dans l’ajout de menus dans votre th\u00e8me. Vous devez d’abord d\u00e9finir un ou plusieurs emplacements de menu dans votre fichier functions.php<\/code>. Un exemple est un menu principal qui sera dans l’en-t\u00eate de toutes les pages. La deuxi\u00e8me partie consiste \u00e0 ajouter du code \u00e0 l’endroit o\u00f9 vous souhaitez afficher le menu. Par exemple \u00e0 header.php<\/code>l’endroit o\u00f9 vous souhaitez placer le menu principal.<\/p>\n

Enregistrement d’un emplacement de menu<\/h3>\n

Dans ce didacticiel, nous ajouterons un emplacement de menu pour la navigation principale du site et placerons sa sortie dans notre fichier header.php<\/code>. Commen\u00e7ons par enregistrer l’emplacement dans functions.php<\/code>, ce qui se fait en utilisant la fonction register_nav_menu<\/a> :<\/p>\n

add_action('init', 'wptutorial_register_menu');\nfunction wptutorial_register_menu() {\n    register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));\n}<\/code><\/pre>\n
Nous devons nous accrocher au hook init<\/code>, ce que WordPress a d\u00e9cid\u00e9 d’\u00eatre un bon "point de contr\u00f4le" pour enregistrer les emplacements de menu. A l’int\u00e9rieur de notre fonction nous appelons register_nav_menu()<\/code>qui accepte un minimum de deux param\u00e8tres; la poign\u00e9e de menu qui est un slug unique que vous utiliserez comme identifiant lors du rendu du menu, et le nom visible du menu qui appara\u00eet dans le panneau d’administration. Notez que j’ai envelopp\u00e9 le nom \u00e0 l’int\u00e9rieur __()<\/code>afin de le rendre traduisible, comme nous l’avons appris \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente<\/a>.<\/p>\n
\"Tutoriel<\/a><\/p>\n
Si vous actualisez votre panneau d’administration, vous devriez maintenant voir un nouvel \u00e9l\u00e9ment de sous-menu sous "Apparence"\u00a0; "Menus". F\u00e9licitations, votre th\u00e8me prend d\u00e9sormais en charge la cr\u00e9ation de menus !<\/p>\n
Si vous n’\u00eates pas familier avec la cr\u00e9ation et l’administration de menus dans WordPress, c’est un bon guide<\/a> pour vous.<\/p>\n
Cr\u00e9ez un nouveau menu dans "Apparence > Menus" – il peut contenir tout ce que vous voulez, je viens d’ajouter les messages factices que j’avais cr\u00e9\u00e9s dans mon WordPress.<\/p>\n
Apr\u00e8s avoir enregistr\u00e9 votre premier menu, une nouvelle section intitul\u00e9e "Param\u00e8tres du menu" appara\u00eetra sous la zone d’\u00e9dition de votre menu, ce qui vous permet de choisir un emplacement pour ce menu. Il doit r\u00e9pertorier un emplacement disponible, qui est celui que nous avons cr\u00e9\u00e9\u00a0; "Navigation principale".<\/p>\n
\"Tutoriel<\/a><\/p>\n
Cochez la case \u00ab\u00a0Navigation principale\u00a0\u00bb et appuyez sur Enregistrer. Maintenant, votre menu nouvellement cr\u00e9\u00e9 est connect\u00e9 \u00e0 l’emplacement et s’affichera automatiquement partout o\u00f9 vous ajouterez le code pour afficher cet emplacement de menu. Faisons cela maintenant.<\/p>\n
Sortie d’un emplacement de menu dans un mod\u00e8le<\/h3>\n
Ouvrez header.php<\/code>et o\u00f9 que vous vouliez que la sortie du menu soit, ajoutez un appel \u00e0 wp_nav_menu()<\/code>. Cette fonction accepte tout un tas d’arguments dans un tableau pour vraiment personnaliser la sortie du menu. Plus important encore, nous avons besoin du param\u00e8tre qui lui indique de r\u00e9cup\u00e9rer l’emplacement "Navigation principale". Pour ce faire, nous ajoutons l’argument ‘ theme_location<\/code>‘ et le d\u00e9finissons sur le handle de notre menu\u00a0; ‘ main-nav<\/code>‘.<\/p>\n
J’ai ajout\u00e9 la sortie du menu juste apr\u00e8s le d\u00e9but de la <body><\/code>balise, mais si vous avez \u00e9toff\u00e9 vos mod\u00e8les avec du HTML, d\u00e9cidez vous-m\u00eame o\u00f9 vous voulez que le menu apparaisse.<\/p>\n
...\n<body <?php body_class(); ?>>\n    <nav class=\"main-nav\"><?php wp_nav_menu(['theme_location' => 'main-nav']); ?><\/nav><\/code><\/pre>\n
Actualisez votre interface et vous devriez voir le menu que vous avez cr\u00e9\u00e9 dans l’administrateur sous forme de liste non ordonn\u00e9e au d\u00e9but du mod\u00e8le.<\/p>\n
\"Tutoriel<\/a><\/p>\n
Comme d’habitude, je vous encourage \u00e0 creuser un peu plus dans les param\u00e8tres de la wp_nav_menu<\/code>documentation WordPress Codex<\/a> et \u00e0 jouer avec la fa\u00e7on dont vous voulez que la sortie soit. Par exemple\u00a0: vous pouvez faire en sorte qu’il ne sorte pas dans une liste HTML, vous pouvez limiter les \u00e9l\u00e9ments de menu \u00e0 certains niveaux uniquement (pour \u00e9viter les sous-menus), et plus encore.<\/p>\n
Si vous \u00eates curieux de conna\u00eetre la partie style; jetez un \u0153il aux classes que WordPress ajoute automatiquement \u00e0 chaque \u00e9l\u00e9ment de menu. Vous pourrez facilement ajouter des styles pour l’\u00e9l\u00e9ment de menu actif, les \u00e9l\u00e9ments qui ont des \u00e9l\u00e9ments enfants, l’\u00e9l\u00e9ment parent d’un \u00e9l\u00e9ment enfant actif, etc.<\/p>\n
Remarque: Tout utilisateur de th\u00e8me peut toujours cr\u00e9er plusieurs menus et choisir de les afficher en dehors des emplacements enregistr\u00e9s d’un th\u00e8me \u00e0 l’aide de widgets. Cependant, pour ce faire, votre th\u00e8me doit d\u00e9finir certaines zones de widgets! Faisons cela ensuite.<\/p>\n
Zones de widgets<\/h2>\n
Les zones de widget fonctionnent de mani\u00e8re assez similaire dans le fonctionnement des menus. Vous enregistrez un emplacement (pour les widgets, vous d\u00e9finissez une zone dans laquelle l’utilisateur du th\u00e8me peut placer des widgets), et partout o\u00f9 vous souhaitez que l’emplacement\/la zone apparaisse dans vos mod\u00e8les, vous ajoutez un peu de code qui fait r\u00e9f\u00e9rence \u00e0 l’identifiant de la poign\u00e9e que vous avez fourni dans votre code d’enregistrement.<\/p>\n
D\u00e9finissons une zone de widget dans notre barre lat\u00e9rale et une dans le pied de page. Il est courant que les th\u00e8mes fournissent plusieurs zones de widgets dans le pied de page afin de les diviser en colonnes, mais dans ce didacticiel, nous en ajouterons simplement une au pied de page.<\/p>\n
Les zones de widgets sont appel\u00e9es "barres lat\u00e9rales" dans le code WordPress, mais ce n’est pas exclusivement pour la barre lat\u00e9rale droite des sites Web. Il semble qu’un nom h\u00e9rit\u00e9 soit rest\u00e9 \u00e0 une \u00e9poque o\u00f9 les sites Web n’avaient g\u00e9n\u00e9ralement qu’une zone de widgets dans la barre lat\u00e9rale. Ne pensez pas que les "barres lat\u00e9rales" ne peuvent faire r\u00e9f\u00e9rence qu’aux barres lat\u00e9rales r\u00e9elles.<\/p>\n
Enregistrer les zones de widget<\/h3>\n
Nous commen\u00e7ons par enregistrer deux zones de widgets dans notre fichier functions.php<\/code>. Nous utilisons la fonction register_sidebar<\/code>pour enregistrer nos barres lat\u00e9rales, accroch\u00e9es au widgets_init<\/code>crochet, que WordPress a d\u00e9fini comme le meilleur crochet pour enregistrer les zones de widgets (et les widgets personnalis\u00e9s).<\/p>\n
add_action('widgets_init', 'wptutorial_register_sidebar');\nfunction wptutorial_register_sidebar() {\n    register_sidebar([\n        'name' => __('Sidebar Widget Area', 'wptutorial'),\n        'id' => 'sidebar-area'\n    ]);\n    register_sidebar([\n        'name' => __('Footer Widget Area', 'wptutorial'),\n        'id' => 'footer-area'\n    ]);\n}<\/code><\/pre>\n
La register_sidebar()<\/code>fonction accepte pas mal d’arguments, au minimum vous avez besoin des arguments ‘id’ et ‘name’. Il existe des param\u00e8tres disponibles pour d\u00e9finir comment vous voulez que les wrappers HTML du widget soient sortis.<\/p>\n
Actualisez votre panneau d’administration et vous devriez maintenant voir l’\u00e9l\u00e9ment de menu "Widgets" appara\u00eetre sous "Apparence". Dans le panneau d’administration "Widgets", vous pouvez voir deux zones de widgets disponibles dans la zone de droite\u00a0; qui est notre "Sidebar Widget Area" et "Footer Widget Area".<\/p>\n
\"Tutoriel<\/a><\/p>\n
Placez un widget au hasard dans notre barre lat\u00e9rale ou dans notre zone de widget de pied de page, juste pour que vous puissiez le voir en action.<\/p>\n
Sortie d’une zone de widget dans un mod\u00e8le<\/h3>\n
La derni\u00e8re partie est la sortie des zones de widgets dans nos mod\u00e8les. Pour ce faire, nous utilisons la fonction dynamic_sidebar()<\/code>et fournissons le handle en tant que param\u00e8tre. Ouvrez sidebar.php<\/code>et ajoutez ce qui suit \u00e0 l’int\u00e9rieur des <aside><\/code>balises\u00a0:<\/p>\n
<aside class=\"sidebar\">\n    <ul><?php dynamic_sidebar('sidebar-area'); ?><\/ul>\n<\/aside><\/code><\/pre>\n
Notez que je l’ai envelopp\u00e9 dans une balise de liste non ordonn\u00e9e (<ul><\/code>). En effet, par d\u00e9faut, dynamic_sidebar<\/code>tous les widgets sont envelopp\u00e9s dans <li><\/code>des \u00e9l\u00e9ments. Je vous encourage \u00e0 jouer avec les param\u00e8tres de sortie si vous n’aimez pas que les widgets soient une liste.<\/p>\n
Quant au pied de page, nous l’ajoutons au tout d\u00e9but de footer.php<\/code>, entour\u00e9 d’une <footer><\/code>balise (si vous le souhaitez).<\/p>\n
    <footer>\n        <ul><?php dynamic_sidebar('footer-area'); ?><\/ul>\n    <\/footer>\n    <?php wp_footer(); ?>\n...<\/code><\/pre>\n
C’est tout pour les menus et les zones de widgets. Votre th\u00e8me offre d\u00e9sormais \u00e0 l’utilisateur la possibilit\u00e9 de cr\u00e9er un nouveau menu et d’utiliser un widget pour l’afficher dans la barre lat\u00e9rale ou le pied de page. Dans la prochaine le\u00e7on<\/a> de cette s\u00e9rie de didacticiels, nous allons cr\u00e9er d’autres mod\u00e8les pour notre th\u00e8me.<\/p>\n
Documentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n