Comment ajouter une barre de recherche à un site WordPress

Comment ajouter une barre de recherche dans la bannière du site WordPress

Les propriétaires de sites Web ont souvent du mal à ajouter une barre de recherche à leurs sites WordPress. Certains d’entre eux adoptent des méthodes complexes pour ajouter une barre de recherche à leurs sites Web WP tandis que d’autres ne savent absolument pas quelle méthode adopter.

Ce qui est crucial dans ce cas est de trouver un moyen d’ajouter une barre de recherche à votre site WordPress de manière fluide et sans effort. Si vous en avez assez d’essayer des moyens inefficaces pour injecter une barre de recherche dans votre site Web WordPress, vous êtes tombé sur la bonne solution.

Peu importe que vous ayez récemment créé un site Web WP ou que vous ayez un ancien site Web WP, vous trouverez cet article informatif et instructif.

Barre de recherche - Un moyen rapide et efficace d'obtenir des informations :

Un site Web contient de nombreuses informations via la page d'accueil, les pages de produits, les pages de blog et la page de tarification. Considérez-vous simplement comme un visiteur d’un site Web. Lorsque vous visitez un site Web, vous avez souvent tendance à extraire des données de différentes pages Web.

Dans ce cas, comment allez-vous trouver ces données ? Allez-vous les trouver visitant ces pages individuellement ? Vous n’aimeriez sûrement pas le faire.

Non pas que vous ne trouverez pas les informations dont vous avez besoin de cette manière. Mais cela prend du temps et est également écœurant. C’est là que l’ajout d’une barre de recherche à votre site WordPress entrera en jeu. 

Selon une enquête auprès de Journal des moteurs de recherche, Plus que 40% les visiteurs disent qu'un champ de recherche est la fonctionnalité la plus importante d'un site Web

Pourquoi ajouter une barre de recherche à votre site ?

Supposons que vous n'ayez pas de barre de recherche sur votre site. Dans ce cas, lorsque les visiteurs visiteront votre site, ils auront du mal à trouver les informations dont ils ont besoin. En conséquence, ils quitteront votre site et votre objectif de les intégrer au site Web sera vain.

Permettez-moi de vous présenter certains des principaux avantages vous pouvez progresser en ajoutant une barre de recherche à votre site ci-dessous -

  • Facilite les efforts de vos clients pour trouver des informations
  • Rationalise l'expérience utilisateur
  • Stimule l’engagement 
  • Réduit le taux de rebond
  • Affiche les éléments ou informations nécessaires avec quelques mots-clés

Peux-tu Ajoutez une barre de recherche au menu du site Web avec le widget de recherche par défaut de WordPress : 

Est-il possible d'ajouter une barre de recherche de menu avec le widget de recherche par défaut de WordPress ? Non, tu ne peux pas. Parce que WordPress vous permet d'ajouter une barre de recherche uniquement dans les zones prêtes pour les widgets. 

Si vous souhaitez ajouter une barre de recherche au menu, vous devez utiliser d'autres plugins ou widgets dans différentes zones de votre site Web, y compris le en-tête et pied de page

C'est pourquoi je vais vous présenter 3 méthodes différentes pour ajouter une barre de recherche sur votre site WordPress dans ce tutoriel. 

Voyons maintenant comment vous pouvez ajouter une barre de recherche à votre site Web via le widget par défaut de WordPress.

Ajouter une barre de recherche avec le widget de recherche par défaut de WordPress :

Le moyen le plus simple et le plus pratique d’injecter une barre de recherche dans votre site Web WordPress consiste à utiliser votre tableau de bord WordPress. Comment faire ça? Regardons ça-

Accédez aux widgets depuis le tableau de bord :

Tout d’abord, accédez au tableau de bord de votre panneau d’administration et recherchez Apparence. Naviguez et cliquez sur Widgets dans une liste d’éléments sous Apparence.   

Tableau de bord > Apparence > Widgets

