J'essaie de créer un menu qui affiche un maximum de 5 éléments. S'il y a plus d'articles, il doit les envelopper dans un autre <ul>
élément pour créer une liste déroulante.
5 articles ou moins:
6 Articles ou plus
Je sais que ce type de fonctionnalité pourrait facilement être créé avec un déambulateur qui compte les éléments de menu et les encapsule s'il y a plus de 5 éléments restants dans un élément séparé <ul>
. Mais je ne sais pas comment créer ce déambulateur.
Le code qui montre mon menu en ce moment est le suivant:
<?php wp_nav_menu( array( 'theme_location' => 'navigation', 'fallback_cb' => 'custom_menu', 'walker' =>new Custom_Walker_Nav_Menu ) ); ?>
J'ai remarqué que si le menu n'est pas défini par l'utilisateur et qu'il utilise la fonction de repli, le déambulateur n'a aucun effet. J'en ai besoin pour fonctionner dans les deux cas.
menus
navigation
walker
Boule de neige
la source
la source
Walker_Nav_Menu
et il y a un exemple dans le codex . Que voulez-vous dire par "Je ne sais pas comment créer le Walker"?Réponses:
En utilisant un Walker personnalisé, la
start_el()
méthode a accès à$depth
param: quand il s'agit de0
l'elemnt est un top, et nous pouvons utiliser ces informations pour maintenir un compteur interne.Lorsque le compteur atteint une limite, nous pouvons utiliser
DOMDocument
pour obtenir à partir de la sortie HTML complète le dernier élément ajouté, l'envelopper dans un sous-menu et l'ajouter à nouveau au HTML.Éditer
Lorsque le nombre d'éléments est exactement le nombre dont nous avions besoin + 1, par exemple, nous avons demandé que 5 éléments soient visibles et que le menu en ait 6, cela n'a aucun sens de diviser le menu, car les éléments seront 6 de toute façon. Le code a été modifié pour y remédier.
Voici le code:
L'utilisation est assez simple:
la source
$split_at = 5
mais l'$count
index commence à 0.$split_at
argument, 5 par défaut.Il existe même un moyen de rendre cela possible avec CSS seul. Cela a quelques limites, mais j'ai toujours pensé que cela pourrait être une approche intéressante:
Limites
Approche
Bien que je n'utilise pas vraiment "Quantity Queries", l'utilisation créative de
:nth-child
et~
j'ai lu dans les récentes requêtes de quantité pour CSS est ce qui m'a conduit à cette solution.L'approche est essentiellement la suivante:
...
points à l'aide d'unbefore
pseudo-élément.Voici le code CSS pour un balisage de menu WordPress par défaut. J'ai commenté en ligne.
J'ai également créé un jsfiddle pour le montrer en action: http://jsfiddle.net/jg6pLfd1/
Si vous avez d'autres questions sur la façon dont cela fonctionne, veuillez laisser un commentaire, je serais heureux de clarifier davantage le code.
la source
Vous pouvez utiliser un
wp_nav_menu_items
filtre. Il accepte la sortie de menu et les arguments qui contiennent des attributs de menu, comme le slug de menu, le conteneur, etc.la source
DOMDocument
peut être utilisé. Cependant, dans cette question, il n'y a pas de sous-menus, donc la réponse est correcte pour ce cas spécifique. DOMDocument serait une solution "universelle" mais je n'ai pas le temps pour l'instant. Vous pouvez enquêter;) parcourir les éléments LI, si un enfant UL le saute, ce serait une solution mais nécessite une version écrite :)ul
. WordPress boucle déjà les éléments de menu dans le menu walker. C'est déjà une opération lente en soi , l'ajout d'une boucle supplémentaire je pense que ce n'est pas la bonne solution, au contraire, un déambulateur personnalisé serait une solution beaucoup plus propre et efficace.Vous avez une fonction de travail, mais vous ne savez pas si c'est la meilleure solution.
J'ai utilisé un déambulateur personnalisé:
La fonction qui affiche le menu réel est la suivante:
J'ai déclaré la variable globale $ menu_items et l'ai utilisée pour montrer la fermeture
<li>
et les<ul>
balises. Il est probablement possible de le faire également dans le marcheur personnalisé, mais je n'ai pas trouvé où et comment.Deux problèmes: 1. S'il n'y a que 5 éléments dans le menu, il enveloppe également le dernier élément dans une pensée qu'il n'est pas nécessaire.
la source
substr_count($output,'<li')
sera== 4
au mauvais endroit ...