Applications et livres 

CSS et HTML5 : menu de navigation réactif. Ajouter un menu à votre modèle à l'aide du CMS WordPress

Dans l'avant-dernier article du blog, j'ai parlé des innovations intéressantes de la dernière version de WordPress - un mécanisme spécial pour créer et gérer des fichiers . Il est désormais devenu beaucoup plus pratique et plus facile pour les utilisateurs ordinaires de créer des menus de complexité variable, qui peuvent comprendre non seulement des pages ou des catégories de blog, mais également des liens vers n'importe quelle URL. Pour afficher le menu dans le modèle, une fonction spéciale wp_nav_menu est utilisée - je vais vous en parler aujourd'hui.

S'il n'y a pas de section de menu dans l'administrateur WordPress, vous pouvez l'activer en ajoutant un code spécial au fichier function.php

Voici d’abord le nom du menu que nous avons créé. Il s'agit de l'utilisation d'une fonction dans le cas général sans widgets ; vous devrez ici travailler avec eux un peu différemment. Cependant, la fonction wp_nav_menu peut être générée sans arguments, de sorte que différentes situations seront « examinées » - d'abord, une correspondance par nom de menu, si au moins un élément de menu est spécifié pour cela, sinon un menu non vide sera simplement affiché, etc. Mais encore une fois, je vous conseille d'utiliser simplement le code ci-dessus et de ne pas comprendre ce que devrait produire la fonction sans arguments. Sa syntaxe est la suivante :

Les paramètres suivants sont utilisés ici :

$menu - l'identifiant sélectionné pour le menu - ID, slug ou nom du menu.

$container - Le menu UL par défaut est "encapsulé" dans un conteneur DIV en utilisant ce paramètre.

$container_class - indique la classe du conteneur ; par défaut, sa valeur est menu-(menu slug)-container, c'est-à-dire que dans notre cas, par exemple, la classe sera menu-first-container.

$container_id - vous pouvez ajouter un identifiant au conteneur, non spécifié par défaut.

$menu_class est la classe de l'élément de menu UL, sa valeur est menu.

$menu_id — ID de l'élément ul, par défaut menu-(slug)

$echo - si vous ne souhaitez pas afficher le menu, mais renvoyer la valeur de la fonction, utilisez 0 pour ce paramètre.

$fallback_cb - si le menu n'existe pas, la fonction wp_page_menu est appelée.

$before - définit le texte affiché avant le lien A.

$link_before — affiche la phrase avant le texte du lien, non spécifiée.

$link_after — affiché après le texte du lien, également vide.

$profondeur - définit le nombre de niveaux hiérarchiques pour afficher le menu ; la valeur par défaut de 0 affiche l'intégralité du menu.

$walker - une sorte d'"objet marcheur" personnalisé incompréhensible, probablement plus nécessaire aux développeurs avancés.

$theme_location - L'emplacement du thème où le menu sera utilisé doit être activé via register_nav_menu() pour que l'utilisateur puisse le sélectionner. Il y a aussi une sorte de réglage pas tout à fait clair, apparemment, lorsque l'on travaille avec des widgets.

Exemples d'utilisation de la fonction wp_nav_menu

Le code le plus simple donné dans le code est :

Supprimer le conteneur DIV du menu

En principe, il n’y a rien de compliqué dans la création et la gestion d’un menu WordPress 3.0. Les développeurs ont considérablement simplifié la procédure de travail et étendu les capacités de cet élément de navigation. La solution est souvent utilisée dans diverses tâches de modèles, par exemple lors de la création de versions mobiles et de bureau. Un peu plus tard, j'ajouterai quelques extraits supplémentaires sur le sujet.

P.S. Garde. Un blog intéressant et utile pour les webmasters sur le SEO, où vous trouverez des réponses à vos questions sur le SEO.
La société Aweb s'est depuis longtemps très bien établie dans le domaine de la promotion, de l'optimisation et de la promotion de sites Web sur les moteurs de recherche sur Internet.

