Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Comment créer un modèle de recherche avancée personnalisé dans WordPress

40

Ce guide est destiné à vous qui avez un type de publication personnalisé (CPT) et souhaitez une page de recherche avancée qui recherche des résultats dans ce CPT. Dans le formulaire de recherche, vous pouvez configurer différentes entrées pour effectuer une recherche dans différents champs ; titre de publication, contenu de publication, tout type de méta personnalisé ou par taxonomie personnalisée.

Dans cet article, nous supposerons que nous avons un type de publication personnalisé pour les livres, une taxonomie personnalisée jointe pour le genre de livre et un tas de méta personnalisées ; auteur, année de publication, numéro ISBN et une case indiquant si le livre est en stock ou non. Le type et les paramètres de publication personnalisés dépendent entièrement de vous pour répondre à vos besoins, le code ci-dessous essaiera simplement de couvrir la plupart des bases.

Ce que nous ferons

Nous allons créer un type de publication personnalisé pour les livres et une taxonomie hiérarchique personnalisée qui lui sera associée pour le genre. De plus, chaque livre a des champs personnalisés pour les auteurs, l’année de publication, le numéro ISBN et une case à cocher pour inclure ou non les livres en rupture de stock. En ce qui concerne la page de recherche elle-même, nous créerons un modèle de page où résidera la majeure partie de notre code. La page commencera par afficher un formulaire personnalisé au début ; montrant tous les paramètres possibles pour filtrer les résultats. En dessous, tous les résultats de livres apparaîtront dans une liste. Nous décidons d’un nombre de résultats par page et ajoutons une pagination en bas si le nombre dépasse ce nombre.

Voici les paramètres de filtre possibles que nous allons créer pour notre modèle de recherche avancée :

  • Saisie de texte pour rechercher n’importe quelle chaîne dans le titre et le contenu de l’article.
  • Liste déroulante pour choisir un genre. Permet de choisir un terme ou de le laisser à "Tout".
  • Entrée pour taper le nom de l’auteur qui recherche dans la méta personnalisée. Une correspondance lâche, ce qui signifie que la saisie de "Mark" renverra tous les auteurs dont le nom est ou contient "Mark".
  • Entrée numérique pour entrer l’année de publication du livre qui recherche dans la méta personnalisée. Correspondance lâche, ce qui signifie entrer par exemple "20" correspondra à n’importe quel livre publié en 1920 ou à n’importe quelle année commençant par 20.
  • Entrée pour entrer l’ISBN (ID international du livre) qui recherche dans la méta personnalisée. Renvoie uniquement les correspondances précises.
  • Case à cocher pour inclure ou non les livres en rupture de stock, encore une autre méta personnalisée. Par défaut, cette option n’est pas cochée, ce qui signifie que les résultats n’affichent que les livres en stock.

Le formulaire est configuré pour utiliser la méthode GET, ce qui signifie que tous les paramètres recherchés seront ajoutés à la page dans l’URL, sous la forme de " ?book-search=world&year-published=2016&book-author=mark". L’autre option si vous voulez éviter d’avoir des "URL laides" est d’utiliser Javascript et AJAX. Mais il y a quelques inconvénients à cela. Tout d’abord, il ne sera pas possible de marquer une recherche avec des paramètres de recherche spécifiques "pré-remplis". Imaginez que vous, ailleurs sur votre site, vouliez créer un lien direct vers votre page de recherche personnalisée par un auteur spécifique. Vous pouvez ensuite faire en sorte que le lien aille vers votre page de recherche, ajouter " ?author=mark", et ainsi cliquer sur le lien mènera directement aux résultats pour cet auteur. Ce n’est pas possible avec AJAX.

Les paramètres de recherche sont mutuellement inclus. Cela signifie que la combinaison, par exemple, de l’année "2011" et de l’auteur "Some guy" ne renverra que les livres qui correspondent aux DEUX. Si nous spécifions également "drôle" dans la saisie de texte de recherche générale, nous n’obtiendrons que des retours correspondant aux trois éléments. Dit en des mots différents; nous utiliserons la logique ET. Il s’agit de la méthode la plus courante pour filtrer les résultats de recherche.

Ce didacticiel n’inclura pas le style, cette partie dépend donc de vous. Vous trouverez ci-dessous un exemple de ce à quoi cela pourrait ressembler avec un style de base.

Comment créer un modèle de recherche avancée personnalisé dans WordPress

Une note sur la pagination avec une requête personnalisée

