Tutoriel sur le thème WordPress pour débutants – Partie 9 : Menus et zones de widgets
Cette leçon explique comment ajouter deux fonctionnalités principales de WordPress à notre thème ; menus et zones de widgets. Nous apprenons à enregistrer un emplacement pour le menu de navigation principal d’un site et à afficher le menu dans nos modèles, ainsi qu’à autoriser l’ajout de widgets dans notre barre latérale et notre pied de page.
Les passionnés d’entre vous ont peut-être remarqué que ni les "Menus" ni les "Widgets" ne sont accessibles à partir du menu "Apparence" dans le panneau d’administration. C’est parce que notre thème ne les prend pas encore en charge. Nous allons corriger cela dans cette leçon – en commençant par les menus .
Menu WordPress
Il y a deux parties dans l’ajout de menus dans votre thème. Vous devez d’abord définir un ou plusieurs emplacements de menu dans votre fichier functions.php. Un exemple est un menu principal qui sera dans l’en-tête de toutes les pages. La deuxième partie consiste à ajouter du code à l’endroit où vous souhaitez afficher le menu. Par exemple à header.phpl’endroit où vous souhaitez placer le menu principal.
Dans ce didacticiel, nous ajouterons un emplacement de menu pour la navigation principale du site et placerons sa sortie dans notre fichier header.php. Commençons par enregistrer l’emplacement dans functions.php, ce qui se fait en utilisant la fonction register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Nous devons nous accrocher au hook init, ce que WordPress a décidé d’être un bon "point de contrôle" pour enregistrer les emplacements de menu. A l’intérieur de notre fonction nous appelons register_nav_menu()qui accepte un minimum de deux paramètres; la poignée 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ît dans le panneau d’administration. Notez que j’ai enveloppé le nom à l’intérieur __()afin de le rendre traduisible, comme nous l’avons appris à l’étape précédente.
Si vous actualisez votre panneau d’administration, vous devriez maintenant voir un nouvel élément de sous-menu sous "Apparence" ; "Menus". Félicitations, votre thème prend désormais en charge la création de menus !
Si vous n’êtes pas familier avec la création et l’administration de menus dans WordPress, c’est un bon guide pour vous.
Créez 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éés dans mon WordPress.
Après avoir enregistré votre premier menu, une nouvelle section intitulée "Paramètres du menu" apparaîtra sous la zone d’édition de votre menu, ce qui vous permet de choisir un emplacement pour ce menu. Il doit répertorier un emplacement disponible, qui est celui que nous avons créé ; "Navigation principale".
Cochez la case « Navigation principale » et appuyez sur Enregistrer. Maintenant, votre menu nouvellement créé est connecté à l’emplacement et s’affichera automatiquement partout où vous ajouterez le code pour afficher cet emplacement de menu. Faisons cela maintenant.
Ouvrez header.phpet où que vous vouliez que la sortie du menu soit, ajoutez un appel à wp_nav_menu(). 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ètre qui lui indique de récupérer l’emplacement "Navigation principale". Pour ce faire, nous ajoutons l’argument ‘ theme_location‘ et le définissons sur le handle de notre menu ; ‘ main-nav‘.
J’ai ajouté la sortie du menu juste après le début de la <body>balise, mais si vous avez étoffé vos modèles avec du HTML, décidez vous-même où vous voulez que le menu apparaisse.
Actualisez votre interface et vous devriez voir le menu que vous avez créé dans l’administrateur sous forme de liste non ordonnée au début du modèle.
Comme d’habitude, je vous encourage à creuser un peu plus dans les paramètres de la wp_nav_menudocumentation WordPress Codex et à jouer avec la façon dont vous voulez que la sortie soit. Par exemple : vous pouvez faire en sorte qu’il ne sorte pas dans une liste HTML, vous pouvez limiter les éléments de menu à certains niveaux uniquement (pour éviter les sous-menus), et plus encore.
Si vous êtes curieux de connaître la partie style; jetez un œil aux classes que WordPress ajoute automatiquement à chaque élément de menu. Vous pourrez facilement ajouter des styles pour l’élément de menu actif, les éléments qui ont des éléments enfants, l’élément parent d’un élément enfant actif, etc.
Remarque: Tout utilisateur de thème peut toujours créer plusieurs menus et choisir de les afficher en dehors des emplacements enregistrés d’un thème à l’aide de widgets. Cependant, pour ce faire, votre thème doit définir certaines zones de widgets! Faisons cela ensuite.
Zones de widgets
Les zones de widget fonctionnent de manière assez similaire dans le fonctionnement des menus. Vous enregistrez un emplacement (pour les widgets, vous définissez une zone dans laquelle l’utilisateur du thème peut placer des widgets), et partout où vous souhaitez que l’emplacement/la zone apparaisse dans vos modèles, vous ajoutez un peu de code qui fait référence à l’identifiant de la poignée que vous avez fourni dans votre code d’enregistrement.
Définissons une zone de widget dans notre barre latérale et une dans le pied de page. Il est courant que les thèmes 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.
Les zones de widgets sont appelées "barres latérales" dans le code WordPress, mais ce n’est pas exclusivement pour la barre latérale droite des sites Web. Il semble qu’un nom hérité soit resté à une époque où les sites Web n’avaient généralement qu’une zone de widgets dans la barre latérale. Ne pensez pas que les "barres latérales" ne peuvent faire référence qu’aux barres latérales réelles.
Enregistrer les zones de widget
Nous commençons par enregistrer deux zones de widgets dans notre fichier functions.php. Nous utilisons la fonction register_sidebarpour enregistrer nos barres latérales, accrochées au widgets_initcrochet, que WordPress a défini comme le meilleur crochet pour enregistrer les zones de widgets (et les widgets personnalisés).
La register_sidebar()fonction accepte pas mal d’arguments, au minimum vous avez besoin des arguments ‘id’ et ‘name’. Il existe des paramètres disponibles pour définir comment vous voulez que les wrappers HTML du widget soient sortis.
Actualisez votre panneau d’administration et vous devriez maintenant voir l’élément de menu "Widgets" apparaître sous "Apparence". Dans le panneau d’administration "Widgets", vous pouvez voir deux zones de widgets disponibles dans la zone de droite ; qui est notre "Sidebar Widget Area" et "Footer Widget Area".
Placez un widget au hasard dans notre barre latérale ou dans notre zone de widget de pied de page, juste pour que vous puissiez le voir en action.
Sortie d’une zone de widget dans un modèle
La dernière partie est la sortie des zones de widgets dans nos modèles. Pour ce faire, nous utilisons la fonction dynamic_sidebar()et fournissons le handle en tant que paramètre. Ouvrez sidebar.phpet ajoutez ce qui suit à l’intérieur des <aside>balises :
Notez que je l’ai enveloppé dans une balise de liste non ordonnée (<ul>). En effet, par défaut, dynamic_sidebartous les widgets sont enveloppés dans <li>des éléments. Je vous encourage à jouer avec les paramètres de sortie si vous n’aimez pas que les widgets soient une liste.
Quant au pied de page, nous l’ajoutons au tout début de footer.php, entouré d’une <footer>balise (si vous le souhaitez).
C’est tout pour les menus et les zones de widgets. Votre thème offre désormais à l’utilisateur la possibilité de créer un nouveau menu et d’utiliser un widget pour l’afficher dans la barre latérale ou le pied de page. Dans la prochaine leçon de cette série de didacticiels, nous allons créer d’autres modèles pour notre thème.