Créer un menu dans WordPress, ainsi que trier les pages et les catégories, devient souvent un problème assez difficile pour les webmasters débutants. Pour cette raison, j'ai décidé d'écrire un court tutoriel dans lequel nous examinerons en détail comment créer des menus personnalisés dans WordPress. Avec leur aide, vous pouvez créer vous-même des menus personnalisés, ajouter ou supprimer des éléments de menu, modifier leur nom, leur emplacement et leur imbrication.

Dans l’un des articles précédents, nous avons déjà examiné la méthode. Heureusement, WordPress dispose désormais d'une fonctionnalité intégrée qui vous permet de créer des menus personnalisés sans recourir à des plugins. Cette fonctionnalité est disponible dans toutes les versions de WordPress à partir de la version 3.0.

Je voudrais immédiatement attirer votre attention sur le fait que la prise en charge des menus personnalisés n'est pas activée dans tous les modèles. À cet égard, l'article comprendra deux parties. Dans la première partie de l'article, nous verrons comment créer des éléments de menu dans WordPress via le panneau d'administration si des menus personnalisés sont déjà inclus dans le modèle.

Dans la deuxième partie de l'article, nous apprendrons comment activer indépendamment la prise en charge des menus personnalisés dans WordPress et personnaliser l'affichage des menus via wp_nav_menu. Ces connaissances vous seront utiles si votre modèle ne prévoit pas l'utilisation de menus personnalisés, ou si vous l'écrivez vous-même, ou si vous souhaitez ajouter la possibilité de créer des menus personnalisés.

Création de menus et d'éléments de menu personnalisés via le panneau d'administration WordPress

Pour créer un menu, accédez au Panneau d'administration – Apparence – Menus et voyez si la prise en charge des menus personnalisés est activée dans votre modèle. Sinon, nous pouvons sauter cette étape pour l’instant et passer directement à la deuxième partie de l’article. Si le menu est déjà pris en charge, vous verrez une page avec approximativement le contenu suivant.

Pour créer un nouveau menu, saisissez son nom dans le champ « Entrer le titre du menu » et cliquez sur « Créer un menu ».

Personnellement, je préfère écrire tous les noms en lettres latines pour éviter tout problème à l'avenir. Les noms cyrilliques sont également pris en charge, mais je ne vous recommanderais pas de les utiliser. Ceci est mon opinion personnelle.

Après avoir créé le menu, nous devons le sélectionner dans le bloc « Domaines thématiques », qui se trouve dans la colonne de gauche, puis enregistrer le résultat en cliquant sur le bouton « Enregistrer ».

Dans ce cas, le thème ne prend en charge qu’un seul menu personnalisé, vous n’avez donc pas à choisir grand-chose. Il vous suffit de sélectionner le menu que nous avons créé dans la liste déroulante et d'enregistrer le résultat. Si le thème prend en charge deux menus ou plus, vous devez sélectionner le menu en fonction de son emplacement dans le modèle.

Après avoir enregistré les résultats, pour ajouter de nouveaux éléments au menu, marquez simplement les catégories ou pages souhaitées et cliquez sur le bouton « Ajouter au menu ».

Après cela, ils peuvent être déplacés les uns par rapport aux autres à volonté et l'imbrication peut être modifiée.

Nous avons donc examiné comment créer un menu personnalisé via le panneau d'administration WordPress, comment y ajouter de nouveaux éléments et les configurer. Passons maintenant à la deuxième partie de l'article et apprenons comment activer la prise en charge des menus personnalisés dans WordPress et les afficher dans le modèle à l'aide de la fonction wp_nav_menu.

Activer la prise en charge des menus personnalisés dans WordPress

Tout d’abord, nous devons enregistrer l’utilisation de menus personnalisés et les menus eux-mêmes. Pour cela, ouvrez le fichier function.php de votre thème pour le modifier et ajoutez le code suivant.