Accédez aux widgets à partir du tableau de bord

Ajoutez le widget de recherche parmi les widgets disponibles :

Cela vous amènera à une nouvelle page apparaissant avec différentes sections de page. Maintenant, appuyez sur le bouton « Ajouter un bloc » (apparaît avec un signe +) pour afficher tous les widgets existants. 

Faites défiler vers le bas pour trouver le widget de recherche ou vous pouvez écrire « Rechercher » dans le champ de recherche pour trouver le widget de recherche.

Cliquez sur la section dans laquelle vous souhaitez que la barre de recherche apparaisse, puis appuyez sur le widget de recherche. Alternativement, vous pouvez également faire glisser et déposer le widget de recherche dans la section souhaitée.

Ajouter le widget de recherche

Apportez les modifications nécessaires :

La barre de recherche apparaîtra maintenant sous la section sélectionnée. Vous pouvez apporter les modifications requises à différents éléments tels que l'alignement de la barre de recherche, la position des boutons, la couleur du texte, etc. 

Vous pouvez également ajouter une étiquette personnalisée à la barre de recherche selon vos besoins. Enfin, cliquez sur le bouton Mettre à jour.

Personnaliser la barre de recherche

Affichez la barre de recherche sur votre page :

Désormais, si vous visitez l'une de vos pages ou publications publiées, vous pouvez remarquer que la barre de recherche ou le champ de recherche apparaît dans la barre latérale principale.

Afficher la barre de recherche sur le front-end

Ajouter une barre de recherche avec le widget de recherche ElementsKit :    

Maintenant, je vais vous guider à travers un autre un moyen simple d'ajouter une barre de recherche WordPress à votre site. Et cela grâce au widget de recherche d'en-tête d'ElementsKit. C'est super simple d'ajouter un champ de recherche via ElementsKit

En fait, ElementsKit est un module complémentaire Elementor. En ce sens, l’ajout d’une barre de recherche avec ElementsKit peut également être appelé barre de recherche Elementor, n’est-ce pas ?

Sans plus tarder, vérifions comment ajouter une barre de recherche avec le widget de recherche ElementsKit

Accédez à l’une de vos publications ou pages existantes à partir du tableau de bord :

Tout d’abord, accédez au tableau de bord et recherchez des articles ou des pages. Ici, je vais montrer comment le widget ElementsKit fonctionne avec un message nommé « Hello World ! » 

Accédez à « Messages », puis sélectionnez « Tous les messages » pour que tous vos messages s'affichent. À partir de là, vous pouvez choisir la publication dans laquelle vous souhaitez ajouter une barre de recherche. Si vous n'avez pas de publication ou de page existante, vous devez ajouter une nouvelle publication ou une nouvelle page.

Tableau de bord > Publications > Toutes les publications > Votre publication

Accédez à l'une des pages existantes

Basculez vers la fenêtre Elementor :

Maintenant, cliquez sur « Modifier avec Elementor » situé en haut au milieu. Cela vous amènera à la fenêtre Elementor.

Passer à la fenêtre Elementor

Glissez et déposez le widget de recherche d'en-tête : 

Dans la fenêtre Elementor, vous aurez accès à des tonnes de widgets. Tapez le widget « Recherche d'en-tête » dans le champ de recherche pour trouver le widget. Alternativement, vous pouvez faire défiler vers le bas et trouver également le widget. 

Une fois que vous avez localisé le widget, faites-le glisser et déposez-le dans la zone désignée pour laisser la barre de recherche apparaître. N'oubliez pas d'ajouter la section au-dessus du texte de votre message car il s'agit d'une barre de recherche d'en-tête.

Faites glisser et déposez le widget de recherche d'en-tête

Définissez les paramètres de la barre de recherche :

Une fois que la barre de recherche apparaît sur la page, il est temps de définir les paramètres de la barre selon vos préférences. Sous l'onglet Contenu, vous aurez une section de recherche d'en-tête dans laquelle vous placerez un texte d'espace réservé, sélectionnerez une icône de recherche et ajusterez la taille de la police. 

