Le moyen le plus simple d'ajouter une recherche en direct

Vous recherchez le meilleur plugin WordPress de recherche AJAX ?

L'ajout de la recherche en direct alimentée par AJAX à WordPress est un excellent moyen d'améliorer l'expérience utilisateur (UX) de votre site et d'augmenter la découvrabilité du contenu.

Dans cet article, vous apprendrez étape par étape comment configurer la recherche AJAX dans WordPress à l'aide d'une solution entièrement sans code.

En fait, vous pouvez être opérationnel en quelques minutes seulement, tout en ayant toujours accès à des fonctionnalités permettant d'affiner le fonctionnement de la recherche AJAX de votre site.

Tout ce que vous avez à faire est de :

1. Installez le plug-in Otter Blocks.
2. Ajoutez le bloc de recherche à l'endroit où vous souhaitez que votre champ de recherche WordPress AJAX apparaisse et activez la bascule de recherche en direct.
3. Personnalisez la fonctionnalité de recherche en direct AJAX selon vos besoins, par exemple en la configurant pour rechercher uniquement les articles de blog, mais pas les pages.

Si vous souhaitez accéder directement au didacticiel, vous pouvez cliquer sur ce lien de saut.

Qu'est-ce que la recherche AJAX pour WordPress ?

Vous utiliserez probablement la fonctionnalité de recherche en direct au quotidien. Par exemple, tous les principaux moteurs de recherche et sites vidéo tels que YouTube proposent ce type de fonctionnalité.

Vous commencez à taper dans le champ de recherche et vous voyez instantanément une liste de requêtes suggérées (ou de résultats suggérés) - aucun chargement de page n'est nécessaire.

Bien que WordPress ait sa propre barre de recherche, il n'utilise pas AJAX par défaut. Au lieu de cela, les utilisateurs entrent un terme de recherche dans la zone, appuyez sur Entrée et une nouvelle page avec les résultats se charge.

Pour ajouter une recherche en direct à votre site, vous aurez besoin de l'aide d'un plugin, c'est de cela qu'il s'agit dans cet article.

Les avantages de la recherche AJAX en direct dans WordPress

Tout ce que vous pouvez introduire qui améliore l'UX apportera de la valeur à votre site. Cependant, la recherche AJAX en direct pour WordPress peut offrir quelque chose de spécial à vos utilisateurs :

• Vous pouvez fournir aux utilisateurs un moyen de « répondre en libre-service » à leurs besoins. Ils disposeront d'un moyen rapide d'effectuer une recherche sur l'ensemble de votre site et de trouver la bonne page.
• Les éléments interactifs peuvent fournir une meilleure connexion entre votre site et les utilisateurs. En effet, vous pouvez fournir des résultats de recherche pertinents plus rapidement et sans avoir besoin de cliquer sur des boutons supplémentaires.
• Vous pouvez également réduire au minimum les temps de chargement des pages, car la recherche AJAX en direct n'a pas besoin de faire d'autres requêtes HTTP ou de charger d'autres pages.

Pourquoi une solution de codage manuel pour la recherche en direct n'est peut-être pas la meilleure

Étant donné qu'AJAX utilise JavaScript, vous pourriez envisager de "rouler votre propre solution" en utilisant le langage de programmation.

C'est une bonne idée en théorie, mais ce ne sera pas la meilleure méthode pour ajouter une recherche AJAX en direct à WordPress. Voici pourquoi:

• Tout d'abord, vous ne pouvez créer qu'une solution à la hauteur de vos compétences. Si vous n'avez pas de connaissances JavaScript de niveau expert, cela apparaîtra dans les résultats.
• De plus, vous devrez également connaître la structure des fichiers, la structure des modèles de WordPress et bien plus encore. Il y a beaucoup de rouages ​​qui composent la roue de WordPress.
• Même si vous avez les compétences nécessaires pour coder une solution de recherche en direct, vous aurez également besoin de temps et d'argent pour la développer et la mettre en œuvre. Cela peut être difficile à trouver, surtout si le développement n'est pas votre emploi principal.
• Si vous avez besoin de dépanner votre solution manuelle, cela peut consommer davantage de temps, d'argent et de ressources. Vous pourriez mordre plus que vous ne pouvez mâcher.

Au lieu de cela, il existe un meilleur moyen d'implémenter la bonne fonctionnalité dans WordPress : les plugins. Voyons comment cela fonctionne ensuite.

Utilisez plutôt un plugin WordPress de recherche AJAX

Pour la plupart des gens, l'utilisation d'un plugin WordPress de recherche AJAX est une bien meilleure option.

Bien qu'il existe de nombreux plugins WordPress de recherche AJAX parmi lesquels choisir, tous ne sont pas créés égaux. Par exemple, certains plugins sont limités en ce qui concerne les options de style ou le contrôle du contenu à rechercher.

