WordPress fait un excellent travail en soulignant les articles, pages ou taxonomies standard actuels lorsque vous les incluez dans un menu de navigation. Mais lorsque vous créez une publication personnalisée ou une taxonomie personnalisée, tout se passe mal et la navigation cesse de mettre en surbrillance la page en cours. Heureusement, il existe une solution de contournement: vous pouvez spécifier manuellement l'élément de menu mis en surbrillance lorsque vous affichez du contenu personnalisé..
La solution est simple Nous avons écrit quelques lignes de code qui créent une page de paramètres dans laquelle vous allez spécifier les éléments de menu à mettre en surbrillance pour chaque type de contenu personnalisé. L'étape suivante consiste à remplacer la classe de navigation Walker par défaut de WordPress afin de générer une classe de surbrillance en cas de besoin. Simple et efficace.
Créez un nouveau fichier appelé navigation.php et l'inclure de la functions.php fichier.
include_once (get_template_directory (). '/navigation.php');
Maintenant nous sommes prêts à commencer avec le vrai code.
Commencez par enregistrer un nouveau groupe de paramètres pour générer une nouvelle page de paramètres wp-admin. Dans ton vide navigation.php fichier insérer le code suivant.
add_action ('admin_init', 'ns_register_navigation_settings'); fonction ns_register_navigation_settings () register_setting ('ns_navigation', 'ns_navigation_predefined_values');
Générez ensuite un nouvel élément de menu pour accéder à notre nouvelle page de paramètres dans wp-admin.
add_action ('admin_menu', 'ns_navigation_options'); function ns_navigation_options () add_submenu_page ('themes.php', 'Menus prédéfinis', 'Menus prédéfinis', 'edit_theme_options', 'menu-defaults', 'menu_defaults_page');
le menu_defaults_page () Cette fonction imprime la page des paramètres dans WordPress Admin. Avant d'imprimer les entrées de formulaire get_option ('ms_navigation_predefined_values') demande les valeurs stockées dans la base de données et les stocke dans $ ns_navigation_predefined_values comme un tableau.
Dans ce cas, rien n’a encore été stocké, les valeurs sont donc vides. En utilisant settings_field () est nécessaire pour l’impression des champs masqués liés et obligatoires ainsi que pour le traitement de la sécurité Le reste du code imprime les éléments d’entrée à l’aide des valeurs de $ ns_navigation_predefined_values.
La page des paramètres est maintenant disponible mais vide. Nous devons le renseigner avec toutes les publications personnalisées et les taxonomies disponibles générées, ainsi que les éléments de menu disponibles pour correspondre à ces valeurs. Insérer le code suivant.
fonction menu_defaults_page () ?>La page des paramètres est maintenant créée, mais nous devons encore définir les fonctions appelées dans le code ci-dessus. Insérer le code suivant.
fonction ns_get_post_types () $ post_types = get_post_types (array ('public' => true, '_builtin' => false), 'objets'); foreach ($ post_types as $ k => $ v) $ ns_registered_post_types -> $ k = $ v-> labels-> nom; return $ ns_registered_post_types; function ns_get_taxonomies () $ taxonomies_types = get_taxonomies (array ('public' => true, '_builtin' => false), 'objets'); foreach ($ taxonomies_types as $ k => $ v) $ ns_registered_taxonomies_types -> $ k = $ v-> labels-> nom; return $ ns_registered_taxonomies_types;La fonction ns_get_post_types récupère tous les types de publication disponibles et affiche uniquement ceux qui sont personnalisés. La fonction ns_get_taxonomies fait la même chose, mais pour les taxonomies bien sûr.
Étape 3 Le faire fonctionner dans le thème WordPress
Nous avons la page des paramètres déclarée et quelques publications personnalisées et taxonomies déclarées. La prochaine étape consiste à le faire fonctionner dans le thème que nous utilisons. À des fins de test, nous travaillons avec le thème Twenty Eleven de WordPress, mais ce code devrait fonctionner avec n'importe quel thème..
Modifions la classe WordPress Menu Walker pour remplacer la sortie par défaut. Nous lisons nos paramètres et utilisons les valeurs pour ajouter un nouveau current_page_item ns_current_page_item classe dans la page respective lorsque nous affichons la boucle de publication personnalisée ou page individuelle liée.
la classe NS_Walker_Nav_Menu étend Walker_Nav_Menu fonction start_el (& $ sortie, $ item, $ profondeur, $ args) global $ wp_query; $ indent = ($ depth)? str_repeat ("\ t", $ depth): "; if (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ nom_classe = $ valeur ="; $ classes = vide ($ item-> classes)? array (): (array) $ item-> classes; $ classes [] = 'menu-item-'. $ item-> ID; $ classes [] = 'page-gui-'. $ item-> object_id; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item, $ args)); $ class_names = ''; item-> ID, $ item, $ args); $ id = strlen ($ id)? '': "; $ sortie. = $ indent. '
Le nouveau NS_Walker_Nav_Menu Class lit les valeurs de navigation stockées dans un tableau avant impression. Dans ce cas, en utilisant un si()
structure de contrôle permettant d’évaluer si l’élément de navigation actuel correspond à la valeur stockée précédemment pour la page actuellement imprimée par WordPress. Si la condition est vraie, les classes "current_page_item" et "ns_current_page_item" sont ajoutées aux classes existantes stockées dans le répertoire. $ class_names variable.
Ensuite, nous devons utiliser une fonction personnalisée supplémentaire. Lorsque nous l'appelons, cette fonction imprimera le menu dans le thème..
fonction ns_wp_nav_menu ($ args) global $ post; $ ns_walker = new NS_Walker_Nav_Menu (); $ args ['walker'] = $ ns_walker; $ ns_navigation_predefined_values = get_option ('ns_navigation_predefined_values'); $ custom_post_type = get_post_type ($ post); $ available_post_types = (array) ns_get_post_types (); $ taxonomy_type = get_queried_object (); $ taxonomy_type = $ taxonomy_type-> taxonomy; $ available_taxonomy_types = (tableau) ns_get_taxonomies (); if (is_singular ($ custom_post_type) && array_key_exists ($ custom_post_type, $ available_post_types)) $ args ['current_nav_element'] = (function_exists ('icl_object_id'))? icl_object_id ($ ns_navigation_predefined_values [$ type_post_personnalisé], 'page'): $ ns_navigation_predefined_values [$ type_post_personnalisé]; elseif (is_tax ($ taxonomy_type) && array_key_exists ($ taxonomy_type, $ available_taxonomy_types)) $ args ['current_nav_element'] = (function_exists ('icl_object_id'))? icl_object_id ($ ns_navigation_predefined_values [$ taxonomy_type], 'page'): $ ns_navigation_predefined_values [$ taxonomy_type]; else unset ($ args ['current_nav_element']); wp_nav_menu ($ args);
le ns_wp_nav_menu () est créé pour simplifier l'utilisation de la fonction wp_nav_menu () intégrée. La première étape consiste à forcer la fonction à charger la nouvelle classe Walker à l'aide de $ ns_walker = new NS_Walker_Nav_Menu () et en ajoutant au tableau de paramètres en utilisant $ args ['walker'] = $ ns_walker;.
Au lieu de toujours transmettre les paramètres requis à la fonction, cela est inclus par défaut. Dans ce cas spécifique, la fonction lit le message actuel et même la page traduite si le plugin WPML est activé sur votre site Web WordPress..
Commencez par évaluer si la page est en vue unique en utilisant is_singular () et obtenez de la base de données la valeur stockée correspondante. Le deuxième choix possible est d’évaluer si la page en cours est une requête de taxonomie utilisant is_tax (). Sinon, il n'y a rien à sélectionner et le code libère l'élément de navigation actuel en utilisant unset ($ args ['current_nav_element'])
Ouvrez le header.php fichier dans votre thème Twenty Eleven, retrouvez le wp_nav_menu () fonction, approximativement sur la ligne 118, et remplacer par ns_wp_nav_menu en conservant les mêmes paramètres et rien d'autre, car la nouvelle fonction gère le reste des paramètres requis par défaut. Le nouveau code devrait ressembler à ceci:
", 'theme_location' => 'primaire');?>
Cette fonction utilise les mêmes arguments que la norme wp_nav_menu fonction alors n'hésitez pas à modifier autant que vous voulez ou devez.
Ouvrir style.css aussi et remplacer le code en ligne 617 avec:
#access .current-menu-item> a, #access. ancre-menu-courant> a, #access .current_page_item> a, #access .current_page_ancestor> a, #access .ns_current_page_item> a font-weight: bold;
Vous avez des publications personnalisées, des taxonomies personnalisées et vous avez créé de nouvelles pages avec des modèles pour afficher ces boucles personnalisées. Vous avez probablement créé un nouveau menu dans votre wp-admin et ajouté ces pages également. Ouvrez la page des paramètres de menus prédéfinis située sous Apparence et définissez les pages sélectionnées pour chaque publication personnalisée et taxonomie créée..
Lorsque vous affichez le message personnalisé ou la seule page associée à ce message personnalisé, la navigation met en évidence l'élément de menu correspondant..
Il existe de nombreuses façons d’obtenir le même résultat, mais après quelques projets publiés utilisant cette approche, j’ai trouvé que c’était le meilleur et le plus convivial..
Quoi qu'il en soit, ceci n'est que le début de toutes les possibilités que vous pouvez obtenir lorsque vous comprenez ce code et commencez à apporter des modifications pour vos besoins personnels..
Je vous encourage à poursuivre vos recherches sur la classe de navigation Walker. Il y a beaucoup de possibilités cachées là-dedans, vous pouvez parier dessus.