Pour séparer visuellement les éléments de menu, vous pouvez attribuer à chacun d’eux une bordure inférieure ou supérieure. Selon celui que vous utilisez, il vous manquera une bordure en haut ou en bas du menu. Cela peut être corrigé en ajoutant une autre bordure au bloc .menu lui-même :
Menu a ( bordure en haut : 1 px bleu uni ; ) .menu ( bordure en bas : 1 px bleu uni ; )
À l'heure actuelle, les liens du menu semblent trop bas et trop rapprochés. Si le texte de chaque lien n'occupe pas plus d'une ligne, alors vous pouvez augmenter leur hauteur et garder le texte centré verticalement en utilisant les propriétés height et line-height :
Comme vous pouvez le voir dans l'animation, la propriété height affecte la hauteur du lien et l'espacement des lignes en hauteur modifie la hauteur de la ligne de texte elle-même. Assurez-vous de définir les mêmes valeurs pour ces deux propriétés si vous souhaitez que le texte du lien soit centré verticalement.
La tâche principale lors de la création d'une navigation horizontale est de disposer les éléments de menu sur une seule ligne. Cela peut être fait de plusieurs manières.
La première option consiste à définir la propriété d'affichage des éléments de la liste avec la valeur inline ou inline-block :
Après cela, vous pouvez commencer à créer des liens. Par exemple, vous pouvez créer ce style :
Menu a ( décoration de texte : aucune ; famille de polices : sans-serif ; couleur : #5757a0 ; affichage : bloc en ligne ; remplissage : 10px 20px ; couleur d'arrière-plan : lavande ; bordure inférieure : 5px solide #5757a0 ; )
Nous avons ajouté une couleur d'arrière-plan et une bordure inférieure à chaque lien, et augmenté sa taille à l'aide d'un remplissage. Notez qu'il existe de petits écarts entre les éléments de menu, même si nous ne les avons pas ajoutés via les styles. Ils se produisent parce que le navigateur interprète ainsi le caractère de retour chariot entre les balises de fermeture et d'ouverture.
:Menu li ( float: gauche; )
Comme vous pouvez le constater, il n'y a plus d'écart entre les points. Tous les autres styles fonctionnent comme avant. Mais si vous ajoutez un autre élément HTML après la navigation (disons
), il sera alors affecté par l'habillage et sera aligné avec les éléments de menu. Vous pouvez annuler cette action en ajoutant la propriété clear: left à l'en-tête. Mais lors du développement d'un site comportant de nombreuses pages différentes, il peut devenir difficile de savoir si vous avez oublié de spécifier cette propriété quelque part. Il est beaucoup plus facile d'annuler l'habillage du côté de la navigation. Cette entrée vous aidera à ceci :
Menu (débordement : masqué ; )
Cela aidera également à ramener le parent des éléments flottants à leur hauteur normale. Nous avons déjà parlé de ce problème dans les leçons précédentes, mais nous l'avons ensuite résolu grâce à un hack spécial utilisant le pseudo-élément:after . L'exemple ci-dessus est une autre façon de résoudre le problème de la hauteur manquante du conteneur.
Note: si vous définissez un arrière-plan pour un élément .menu, vous ne le verrez pas tant que vous ne lui aurez pas appliqué overflow: caché. Logique, car comment voir le fond d’un élément dont la hauteur est nulle ?
Dans la prochaine leçon, nous parlerons plus en détail des capacités des sélecteurs d'attributs, avec lesquels vous pouvez définir
Enregistrez et affichez un menu personnalisé créé dans le panneau : Apparence > Menus.
Enregistrement du menu
Add_action("after_setup_theme", function())( register_nav_menus(array("main_menu" => __("Menu principal", "crea"), "foot_menu" => __("Menu de pied de page", "crea"),) ) ; ));
La deuxième option pour enregistrer le menu (je ne sais pas à quel point elle est correcte, il est donc préférable d'utiliser la première option)
If (function_exists("register_nav_menu")) ( register_nav_menus(array("main_menu" => __("Menu principal", "crea"), "foot_menu" => __("Menu de pied de page", "crea"),)) ; )
Affichage du menu
Deuxième option de menu
"menu-header", "theme_location" => "primary")); ?>
Plus de détails sur l'inscription et l'affichage du menu dans le modèle
Usage
wp_nav_menu(array("theme_location" => "" // (string) L'emplacement du menu dans le modèle. (indique la clé avec laquelle le menu a été enregistré dans la fonction "menu" => "", // (string ) Le nom du menu affiché (indiqué dans le panneau d'administration lors de la création d'un menu, il est prioritaire sur l'emplacement spécifié theme_location - s'il est spécifié, le paramètre theme_location est ignoré) "container" => "div", // (string) Wrapper de menu La balise du conteneur est spécifiée (par défaut dans la balise div) "container_class". " => "", // (string) classe du conteneur (balise div) "container_id" => "", // (string ) identifiant du conteneur (balise div) "menu_class" => "menu", // (string) classe du menu lui-même (balise ul) "menu_id" => "", // (string) identifiant du menu lui-même (balise ul) "echo" => true, // (booléen) Afficher ou renvoyer pour traitement "fallback_cb" = > "wp_page_menu", // (string) La fonction (de repli) à utiliser si le menu n'existe pas (pourrait not get) "before" => "", // (string) Texte avant chaque lien "après" => "", // (chaîne) Texte après each link "link_before" => "", // (string) Texte avant l'ancre (texte) du lien "link_after" => "", // (string) Texte après l'ancre (texte) du lien "items_wrap " => "", "profondeur" => 0, // (entier) Profondeur d'imbrication (0 - illimité, 2 - menu à deux niveaux) "walker" => "" // (objet) Classe qui collecte les menus. Par défaut : nouveau Walker_Nav_Menu));
Arguments du paramètre $args
emplacement_thème (chaîne)
ID de l'emplacement du menu dans le modèle. Identifiant spécifié lors de l'enregistrement d'un menu à l'aide de la fonction register_nav_menu().
Défaut: ""
menu(chaîne)
Le menu qui doit être affiché. Correspondance : identifiant, slug ou nom du menu.
Défaut: ""
conteneur (chaîne)
Comment envelopper la balise ul. Acceptable : div ou nav.
Si vous n'avez pas besoin de l'envelopper avec quoi que ce soit, écrivez false : containers => false.
Par défaut : div
classe_conteneur (chaîne)
La valeur de l'attribut class du conteneur de menu.
Par défaut : menu-(menu slug)-conteneur
conteneur_id (chaîne)
La valeur de l'attribut id du conteneur de menu.
Défaut: ""
menu_class(chaîne)
La valeur de l'attribut class de la balise ul.
Par défaut : menu
menu_id (chaîne)
La valeur de l'attribut id de la balise ul.
Par défaut : slug de menu
écho (booléen)
Imprimer à l'écran (vrai) ou renvoyer pour traitement (faux).
Par défaut : vrai
fallback_cb(chaîne)
Une fonction pour traiter la sortie si aucun menu n'est trouvé.
Passe tous les $args à la fonction spécifiée ici.
Définissez la chaîne vide sur '__return_empty_string' pour ne rien afficher s'il n'y a pas de menu.
Par défaut : wp_page_menu
avant (chaîne)
Texte avant la balise au menu.
Défaut: ""
après (chaîne)
Texte après chaque balise du menu.
Défaut: ""
lien_avant (chaîne)
Le texte avant l'ancre de chaque lien dans le menu.
Défaut: ""
lien_après(chaîne)
Texte après l'ancre de chaque lien dans le menu.
Défaut: ""
items_wrap(chaîne)
Dois-je envelopper des éléments dans une balise ul ? Si nécessaire, un modèle de wrapper est spécifié.
Défaut: ""
profondeur (nombre)
Combien de niveaux de liens imbriqués afficher. 0 - tous les niveaux.
marcheur (objet)
La classe qui sera utilisée pour construire le menu. Vous devez spécifier un objet, pas une chaîne, par exemple new My_Menu_Walker(). Par défaut : Walker_Nav_Menu(). Voir ci-dessous pour savoir comment utiliser...
Par défaut : Walker_Nav_Menu
item_spacing (chaîne)
S'il faut ou non laisser des sauts de ligne dans le code du menu HTML. Peut être : conserver ou jeter
Par défaut : "préserver"
Exemple
Afficher le menu uniquement s'il existe
Par défaut, s'il n'y a pas de menu, les pages du site seront affichées à la place. Mais si vous devez afficher le menu uniquement lorsqu'il est créé dans le panneau d'administration, spécifiez le paramètre fallback_cb comme "__return_empty_string" :
Wp_nav_menu(array("theme_location" => "primary-menu", "fallback_cb" => "__return_empty_string"));
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— identifiant sélectionné pour le menu — ID, slug ou nom du menu.
$conteneur- Le menu UL est « encapsulé » dans un conteneur DIV par défaut en utilisant ce paramètre.
$conteneur_classe— indique la classe du conteneur, par défaut sa valeur est menu-(menu slug)-container, c'est-à-dire que dans notre cas, par exemple, il y aura une classe menu-first-container.
$conteneur_id— vous pouvez ajouter un identifiant au conteneur, non spécifié par défaut.
$menu_classe— classe pour l'élément de menu UL, sa valeur est menu.
$menu_id— ID de l'élément ul, par défaut menu-(slug)
$écho— si vous ne souhaitez pas afficher le menu, mais renvoyer la valeur de la fonction, utilisez la valeur 0 pour ce paramètre.
$ fallback_cb— si le menu n'existe pas, la fonction wp_page_menu est appelée.
$avant— définit le texte affiché avant le lien A.
$lien_avant— affiche la phrase avant le texte du lien, non spécifié.
$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 0 affiche l'intégralité du menu.
$marcheur- une sorte d'"objet marcheur" personnalisé incompréhensible, probablement plus nécessaire aux développeurs avancés.
$thème_emplacement— 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 configurer 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
"topmenu", "theme_location"=>"top", "container"=>""); wp_nav_menu($args); ?>
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.
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.
