Comment ajouter une barre de recherche à un site WordPress

La barre de recherche est un élément essentiel d'un site Web avec lequel personne ne serait en désaccord. En effet, un site Web contient de nombreuses informations via la page d'accueil, les pages de produits, les pages de blog, la page de tarification, etc. C'est pourquoi il est crucial que vous ajoutiez une barre de recherche à votre site WordPress.

Si vous avez besoin d'éléments d'information existant sur différentes pages, comment allez-vous les trouver ? Allez-vous les trouver en train de visiter ces pages individuellement ? Vous n'aimeriez sûrement pas le faire. Non pas que vous ne trouverez pas vos informations requises de cette façon. Mais c'est aussi chronophage et écœurant. C'est là que l'ajout d'une barre de recherche à votre site entrera en jeu.

Pourquoi ajouter une barre de recherche sur 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 requises. En conséquence, ils quitteront votre site et tout votre objectif de les faire entrer sur le site Web sera vain.

Permettez-moi de vous présenter ci-dessous certains des principaux avantages que vous pouvez ajouter en ajoutant une barre de recherche sur votre site.

• 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 réduisant l'effort

Ajout d'une barre de recherche au menu avec le widget de recherche par défaut de WordPress :

Pouvez-vous ajouter une barre de recherche dans le menu avec le widget de recherche par défaut de WordPress ? Non, vous ne pouvez 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 dans le menu, vous devez utiliser d'autres plugins ou widgets dans différentes zones de votre site Web, y compris l'en-tête et le pied de page.

C'est pourquoi je vous guiderais à travers 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 WordPress par défaut.

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 sur votre site Web consiste à utiliser votre tableau de bord WordPress. Comment faire ça? Regardons ça-

Accédez aux widgets à partir du tableau de bord :

Au départ, 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

Ajoutez le widget de recherche à partir des 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 le 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.

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.

Afficher la barre de recherche dans 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 s'affiche dans la barre latérale principale.

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

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

Sans plus tarder, vérifions-le-

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 publications ou des pages. Ici, je vais montrer comment le widget ElementsKit fonctionne avec un message nommé "Hello World!"

Allez dans "Messages", puis sélectionnez "Tous les messages" pour que tous vos messages s'affichent. À partir de là, vous pouvez choisir le message auquel 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 > Messages > Tous les messages > Votre message

Passez à la fenêtre Elementor :

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

Faites glisser 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 retrouvé le widget, faites-le glisser et déposez-le dans la zone désignée pour faire apparaître la barre de recherche. 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.

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 Recherche d'en-tête dans laquelle vous placez un texte d'espace réservé, sélectionnez une icône de recherche et ajustez la taille de la police.

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.

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.

Enfin, vous êtes prêt à partir !

Une fois que vous avez finalisé vos paramètres, vous êtes prêt à vérifier et à afficher la barre de recherche sur le front-end 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.

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 dans votre site et c'est en utilisant le code CSS. Bien que vous ayez besoin d'un peu de connaissances techniques pour le faire, ce n'est pas sorcier. Je vais vous montrer le processus ici et ce sera super facile après ça.

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

Tout d'abord, cliquez sur "Apparence" dans le tableau de bord et 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. À partir de là, ouvrez le fichier header.php ou sidebar.php en fonction de la position où vous souhaitez que la barre de recherche apparaisse.

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.

Afficher 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 sur la barre latérale.

Liquidation:

Ça y est!!! Je vous ai expliqué 3 techniques super simples pour ajouter une barre de recherche à votre site WordPress. Selon vos besoins, vous pouvez opter pour l'un d'entre eux. Cependant, si vous ajoutez une barre de recherche 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 sans fond !!! 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.