Pour cette raison, nous allons utiliser le plugin Otter Blocks pour ce tutoriel.

Comme son nom l'indique, Otter Blocks est une collection d'éléments pour l'éditeur de blocs WordPress natif.

En termes de fonctionnalité de recherche AJAX, la fonctionnalité la plus pertinente est le bloc de recherche.

Il vous permet de choisir les types de publication dans lesquels rechercher et de personnaliser entièrement la conception de votre champ de recherche. Vous pouvez l'ajouter à n'importe quelle partie de votre site, y compris les publications, les pages, les barres latérales, etc.

Au-delà de la fonctionnalité WordPress de recherche AJAX, Otter Blocks vous offre quelques moyens supplémentaires pour pimenter vos mises en page et votre conception :

• Vous pouvez ajouter des en-têtes avec un niveau de personnalisation supérieur à celui que vous obtiendrez par défaut.
• Il est possible de créer une section réactive qui inclut une personnalisation avancée et de l'espace pour six colonnes.
• Vous pourrez ajouter des animations époustouflantes telles que des effets Lottie et des cartes à retourner.
• Si vous vendez des produits via votre site, Otter Blocks inclut des tableaux de prix, la possibilité d'implémenter des boutons "ajouter au panier", des heures d'ouverture et bien plus encore.

En fait, Otter Blocks fournit des fonctionnalités supplémentaires pour tous les blocs proposés, même les blocs natifs. Par exemple, vous pouvez définir des conditions de visibilité, des CSS personnalisés, etc. à partir de l'interface typique de l'éditeur de blocs.

Comment utiliser Otter Blocks pour ajouter une recherche AJAX en direct à WordPress

Vous n'aurez besoin que de quelques étapes pour configurer Otter Blocks afin d'ajouter la recherche AJAX en direct à WordPress. Commençons par le processus d'installation :

1. Installer et activer les blocs Otter
2. Activer la recherche AJAX en direct pour WordPress dans les paramètres d'Otter Blocks
3. Ajustez les paramètres pour affiner l'expérience de recherche sur le front-end de votre site

1. Installez et activez Otter Blocks

Tout d'abord, vous devrez installer Otter Blocks et l'activer pour votre site Web. Il existe de nombreuses façons de le faire, mais nous répéterions ce qui est déjà dans notre autre article sur le blog ThemeIsle.

Cela vous montrera comment installer les versions gratuite et premium d'Otter Blocks. Cependant, pour cet article, vous aurez besoin de la version premium, car elle vous offre une fonctionnalité de recherche en direct.

2. Activez la recherche AJAX en direct pour WordPress dans les paramètres d'Otter Blocks

Une fois que vous avez installé le plug-in, utilisez l'outil d'insertion de blocs pour ajouter le bloc de recherche d'Otter Blocks.

Après cela, il ajoutera un champ de formulaire et un bouton à votre mise en page.

Cela implémente la fonctionnalité de recherche de base, mais ce n'est pas une recherche AJAX en direct dans WordPress.

Dans sa configuration par défaut, il agira comme la recherche WordPress typique.

Pour activer la fonctionnalité WordPress de recherche AJAX, activez le bouton Activer la recherche en direct dans la barre latérale droite :

3. Ajustez les paramètres pour affiner l'expérience de recherche sur le front-end de votre site

Une fois que vous disposez de la fonctionnalité de recherche en direct sur votre site, vous pouvez l'affiner de plusieurs façons.

Bien sûr, il existe un certain nombre d'options cosmétiques et UX.

Par exemple, vous pouvez modifier la position du bouton, que vous utilisiez une étiquette pour la zone de recherche, et modifier les couleurs, les animations et les bordures de la section de recherche :

À partir de là, vous pouvez également donner à la recherche ses limites d'où chercher sur votre site en choisissant les types de publication dans lesquels rechercher.

Pour cela, vous utiliserez la zone Rechercher dans dans la barre latérale droite :

Cela vous permet d'ajouter des "entités" pour l'endroit où vous souhaitez que la recherche s'effectue.

Par exemple, vous pouvez choisir de rechercher uniquement dans le contenu de votre publication ou parmi les produits de votre boutique.

Si vous laissez ce champ vide, Otter Blocks recherchera tout le contenu de votre site.

Configurez la fonctionnalité WordPress de recherche AJAX dès aujourd'hui

Cependant, WordPress ne propose pas cela par défaut. Au lieu de cela, vous pouvez utiliser Otter Blocks pour l'ajouter à votre site. Il n'y a pas de code impliqué et vous obtenez bien plus de fonctionnalités qu'une simple recherche AJAX en direct.

Bien qu'Otter Blocks soit un plugin gratuit, la version premium offre la possibilité de configurer une recherche AJAX en direct dans WordPress, entre autres options.

Avez-vous encore des questions sur la configuration de la recherche en direct AJAX sur WordPress ? Demandez-nous dans les commentaires ci-dessous!