Si vous voulez une pagination sur une requête personnalisée dans une seule page, il y a quelques points à prendre en compte. La pagination d’une requête peut être générée avec les fonctions WordPress [the_posts_pagination](https://developer.wordpress.org/reference/functions/the_posts_pagination/)(), [paginate_links](https://developer.wordpress.org/reference/functions/paginate_links/)(), ou les deux [next_post_link](https://developer.wordpress.org/reference/functions/next_post_link/)()et [previous_post_link](https://developer.wordpress.org/reference/functions/previous_post_link/)(). Cependant, ceux-ci sont codés pour fonctionner avec l’ wp_queryobjet global (qui, pour un modèle de page, est la page elle-même), et non une requête personnalisée.

Il existe quelques solutions de contournement, telles que l’écriture d’une fonction de pagination vous-même. Ou vous pouvez utiliser l’action pre_get_postset manipuler l’ wp_queryobjet. Malheureusement, cette méthode est trop tardive pour affecter les fonctions de pagination. Une autre alternative consiste à ignorer complètement la pagination et à afficher simplement tous les messages. Cela pourrait être une option si vous n’avez pas beaucoup de publications, mais si vous créez un modèle de recherche personnalisé avancé, je suppose que vous avez pas mal de publications.

Ce que nous allons faire dans ce guide est une sorte de méthode "hackish". Dans le modèle de page, nous remplacerons l’ wp_queryobjet par notre requête personnalisée afin que les fonctions de boucle et de pagination fonctionnent comme prévu. Cette méthode est celle avec laquelle j’ai eu le plus de succès.

Sans plus tarder, commençons à coder !

Configuration du type de publication personnalisé, de la taxonomie et des champs méta

La première étape consiste à définir le type de publication personnalisé pour lequel nous voulons créer un modèle de recherche avancée. Si vous avez déjà configuré un type de publication personnalisé ou souhaitez l’implémenter pour des publications ou des pages, vous pouvez passer directement à la partie suivante.

Nous définissons un type de publication personnalisé bookavec une taxonomie personnalisée hiérarchique book_category. Je n’entrerai pas dans les détails pour expliquer comment créer des types de publication personnalisés et des taxonomies ici. Si vous souhaitez en savoir plus, j’ai un article qui détaille ce sujet.

Mettez ce code n’importe où dans le code de votre thème functions.phpou plugin :

Cela se traduira par un type de publication personnalisé avec une taxonomie qui lui est attachée dans l’administration.

La configuration de la méta de publication personnalisée dépend un peu de vous – gérez-la manuellement avec [add_meta_box](https://developer.wordpress.org/reference/functions/add_meta_box/)()ou utilisez le plugin Advanced Custom Fields (ACF) qui est parfait pour ce type de travail. Je vais utiliser ACF pour configurer les champs par programmation, comme ceci :

Vous êtes bien sûr invités à configurer les champs ACF à l’aide de l’interface graphique d’administration d’ACF. Mais il y a plusieurs avantages à les ajouter par code. Par exemple, assurez-vous de conserver les mêmes champs partout où vous activez votre thème ou votre plugin. Si vous configurez les champs dans l’administration, vous devez vous rappeler de les exporter et de les importer si vous changez de site WordPress.

Veuillez noter les méta-noms ; par exemple book_author, year_published, et ainsi de suite. Vous vous y référerez lorsque nous créerons la requête personnalisée sur le modèle de recherche avancée.

Avec le plugin ACF et le code ci-dessus, l’édition d’un seul livre ressemblerait à ceci :

Comment créer un modèle de recherche avancée personnalisé dans WordPress

Avec cela, nous sommes tous bons pour créer autant de publications que nous voulons. L’étape suivante consiste à créer le modèle de page pour notre recherche.

Création du modèle de page

Créons le modèle de page dans lequel nous placerons notre modèle de recherche avancée. Faites une copie du single.phpou de votre thème page.phpet renommez-le par exemple template-booksearch.php. Le code HTML dépend de vous, mais la raison pour laquelle nous faisons une copie d’une page ou d’une page est qu’il s’agit probablement du modèle le plus proche en termes de mise en page.

Tout en haut du modèle de page, nous signifions qu’il s’agit d’un modèle de page en écrivant "Nom du modèle" et son nom dans le bloc de commentaires. Cela garantira que nous pouvons sélectionner le modèle de page lorsque nous modifions une page.

Les sections que nous devons coder dans notre modèle sont les suivantes, dans cet ordre :

  1. Stockez toutes les variables précédemment soumises par le formulaire, en utilisant get_query_var(). Besoin également de stocker la page actuelle
  2. Rendre le formulaire de recherche avec un bouton Soumettre pour effectuer une recherche
  3. Réinitialiser l’ wp_queryobjet
  4. Configurez les arguments d’un nouveau WP_Query()en fonction des paramètres recherchés et exécutez la requête. Affecter la requête personnalisée à l’ wp_queryobjet
  5. Parcourez les résultats et affichez-les. Rendre également les liens de pagination
  6. Réinitialiser l’ wp_queryobjet à ce qu’il était

La raison pour laquelle nous devons stocker tôt toutes les variables recherchées et la page actuelle est que ces variables seront perdues une fois que nous aurons réinitialisé l’ wp_queryobjet à l’étape 3. Nous avons également besoin des variables de notre formulaire de recherche pour remplir les champs.

Dans votre modèle, décidez de l’endroit où vous souhaitez afficher votre recherche personnalisée, et commençons par le haut :

1 Obtenir toutes les variables recherchées

Nous récupérons les paramètres GET (à partir de l’URL) avec [get_query_var](https://developer.wordpress.org/reference/functions/get_query_var/)(). Par exemple; si nous avons un paramètre ?book-author=benjamindans l’URL, l’utilisation get_query_var('book-author')renverrait la chaîne ‘ benjamin‘. La récupération de toutes les variables peut être effectuée comme suit :

$search_string = get_query_var('book-search'); $author = get_query_var('book-author'); $category = get_query_var('book-category'); $year = get_query_var('year-published'); $isbn = get_query_var('isbn'); $out_of_stock = get_query_var('out-of-stock');

Mais ce sont tous des paramètres personnalisés qui ne font pas partie des paramètres GET standard de WordPress. WordPress ignorera tous les paramètres GET qu’il ne connaît pas, donc les appeler renverra toujours une chaîne vide. Nous devons dire à WordPress d’autoriser chacun de ces paramètres GET. Nous le faisons en filtrant query_vars. Dans votre functions.php, ajoutez également ceci :

add_filter('query_vars', function($vars) { $vars[] = 'book-search'; $vars[] = 'book-author'; $vars[] = 'book-category'; $vars[] = 'year-published'; $vars[] = 'isbn'; $vars[] = 'out-of-stock'; return $vars; });

Maintenant, nos get_query_var()devraient pouvoir récupérer les paramètres GET. S’ils ne sont pas définis, il renvoie une chaîne vide.

Nous devons également récupérer la page actuelle avant de gâcher l’ wp_queryobjet. La page en cours est un paramètre GET caché appelé paged. Nous allons le récupérer de la même manière que nos autres paramètres GET, mais nous le définirons par défaut sur 1 s’il est vide.

$paged = (get_query_var('paged'))? get_query_var('paged'): 1;

Remarque : Comme pagedil s’agit d’un paramètre WordPress standard, nous n’avons pas besoin d’ajouter pagedau query_varsfiltre.

2 Afficher le formulaire de recherche

Le formulaire de recherche sera simplement un <form>avec les entrées nécessaires et un bouton de soumission de formulaire. Le HTML dépend entièrement de vous, dans l’exemple ci-dessous, j’ajoute les entrées dans une simple liste. Je n’inclurai aucun style dans ce tutoriel, c’est à vous de décider. Vous pouvez choisir de styliser le formulaire de recherche pour qu’il réside en haut des résultats ou sur le côté – verticalement vers le bas avec les résultats de la recherche.

Remarque: Pour raccourcir et modulariser le modèle de recherche avancée, vous pouvez séparer la partie du formulaire de recherche dans un fichier de modèle séparé et l’inclure avec [get_template_part](https://developer.wordpress.org/reference/functions/get_template_part/)(). Mais pour la simplicité de ce tutoriel, j’inclurai tout dans le fichier de modèle lui-même.

Le formulaire lui-même doit être de la méthode GET, et l’action doit pointer vers la page sur laquelle nous nous trouvons. Pour ce faire, nous accédons à l’ $postobjet global et obtenons le lien permanent à partir de celui-ci. À la fin, nous ajoutons un bouton de soumission qui soumettra le formulaire.

Dans la liste non ordonnée, nous ajouterons une entrée appropriée pour chacun de nos paramètres de recherche possibles. Ajustez le code HTML et les paramètres de recherche en fonction de vos besoins :

Veuillez prendre note des nameattributs ; ils sont ce qui apparaîtra dans l’URL lorsque le formulaire est soumis. Ils doivent correspondre aux query_varset get_query_var()que nous avons définis précédemment !

Le code ci-dessus commence par rendre une entrée de texte pour la recherche de texte générale. Nous définissons la valuevariable précédemment recherchée que nous avons récupérée à l’aide de get_query_var(). Cela garantit que l’entrée ne s’efface pas après que nous ayons effectué une recherche.

Le paramètre suivant est une liste déroulante de genre de notre taxonomie personnalisée. Pour le rendre, nous utilisons la fonction [wp_dropdown_categories](https://developer.wordpress.org/reference/functions/wp_dropdown_categories/)(). Jetez un œil à la page de documentation pour voir pourquoi nous ajoutons tous ces paramètres pour ajuster la liste déroulante à nos besoins. Il est important que l’ attribut soit taxonomydéfini sur notre taxonomie personnalisée, namesoit correct et selectedsoit défini sur la valeur de la variable précédemment recherchée. Nous définissons également les valeurs des termes comme étant leurs slugs au lieu des ID de termes. C’est mieux avec ?book-category=fictionau lieu de ?book-category=42. Nous activons également une option "aucun" pour ajouter une option "Tout genre".

Ensuite, nous rendons une autre entrée de texte pour la recherche d’auteur, une entrée de nombre pour l’année de publication, une entrée de texte pour le numéro ISBN, et enfin une case à cocher qui est décochée par défaut pour inclure les livres en rupture de stock.

3 Réinitialisez le wp_query

La prochaine étape est un petit hack afin de s’assurer que la pagination fonctionne pour notre requête personnalisée. Nous stockons simplement le courant $wp_querydans une variable, puis le définissons sur null. Plus tard, à l’étape 6, nous le réinitialiserons à partir de la $tmp_wpqueryvariable.

$tmp_wpquery = $wp_query; $wp_query = null;

4 Configurer des arguments et exécuter une requête personnalisée

Cette partie consiste à effectuer une nouvelle requête. Nous commençons par configurer les arguments les plus élémentaires, puis nous ajoutons conditionnellement des paramètres en fonction de ce qui a été trouvé dans les variables précédemment recherchées (de notre get_query_var()s).

Le code ci-dessus construit essentiellement un WP_Queryavec des paramètres. La page de documentation de WP_Queryest une excellente ressource pour comprendre comment créer une requête.

Les tout premiers arguments garantissent que nous n’interrogeons que les livres et que nous informons correctement la page sur laquelle nous nous trouvons actuellement – à partir de la pagedvariable que nous avons récupérée plus tôt. Le nombre de messages par page dépend de vous, je l’ai simplement défini sur 20.

Notez que l’ajout de ‘ compare‘ à ‘ LIKE‘ obligera WordPress à rechercher tout ce qui contient la chaîne donnée. Je ne l’ai pas ajouté à la recherche ISBN car pour ce champ, je veux qu’il trouve des résultats qui correspondent parfaitement.

L’important est juste à la fin, lorsque nous exécutons réellement la requête, et affectons cette requête à la wp_queryvariable.

5 Parcourez les résultats de la requête et rendez la pagination

Cette étape est vraiment facile. Tout ce dont nous avons besoin est une boucle standard et pour chacune, nous rendons la publication du livre comme nous le souhaitons. Cette partie dépend entièrement de vous.

Le code ci-dessous montre un exemple de base de boucle à travers les résultats, appelant get_template_part()pour chaque message. Après la boucle the_posts_pagination()est utilisée pour rendre les liens de pagination. Si la requête n’a renvoyé aucune publication, un simple paragraphe avec un texte s’affiche.

Ajustez le code HTML et la sortie en fonction de vos besoins. Le code ci-dessus attend un fichier de modèle dans le thème nommé content-book.phppour afficher un seul livre dans la boucle. Je ne vous montrerai pas comment rendre chaque message car c’est quelque chose sur lequel vous avez probablement déjà le contrôle.

6 Réinitialisez le wp_query à ce qu’il était

La dernière étape consiste à réinitialiser l’ wp_queryobjet sur ce que nous avons stocké précédemment à l’étape 3. Nous le définissons en nullpremier pour nous assurer qu’il est réinitialisé.

$wp_query = null; $wp_query = $tmp_wpquery;

Conclusion et résultat final

Et c’était tout! Vous devriez maintenant avoir un modèle de recherche personnalisé avancé entièrement fonctionnel. J’espère que cela vous a été utile – le code a été écrit de manière aussi générale que possible pour vous permettre de vous adapter facilement à vos besoins. Peut-être souhaitez-vous différents types de paramètres, ou votre type de publication personnalisé est-il destiné aux films ou à autre chose !

Avec un style de base, cela peut facilement ressembler à ceci :

Comment créer un modèle de recherche avancée personnalisé dans WordPress

Voici le code final ; la functions.phppièce et le modèle :

Source d’enregistrement: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More