WordPress :: ajouter des menus de recherche par date ou taxonomie

Dans ce tutoriel nous verrons comment ajouter un menu de recherche dans votre site WordPress.

But et contexte du tutoriel

Dans un projet personnel, j’ai ajouté à des articles WordPress basiques deux taxonomies sur mesure. La première, lieux, j’ajoute des filtres pour les emplacements. La deuxième figures se concentre sur les personnes. Pour cette denière Le permalien de ma taxonomie est figures. Ce qui donnera en image pour une recherche sur “Papa”:

En plus de ces deux taxonomies, je souhaite aussi ajouter un tri sur les dates de publication. Pour ce point c’est plus simple, une fonction native WordPress existe.

Dans tous les cas, je souhaite n’afficher que les termes ou des dates actifs; avec des articles attribués. J’afficherai également le nombre d’articles disponible pour chaque méthode de tri.

Au final, mon nouveau menu ne sera pas multi critère et je l’intégrerai dans mon thème Genesis. Pas d’inquiétude, je tâcherai d’orienter ce tutoriel pour le rendre plus universel.

Structure du menu

Pour installer le menu, je souhaite m’accorder sur la logique de mon thème de manière à hériter des styles. Le plus simple dans ce cas est d’inspecter la structure d’un menu basique. Dans mon cas, cela donne:

Si le fichier ne s’affichait pas, le voir en ligne.

Dans mon thème, je vais ajouter cette structure à part les balise select et option qui servent pour le menu déroulant, et qui seront ajoutées dynamiquement par les fonctions qui suivront.

Intégrer le menu dans votre thème

Thème enfant Genesis

Dans le fichier functions.php de mon thème, je place le code qui suit pour placer ma nouvelle zone de menu. Ici, la partie dynamique n’est pas encore installée.

Si le fichier ne s’affichait pas, le voir en ligne.

Voici le détail du code:

• avec le hook, add_action('template_redirect','gn_affichage_menu' ); j’appelle une fonction suffisamment tôt dans l’exécution.
• la fonction gn_affichage_menu() me permet d’afficher le menu de manière conditionnelle
• dans ma condition, je vérifie que c’est une archive (catégorie, taxonomie ou date)
• si la condition est remplie, je lance un nouveau hook add_action('genesis_after_header','gn_nav_search');
• la fonction gn_nav_search sera appelée et elle affichera mon menu.

Note: Pour afficher les différentes zones d’un thème Genesis, je vous recommande cette page.

Autre thème WordPress

Si votre thème ne repose pas sur Genesis, il suffit de repérer quel fichier le génère. En général c’est le fichier header.php.

Construction du Menu date

Pour afficher un menu déroulant avec les articles classés par mois, j’utilise la fonction WordPress wp get archives associée à un petit code JavaScript. Le code pour ce menu donnera:

Si le fichier ne s’affichait pas, le voir en ligne.

Détail de la Fonction PHP

La fonction wp get archives supporte plusieurs paramètres. Par défaut, c’est affiché par mois. Dans mon cas, j’ajoute deux paramètres en plus

<?php wp_get_archives( array('format'=>'option', 'show_post_count'=>1) ); ?>

• le 'format'=>'option' permet de créer automatiquement des balises options dans le menu. La valeur de chaque (value) donnera l’URL vers l’archive du mois. Elle sera utilisée dans le code JavaScript qui suit.
• 'show_post_count'=>1) permet d’afficher le nombre d’articles

Avant la fonction, j’ai ajouté

<option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option>

De manière à afficher une option vide par défaut.

Détail de la fonction JavaScript

Sans rentrer trop dans les détails, le plus important ici est l’ID du menu select.

• je stocke dans la variable menuDate [1] la balise select avec l’identifiant “date”.
• je déclare une fonction qui va faire une redirection avec la value obtenue de la balise option
• ma fonction est appelée quand un changement opère sur le select du menu avec menuDate.onchange = onCatChange;

Résulat en image

Fonction PHP pour afficher la liste de mes termes

Pour les taxonomies sur mesure, il n’existe pas de fonction similaire pour récupérer les termes de ma taxonomie. Je vais donc la créer. Voici la fonction:

Si le fichier ne s’affichait pas, le voir en ligne.

Détail de la fonction

• je déclare ma fonction gn_custom_taxonomy_dropdown avec plusieurs paramètres
• je stocke dans la variable $terms l’objet retourné par la fonction get terms
• le premier paramètre de get_terms est la $taxonomies
• le deuxième paramètre $exclude concerne les terms que je vais exclure. C’est un array. Je lui donne une valeur vide. Il est du coup optionnel.
• je place un conditionnel pour vérifier si $terms existe
• si c’est le cas, j’utilise la printf pour afficher le contenu de mon menu avec plusieurs paramètres [2] à chaque fois. Pour le select, pour le option vide et pour les option dans la boucle qui suit.
• dans la boucle foreach s’affiche la liste des terms.
• au début de ma boucle avec if ( $term->count < 2) continue;, je fais en sorte que si le term de ma taxonomie n’a qu’un article, je ne l’affiche pas.
• à chaque fois, je me sers de ce que retourne l’objet get_terms [3]. Par exemple $term->count qui affichera le nombre d’articles liés au terme.

Construction du Menu des taxonomies

• Création de la fonction
• Redirection JS
• Analyse du code

Utilisation de la fonction qui affiche les taxonomies dans mon menu

Si le fichier ne s’affichait pas, le voir en ligne.

Détail de la fonction

• j’appelle la fonction créée précédemment, gn_custom_taxonomy_dropdown avec les paramètres détaillés juste avant
• ma taxonomie a le nom gntx_lieux
• l’ID sera lieux
• le menu option par défaut affichera Choisir un lieu
• j’exclus le terme qui a l’identifiant 71 [4]

Détail de la fonction JavaScript

C’est quasiment le même script que pour les dates. Voici ce qui change:

• l’ID est celui du menu select en cours.
• la valeur location ne peut pas reprendre l’attribut value de la balise option du formulaire [5]
• j’écris dynamiquement la valeur de l’URL en mixant l’URL du site (en PHP) le slug de la taxonomie (lieux) et la valeur (value) sélectionnée

Dans la capture qui suit, voici le lien entre l’URL et la value depuis l’inspecteur de Chrome.

Résulat en image

Code complet

Voici le menu complet. Dans le projet définitif, j’ai un menu pour les dates, un pour les personnes et un dernier pour les lieux.

Menu final (HTML)

Si le fichier ne s’affichait pas, le voir en ligne.

Menu final pour Genesis

Tout ce code est placé dans le fichier functions.php de votre thème. [6]

Si le fichier ne s’affichait pas, le voir en ligne.

Démo en vidéo

Note: le menu caché est une combinaison d’un petit script jQuery et une d’une icône native de WordPress