Register_nav_menus(array("top" => "Menu supérieur"));

Où « top » est l'identifiant du menu et « Top menu » est le nom de l'emplacement.

Si vous devez ajouter plusieurs menus, répertoriez-les séparés par des virgules.

Register_nav_menus(array("top" => "Menu supérieur", "left" => "Menu de gauche"));

Après avoir ajouté ce code, la prise en charge des menus personnalisés sera automatiquement activée. Vous pouvez le vérifier en allant dans le panneau d'administration – Apparence – Menu. Mais l’enregistrement du menu lui-même ne suffit pas. Le menu doit encore être affiché dans le modèle. Pour ce faire, nous utiliserons la fonction spéciale wp_nav_menu.

Afficher un menu personnalisé. Fonction wp_nav_menu

Comme mentionné ci-dessus, nous afficherons des menus personnalisés à l'aide de la fonction wp_nav_menu, qui peut accepter les paramètres suivants.

$args = array("menu" => "", // Nom du menu (chaîne). "container" => "div", // Conteneur de menu (chaîne). La liste ul y est placée. "container_class" = > " ", // Classe conteneur (chaîne). "container_id" => "", // ID conteneur (chaîne "menu_class" => "menu", // classe de balise ul "menu_id" =). > " ", // Id de la balise ul (string). "echo" => true, // Affichage ou retour pour traitement (booléen "fallback_cb" => "wp_page_menu", // Fonction de sauvegarde en cas d'arbitraire). le menu n'existe pas (chaîne "avant" => "", // Texte avant). chaque lien (chaîne). "after" => "", // Texte après chaque lien (chaîne). "link_before" => "", // Texte avant l'ancre du lien (chaîne). "link_after" => "", // Texte après l'ancre du lien (chaîne). "profondeur" => 0, // Profondeur d'imbrication (entier). 0 - illimité, 2 - menu personnalisé à deux niveaux. "walker" => , // Classe qui collecte les menus. Par défaut : nouveau Walker_Nav_Menu. (objet). "theme_location" => ""); // L'emplacement du menu dans le modèle. Spécifiez l'ID du menu. (chaîne).

Dans ce cas, les paramètres peuvent être transmis à la fois via un tableau et via une chaîne. Dans tous les cas, le menu fonctionnera. Pour plus de clarté, considérons les deux options.

Passer des paramètres via un tableau

Passer des paramètres via une chaîne

Wp_nav_menu("menu_id=topmenu&theme_location=top&container=");

Personnellement, je préfère la deuxième option, car elle est plus compacte, à mon avis. Dans tous les cas, le résultat de la fonction sera le code suivant.

  • Point 1
  • Point 2
  • Point 3

C'est ici que je termine cet article. Nous avons passé en revue les points principaux et dans 99% des cas ces informations vous suffiront pour créer vous-même des menus personnalisés dans WordPress. Si vous avez des questions, vous pouvez toujours les poser dans les commentaires.

C'est tout. Bonne chance et succès dans la création de sites Web sur WordPress.

La navigation est présente sur tout bon site Web, même s'il s'agit d'un site d'une seule page. Selon la situation, les liens de navigation peuvent mener vers différentes sections du site ou renvoyer vers un signet (ancre) situé sur la page en cours. Concevoir avec compétence une navigation dans laquelle l'utilisateur ne se perd pas nécessite certaines connaissances et expériences. La conception de la barre de navigation doit également être réalisée judicieusement, et dans ce didacticiel, nous vous montrerons comment créer un menu de navigation convivial.

Création d'une navigation

Qu'est-ce que la navigation ? Il s'agit d'un ensemble de liens, souvent ordonnés et regroupés par signification. Un menu de navigation est souvent créé à l'aide d'une balise de liste HTML

Des questions ?

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :

Envoyer