Définir les paramètres de la barre de recherche dans l'onglet contenu

Sous l'onglet Style, vous aurez 2 sections : Recherche d'en-tête et Conteneur de recherche. Dans la section Recherche d'en-tête, vous pouvez ajuster les paramètres tels que la couleur d'arrière-plan, le type de bordure, l'ombre du champ de recherche, la marge, etc. de la barre de recherche.

Définissez les paramètres de la barre de recherche sous l'onglet style pour la section de recherche d'en-tête

Dans la section Conteneur de recherche, vous pouvez sélectionner le type d'arrière-plan et définir le texte de l'espace réservé et la couleur de la bordure.

Définissez les paramètres de la barre de recherche sous l'onglet style de la section du conteneur de recherche

Enfin, vous êtes prêt à partir !

Après avoir finalisé vos paramètres, vous êtes prêt à vérifier et afficher la barre de recherche au début de votre message. Si vous n'êtes pas satisfait de l'apparence du champ de recherche, vous êtes libre de le modifier à nouveau depuis le panneau d'administration. 

Afficher la barre de recherche d'en-tête dans votre message

C'est un jeu d'enfant d'ajouter une recherche aux sites WordPress avec ElementsKit, n'est-ce pas ? En plus de cela, vous obtiendrez de nombreux avantages en ajoutant une barre de recherche à votre site WordPress que j'ai répertoriée ci-dessus. Alors, pourquoi ne pas essayer ElementsKit ?

ElementsKit est un module complémentaire tout-en-un pour le constructeur de pages Elementor comprenant de puissants modules, widgets, mégamenu, ainsi que l'en-tête et le pied de page.

Ajouter un champ de recherche avec le code CSS :

Il existe une autre façon que vous pouvez utiliser pour ajouter une barre de recherche à votre site : utiliser le code CSS. Même si cela nécessite un peu de connaissances techniques, ce n’est pas compliqué. Je vais vous montrer le processus ici et ce sera très simple après cela. 

Accédez à l'éditeur de thème :

Tout d’abord, cliquez sur «Apparence" depuis le tableau de bord et accédez au "Éditeur de thème». 

Accédez à l'éditeur de thème

Ouvrez le fichier header.php ou sidebar.php :

Avec cela, vous passerez au fichier style.css par défaut. De là, ouvrez le en-tête.php ou barre latérale.php fichier en fonction de la position où vous souhaitez que la barre de recherche apparaisse.

Ouvrez le fichier header.php ou le fichier sidebar.php

Ajouter une fonction de barre de recherche :

Maintenant, ajoutez cette fonction <?php get_search_form(); ?> dans le code de votre fichier header.php ou sidebar.php. J'ai ajouté la fonction dans le code du fichier header.php. 

Ajouter une fonction de barre de recherche

Affichez la barre de recherche sur votre site :

Enfin, ouvrez l'une de vos pages publiées et vous remarquerez que la barre de recherche apparaît en haut. Si vous avez ajouté la fonction dans le fichier sidebar.php, la barre de recherche apparaîtra dans la barre latérale. 

La barre de recherche apparaît sur la page

Liquidation:

Ça y est ...! Je t'ai accompagné 3 techniques très simples pour ajouter une barre de recherche à votre site WordPress. En fonction de vos besoins, vous pouvez opter pour l’un d’entre eux. Cependant, si vous ajoutez la barre de recherche WordPress avec le widget de recherche d'en-tête d'ElementsKit, vous obtiendrez un avantage supplémentaire.

Qu'est ce que c'est? Options de personnalisation infinies !!! Par conséquent, si vous aimez la personnalisation, utilisez le widget de recherche d'en-tête d'ElementsKit. Avec cela, vous pouvez donner à votre barre de recherche une apparence fascinante. 

ElementsKit Promo GIF

commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *